/* TUOHAI styles 4/4: responsive rules, news tabs, contact band, company profile, capability split, toolbar and product detail module. */

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .cap-item, .cap-item--wide { grid-column: span 12; }
}
@media (max-width: 900px) {
    .split, .split--reverse { grid-template-columns: 1fr; }
    .split--reverse .split-media { order: 0; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .product-grid, .form-grid { grid-template-columns: 1fr; }
    .spec-row { grid-template-columns: 1fr; gap: 4px; }
    .hero-cta .btn { flex: 1 1 auto; }
    .cta-band { flex-direction: column; align-items: flex-start; }

    /* Footer: the three link groups stay side by side instead of stacking into one long column, so
       the footer is far shorter to scroll on a phone. Only the brand block keeps the full width,
       because its intro paragraph needs the room. The contact group is a little wider than the other
       two, which is what keeps an email address on one line at common phone widths. */
    .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px 14px; padding-block: clamp(30px, 8vw, 44px); }
    .footer-col:first-child { grid-column: 1 / -1; }
    .footer-brand { margin-bottom: 14px; }
    .footer-intro { margin-bottom: 0; }
    .footer-title { margin-bottom: 10px; font-size: 11.5px; letter-spacing: 0.05em; }
    .footer-links { gap: 7px; }
    .footer-links a { font-size: 12.5px; line-height: 1.4; }
    .footer-contact { gap: 7px; }
    .footer-contact a { font-size: 12.5px; line-height: 1.4; }
    /* The email address and phone number are wider than a third of a phone screen, so they break
       inside the column instead of widening it. */
    .footer-contact a { overflow-wrap: anywhere; }
    .footer-bottom { gap: 8px; padding-block: 14px; }
}

/* Dark mode auto-switch is intentionally disabled: the site ships with the single light design system. */

/* ---------- News category tabs ---------- */
/* The pills keep their natural width and their label on one line; the bar wraps whole pills onto the
   next row instead of squeezing every label until it breaks inside the pill. */
.filter-link { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; }
.filter-link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.filter-link[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
/* On a phone the row keeps to one line and scrolls sideways: the same swipe-through behaviour as
   the catalog category chips, so every topic stays reachable instead of the bar growing into two
   wrapped rows. */
@media (max-width: 640px) {
    .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .filter-bar::-webkit-scrollbar { display: none; }
}

/* ---------- FAQ groups ---------- */
.faq-group + .faq-group { margin-top: 42px; }
.faq-group-title { margin: 0 0 6px; font-size: 20px; }

/* ---------- Contact band and card ---------- */
.contact-card-title { margin: 0; font-size: 20px; }
.contact-band { display: grid; gap: 24px; grid-template-columns: minmax(240px, 0.8fr) 1.2fr; align-items: start; padding: clamp(24px, 3vw, 36px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.contact-band-items { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .contact-band { grid-template-columns: 1fr; } .contact-band-items { grid-template-columns: 1fr; } }
.cta-band p a { color: #fff; text-decoration: underline; }

/* ---------- Home company profile ---------- */
.company-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.company-photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
/* The photograph keeps the factory picture's own shape (fac1, 1669 × 942), so the new view is shown
   whole instead of being trimmed into the old 4:3 frame; swap the file and only this number moves. */
.company-photo img { width: 100%; aspect-ratio: 1.772; object-fit: cover; }
.company-copy p { color: var(--color-text-secondary); }
@media (max-width: 900px) { .company-grid { grid-template-columns: 1fr; } }

/* ---------- Capability split: OEM & ODM / Technology / Experience ---------- */
.cap-split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; }
/* Each capability picture keeps its own proportions at the column width, so it is shown whole and
   fills the block edge to edge — nothing is trimmed and no empty strip is left around it. */
.cap-media { margin: 0 0 22px; overflow: hidden; border-radius: var(--radius-lg); }
.cap-media img { display: block; width: 100%; height: auto; }
.cap-heading { margin: 0 0 10px; font-size: 22px; }
.cap-copy { margin: 0 0 16px; color: var(--color-text-secondary); }
.cap-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
/* Fabric and factory pictures under the split. Every picture is shown whole at its own proportions,
   so nothing is trimmed and no empty frame is left around a picture. */
.cap-photos { display: grid; gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(30px, 4vw, 54px); }
.cap-photos-row { display: grid; gap: clamp(12px, 1.6vw, 18px); }
/* The three fabric options share one row; they are the same shape, so the row stays even. */
.cap-photos-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The factory pair runs at its own shapes: the wide landscape and the taller portrait get widths
   proportional to those shapes, which brings both to the same height, so the row closes evenly with
   nothing cropped and nothing left blank beside it. */
.cap-photos-row--pair { grid-template-columns: 16fr 9fr; }
.cap-photos figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-light); }
.cap-photos img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
    .cap-photos-row--3, .cap-photos-row--pair { grid-template-columns: minmax(0, 1fr); }
}
.cap-list li { position: relative; margin: 0; padding-left: 20px; color: var(--color-text-secondary); font-size: 15px; }
.cap-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.cap-block + .cap-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--color-border); }
.cap-block-media { margin: 18px 0 0; overflow: hidden; border-radius: var(--radius-md); }
.cap-block-media img { display: block; width: 100%; height: auto; }
.cap-flow { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: capflow; }
.cap-flow li { display: flex; gap: 10px; margin: 0; color: var(--color-text-secondary); font-size: 15px; }
.cap-flow li::before {
    counter-increment: capflow; content: counter(capflow);
    flex: none; width: 22px; height: 22px; margin-top: 2px;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
    font-size: 12px; font-weight: 600;
}
@media (max-width: 900px) { .cap-split { grid-template-columns: 1fr; } }
.sample-row { margin: 18px 0 0; }

/* ---------- Core competencies (home): three stacked blocks, each with its own picture row ---------- */
.comp-stack { display: grid; gap: clamp(34px, 4.5vw, 60px); }
.comp-copy { max-width: 760px; margin: 0 0 10px; color: var(--color-text-secondary); }
.comp-gallery { display: grid; gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(16px, 2.2vw, 24px); align-items: start; }
.comp-gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-light); }
.comp-gallery img { display: block; width: 100%; height: auto; }
/* The caption sits above its picture inside the same card, so the wording follows the label list
   for the page language. It is centred like the section heading above it, so the row reads as one
   block instead of three left-aligned labels. */
.comp-gallery figcaption { padding: 14px 16px 13px; color: var(--color-text); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; }
/* The columns follow each picture's own proportions, so the pictures in one row share a height:
   nothing is cropped and no empty strip is left beside a picture. The custom row holds pictures of
   1.368, 1.429 and 1.234 proportions, so the columns keep those same proportions — swap a picture
   for one with a different shape and only this line needs to follow it. */
.comp-gallery--custom { grid-template-columns: 1.109fr 1.158fr 1fr; align-items: stretch; }
/* A caption that wraps to a second line in one language must not push that picture out of line, so
   each card is a column and its picture is pinned to the bottom: the three pictures stay level and
   the extra caption line stays on top. */
.comp-gallery--custom figure { display: flex; flex-direction: column; }
.comp-gallery--custom img { margin-top: auto; }
.comp-gallery--tech { grid-template-columns: 1fr 1.33fr; }
/* Project experience: the first view runs across the whole block and the other two split the row
   beneath it, their widths following their own shapes so the pair closes at one height. Every picture
   keeps its proportions — nothing cropped, nothing left blank beside it. Packing all three into one
   row is what kept them small: the block only has so much width, so three across left every picture
   short and the square one far smaller than the rest. The column line below is the pair's own
   1.935 : 0.982 shapes; swap a picture for one of a different shape and only that line needs to
   follow it. */
.comp-gallery--exp { grid-template-columns: 1.9714fr 1fr; }
.comp-gallery--exp figure:nth-child(1) { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .comp-gallery--custom, .comp-gallery--tech { grid-template-columns: minmax(0, 1fr); }
}
/* On a narrow screen the pair can no longer stand side by side, so every picture takes its own line.
   The square one, which is the last, would then run very tall at the full width of a phone, so it is
   held to a size closer to the other two and centred under them. */
@media (max-width: 820px) {
    .comp-gallery--exp { grid-template-columns: minmax(0, 1fr); }
    .comp-gallery--exp figure:nth-child(1) { grid-column: auto; }
    .comp-gallery--exp figure:last-child { justify-self: center; width: min(100%, 420px); }
}
/* The Technology block sets a process out per product. Each group is a name, the numbered steps (the
   same .cap-flow list the About page uses, so both read alike) and whatever note follows it. Keeping
   the group self-contained is what lets one be rewritten or reordered on its own. The steps are short
   lines, so the groups run two to a line wherever the width allows: the process then fills the block
   instead of running down one narrow column and leaving the right half of the row empty. Below that
   width they fall back to a single column. */
.tech-groups { display: grid; gap: clamp(24px, 3.2vw, 34px); }
@media (min-width: 820px) {
    .tech-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.5vw, 72px); align-items: start; }
}
.tech-name { margin: 0; font-size: 17px; }
/* A step whose explanation sits on the line below the step rather than beside its number. */
.tech-step-body { display: grid; gap: 3px; }
.tech-sub { color: var(--color-text-secondary); font-size: 14px; opacity: 0.85; }
.tech-note { margin: 12px 0 0; color: var(--color-text-secondary); font-size: 15px; }
.tech-note + .tech-note { margin-top: 6px; }
.tech-note strong { color: var(--color-text); font-weight: 600; }

/* ---------- About fact sheet ---------- */
.fact-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.fact-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.fact-title { margin: 0; font-size: 18px; }
.fact-text { margin: 0; color: var(--color-text-secondary); font-size: 15px; }
.fact-item .link-arrow { margin-top: auto; }
@media (max-width: 980px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fact-grid { grid-template-columns: 1fr; } }

/* ---------- Catalog toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.toolbar-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.toolbar-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar-search { width: 230px; }
.toolbar-sort { width: auto; min-width: 170px; }
.toolbar-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--color-text-secondary); font-size: 14.5px; }
@media (max-width: 640px) { .toolbar-search, .toolbar-sort { width: 100%; } }

/* ---------- Product summary ---------- */
.summary { display: grid; gap: 18px; align-content: start; }
.summary-title { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.summary-text { margin: 0; color: var(--color-text-secondary); }
.summary-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.summary-points li { position: relative; padding-left: 22px; color: var(--color-text-secondary); font-size: 15px; }
.summary-points li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.summary-actions { display: grid; gap: 10px; }

.text-secondary { color: var(--color-text-secondary); }

/* ---------- Product detail: layout, gallery and summary ---------- */
.detail-grid { display: grid; gap: clamp(24px, 3.4vw, 48px); grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; }
.detail-media { min-width: 0; }
.detail-aside { display: grid; gap: 24px; min-width: 0; }
.pdp-gallery { display: grid; gap: 14px; }
/* The main frame keeps one fixed 5:4 shape whatever picture it holds, so switching thumbnails never
   changes its height and the row of thumbnails underneath stays exactly where it is. The whole
   picture is shown inside that shape — scaled down to fit, never trimmed — so a picture wider than
   the frame simply rests in it, with a little of the page's own background above and below. Three of
   the product's five pictures are 1.24-1.25 wide, which is the frame's own shape, so they fill it
   completely. */
.pdp-main { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: none; }
.pdp-main-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pdp-main img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; }
/* Thumbnails sit centred under the main picture and keep their size whatever the count, so three
   images read as centred and four as a symmetric pair either side of the centre line. */
.pdp-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pdp-thumbs li { margin: 0; }
.pdp-thumb { display: block; width: clamp(68px, 6.6vw, 92px); padding: 0; border: 0; background: none; cursor: pointer; }
.pdp-thumb-frame { display: block; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-md); }
.pdp-thumb-frame img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pdp-thumb:hover .pdp-thumb-frame { border-color: var(--color-border); }
.pdp-thumb[aria-pressed="true"] .pdp-thumb-frame { border-color: var(--color-primary); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 18px; }
.lightbox-backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
.lightbox-panel { position: relative; z-index: 1; width: min(1040px, 100%); max-height: 88vh; overflow: auto; padding: 16px; border-radius: var(--radius-lg); background: var(--color-surface); }
.lightbox-panel img { width: 100%; height: auto; border-radius: var(--radius-md); }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.lightbox-title { margin: 0; font-size: 15px; font-weight: 600; }
.lightbox-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Picture-only lightbox (product gallery): no heading bar, the close control floats over the
   picture. The complete file is shown at once — scaled down to fit the window, so nothing is cut
   and no scrolling is needed however tall or wide the picture is. The room kept above and below
   also keeps the close control clear of the picture. The certificate lightbox keeps the framed
   panel with its heading. */
.lightbox--plain .lightbox-panel { width: min(1280px, 100%); max-height: none; overflow: visible; padding: 0; background: transparent; }
.lightbox--plain .lightbox-panel img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 136px);
    max-height: calc(100dvh - 136px);
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.lightbox-close--float { position: fixed; top: 20px; right: 20px; z-index: 2; width: 42px; height: 42px; border-color: transparent; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm); }
.lightbox-close--float:hover { border-color: transparent; background: #fff; color: var(--color-primary); }

/* Product summary blocks */
.summary-head { display: grid; gap: 8px; }
.summary-body { display: grid; gap: 20px; }

/* Specifications groups */
.spec-groups { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.spec-group { display: grid; gap: 12px; }
.spec-group-title { margin: 0; font-size: 17px; }

/* ---------- Product details: rich-text field ---------- */
/* The heading above the block is fixed. The body is one rich-text field rendered as HTML, so the
   styles below cover whatever an editor can produce: headings, paragraphs, lists, tables, pictures
   and quotes. The field runs the full container width, and a table without a header row is treated
   as a side-by-side block, so text and a picture can sit left and right. */
.pd-rich > *:first-child { margin-top: 0; }
.pd-rich > *:last-child { margin-bottom: 0; }
.pd-rich h2 { margin: 34px 0 12px; font-size: clamp(21px, 2.2vw, 25px); }
.pd-rich h3 { margin: 30px 0 10px; font-size: 19px; }
.pd-rich h4 { margin: 24px 0 8px; font-size: 17px; }
.pd-rich p { margin: 0 0 14px; color: var(--color-text-secondary); }
.pd-rich ul, .pd-rich ol { margin: 0 0 16px; padding-left: 22px; color: var(--color-text-secondary); }
.pd-rich li { margin-bottom: 6px; }
.pd-rich li::marker { color: var(--color-primary); }
.pd-rich a { font-weight: 600; }
.pd-rich strong { color: var(--color-text); }
.pd-rich blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); }
/* A picture keeps the size it was given in the editor (the width and height on its own tag) instead
   of being stretched across the column, and it never runs past the column either: a picture narrower
   than the column keeps that size, and a wider one is capped at the column width. */
.pd-rich img { display: block; max-width: 100%; height: auto; margin: 4px 0 18px; border-radius: var(--radius-lg); }
.pd-rich figure { margin: 0 0 18px; }
.pd-rich figcaption { padding-top: 8px; color: var(--color-text-secondary); font-size: 13.5px; }
/* Data table (it has a header row): bordered, with a tinted header. */
.pd-rich table:has(thead) { width: 100%; margin: 0 0 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); border-collapse: collapse; overflow: hidden; }
.pd-rich table:has(thead) th, .pd-rich table:has(thead) td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.pd-rich table:has(thead) thead th { background: var(--color-primary-light); color: var(--color-text-secondary); font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pd-rich table:has(thead) tbody th { width: 200px; font-weight: 600; }
.pd-rich table:has(thead) td { color: var(--color-text-secondary); }
.pd-rich table:has(thead) tbody tr:last-child th, .pd-rich table:has(thead) tbody tr:last-child td { border-bottom: 0; }

/* Side-by-side block (a table with no header row): borderless, its two cells split the row, so the
   left and right halves of the block both carry content. Stacks on narrow screens. */
.pd-rich table:not(:has(thead)) { width: 100%; margin: 0 0 24px; border-collapse: collapse; }
.pd-rich table:not(:has(thead)) td { width: 50%; padding: 0; border: 0; vertical-align: middle; color: var(--color-text-secondary); }
.pd-rich table:not(:has(thead)) td + td { padding-left: clamp(20px, 3.4vw, 42px); }
.pd-rich table:not(:has(thead)) img { margin: 0; }
.pd-rich table:not(:has(thead)) > *:last-child, .pd-rich table:not(:has(thead)) p:last-child, .pd-rich table:not(:has(thead)) ul:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
    .pd-rich table:not(:has(thead)) td { display: block; width: auto; }
    .pd-rich table:not(:has(thead)) td + td { padding: 18px 0 0; }
}

@media (max-width: 640px) {
    .pd-rich h2 { margin-top: 28px; }
    .pd-rich h3 { margin-top: 24px; }
    .pd-rich table:has(thead) th, .pd-rich table:has(thead) td { padding: 11px 12px; font-size: 14px; }
    .pd-rich table:has(thead) tbody th { width: auto; }
}

/* Mobile inquiry bar */
.pdp-bar { display: none; }
@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; gap: 20px; }
    .detail-aside, .detail-aside .summary { display: contents; }
    .summary-head { order: 1; }
    .detail-media { order: 2; }
    .summary-body { order: 3; }
    .pdp-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 -2px 10px rgba(16, 62, 140, 0.09); }
    .pdp-bar-inner { display: flex; align-items: center; gap: 12px; }
    .pdp-bar-copy { min-width: 0; flex: 1; }
    .pdp-bar-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
    .pdp-bar-model { display: block; color: var(--color-text-secondary); font-size: 12.5px; }
    body.has-pdp-bar { padding-bottom: 86px; }
}
@media (max-width: 900px) { .spec-groups { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pdp-thumbs { gap: 8px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}