/* OEM/ODM v4 (local preview): oem-water-bottles.html and odm-water-bottles.html only. Same tokens, Hanken, square buttons, hairlines. */
.cs2-route-page .cs2-sec.cs2-first{padding-top:12px}
.v4-hero{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:48px;align-items:end}
.v4-hero-copy{padding-bottom:36px}
.v4-hero-copy h1{margin:0;font-size:clamp(34px,3.4vw,52px);line-height:1.06;letter-spacing:-.035em}
.v4-lead{margin-top:18px;font-size:17px;line-height:1.6;color:#414945;max-width:46ch}
.v4-hero-copy .cs2-keyfacts{margin-top:22px}
.v4-hero-copy .cs2-cta{margin-top:24px}
.v4-hero-img{margin:0}
.v4-hero-img img{display:block;width:100%;height:auto;aspect-ratio:1536/1024;object-fit:cover;outline:1px solid var(--cs-line);outline-offset:-1px}
.v4-hero-odm .v4-hero-img img{aspect-ratio:1498/1050}
.v4-hero-img figcaption,.v4-note{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
/* four entries under the first screen */
.v4-strip{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.v4-strip a{display:grid;grid-template-columns:minmax(0,1fr);padding:14px 16px 16px 0;height:100%}
.v4-strip li+li a{padding-left:16px;border-left:1px solid var(--cs-line)}
.v4-strip b{font-size:18px;font-weight:500;letter-spacing:-.015em}
.v4-strip span{font-size:14px;color:var(--muted);margin-top:2px}
@media(hover:hover) and (pointer:fine){.v4-strip a:hover b{color:var(--focus)}}
/* ODM: MOQ row under the four entries (moved out of the hero) */
.v4-terms{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;margin-top:0;padding:14px 0;border-bottom:1px solid var(--cs-line)}
.v4-terms-label{margin:0;font-size:13px;font-weight:600;color:var(--focus);letter-spacing:.02em}
.v4-terms dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 40px}
.v4-terms dl>div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.v4-terms dt{font-size:15px;color:var(--muted)}
.v4-terms dd{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.v4-terms-note{margin:0;font-size:13px;color:var(--muted)}
/* showcase */
.v4-parts{margin-top:var(--cs2-gap)}
.v4-parts-head{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:40px;align-items:end;padding-bottom:20px}
.v4-parts-head h2{margin:0}
.v4-parts-head p{font-size:15px;line-height:1.6;color:#414945}
.v4-parts-head a{text-decoration:underline;text-underline-offset:3px}
.v4-board{border-top:1px solid var(--cs-line)}
.v4-item{border-bottom:1px solid var(--cs-line)}
.v4-item-h{margin:0;font-size:inherit;font-weight:inherit}
.v4-item-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 20px;width:100%;padding:16px 0;cursor:pointer}
.v4-item-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.v4-name{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.v4-sum{grid-column:1;margin-top:3px;font-size:14px;color:var(--muted)}
.v4-detail{display:grid;gap:18px;padding-bottom:22px}
.v4-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;background:#fff;min-width:0;width:100%;max-width:100%}
.v4-fig{margin:0;position:relative;background:#fff;outline:1px solid var(--cs-line);outline-offset:-1px;overflow:hidden;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.v4-fig img{display:block;width:100%;max-width:100%;height:auto}
/* fixed-ratio frames: the box takes its height from its own width; the image is placed inside it, so it can never widen the column */
.v4-fit-c,.v4-fit-straw,.v4-fit-real,.v4-fit-lids{height:auto}
.v4-fit-real,.v4-fit-lids{aspect-ratio:4/3}
.v4-fit-c img,.v4-fit-straw img,.v4-fit-real img,.v4-fit-lids img{position:absolute;inset:0;width:100%;height:100%}
.v4-fit-real img,.v4-fit-lids img{object-fit:contain}
.v4-fig figcaption{position:absolute;left:0;bottom:0;padding:6px 10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.92)}
/* framing of the supplied images (CSS only, files unchanged) */
.v4-fit-c{aspect-ratio:1536/880}.v4-fit-c img{object-fit:cover;object-position:50% 0}
.v4-fit-straw{aspect-ratio:1/1}.v4-fit-straw img{object-fit:cover;object-position:0% 50%}
.v4-fit-e{aspect-ratio:1086/1448;max-height:none}
.v4-fit-e img{height:100%;object-fit:contain}
.v4-points{list-style:none;margin:0;padding:0}
.v4-points li{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--cs-line);font-size:16px;line-height:1.5}
.v4-points li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:2px;background:var(--focus)}
.v4-io{margin:14px 0 0;display:grid;gap:10px}
.v4-io>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px}
.v4-io dt{font-size:13px;font-weight:600;color:var(--muted);padding-top:2px}
.v4-io dd{margin:0;font-size:15px;line-height:1.5}
.v4-note{margin-top:12px}
.v4-stage .v4-sub{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:16px;align-items:center;outline:0;overflow:hidden}
.v4-stage .v4-sub img{outline:1px solid var(--cs-line);outline-offset:-1px}
.v4-stage .v4-sub figcaption{position:static;background:none;padding:0;font-size:13px}
/* JS on: one part open at a time; the names stay visible */
.v4-js .v4-item:not(.is-active) .v4-detail{display:none}
.v4-js .v4-item.is-active .v4-name{color:var(--focus)}
.v4-js .v4-item-btn::after{content:"";grid-column:1/-1;grid-row:1;justify-self:end;align-self:center;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform 160ms var(--ease-out)}
.v4-js .is-active .v4-item-btn::after{transform:rotate(-135deg)}
@media(min-width:960px){
  .v4-board.v4-js{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:40px;border-top:0}
  .v4-js .v4-item,.v4-js .v4-detail{display:contents}
  .v4-js .v4-item:not(.is-active) .v4-detail{display:none}
  .v4-js .v4-item-h{grid-column:2;border-top:1px solid var(--cs-line)}
  .v4-js .v4-item:first-child .v4-item-h{border-top-color:var(--ink);border-top-width:2px}
  .v4-js .v4-text{grid-column:2;padding:0 0 18px}
  .v4-js .v4-stage{grid-column:1;grid-row:1/span 6;align-self:start;position:sticky;top:16px;min-width:0;width:100%;max-width:100%;overflow:hidden;contain:inline-size}
  .v4-js .v4-text,.v4-js .v4-item-h{min-width:0;position:relative;z-index:1;background:#fff}
  .v4-js .v4-item-btn::after{display:none}
  .v4-js .v4-item-btn{border-left:2px solid transparent;padding-left:14px;grid-template-columns:minmax(0,1fr);margin-left:-16px;width:calc(100% + 16px)}
  .v4-js .is-active .v4-item-btn{border-left-color:var(--focus)}
  .v4-js .v4-stage .v4-fit-straw{aspect-ratio:1/1}
  .v4-js .v4-stage .v4-fit-straw img{object-fit:cover;object-position:0% 50%}
  .v4-js .v4-stage .v4-fit-e{aspect-ratio:auto;background:#f6f6f4}
  .v4-js .v4-stage .v4-fit-e img{height:min(680px,58vw);width:100%;max-width:100%;object-fit:contain}
  .v4-js .v4-stage .v4-fit-real img,.v4-js .v4-stage .v4-fit-lids img{object-fit:contain}
}
/* v3 headings moved one level up (H2 sections, H3 items): keep their v3 look */
.cs2-route-page .cs2-start-list h3,.cs2-route-page .cs2-steps h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.cs2-route-page .cs2-steps h3{font-size:18px;display:flex;gap:12px;padding-top:16px}
.cs2-route-page .cs2-steps h3 span{font-size:14px;font-weight:600;color:var(--focus);padding-top:2px}
.cs2-route-page h2.cs2-h3{margin:0}
.cs2-route-page .cs2-start{margin-top:calc(var(--cs2-gap) + 8px)}
@media(max-width:1100px){.cs2-route-page .cs2-steps h3{padding-top:0}}
@media(max-width:959px){
  .v4-hero{grid-template-columns:1fr;gap:20px}
  .v4-hero-copy{padding-bottom:0}
  .v4-parts-head{grid-template-columns:1fr;gap:8px}
  .v4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-strip li:nth-child(3) a{padding-left:0;border-left:0}
  .v4-strip li:nth-child(n+3) a{border-top:1px solid var(--cs-line)}
  .v4-fit-e{aspect-ratio:auto}
  .v4-fit-e img{max-height:640px;width:auto;margin-inline:auto;height:auto}
  .v4-stage .v4-sub figcaption{position:static;background:none}
}
@media(max-width:959px){
  .v4-terms{grid-template-columns:minmax(0,1fr);gap:6px}
  .v4-terms dl{grid-template-columns:minmax(0,1fr);gap:4px}
  .v4-terms dl>div{justify-content:space-between}
}
@media(max-width:600px){
  .v4-terms{padding:12px 0}
  .v4-terms dt{font-size:14px}
  .v4-terms dd{font-size:16px}
  .v4-hero-copy h1{font-size:clamp(28px,7.6vw,34px)}
  .v4-lead{margin-top:10px;font-size:16px;line-height:1.5}
  .v4-hero-copy .cs2-keyfacts{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .v4-hero-copy .cs2-keyfacts>div{padding-block:8px}
  .v4-hero-copy .cs2-keyfacts dt{font-size:13px}
  .v4-hero-copy .cs2-keyfacts dd{font-size:17px}
  .v4-hero-copy .cs2-cta{margin-top:16px}
  .v4-hide-sm{display:none}
  .v4-strip a{padding:10px 10px 12px 0}
  .v4-strip li:nth-child(even) a{padding-left:12px}
  .v4-strip b{font-size:16px}
  .v4-strip span{font-size:13px}
  .v4-name{font-size:20px}
  .v4-io>div{grid-template-columns:1fr;gap:2px}
}
/* ODM-LAYOUT-FAQ-20261030: ODM page only. Every rule is scoped to [data-route="odm"]; OEM keeps the rules above. */
/* 1. Hero: the text group is centred on the image itself; the caption sits in its own row and is not part of the alignment. */
@media(min-width:960px){
  [data-route="odm"] .v4-hero-odm{grid-template-rows:auto auto;row-gap:0;align-items:start}
  [data-route="odm"] .v4-hero-odm .v4-hero-copy{grid-column:1;grid-row:1;align-self:center;padding-bottom:0}
  [data-route="odm"] .v4-hero-odm .v4-hero-img{grid-column:2;grid-row:1/span 2;display:grid;grid-template-rows:subgrid}
}
/* 2. Customization options: left = main image; right = 2x2 part selector, description, then the auxiliary image. */
[data-route="odm"] .v4-aux{margin:0;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:16px;align-items:center;padding-top:16px;border-top:1px solid var(--cs-line);min-width:0}
[data-route="odm"] .v4-aux img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;outline:1px solid var(--cs-line);outline-offset:-1px}
[data-route="odm"] .v4-aux figcaption{display:grid;gap:4px;min-width:0}
[data-route="odm"] .v4-aux figcaption b{font-size:15px;font-weight:600;letter-spacing:-.01em}
[data-route="odm"] .v4-aux figcaption span{font-size:14px;line-height:1.5;color:#414945}
@media(min-width:960px){
  [data-route="odm"] .v4-board.v4-js{grid-template-columns:minmax(0,58fr) 40px minmax(0,21fr) minmax(0,21fr);grid-template-rows:auto auto auto auto;column-gap:0}
  [data-route="odm"] .v4-js .v4-item-h{grid-column:3;border-top:1px solid var(--cs-line)}
  [data-route="odm"] .v4-js .v4-item:nth-child(-n+2) .v4-item-h{grid-row:1;border-top:2px solid var(--ink)}
  [data-route="odm"] .v4-js .v4-item:nth-child(n+3) .v4-item-h{grid-row:2}
  [data-route="odm"] .v4-js .v4-item:nth-child(even) .v4-item-h{grid-column:4}
  [data-route="odm"] .v4-js .v4-item-btn{margin-left:0;width:100%;height:100%;padding:14px 12px 14px 14px;align-content:start}
  [data-route="odm"] .v4-js .v4-text{grid-column:3/5;grid-row:3;padding:16px 0 18px;border-top:1px solid var(--cs-line)}
  [data-route="odm"] .v4-js .v4-aux{grid-column:3/5;grid-row:4;position:relative;z-index:1;background:#fff}
  [data-route="odm"] .v4-js .v4-stage{grid-column:1;grid-row:1/span 4;align-self:stretch;display:flex;flex-direction:column;position:relative;top:auto}
  [data-route="odm"] .v4-js .v4-stage>.v4-fig{flex:1 0 auto}
  [data-route="odm"] .v4-js .v4-stage .v4-fit-e img{height:min(560px,46vw)}
}
@media(max-width:959px){
  [data-route="odm"] .v4-aux{gap:14px;padding-top:14px}
}
/* 3. FAQ: heading, intro and CTA on top; ten questions in two equal columns (one column on small screens). */
[data-route="odm"] .v4-faq-odm{display:block}
[data-route="odm"] .v4-faq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;padding-bottom:20px}
[data-route="odm"] .v4-faq-head p:not(.cs2-cta){margin-top:10px;font-size:15px;line-height:1.6;color:#414945;max-width:62ch}
[data-route="odm"] .v4-faq-head .cs2-cta{margin:0;flex:none}
[data-route="odm"] .v4-faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}
[data-route="odm"] .v4-faq-cols .hub-faq-list{max-width:none;margin:0}
[data-route="odm"] .v4-faq-cols details a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:899px){
  [data-route="odm"] .v4-faq-head{flex-direction:column;align-items:stretch}
  [data-route="odm"] .v4-faq-cols{grid-template-columns:minmax(0,1fr)}
  [data-route="odm"] .v4-faq-cols .hub-faq-list+.hub-faq-list{border-top:0}
}
/* 4. ODM phone: the S7206V product image shows in full; its caption follows the image in normal flow. */
@media(max-width:959px){
  [data-route="odm"] .v4-stage .v4-fit-real{aspect-ratio:auto}
  [data-route="odm"] .v4-stage .v4-fit-real img{position:static;inset:auto;width:100%;max-width:100%;height:auto}
  [data-route="odm"] .v4-stage .v4-fit-real figcaption{position:static;background:none;padding:8px 10px}
}
/* ODM-SELECTOR-AFFORDANCE-20261030: ODM page only, all rules under [data-route="odm"]. The four part buttons read as separate, clickable buttons. */
[data-route="odm"] .v4-pick-help{margin:0;font-size:15px;line-height:1.5;color:#414945}
[data-route="odm"] .v4-board:not(.v4-js) .v4-pick-help{display:none}
[data-route="odm"] .v4-js .v4-item-btn{box-sizing:border-box;grid-template-columns:minmax(0,1fr) 20px;column-gap:12px;align-items:center;min-height:44px;padding:12px 14px;border:1px solid #a9b3ae;background:#f3f6f4;color:var(--ink);cursor:pointer;transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out)}
[data-route="odm"] .v4-js .v4-item-btn::after{display:none}
[data-route="odm"] .v4-js .v4-name{grid-column:1;grid-row:1}
[data-route="odm"] .v4-js .v4-sum{grid-column:1;grid-row:2}
[data-route="odm"] .v4-js .v4-ico{grid-column:2;grid-row:1/span 2;align-self:center;display:grid;place-items:center;width:20px;height:20px}
[data-route="odm"] .v4-js .v4-ico svg{grid-area:1/1;width:18px;height:18px;transition:transform 160ms var(--ease-out)}
[data-route="odm"] .v4-js .v4-ico-more{color:var(--focus)}
[data-route="odm"] .v4-js .v4-ico-on{display:none;stroke-width:2.2}
@media(hover:hover) and (pointer:fine){
  [data-route="odm"] .v4-js .v4-item-btn:hover{border-color:var(--focus);background:#e3ece8}
  [data-route="odm"] .v4-js .v4-item-btn:hover .v4-ico-more{transform:translateY(2px)}
}
[data-route="odm"] .v4-js .v4-item-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[data-route="odm"] .v4-js .v4-item-btn[aria-expanded="true"]{background:var(--focus);border-color:var(--focus);color:#fff}
[data-route="odm"] .v4-js .v4-item-btn[aria-expanded="true"] .v4-name{color:#fff}
[data-route="odm"] .v4-js .v4-item-btn[aria-expanded="true"] .v4-sum{color:#dfe9e5}
[data-route="odm"] .v4-js .v4-item-btn[aria-expanded="true"] .v4-ico-more{display:none}
[data-route="odm"] .v4-js .v4-item-btn[aria-expanded="true"] .v4-ico-on{display:block;color:#fff}
@media(min-width:960px){
  [data-route="odm"] .v4-board.v4-js{grid-template-rows:auto auto auto auto auto}
  [data-route="odm"] .v4-js .v4-pick-help{grid-column:3/5;grid-row:1;padding:12px 0 10px;border-top:2px solid var(--ink)}
  /* the help line is the board's first child, so items are placed by nth-of-type (they are the only divs) */
  [data-route="odm"] .v4-js .v4-item:nth-of-type(n) .v4-item-h{border-top:0;padding:0 4px 8px 0;grid-column:3}
  [data-route="odm"] .v4-js .v4-item:nth-of-type(even) .v4-item-h{grid-column:4;padding:0 0 8px 4px}
  [data-route="odm"] .v4-js .v4-item:nth-of-type(-n+2) .v4-item-h{grid-row:2}
  [data-route="odm"] .v4-js .v4-item:nth-of-type(n+3) .v4-item-h{grid-row:3}
  [data-route="odm"] .v4-js .v4-item-btn{margin-left:0;width:100%;height:100%;padding:12px 14px;border-left-width:1px;align-content:center}
  [data-route="odm"] .v4-js .is-active .v4-item-btn{border-left-color:var(--focus)}
  [data-route="odm"] .v4-js .v4-text{grid-row:4}
  [data-route="odm"] .v4-js .v4-aux{grid-row:5}
  [data-route="odm"] .v4-js .v4-stage{grid-row:1/span 5}
}
@media(max-width:959px){
  [data-route="odm"] .v4-board.v4-js{border-top:0}
  [data-route="odm"] .v4-js .v4-pick-help{padding-bottom:10px}
  [data-route="odm"] .v4-js .v4-item{border-bottom:0;margin-bottom:8px}
  [data-route="odm"] .v4-js .v4-item.is-active .v4-detail{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){
  [data-route="odm"] .v4-js .v4-item-btn,[data-route="odm"] .v4-js .v4-ico svg{transition:none}
  [data-route="odm"] .v4-js .v4-item-btn:hover .v4-ico-more{transform:none}
}
/* OEM-DIFFERENTIATION-20261031: OEM page only. Every rule below is scoped to [data-route="oem"]; ODM and the shared rules above are unchanged. */
[data-route="oem"] .cs2-sec h2{margin:0}
[data-route="oem"] .oem-sec{padding-block:var(--cs2-gap)}
[data-route="oem"] .oem-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:16px 56px;align-items:end;padding-bottom:28px}
[data-route="oem"] .oem-head p{margin:0;font-size:16px;line-height:1.6;color:#414945;max-width:62ch}
[data-route="oem"] .oem-head a,[data-route="oem"] .oem-faq-list a{text-decoration:underline;text-underline-offset:3px}
[data-route="oem"] figure{margin:0}
[data-route="oem"] figure img{display:block;width:100%;height:auto;outline:1px solid var(--cs-line);outline-offset:-1px}
[data-route="oem"] figcaption{padding-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
/* 1. Hero: copy (H1, lead, CTA) is centred on the image box; the 8px caption sits under the image; jump links are a separate full-width row below. */
[data-route="oem"] .oem-hero{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:56px;align-items:center}
[data-route="oem"] .oem-hero-copy{grid-column:1;grid-row:1;align-self:center}
[data-route="oem"] .oem-hero-img figcaption{position:absolute;left:0;right:0;top:100%}
[data-route="oem"] .oem-hero-copy h1{margin:0;font-size:clamp(34px,3.4vw,52px);line-height:1.06;letter-spacing:-.035em}
[data-route="oem"] .oem-lead{margin:18px 0 0;font-size:17px;line-height:1.6;color:#414945;max-width:46ch}
[data-route="oem"] .oem-hero-copy .cs2-cta{margin-top:26px}
[data-route="oem"] .oem-hero-img{grid-column:2;grid-row:1;position:relative}
/* banner crop of the 1312x1199 file: keeps the screen, the drawings and the sample in hand; the notebook at the bottom stays out of frame */
[data-route="oem"] .oem-hero-img img{aspect-ratio:1312/860;object-fit:cover;object-position:50% 0}
[data-route="oem"] .oem-jump{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--cs-line)}
[data-route="oem"] .oem-jump a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:10px 0;border-bottom:1px solid var(--cs-line);font-size:16px;font-weight:500;transition:color 160ms var(--ease-out)}
[data-route="oem"] .oem-jump svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transform:rotate(90deg);transition:transform 180ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){[data-route="oem"] .oem-jump a:hover{color:var(--focus)}[data-route="oem"] .oem-jump a:hover svg{transform:rotate(90deg) translateX(3px)}}
[data-route="oem"] .oem-jump a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 2. Structure: one image + three readable parts; packaging as its own compact row. */
[data-route="oem"] [id]{scroll-margin-top:24px}
[data-route="oem"] .oem-structure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
/* 1536/928: keeps the whole exploded bottle incl. its base (ends at row 928 of 1024); the mock toolbar starts at row 927, so at most 1 source row (<0.5px displayed) can show */
[data-route="oem"] .oem-structure-fig img{aspect-ratio:1536/928;object-fit:cover;object-position:50% 0}
[data-route="oem"] .oem-parts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-parts li{padding:14px 0 16px;border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-parts li:first-child{padding-top:12px}
[data-route="oem"] .oem-parts h3,[data-route="oem"] .oem-pack h3,[data-route="oem"] .oem-start-list h3,[data-route="oem"] .oem-stages h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
[data-route="oem"] .oem-parts p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:#414945}
[data-route="oem"] .oem-pack{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;margin-top:40px;padding-top:28px;border-top:1px solid var(--cs-line)}
[data-route="oem"] .oem-pack-fig img{aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
[data-route="oem"] .oem-pack-copy p{margin:10px 0 0;font-size:16px;line-height:1.6;color:#414945;max-width:62ch}
/* 3. Starting points: three horizontal rows (what you bring | what we review). */
[data-route="oem"] .oem-start-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-start-list li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-start-list dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
[data-route="oem"] .oem-start-list dt{font-size:13px;font-weight:600;color:var(--muted)}
[data-route="oem"] .oem-start-list dd{margin:4px 0 0;font-size:15.5px;line-height:1.55}
/* 4. Development: five stages on one side, tooling photo + T1 timing on the other. */
[data-route="oem"] .oem-dev{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
[data-route="oem"] .oem-stages{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-stages li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:18px 0 20px;border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-stage-n{grid-row:1/span 3;font-size:20px;font-weight:500;line-height:1.25;color:var(--focus)}
[data-route="oem"] .oem-stages p{grid-column:2;margin:6px 0 0;font-size:15.5px;line-height:1.55;color:#414945}
[data-route="oem"] .oem-stages .oem-approve{color:var(--ink)}
[data-route="oem"] .oem-approve b{font-weight:600}
[data-route="oem"] .oem-tool-fig img{aspect-ratio:4/3;object-fit:cover}
[data-route="oem"] .oem-t1{margin:20px 0 0;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.25;padding-top:16px;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-t1-note{margin:10px 0 0;font-size:15px;line-height:1.6;color:#414945}
[data-route="oem"] .oem-dev-side .cs2-cta{margin-top:22px}
/* 5. Manufacturing: two factory photos + checks, one row. */
[data-route="oem"] .oem-make{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
[data-route="oem"] .oem-make img{aspect-ratio:16/10;object-fit:cover}
[data-route="oem"] .oem-checks{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-checks li{padding:11px 0;border-bottom:1px solid var(--cs-line);font-size:15.5px;line-height:1.5}
[data-route="oem"] .oem-make-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
[data-route="oem"] .oem-make-copy .text-link{margin-top:6px}
/* 6. FAQ: one full-width list, native details, SVG plus/minus. */
[data-route="oem"] .oem-faq-list{border-top:2px solid var(--ink);max-width:1080px}
[data-route="oem"] .oem-faq-list details{border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:60px;padding:14px 0;font-size:18px;font-weight:500;line-height:1.4;cursor:pointer;transition:color 160ms var(--ease-out)}
[data-route="oem"] .oem-faq-list summary::-webkit-details-marker{display:none}
[data-route="oem"] .oem-faq-list summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[data-route="oem"] .oem-faq-list summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
[data-route="oem"] .oem-faq-list .oem-v{transition:opacity 160ms var(--ease-out)}
[data-route="oem"] .oem-faq-list details[open] .oem-v{opacity:0}
[data-route="oem"] .oem-faq-list details p{margin:0;padding:0 48px 20px 0;max-width:72ch;font-size:16px;line-height:1.6;color:#414945}
@media(hover:hover) and (pointer:fine){[data-route="oem"] .oem-faq-list summary:hover{color:var(--focus)}}
@media(prefers-reduced-motion:reduce){[data-route="oem"] .oem-jump a,[data-route="oem"] .oem-jump svg,[data-route="oem"] .oem-faq-list summary,[data-route="oem"] .oem-faq-list .oem-v{transition:none}}
@media(max-width:1100px){
  [data-route="oem"] .oem-dev{grid-template-columns:minmax(0,1fr);gap:32px}
  [data-route="oem"] .oem-dev-side{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 32px;align-items:start}
  [data-route="oem"] .oem-dev-side .oem-tool-fig{grid-row:1/span 3}
  [data-route="oem"] .oem-dev-side .oem-t1{margin-top:0}
  [data-route="oem"] .oem-make{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-route="oem"] .oem-make-copy{grid-column:1/-1}
}
@media(max-width:959px){
  [data-route="oem"] .oem-hero{grid-template-columns:minmax(0,1fr);row-gap:24px}
  [data-route="oem"] .oem-hero-img{grid-column:1;grid-row:2}
  [data-route="oem"] .oem-hero-img figcaption{position:static}
  [data-route="oem"] .oem-jump{grid-column:1;margin-top:28px}
  [data-route="oem"] .oem-head{grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:22px}
  [data-route="oem"] .oem-structure{grid-template-columns:minmax(0,1fr);gap:24px}
  [data-route="oem"] .oem-pack{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
  [data-route="oem"] .oem-start-list li{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media(max-width:600px){
  [data-route="oem"] .oem-hero-copy h1{font-size:clamp(28px,7.6vw,34px)}
  [data-route="oem"] .oem-lead{margin-top:12px;font-size:16px;line-height:1.55}
  [data-route="oem"] .oem-hero-copy .cs2-cta{margin-top:18px}
  [data-route="oem"] .oem-jump{grid-template-columns:minmax(0,1fr);margin-top:24px}
  [data-route="oem"] .oem-hero-img img{aspect-ratio:1312/900}
  [data-route="oem"] .oem-pack{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px;padding-top:22px}
  [data-route="oem"] .oem-start-list dl{grid-template-columns:minmax(0,1fr);gap:10px}
  [data-route="oem"] .oem-dev-side{display:block}
  [data-route="oem"] .oem-dev-side .oem-t1{margin-top:18px}
  [data-route="oem"] .oem-stages li{grid-template-columns:32px minmax(0,1fr);column-gap:8px}
  [data-route="oem"] .oem-make{grid-template-columns:minmax(0,1fr);gap:20px}
  [data-route="oem"] .oem-faq-list summary{font-size:17px;gap:16px}
  [data-route="oem"] .oem-faq-list details p{padding-right:0}
  [data-route="oem"] .oem-dev-side .cs2-cta .button{width:100%}
}
/* OEM-PACK-FLOW-20261101: OEM page only, #oem-packaging and #development. Every rule is scoped to [data-route="oem"]; the earlier .oem-pack / .oem-dev rules above are left as they were (their markup is no longer used). */
/* A. Packaging: product + its branded box as one group (left ~55%), copy with three hairline rows (right ~45%). */
[data-route="oem"] .oem-pk{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:56px;align-items:center;margin-top:48px;padding-top:32px;border-top:1px solid var(--cs-line)}
[data-route="oem"] .oem-pk-fig{min-width:0}
[data-route="oem"] .oem-pk-pair{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);column-gap:16px;align-items:end}
/* both files are 1254x1254 on near-white (#fefefe); shown whole (contain), no frame. The mug's content ends 155 source px above its file edge, the box's 181 px, so the mug (smaller, bottom-aligned file) is raised by (155/1254 of its height) minus the box's 181/1254 at 60/40 width, about 9.3% of its own height, for a shared visual base line. */
[data-route="oem"] .oem-pk-pair img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;outline:0;mix-blend-mode:multiply}
[data-route="oem"] .oem-pk-mug{transform:translateY(-10%)}
[data-route="oem"] .oem-pk-fig figcaption{padding-top:4px}
[data-route="oem"] .oem-pk-copy h3{margin:0;font-size:clamp(24px,2.1vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
[data-route="oem"] .oem-pk-lead{margin:12px 0 0;font-size:17px;line-height:1.55;color:#414945;max-width:46ch}
[data-route="oem"] .oem-pk-list{margin:28px 0 0;border-top:2px solid var(--ink)}
[data-route="oem"] .oem-pk-list div{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-pk-list dt{font-size:16px;font-weight:600;line-height:1.45}
[data-route="oem"] .oem-pk-list dd{margin:0;font-size:15.5px;line-height:1.5;color:#414945}
[data-route="oem"] .oem-pk-note{margin:18px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
/* B. Development: one light grey-green panel, five equal columns joined by one hairline through the numbers. */
[data-route="oem"] .oem-flow-head{text-align:center;padding-bottom:24px}
[data-route="oem"] .oem-flow-head h2{text-wrap:balance}
[data-route="oem"] .oem-flow-head p{margin:12px auto 0;font-size:17px;line-height:1.55;color:#414945;max-width:60ch}
[data-route="oem"] .oem-flow-panel{background:#f3f5f3;padding:28px 32px 24px}
[data-route="oem"] .oem-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;position:relative}
[data-route="oem"] .oem-flow::before{content:"";position:absolute;left:0;right:0;top:20px;border-top:1px solid #9fb0a8}
[data-route="oem"] .oem-flow li{display:grid;grid-template-rows:subgrid;grid-row:1/span 4;align-content:start;padding:0 16px;border-left:1px solid #d5ddd8;position:relative}
[data-route="oem"] .oem-flow li:first-child{padding-left:0;border-left:0}
[data-route="oem"] .oem-flow li:last-child{padding-right:0}
[data-route="oem"] .oem-flow-n{justify-self:start;padding-right:12px;background:#f3f5f3;font-size:30px;font-weight:500;line-height:40px;letter-spacing:-.02em;color:var(--focus);font-variant-numeric:tabular-nums;position:relative}
[data-route="oem"] .oem-flow li:not(:first-child) .oem-flow-n{padding-left:0}
[data-route="oem"] .oem-flow h3{margin:14px 0 0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
[data-route="oem"] .oem-flow p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#414945}
[data-route="oem"] .oem-flow .oem-flow-ok{align-self:stretch;margin-top:14px;padding-top:12px;border-top:1px solid #cdd6d1;color:var(--ink)}
[data-route="oem"] .oem-flow-ok b{font-weight:600}
[data-route="oem"] .oem-flow-time{display:flex;align-items:center;justify-content:space-between;gap:20px 48px;padding:16px 0;border-bottom:1px solid var(--cs-line)}
[data-route="oem"] .oem-flow-t1{margin:0;font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
[data-route="oem"] .oem-flow-t1-note{margin:6px 0 0;font-size:15px;line-height:1.55;color:#414945;max-width:70ch}
[data-route="oem"] .oem-flow-time .cs2-cta{margin:0;flex:none}
/* below 1100px: the same five stages as one vertical line, number left, text right */
@media(max-width:1100px){
  [data-route="oem"] .oem-flow{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  [data-route="oem"] .oem-flow::before{left:20px;right:auto;top:20px;bottom:20px;border-top:0;border-left:1px solid #9fb0a8}
  [data-route="oem"] .oem-flow li,[data-route="oem"] .oem-flow li:first-child,[data-route="oem"] .oem-flow li:last-child{grid-row:auto;grid-template-rows:none;grid-template-columns:40px minmax(0,1fr);column-gap:24px;padding:0 0 24px;border-left:0}
  [data-route="oem"] .oem-flow li:last-child{padding-bottom:0}
  [data-route="oem"] .oem-flow-n{grid-row:1/span 3;justify-self:center;padding:0 0 6px;text-align:center;width:40px}
  [data-route="oem"] .oem-flow li>:not(.oem-flow-n){grid-column:2}
  [data-route="oem"] .oem-flow h3{margin-top:8px}
  [data-route="oem"] .oem-flow p{max-width:68ch}
  [data-route="oem"] .oem-flow .oem-flow-ok{align-self:start;margin-top:10px;padding-top:0;border-top:0}
}
/* 601-1100px: still one vertical line; the confirm line takes its own right column so the panel is not half empty */
@media(min-width:601px) and (max-width:1100px){
  [data-route="oem"] .oem-flow li,[data-route="oem"] .oem-flow li:first-child,[data-route="oem"] .oem-flow li:last-child{grid-template-columns:40px minmax(0,1.5fr) minmax(0,1fr);column-gap:24px 32px}
  [data-route="oem"] .oem-flow-n{grid-row:1/span 2}
  [data-route="oem"] .oem-flow h3{grid-column:2}
  [data-route="oem"] .oem-flow li>p:not(.oem-flow-ok){grid-column:2}
  [data-route="oem"] .oem-flow .oem-flow-ok{grid-column:3;grid-row:1/span 2;margin-top:8px;padding-top:0}
}
@media(max-width:959px){
  [data-route="oem"] .oem-pk{grid-template-columns:minmax(0,1fr);gap:28px}
  [data-route="oem"] .oem-pk-fig{max-width:680px}
}
@media(max-width:600px){
  [data-route="oem"] .oem-pk{gap:22px;margin-top:32px;padding-top:24px}
  [data-route="oem"] .oem-pk-pair{column-gap:12px}
  [data-route="oem"] .oem-pk-list div{grid-template-columns:minmax(0,1fr);gap:4px}
  [data-route="oem"] .oem-flow-head{text-align:left;padding-bottom:22px}
  [data-route="oem"] .oem-flow-head p{margin-left:0}
  [data-route="oem"] .oem-flow-panel{padding:24px 18px}
  [data-route="oem"] .oem-flow li,[data-route="oem"] .oem-flow li:first-child,[data-route="oem"] .oem-flow li:last-child{grid-template-columns:32px minmax(0,1fr);column-gap:16px}
  [data-route="oem"] .oem-flow::before{left:16px}
  [data-route="oem"] .oem-flow-n{width:32px;font-size:28px}
  [data-route="oem"] .oem-flow-time{flex-direction:column;align-items:stretch}
  [data-route="oem"] .oem-flow-time .cs2-cta .button{width:100%}
}
/* OEM-ODM-FOUR-FIX-20261101: ODM page only. Every rule is scoped to [data-route="odm"]; earlier rules are unchanged. */
/* A. "View this model" text links on the three real-model captions (S7206V, S120013VH lid, S60010V set). */
[data-route="odm"] .v4-model-link{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:14px;font-weight:600;color:var(--focus);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;transition:color 160ms var(--ease-out)}
[data-route="odm"] .v4-model-link svg{width:15px;height:15px;transition:transform 160ms var(--ease-out)}
[data-route="odm"] .v4-model-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){[data-route="odm"] .v4-model-link:hover{color:var(--ink)}[data-route="odm"] .v4-model-link:hover svg{transform:translateX(3px)}}
[data-route="odm"] .v4-stage .v4-fit-real figcaption .v4-model-link{margin-left:8px}
[data-route="odm"] .v4-aux figcaption .v4-model-link{justify-self:start}
[data-route="odm"] .cs2-set-head .v4-model-link{margin-top:10px}
@media(prefers-reduced-motion:reduce){[data-route="odm"] .v4-model-link,[data-route="odm"] .v4-model-link svg{transition:none}[data-route="odm"] .v4-model-link:hover svg{transform:none}}
/* B. Desktop/tablet (960px+): Bottle body and Lids. The main image frame takes the image's own height (contain, whole bottle),
   and the auxiliary image (Logo / Example lid) moves under it in the left column, so neither column is stretched by the other.
   Straws and Packaging (no auxiliary image) keep their layout. Below 960px nothing changes (stacked, collapsible). */
@media(min-width:960px){
  [data-route="odm"] .v4-js #color .v4-stage,[data-route="odm"] .v4-js #parts .v4-stage{grid-row:1/span 4;align-self:start}
  [data-route="odm"] .v4-js #color .v4-stage>.v4-fig,[data-route="odm"] .v4-js #parts .v4-stage>.v4-fig{flex:0 0 auto}
  [data-route="odm"] .v4-js #color .v4-fit-real{aspect-ratio:auto}
  [data-route="odm"] .v4-js #color .v4-fit-real img{position:static;inset:auto;height:auto;object-fit:contain}
  [data-route="odm"] .v4-js #color .v4-fit-real figcaption{position:static;background:none;padding:8px 10px}
  [data-route="odm"] .v4-js #color .v4-text,[data-route="odm"] .v4-js #parts .v4-text{grid-row:4/span 2}
  [data-route="odm"] .v4-js #color .v4-aux,[data-route="odm"] .v4-js #parts .v4-aux{grid-column:1;grid-row:5;align-self:start;margin-top:16px}
  /* any extra height from the left column goes to the description row, so the 2x2 buttons keep the same height for all four parts */
  [data-route="odm"] .v4-board.v4-js:has(#color.is-active,#parts.is-active){grid-template-rows:auto auto auto 1fr auto}
  /* both button rows share one minimum height, so a name that wraps to two lines (e.g. "Branded packaging") does not make its row taller in any engine */
  [data-route="odm"] .v4-js .v4-item-btn{min-height:112px}
}