/* shop.css — shop.html and product.html only (not linked from index.html, so nothing here can
   affect the homepage). Reuses site.css's tokens, type classes and components (.wrap, .eyebrow,
   .h2, .serif, .grid, .card, .ph, .dot/.ak/.kara/.kelsuu, .pill, .notify-form and friends, the
   footer) wherever they already fit; adds only what the homepage has no equivalent for: a static
   (non-hero) header, a status tag in place of a price, the product-detail layout, and a details
   accordion. Square corners throughout, no gradients, no box-shadow — those live only inside the
   product renders themselves, standing in for photography. */

/* ---- Header, off the hero: static, bordered, the small lockup always shown ------------------- */
.site-header{
  position:static;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-mark{visibility:visible}

/* The homepage never shows both the small lockup and the full nav in one row on a narrow
   screen (the lockup stays hidden there until scrolled). Here the lockup is always on, so this
   page needs its own wrap behaviour to keep "kelsuu" and "Collection" from running together. */
@media (max-width:680px){
  .site-header{flex-wrap:wrap;row-gap:16px;padding-block:20px}
  .site-header nav{width:100%;flex-wrap:wrap;justify-content:space-between;row-gap:12px}
}

/* ---- Breadcrumb -------------------------------------------------------------------------------- */
.breadcrumb{padding-top:40px}
.breadcrumb a{border-bottom:1px solid var(--line)}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--deep);border-color:var(--deep)}

/* ---- Status tag: replaces a price while there isn't one yet ----------------------------------- */
.status-tag{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line);padding:.55em 1em;margin:0;
  font-size:13px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--body);
}
.status-tag::before{content:'';width:6px;height:6px;background:var(--deep);flex:none}
.status-tag--card{margin-top:14px;border-color:var(--line)}

/* ---- Shop page head ----------------------------------------------------------------------------- */
.page-head{padding-top:56px;padding-bottom:16px}
.page-head .eyebrow{color:var(--ink);font-weight:400}
.page-head .status-tag{margin-top:16px}
.lede-copy{margin-top:20px;max-width:46ch}

.shop-grid-wrap{padding-block:48px var(--section)}

/* ---- Shop grid: site.css's own .grid/.card/.ph are reused as-is; these fill the gaps ---------- */
.card a{display:block}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{overflow:hidden}

/* ---- Product detail ------------------------------------------------------------------------------ */
.product-detail{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);
  padding-block:32px var(--section);align-items:start;
}
.product-gallery .ph--pdp{margin-bottom:12px}
.product-thumbs{display:flex;gap:clamp(6px,1.4vw,10px)}
.thumb{flex:1 1 0;min-width:0;max-width:84px;aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--stone);border:1px solid transparent}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb--current{border-color:var(--ink)}
/* Colourway gallery: a horizontal scroll-snap carousel (site.css .gallery-track/.gallery-slide), no
   script. The thumbnails and swatches below are plain anchor links to each slide's id. The active
   thumb/swatch/dot follows the visible slide via each slide's own view-timeline (site.css keyframes);
   this file only wires that timeline to .product-detail and to the swatch/thumb target elements.
   The :has() rule just below is the plain-CSS fallback *and* the correct initial paint before any
   scroll happens: whichever colour's slide is first in the gallery shows as active immediately,
   on every browser, animation-timeline or not. */
.thumb,.swatch-option{cursor:pointer}
.thumb{transition:border-color .2s}
.thumb:hover{border-color:var(--line)}
.thumb:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.swatch-option:focus-visible{outline:2px solid var(--deep);outline-offset:4px}
.swatch-option .dot{transition:box-shadow .2s}
.swatch-option span:last-child{transition:color .2s}
.product-detail:has(.gallery-slide:first-child.gs-ak) .thumb-ak{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-ak) .so-ak .dot{box-shadow:inset 0 0 0 1px rgba(34,32,28,.08),0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-ak) .so-ak span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-boz) .thumb-boz{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-boz) .so-boz .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-boz) .so-boz span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kara) .thumb-kara{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kara) .so-kara .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kara) .so-kara span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kelsuu) .thumb-kelsuu{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kelsuu) .so-kelsuu .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kelsuu) .so-kelsuu span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kyzyl) .thumb-kyzyl{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kyzyl) .so-kyzyl .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-kyzyl) .so-kyzyl span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-sary) .thumb-sary{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-sary) .so-sary .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-sary) .so-sary span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-archa) .thumb-archa{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-archa) .so-archa .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-archa) .so-archa span:last-child{color:var(--ink)}
/* The three mixed sets sit after the colours, so none of them can ever be the first slide — these
   :has() rules exist only for parity with the colours' mechanism above (and in case the gallery's
   order ever changes); the correct initial paint (a colour, never a set) needs no fallback. */
.product-detail:has(.gallery-slide:first-child.gs-set-heavens-and-earth) .thumb-set-heavens-and-earth{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-heavens-and-earth) .so-set-heavens-and-earth .quad{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-heavens-and-earth) .so-set-heavens-and-earth span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-undyed) .thumb-set-undyed{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-undyed) .so-set-undyed .quad{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-undyed) .so-set-undyed span:last-child{color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-hearth) .thumb-set-hearth{border-color:var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-hearth) .so-set-hearth .quad{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.product-detail:has(.gallery-slide:first-child.gs-set-hearth) .so-set-hearth span:last-child{color:var(--ink)}

@supports (animation-timeline: view()){
  .product-detail{timeline-scope:--t-ak,--t-boz,--t-kara,--t-kelsuu,--t-kyzyl,--t-sary,--t-archa,--t-set-heavens-and-earth,--t-set-undyed,--t-set-hearth,--t-scene}
  .thumb-ak{animation:gallery-thumb-active linear both;animation-timeline:--t-ak;animation-range:cover 0% cover 100%}
  .thumb-boz{animation:gallery-thumb-active linear both;animation-timeline:--t-boz;animation-range:cover 0% cover 100%}
  .thumb-kara{animation:gallery-thumb-active linear both;animation-timeline:--t-kara;animation-range:cover 0% cover 100%}
  .thumb-kelsuu{animation:gallery-thumb-active linear both;animation-timeline:--t-kelsuu;animation-range:cover 0% cover 100%}
  .thumb-kyzyl{animation:gallery-thumb-active linear both;animation-timeline:--t-kyzyl;animation-range:cover 0% cover 100%}
  .thumb-sary{animation:gallery-thumb-active linear both;animation-timeline:--t-sary;animation-range:cover 0% cover 100%}
  .thumb-archa{animation:gallery-thumb-active linear both;animation-timeline:--t-archa;animation-range:cover 0% cover 100%}
  .so-ak .dot{animation:gallery-dot-active-ak linear both;animation-timeline:--t-ak;animation-range:cover 0% cover 100%}
  .so-boz .dot{animation:gallery-dot-active linear both;animation-timeline:--t-boz;animation-range:cover 0% cover 100%}
  .so-kara .dot{animation:gallery-dot-active linear both;animation-timeline:--t-kara;animation-range:cover 0% cover 100%}
  .so-kelsuu .dot{animation:gallery-dot-active linear both;animation-timeline:--t-kelsuu;animation-range:cover 0% cover 100%}
  .so-kyzyl .dot{animation:gallery-dot-active linear both;animation-timeline:--t-kyzyl;animation-range:cover 0% cover 100%}
  .so-sary .dot{animation:gallery-dot-active linear both;animation-timeline:--t-sary;animation-range:cover 0% cover 100%}
  .so-archa .dot{animation:gallery-dot-active linear both;animation-timeline:--t-archa;animation-range:cover 0% cover 100%}
  .so-ak span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-ak;animation-range:cover 0% cover 100%}
  .so-boz span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-boz;animation-range:cover 0% cover 100%}
  .so-kara span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-kara;animation-range:cover 0% cover 100%}
  .so-kelsuu span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-kelsuu;animation-range:cover 0% cover 100%}
  .so-kyzyl span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-kyzyl;animation-range:cover 0% cover 100%}
  .so-sary span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-sary;animation-range:cover 0% cover 100%}
  .so-archa span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-archa;animation-range:cover 0% cover 100%}
  .thumb-set-heavens-and-earth{animation:gallery-thumb-active linear both;animation-timeline:--t-set-heavens-and-earth;animation-range:cover 0% cover 100%}
  .thumb-set-undyed{animation:gallery-thumb-active linear both;animation-timeline:--t-set-undyed;animation-range:cover 0% cover 100%}
  .thumb-set-hearth{animation:gallery-thumb-active linear both;animation-timeline:--t-set-hearth;animation-range:cover 0% cover 100%}
  /* The in-use scene (coasters, last slide) has a thumb but no swatch: no colour is active while it shows. */
  .thumb-scene{animation:gallery-thumb-active linear both;animation-timeline:--t-scene;animation-range:cover 0% cover 100%}
  .so-set-heavens-and-earth .quad{animation:gallery-dot-active linear both;animation-timeline:--t-set-heavens-and-earth;animation-range:cover 0% cover 100%}
  .so-set-undyed .quad{animation:gallery-dot-active linear both;animation-timeline:--t-set-undyed;animation-range:cover 0% cover 100%}
  .so-set-hearth .quad{animation:gallery-dot-active linear both;animation-timeline:--t-set-hearth;animation-range:cover 0% cover 100%}
  .so-set-heavens-and-earth span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-set-heavens-and-earth;animation-range:cover 0% cover 100%}
  .so-set-undyed span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-set-undyed;animation-range:cover 0% cover 100%}
  .so-set-hearth span:last-child{animation:gallery-text-active linear both;animation-timeline:--t-set-hearth;animation-range:cover 0% cover 100%}
}

.product-info{position:sticky;top:32px}
.product-info > .eyebrow{display:block;margin-bottom:10px;color:var(--ash)}
.product-info h1{
  font-size:clamp(26px,2.6vw,36px);line-height:1.18;letter-spacing:-.01em;margin-bottom:18px;
}
.product-info > .status-tag{margin-bottom:22px}
.product-info > p.serif{margin-bottom:28px;max-width:46ch}

.option-group{margin-top:28px;margin-bottom:24px}
.option-group .label-row{
  font-size:13px;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);
  margin:0 0 14px;
}
.swatch-row{display:flex;flex-wrap:wrap;gap:16px 20px}
.swatch-option{display:flex;flex-direction:column;align-items:center;gap:8px}
.dot--lg{width:28px;height:28px}
.swatch-option span:last-child{font-size:13px;color:var(--ash)}

/* The mixed sets: a quieter row under the colourway swatches (smaller swatch, smaller label), same
   link-to-slide/active-follows-slide mechanism as the colours above, just keyed to .quad instead of
   .dot. Each quad cell reuses the same colour classes as the dots (.ak/.boz/.kara/… from site.css). */
.set-row{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:20px}
.set-option{display:flex;flex-direction:column;align-items:center;gap:7px}
.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;width:24px;height:24px;background:var(--line)}
.quad-cell{width:100%;height:100%}
.set-option .quad{transition:box-shadow .2s}
.set-option span:last-child{font-size:12px;color:var(--ash);transition:color .2s}

/* ---- Notify block: the homepage's own .notify-form/.notify input/.notify button (scoped to an
   ancestor with class "notify") are reused as-is for the field and button; this just undoes the
   big centred hero treatment of the surrounding .notify section so it reads as a sidebar block. */
.notify-block.notify{
  text-align:left;border-top:1px solid var(--line);padding-top:28px;margin-top:28px;
}
.notify-block h2{font-size:19px;font-weight:400;line-height:1.3;margin:0 0 10px}
.notify-block .lede{margin-top:0;font-size:15px;line-height:1.6;max-width:42ch}
.notify-block .notify-form{margin:22px 0 0;max-width:none}
.notify-block .done{margin-top:0;font-size:16px}

/* ---- Details accordion --------------------------------------------------------------------------- */
.details-block{margin-top:36px}
.details-block details{border-top:1px solid var(--line);padding-block:20px}
.details-block details:last-child{border-bottom:1px solid var(--line)}
.details-block summary{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:16px;line-height:1.3;list-style:none;
}
.details-block summary::-webkit-details-marker{display:none}
.details-block summary::after{content:'+';font:300 20px/1 Jost,sans-serif;color:var(--ash)}
.details-block details[open] summary::after{content:'\2212'}
.details-block .details-body{padding-top:12px;color:var(--body);font-size:15px;line-height:1.7;max-width:48ch}

@media (max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:28px}
  .product-info{position:static}
}