/* V6: reference patterns from Hem (cart), Humanscale (cart + configure, B2B) and Spacestor (quote). Measurements in V6-PATTERNS.md.
   Loaded after styles.css and v5.css; V5 files are untouched. */
:root,:root[data-dir="A"],:root[data-dir="B"],:root[data-dir="C"]{--bg:#fff;--surface:#f2f1ef;--surface-2:#e9e5df;--border:#dedad4;--font-h:"Inter Tight","Noto Sans SC",system-ui,sans-serif;--font-b:"Inter Tight","Noto Sans SC",system-ui,sans-serif;--sec:64px;--sec-lg:96px;--radius:4px;--header:52px}
@media(min-width:768px){:root{--header:64px}}
body{font-size:16px;line-height:1.5;background:#fff}
h2{font-weight:400;letter-spacing:-.01em}
.btn{border-radius:999px;font-weight:500;min-height:48px;padding:10px 22px}
.btn.sm{min-height:40px}
.btn.pill.light{background:#fff;border-color:#fff;color:var(--text)}
.btn.pill.light:hover{background:#ece8e2;border-color:#ece8e2}
.btn.pill.ghost{background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff}
.btn.pill.ghost:hover{background:#fff;color:var(--text)}

/* Utility bar: Hem 52 px brand bar ("Trade professional? Sign up"), Humanscale 35 px segment bar. */
.util{background:var(--primary);color:#fff;text-align:center;font-size:13px;line-height:1.35;padding:8px 16px}
.util u{text-underline-offset:3px}

/* Header: Hem 50 px, menu + search left, wordmark centered, account + bag right. */
.site-head{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--border)}
@media(max-width:999px){
  .site-head .wrap{display:grid;grid-template-columns:44px 44px 1fr 44px 44px;gap:0;height:var(--header)}
  .site-head .head-tools{display:contents}
  .site-head .menu-btn{grid-area:1/1;justify-self:start;margin-left:-10px}
  .site-head .search-btn{grid-area:1/2;justify-self:start}
  .site-head .logo{grid-area:1/3;justify-self:center}
  .site-head .acct-btn{grid-area:1/4;display:inline-flex;justify-self:end}
  .site-head [data-act="cart-open"]{grid-area:1/5;justify-self:end;margin-right:-10px}
  .site-head .langs{grid-column:1/-1}
  .site-head .logo img{height:26px;max-width:none}
  .iconbtn svg{width:21px;height:21px}
}

/* Hero: Hem/Spacestor. One full-bleed 4:5 photo; slogan and two pills on the photo; all in the first 844 px. */
.hero-v6{display:block;position:relative;background:var(--text)}
.hero-v6 .hero-img img{aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;display:block}
.hero-v6 .hero-copy{position:absolute;left:0;right:0;bottom:0;padding:120px 16px 20px;background:linear-gradient(180deg,rgba(18,15,12,0),rgba(18,15,12,.68) 52%);color:#fff}
.hero-v6 .eyebrow{color:rgba(255,255,255,.86);font-size:12px;letter-spacing:.08em;display:block;margin-bottom:10px}
.hero-v6 h1{color:#fff;font-size:34px;line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:0 0 20px;max-width:12em}
.hero-v6 .actions{display:flex;gap:8px;flex-wrap:wrap}
.hero-v6 .actions .btn{flex:1 1 auto;min-height:46px;font-size:15px;padding-inline:18px}

/* Section rhythm: 64 px (Hem); headings light (Humanscale 400). */
.home-v5 .sec-head{margin-bottom:24px;gap:8px}
.home-v5 .sec-head h2{font-size:28px;font-weight:400;line-height:1.15}
.home-v5 .sec-head .link{font-size:15px}

/* Spaces: Humanscale category grid. Grey band, 2 columns, 1 px bordered cells, 1:1 image inset 6 px, label below. */
.home-v5>section:nth-of-type(2){background:var(--surface);padding-block:56px}
.home-v5>section:nth-of-type(2) .sec-head .lead{display:block;font-size:15px;color:var(--text-2);margin-top:4px!important}
.home-v5 .area-grid{gap:2px}
.home-v5 .area-card{aspect-ratio:auto;border-radius:0;border:1px solid var(--border);background:var(--surface);padding:6px 6px 12px}
.home-v5 .area-card::after{content:none}
.home-v5 .area-card img{aspect-ratio:1/1;height:auto}
.home-v5 .area-card h3{position:static;color:var(--text);text-shadow:none;font-size:15px;font-weight:400;line-height:1.3;margin:12px 0 0}

/* Campaign tile: Hem "Discover ... / Shop Min". Product on a seamless backdrop, headline right-aligned, pill. */
.home-v5 .v6-feature{padding-top:8px}
.v6-tile{display:block;position:relative;aspect-ratio:4/5;background:var(--surface-2);overflow:hidden;margin-bottom:56px}
.v6-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:40px 16px 150px}
.v6-tile .t{position:absolute;left:16px;right:16px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
.v6-tile b{font:500 34px/1.04 var(--font-h);letter-spacing:-.02em;color:var(--text);max-width:9em}
.v6-tile .btn{background:var(--text);border-color:var(--text);color:#fff;min-height:46px}

/* Product card: Humanscale rail card. White card, 1 px border, image well, name, ruled price row, full-width pill. */
.pcard{background:#fff;border:1px solid var(--border);padding-bottom:14px}
.pcard>*:not(.im){margin-inline:14px}
.pcard .im{border-radius:0;padding:16px;background:var(--surface)}
.pcard .type{margin-top:14px;font-size:12px}
.pcard h3{font-weight:400;font-size:16px;line-height:1.35}
.pcard .price{font:500 15px/1.3 var(--font-b);border-top:1px solid var(--border);padding-top:10px;margin-top:12px}
.home-v5 .pcard .row{display:flex}
.home-v5 .pcard .act-link.muted{display:none}
.home-v5 .pcard .act-link[data-act="add"]{width:100%;justify-content:center;min-height:40px;border:1px solid var(--text);border-radius:999px;color:var(--text);font-weight:500}
.home-v5 .pgrid.feature .pcard{flex-basis:76%}

/* Trust strip and closing band. */
.home-v5 .cert-strip{background:#fff;border-block:1px solid var(--border)}
.home-v5 .band-dark{background:var(--text)}

/* Footer: Humanscale. Light, one accordion row per group (20 px), arrows; open on desktop. */
.site-foot{background:#fff;color:var(--text);border-top:1px solid var(--border)}
.site-foot .wrap{padding-block:40px 32px}
.foot-top{grid-template-columns:1fr;gap:0}
.foot-brand{padding-bottom:20px}
.foot-brand img{height:30px;width:auto}
.foot-brand p{color:var(--text);font-size:16px;margin-top:12px}
.foot-col{border-bottom:1px solid var(--border)}
.foot-col summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font:400 20px/1.3 var(--font-h);padding:16px 0;cursor:pointer}
.foot-col summary::-webkit-details-marker{display:none}
.foot-col summary::after{content:"\2193";font-size:20px;color:var(--text)}
.foot-col[open] summary::after{content:"\2191"}
.foot-col .fc{padding-bottom:12px}
.site-foot .foot-col a{color:var(--text-2);font-size:15px;padding:7px 0}
.site-foot .foot-col a:hover{color:var(--text)}
@media(min-width:1000px){.foot-top{grid-template-columns:2fr repeat(5,minmax(0,1fr));gap:32px}.foot-col{border:0}.foot-col summary{font:500 13px/1.4 var(--font-b);letter-spacing:.04em;padding:0 0 12px;pointer-events:none}.foot-col summary::after{content:none}}

/* Bottom bars: pills on white. */
.thumbbar,.stickybuy{background:#fff}
.ai-launcher{border-radius:999px}

/* PDP: Hem order + Spacestor CTA pair + trust under the CTA. */
.crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-block:10px;font-size:13px}
.crumbs::-webkit-scrollbar{display:none}
.pdp{gap:0}
.gal-main{border-radius:0;background:var(--surface)}
.gal-slide img{aspect-ratio:1/1;padding:20px}
.gal-slide.cover img{aspect-ratio:1/1;padding:0}
.no-review .gal-slide figcaption{display:none}
.gal-thumbs{gap:6px}
.gal-thumbs button{flex:0 0 48px;border-radius:2px}
.buy h1{font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.01em;margin:16px 0 0}
.buy .price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:8px}
.buy .price-row .price{font:600 22px/1.2 var(--font-h);margin:0}
.buy .price-row .buy-note{font-size:12px;color:var(--text-2);margin:0}
.buy-row{display:flex;gap:8px;margin-top:16px}
.buy-row .qty{border-radius:999px;height:48px;flex:none}
.buy-row .qty button{width:40px;height:46px}
.buy-row{align-items:stretch}.buy-row .buy-actions{flex:1;display:flex;margin:0;gap:8px}.buy-row .buy-actions .btn{margin:0;min-height:48px}
.buy-row .buy-actions .btn{flex:1;background:var(--primary);border-color:var(--primary);color:#fff}
.buy-row .buy-actions .btn:hover{background:#5f4934;border-color:#5f4934}
.buy-row .buy-actions .btn.sec{background:var(--primary);color:#fff}
.v6-trade{width:100%;margin-top:8px;border-color:var(--text);color:var(--text)}
.buy-row:has(.v5-quote:not([hidden]))+.v6-trade{display:none}
.v6-ship{font-size:13px;color:var(--text-2);margin-top:12px;line-height:1.45}
.buy .cert-box{margin:12px 0 0;padding:12px}
.buy .field{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.buy .trade-rule{font-size:13px}
.v6-about{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.v6-about .summary{font-size:15px;margin-top:8px}
.stickybuy{transition:transform .2s ease}
.stickybuy.v6-off{transform:translateY(110%)}
@media(max-width:999px){
  .gal{margin-inline:calc(var(--gut) * -1)}
  .gal-thumbs{padding-inline:var(--gut)}
  body.has-sticky .ai-launcher{bottom:12px;right:16px;width:48px;min-height:48px;padding:8px;justify-content:center}
  body.has-sticky .stickybuy{padding-right:76px}
  .stickybuy .btn{border-radius:999px}
  body.has-sticky:has(.stickybuy.v6-off) .ai-launcher{transform:translateY(160%);opacity:0;pointer-events:none}
  .ai-launcher{transition:transform .2s ease,opacity .2s ease}
}
@media(min-width:700px){.hero-v6 .hero-img img{aspect-ratio:16/9;max-height:760px}.hero-v6 .hero-copy{padding:160px max(var(--gut),calc((100vw - 1320px)/2)) 48px}.hero-v6 h1{font-size:clamp(44px,4.4vw,68px)}.hero-v6 .actions{max-width:520px}.v6-tile{aspect-ratio:16/9}.v6-tile img{padding:40px 40% 40px 32px}.v6-tile .t{left:auto;width:40%;top:50%;bottom:auto;transform:translateY(-50%)}.home-v5 .pgrid.feature .pcard{flex-basis:30%}}
@media(min-width:1000px){.home-v5 .pgrid.feature .pcard{min-width:0}}

/* Agentic layer: visible marker for facts the client has not supplied. Prerendered crawler HTML (.pre) is replaced by the app. */
.needs-fact{background:#fff4d6;color:#5c4200;padding:0 4px;border-radius:3px;font-size:.92em}
.pre{padding-block:24px}.pre table{margin-block:12px}.pre th{text-align:left;padding-right:16px}