/* ═══════════════════════════════════════════════════════════════════════════
   FitGlam — store pages only.

   fg.css is the system: tokens, buttons, fields, .pcard, .size-opt, .swatch,
   .qty, .notice, .skel, chrome. Nothing in here redefines any of that. What
   lives here is the handful of LAYOUTS the system has no opinion about yet —
   the catalogue filter bar, the product page's two columns, the bag, the
   confirmation page and the policy sheet.

   THE ONE RULE THAT SHAPES THIS WHOLE FILE: every FitGlam photograph is a tall
   portrait, AR 0.58–0.73. A portrait dropped into a wide box with
   object-fit:cover crops to a chin-and-shoulder close-up that reads as a broken
   image. So every image box on these pages is sized from a HEIGHT — the way
   index.html's hero is — and never from an aspect-ratio box sitting in a grid
   `auto` column, which has no intrinsic width and collapses to zero.

   Brand isolation: FitGlam tokens only. Nothing here is shared with any other
   brand on this machine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The `hidden` attribute is how every one of these pages turns a block off, and
   it is a display:none of the very lowest specificity — any `display:grid` or
   `display:inline-flex` in this sheet silently outranks it. Caught in testing:
   a hidden shipping table still printed three empty labels, and a hidden "clear
   filters" button was still clickable on the error state. */
[hidden]{ display:none !important }

/* ─── Page head ───────────────────────────────────────────────────────────── */

.page-head{ padding-block:clamp(38px,6vh,64px) clamp(26px,4vh,38px) }
.page-head .eyebrow{ display:block; margin-bottom:16px }
.page-head .lede{ max-width:52ch; margin-top:14px }
.page-title{ font-size:clamp(2.1rem,5vw,3.4rem) }

/* A crumb, not a breadcrumb trail — two levels is all this store has. */
.crumb{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  font-size:10px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--muted); min-height:24px;
}
.crumb a{ border-bottom:1px solid transparent; transition:border-color 0.3s var(--ease), color 0.3s var(--ease) }
.crumb a:hover{ color:var(--gold-on-light); border-bottom-color:currentColor }

/* ─── Catalogue filters ───────────────────────────────────────────────────────
   Every control is a real <select>/<input> with a real <label>. The whole
   catalogue is already in the DOM, so filtering is a class toggle — but the
   result is still announced, because a grid silently losing six cards is
   invisible to anyone not looking at it. */

.filters{
  border-block:1px solid var(--line); padding-block:18px;
  display:grid; gap:18px;
}
.filters-row{ display:flex; flex-wrap:wrap; gap:clamp(12px,2vw,20px); align-items:flex-end }
.filter{ display:block; min-width:148px; flex:0 1 auto }
.filter > span{
  display:block; font-size:10px; font-weight:700; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.filter .select{ padding-block:11px }

/* Native checkbox, sized up to a real target. accent-color keeps it on brand
   without rebuilding a control the OS already draws correctly. */
.check{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  min-height:42px; padding-right:4px;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
}
.check input{ width:20px; height:20px; margin:0; accent-color:var(--ink); cursor:pointer }

.filters-meta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
}
.filters-meta .num{ color:var(--ink) }

.pcard[hidden]{ display:none }

/* ─── Product page ────────────────────────────────────────────────────────────
   The image column is sized off the viewport HEIGHT times the photographs' own
   ratio, so a tall portrait is shown near-uncropped instead of being squeezed
   into an arbitrary column. Same technique as the homepage hero, same reason. */

.pdp{
  --pdp-h:min(calc(100svh - var(--chrome-h) - 72px), 760px);
  display:grid; align-items:start;
  gap:clamp(26px,4vw,60px);
  grid-template-columns:clamp(280px, calc(var(--pdp-h) * 0.68), 50vw) minmax(0,1fr);
  padding-bottom:clamp(40px,6vh,72px);
}
@media (max-width:900px){
  /* Portrait viewport — the photo fills it honestly again, so drop the ratio column. */
  .pdp{ grid-template-columns:minmax(0,1fr); --pdp-h:min(72svh,600px); gap:28px }
}

.pdp-gallery{ position:relative }
.pdp-main{
  position:relative; height:var(--pdp-h); overflow:hidden; background:var(--cream);
}
.pdp-main img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--pos,center 34%);
}
.pdp-main.skel::after{ z-index:2 }

/* Thumbnails at 58×78 — ratio 0.74, which is the photographs' own shape, so a
   thumbnail is a smaller version of the frame rather than a different crop. */
.pdp-thumbs{
  display:flex; gap:8px; margin-top:10px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
.pdp-thumbs::-webkit-scrollbar{ display:none }
.pdp-thumb{
  flex:0 0 auto; position:relative; width:58px; height:78px; padding:0; border:0;
  background:var(--cream); cursor:pointer; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow 0.3s var(--ease);
}
.pdp-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--pos,center 34%);
  opacity:0.66; transition:opacity 0.3s var(--ease);
}
.pdp-thumb:hover img{ opacity:0.9 }
/* Current frame is ring + full opacity — two signals, so it does not rely on
   colour alone on a rail of near-identical photographs. */
.pdp-thumb[aria-current="true"]{ box-shadow:inset 0 0 0 2px var(--ink) }
.pdp-thumb[aria-current="true"] img{ opacity:1 }

.pdp-figcaption{
  margin-top:12px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}

/* ─── Buy panel ───────────────────────────────────────────────────────────── */

.buy{ display:grid; gap:22px; align-content:start }
@media (min-width:901px){
  .buy{ position:sticky; top:calc(var(--topbar-h) + 22px) }
}
.buy-name{ font-size:clamp(1.9rem,3.2vw,2.7rem); margin-bottom:6px }
.buy-sub{ font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted) }
.buy-price{
  font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.buy-price s{ color:var(--faint); font-weight:400; font-size:1.05rem }
.buy-block{ display:grid; gap:11px }
.buy-block > .field-label{ margin-bottom:0 }
.buy-actions{ display:grid; gap:14px }
.buy-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.stock-note{ font-size:12.5px; color:var(--gold-on-light); font-weight:600; letter-spacing:0.04em }

.buy-meta{
  display:grid; gap:9px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.6;
}
.buy-meta a{ color:var(--gold-on-light); text-decoration:underline; text-underline-offset:3px }

/* Disclosure for the size guide. <details> because it is a disclosure, and a
   hand-rolled accordion would only be a worse one. */
.disclose{ border-top:1px solid var(--line) }
.disclose > summary{
  list-style:none; cursor:pointer; padding:17px 0; min-height:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:11px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
}
.disclose > summary::-webkit-details-marker{ display:none }
.disclose > summary::after{
  content:''; width:9px; height:9px; flex:0 0 auto;
  border-right:1.4px solid var(--ink); border-bottom:1.4px solid var(--ink);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform 0.35s var(--ease);
}
.disclose[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.disclose-body{ padding-bottom:22px; font-size:14px; line-height:1.72; color:var(--muted); max-width:62ch }
.disclose-body p + p{ margin-top:12px }

/* ─── Detail blocks under the fold ────────────────────────────────────────── */

.detail-grid{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.detail h3{
  font-size:11px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  margin-bottom:12px; color:var(--ink);
}
.detail p{ font-size:14.5px; line-height:1.75; color:var(--muted); max-width:52ch }
.detail p + p{ margin-top:12px }

/* ─── The bag ─────────────────────────────────────────────────────────────── */

.bag{
  display:grid; gap:clamp(30px,4vw,56px); align-items:start;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  padding-bottom:clamp(40px,6vh,72px);
}
@media (max-width:860px){ .bag{ grid-template-columns:minmax(0,1fr) } }

.bag-line{
  display:grid; grid-template-columns:82px minmax(0,1fr) auto;
  gap:clamp(14px,2vw,22px); align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.bag-line:first-child{ border-top:1px solid var(--line) }
/* 82×110 = 0.75, the photographs' own shape. A square thumb here would crop
   every one of them to a torso. */
.bag-thumb{
  position:relative; width:82px; height:110px; overflow:hidden; background:var(--cream);
}
.bag-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.bag-name{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.24rem; line-height:1.2 }
.bag-name a:hover{ color:var(--gold-on-light) }
.bag-variant{
  margin-top:5px; font-size:10.5px; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--muted);
}
.bag-controls{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px }
.bag-money{ text-align:right; font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; white-space:nowrap }
.bag-unit{ display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:4px }
.bag-line .notice{ grid-column:1 / -1; margin-top:16px }
@media (max-width:560px){
  .bag-line{ grid-template-columns:70px minmax(0,1fr) }
  .bag-thumb{ width:70px; height:94px }
  .bag-money{ grid-column:2; text-align:left; margin-top:12px }
}

.totals{ background:var(--cream); padding:clamp(22px,3vw,28px); display:grid; gap:2px }
.totals-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:8px 0; font-size:13.5px; color:var(--muted);
}
.totals-row b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums }
.totals-row--grand{
  margin-top:10px; padding-top:16px; border-top:1px solid var(--line-strong);
  font-size:15px; color:var(--ink);
}
.totals-row--grand b{ font-size:1.22rem; font-weight:700 }
.totals-note{ margin-top:14px; font-size:12px; line-height:1.6; color:var(--muted) }
.totals .btn{ margin-top:18px }

.discount-row{ display:flex; gap:10px; align-items:stretch }
.discount-row .input{ flex:1 1 auto; min-width:0 }
.discount-row .btn{ flex:0 0 auto; margin-top:0 }

/* ─── Confirmation ────────────────────────────────────────────────────────── */

.order-card{ border:1px solid var(--line); padding:clamp(24px,4vw,40px) }
.order-num{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1;
}
.order-facts{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
}
.order-fact .label{ display:block; margin-bottom:6px }
.order-fact div{ font-size:14px; line-height:1.55 }

.order-item{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.order-item:last-of-type{ border-bottom:0 }
.order-thumb{ position:relative; width:64px; height:86px; overflow:hidden; background:var(--cream) }
.order-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.order-item-money{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600 }

/* Honest waiting state. It says what is happening — it does not say "order
   placed" before the server has said so. */
.pending{ display:flex; align-items:center; gap:16px; font-size:14.5px; color:var(--muted) }
.pending i{
  width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(10,10,10,0.18); border-top-color:var(--gold);
  animation:spin 0.8s linear infinite;
}

.next-steps{ counter-reset:step; display:grid; gap:16px; margin-top:8px }
.next-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start }
.next-step::before{
  counter-increment:step; content:counter(step,lower-roman);
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.2rem;
  color:var(--gold-on-light); line-height:1.4; min-width:1.6em;
}
.next-step p{ font-size:14px; line-height:1.7; color:var(--muted) }
.next-step b{ display:block; color:var(--ink); font-size:11px; font-weight:700;
  letter-spacing:0.24em; text-transform:uppercase; margin-bottom:5px }

/* ─── Policies ────────────────────────────────────────────────────────────── */

.policy{ max-width:70ch; padding-block:clamp(30px,5vh,48px); border-top:1px solid var(--line) }
.policy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:18px }
.policy p, .policy li{ font-size:15px; line-height:1.78; color:var(--muted) }
.policy p + p{ margin-top:14px }
.policy ul{ margin-top:14px; padding-left:20px; display:grid; gap:9px }
.policy a{ color:var(--gold-on-light); text-decoration:underline; text-underline-offset:3px }

.fact-list{ display:grid; gap:0; margin-top:8px }
.fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.fact dt{ font-size:10.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted) }
.fact dd{ font-size:14.5px; text-align:right; font-variant-numeric:tabular-nums }

/* ─── Shared small parts ──────────────────────────────────────────────────── */

/* A horizontal rail of cards. grid-template-columns is explicitly cleared: this
   class is used on elements that also carry .product-grid's four explicit
   columns, and grid-auto-columns only ever sizes IMPLICIT tracks — leaving the
   explicit rule in place put the first card in a squeezed 1fr column while its
   siblings got the implicit 200px ones. Measured at 390px: 92px vs 216px. */
.row-scroll{
  display:grid; grid-template-columns:none;
  grid-auto-flow:column; grid-auto-columns:minmax(200px,74vw);
  gap:clamp(14px,2vw,24px); overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
}
.row-scroll::-webkit-scrollbar{ display:none }
.row-scroll > *{ scroll-snap-align:start }
@media (min-width:760px){ .row-scroll{ grid-auto-columns:1fr; overflow:visible } }

.stack-sm > * + *{ margin-top:10px }
.stack-md > * + *{ margin-top:18px }
.stack-lg > * + *{ margin-top:30px }
.muted{ color:var(--muted) }
.center{ text-align:center }

/* Skeleton card — same shape as the real one, so the grid does not jump when
   the catalogue lands. */
.skel-card .skel-media{ aspect-ratio:3/4 }
.skel-card .skel-line--name{ height:18px; width:68%; margin-top:20px }
.skel-card .skel-line--meta{ height:10px; width:44% }

/* Reduced motion: the pending spinner is the one animation that carries meaning
   here, so it is slowed rather than stopped — a frozen spinner reads as hung. */
@media (prefers-reduced-motion:reduce){
  .pending i{ animation-duration:2.4s !important; animation-iteration-count:infinite !important }
}