/* shop/socks.css — Vapor ski socks: the model PDPs (/shop/vapor-peaks/ etc.,
   stamped by tools/build-sock-pages.mjs) and the /ski-boots/ski-socks/ landing
   page. Layered on global.css + shop.css (+ conforma.css on the PDPs, whose
   proof strip and fit-step list these pages reuse so the two lines read as one
   family). Tokens only: --red, --black, --grey-*, --font-display, --font-body. */

/* ── Buy column ─────────────────────────────────────────────────────────── */
.pdp-socks .product-page { background-color: #fafafa; }
.pdp-socks .product-images { background: #f8f8f8; isolation: isolate; }
.pdp-socks .product-images__hero,
.pdp-socks .product-thumb { mix-blend-mode: darken; background: transparent; }
.pdp-socks .product-buy__name { text-transform: uppercase; }
/* pdp.js writes the live Shopify title here (e.g. "Women's Vapor Peaks") and
   uses it for the product schema name; the H1 above carries the model name. */
.sock-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* visually hidden: the Style label shows the choice */
.sock-lede { font-size: 15px; line-height: 1.55; color: var(--grey-90); margin: 8px 0 16px; max-width: 52ch; }

.sock-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.sock-label .opt-label { margin: 0; }
.sock-label__value { font: 500 13px var(--font-body); color: var(--grey-90); }
.sock-label a { color: var(--red-text); font: 600 13px var(--font-body); text-underline-offset: 3px; }

/* Sock tabs — a slim text row (Peaks · Diamond · Plus · Kids), one page per model. */
.sock-tabs { display: flex; align-items: baseline; gap: 4px 20px; flex-wrap: wrap; margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-300); }
.sock-tab { font: 600 14px/1.2 var(--font-body); color: var(--grey-90); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; margin-bottom: -11px; }
.sock-tab:hover { color: var(--black); }
.sock-tab[aria-current] { color: var(--black); border-bottom-color: var(--red); }
.sock-tabs__compare { margin-left: auto; font: 600 13px var(--font-body); color: var(--red-text); text-underline-offset: 3px; }

/* Single / 3-Pack — a slim segmented switch (Bombas pattern): labels only; the
   price line above carries the savings. The color dots below follow it. */
.sock-priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; }
.sock-priceline .product-buy__price { margin: 0; }
.sock-was { font: 500 15px var(--font-body); color: var(--grey-30); }
.sock-packnote { font: 600 14px var(--font-body); color: var(--red-text); }
.sock-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; background: #ececec; border-radius: 10px; }
.sock-mode__opt { display: grid; place-items: center; min-height: 40px; border-radius: 7px; font: 600 14px var(--font-body); color: var(--grey-90); text-decoration: none; }
.sock-mode__opt:hover { color: var(--black); }
.sock-mode__opt[aria-current] { background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Color dots (Bombas-style): 1–2 colors per sock; a 3-pack shows each pair's color. */
.sock-dots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.sock-dots[hidden] { display: none; }
.sock-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; }
.sock-dot span { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.sock-dot:hover { border-color: var(--grey-300); }
.sock-dot[aria-current] { border-color: var(--black); }
.sock-dot i { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--black); color: #fff; font: 700 11px/18px var(--font-body); font-style: normal; text-align: center; }
/* Size label: a visible "Size chart" link, right-aligned (shop/socks-pdp.js). */
.sock-sizelink { margin-left: auto; font: 600 13px var(--font-body); color: var(--black); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
.pdp-socks .product-trust { flex-wrap: wrap; font-size: 12px; gap: 8px 18px; }
.pdp-socks .product-trust a { color: inherit; text-underline-offset: 3px; }
.pdp-socks .opt-btn { min-height: 44px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
/* One edge for every section: the same 1200px / 24px column as the product
   layout above, so headings, charts and tables all line up on the left. */
.pdp-socks { --sock-w: 1200px; --sock-gap: 96px; }
.pdp-socks .conforma-proof,
.pdp-socks .pdp-block,
.pdp-socks .sk-anat,
.pdp-socks .sock-section,
.pdp-socks .pdp-faq { max-width: var(--sock-w); margin: var(--sock-gap) auto 0; padding: 0 24px; }
.pdp-socks .conforma-proof { width: min(calc(100% - 48px), calc(var(--sock-w) - 48px)); margin-top: 56px; padding: 26px 0; }
.pdp-socks .pdp-block { gap: 64px; }
.pdp-socks .pdp-block__head { max-width: none; }
.sock-section { scroll-margin-top: 140px; }
.sock-section--last { margin-bottom: 0 !important; }
.sock-section__intro { max-width: 60ch; color: var(--grey-90); font-size: 16px; line-height: 1.65; margin: 0 0 28px; }
/* Story band: full-bleed grey that matches the photo backdrop, so the sock
   sits in the band rather than in a boxed image. */
.sock-band { background: #efefef; margin-top: var(--sock-gap); padding: 72px 0; }
.pdp-socks .sock-band .pdp-block { margin-top: 0; }
.sock-band .pdp-block__eyebrow { color: #c40000; }  /* brand red is 4.15:1 on the band; this shade clears AA */
.sock-band .pdp-block__media img { aspect-ratio: auto !important; max-height: 520px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
/* How to wear: copy on the left, the three steps on the right. */
.sock-wear .pdp-block__copy { order: 1; }
.sock-wear .conforma-fit-steps { order: 2; }
.pdp-socks .pdp-faq .pdp-block__head { margin-bottom: 18px; }

/* Which Vapor — comparison chart in the Conforma panel style */
.sock-compare { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border: 1px solid var(--grey-300); background: #fff; }
.sock-compare__col { padding: 22px 20px 24px; display: flex; flex-direction: column; }
.sock-compare__col + .sock-compare__col { border-left: 1px solid var(--grey-300); }
.sock-compare__col::before { content: ''; display: block; width: 32px; height: 4px; background: var(--sock-color, var(--black)); margin-bottom: 14px; }
.sock-compare__col[aria-current]::after { content: 'You are here'; order: -1; align-self: flex-start; font: 700 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); margin-bottom: 6px; }
.sock-compare__col img { width: 120px; max-width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: darken; align-self: center; margin: 4px 0 12px; }
.sock-compare__col h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: 1; margin: 0 0 4px; color: var(--black); }
.sock-compare__for { font-size: 14px; color: var(--grey-90); margin: 0 0 16px; min-height: 2.8em; }
.sock-compare dl { margin: 0 0 18px; font-size: 14px; }
.sock-compare dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-30); margin-top: 12px; }
.sock-compare dd { margin: 2px 0 0; color: var(--black); line-height: 1.45; }
.sock-compare__cta { margin-top: auto; align-self: flex-start; }
.sock-compare .btn { padding: 12px 20px; }

/* Size chart — a real table (the old chart was an image in the description) */
.sock-sizes { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
.sock-sizes caption { text-align: left; font-size: 13px; color: var(--grey-90); padding: 0 0 10px; }
.sock-sizes th, .sock-sizes td { padding: 13px 14px; border-bottom: 1px solid var(--grey-300); text-align: center; }
.sock-sizes thead th { background: var(--black); color: #fff; font: 600 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.sock-sizes tbody th { text-align: left; font-weight: 700; }
.sock-sizes-wrap { overflow-x: auto; }

/* Cross-sell */
.sock-xsell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sock-xsell a { display: block; padding: 22px; border: 1px solid var(--grey-300); background: #fff; color: var(--black); text-decoration: none; }
.sock-xsell a:hover { border-color: var(--black); }
.sock-xsell strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1.05; margin-bottom: 6px; }
.sock-xsell span { font-size: 14px; line-height: 1.5; color: var(--grey-90); }

/* ── 8-zone knit diagram (shared with /ski-boots/ski-socks/) ────────────── */
.sk-anat { max-width: 1160px; margin: 0 auto; padding: 80px 24px 20px; }
.sk-map__b { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #555; margin: 0 0 7px; }
.sk-diag { position: relative; aspect-ratio: 1120/680; margin-top: 26px; }
.sk-diag__sock { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 88%; width: auto; }
.sk-diag__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-diag__label { position: absolute; width: 24.5%; transform: translateY(-50%); }
.sk-diag__label--l { left: 1%; text-align: right; }
.sk-diag__label--r { right: 1%; text-align: left; }
.sk-diag__t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(17px,1.8vw,22px); line-height: 1; margin: 0 0 6px; color: var(--black); }
.sk-diag__s { font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: #555; margin: 0 0 6px; }
.sk-diag__tag { font-family: var(--font-body); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; font-size: 10px; color: #6e6e6e; }
.sk-blend { margin-top: 44px; border-top: 1px solid #e4e4e4; padding-top: 26px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.sk-blend__note { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: #555; max-width: 440px; margin: 0; }
.sk-blend__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.sk-blend__stats span { font-family: var(--font-body); font-size: 13px; color: #555; }
.sk-blend__stats b { font-family: var(--font-display); font-size: 24px; color: var(--black); display: block; }

/* ── Landing page buy grid (/ski-boots/ski-socks/) ──────────────────────── */
.sk-shop { max-width: 1180px; margin: 0 auto; padding: 64px 24px 16px; scroll-margin-top: 110px; }
.sk-shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk-shop__card { display: flex; flex-direction: column; border: 1px solid #e4e4e4; background: #fff; color: var(--black); text-decoration: none; }
.sk-shop__card:hover { border-color: var(--black); }
.sk-shop__card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f8f8f8; mix-blend-mode: darken; }
.sk-shop__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sk-shop__body::before { content: ''; width: 28px; height: 3px; background: var(--sock-color, var(--black)); margin-bottom: 8px; }
.sk-shop__name { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; }
.sk-shop__for { font-size: 14px; line-height: 1.45; color: #555; }
.sk-shop__meta { font-size: 13px; color: #555; margin-top: auto; padding-top: 10px; }
.sk-shop__price { font-weight: 700; color: var(--black); }
.sk-shop__pack { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--red-text); }
.sk-shop__card--peaks { --sock-color: #111; }
.sk-shop__card--diamond { --sock-color: #5b7896; }
.sk-shop__card--plus { --sock-color: #e70000; }
.sk-shop__card--kids { --sock-color: #c4a331; }

@media (max-width: 900px) {
  .sock-band { padding: 48px 0; }
  .sock-band .pdp-block__media img { max-height: 340px; }
  .pdp-socks { --sock-gap: 72px; }
  .sock-compare { grid-template-columns: 1fr; }
  .sock-compare__col + .sock-compare__col { border-left: 0; border-top: 1px solid var(--grey-300); }
  .sock-compare__for { min-height: 0; }
  .sock-xsell { grid-template-columns: 1fr; }
  .sk-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* phones: the connected stage can't fit side labels — sock, then the
     same callouts stacked in zone order (no numbers, nothing to match) */
  .sk-diag { aspect-ratio: auto; }
  .sk-diag__lines { display: none; }
  .sk-diag__sock { position: static; transform: none; height: auto; width: 100%; max-width: 280px; display: block; margin: 0 auto 18px; }
  .sk-diag__label, .sk-diag__label--l, .sk-diag__label--r { position: static; transform: none; width: 100%; text-align: left; padding: 13px 0; border-top: 1px solid #e4e4e4; }
}
@media (max-width: 480px) {
  .sk-shop__name { font-size: 22px; }
}

/* Ski sock guide: the long H1 wraps to three lines at the hero's display size, so
   the fixed-height hero (brand-page.css: 82vh, max 860px) clipped its buttons.
   Let this page's hero grow with its content instead. */
.bp-guide--socks .bp-hero { height: auto; max-height: none; }
.bp-guide--socks .bp-hero__content { padding-top: 64px; padding-bottom: 64px; }