/* ==========================================================================
   product.css — product and category pages
   Extends site.css. Loads after it. Reuses the same tokens throughout, so a
   change to the palette or type scale in site.css carries through here.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.crumb { padding-block: 1.1rem; font: 600 .78rem/1 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-soft); display: flex; flex-wrap: wrap;
  align-items: center; gap: .3rem .55rem; }
.crumb a { color: var(--fg-mute); transition: color var(--dur-fast) var(--ease); }
.crumb a:hover { color: var(--red); }
.crumb span[aria-hidden] { color: var(--line); }

/* ---------- product masthead ---------- */
.pdp { padding-bottom: var(--pad-2); }
.pdp__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* media. 101 of 148 products have exactly 1 image, so the single-image case
   has to look deliberate rather than sparse. */
.pdp__media { display: grid; gap: .6rem; }
.pdp__shot { background: var(--paper-2); border: 1px solid var(--line);
  display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.25rem); }
.pdp__shot img { width: 100%; height: auto; mix-blend-mode: multiply; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: .5rem; }
.pdp__thumb { background: var(--paper-2); border: 1px solid var(--line); padding: .4rem;
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.pdp__thumb[aria-current="true"] { border-color: var(--red); }
.pdp__thumb img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* buy panel */
.pdp__buy { position: sticky; top: calc(var(--nav-h) + 1.25rem); display: grid; gap: 1rem; }
@media (max-width: 899px) { .pdp__buy { position: static; } }
.pdp h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.06; letter-spacing: -.025em;
  margin: 0; text-wrap: balance; }
.pdp__cat { font: 700 .76rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); }
.pdp__price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; }
.pdp__now { font: 500 clamp(1.5rem, 2.6vw, 1.9rem)/1 var(--sans); letter-spacing: -.02em; }
.pdp__was { font-size: 1rem; color: var(--fg-soft); text-decoration: line-through; }
.pdp__save { font: 700 .7rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: .3rem .45rem; }
.pdp__blurb { color: var(--fg-mute); max-width: 52ch; }
.pdp__blurb p { margin: 0 0 .6rem; }
.pdp__blurb p:last-child { margin-bottom: 0; }

.pdp__cta { display: grid; gap: .55rem; }
.pdp__note { font-size: .86rem; color: var(--fg-soft); }

/* Variable products use the exact combinations published by WooCommerce. The
   control stays visually part of the buy panel, not a second card inside it. */
.pdp__variation { display: grid; gap: .75rem; }
.pdp__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pdp__option { display: grid; gap: .38rem; min-width: 0; }
.pdp__option > span { font: 700 .72rem/1 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-soft); }
.pdp__option select { width: 100%; min-height: 46px; padding: .68rem 2.35rem .68rem .78rem;
  border: 1px solid var(--line); border-radius: 0; background: var(--paper);
  color: var(--ink); font: 500 .92rem/1.25 var(--sans); }
.pdp__option select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.pdp__variation .btn:disabled { opacity: .48; cursor: not-allowed; }
.pdp__variation-status { min-height: 1.3em; margin: 0; font-size: .84rem; color: var(--fg-soft); }
.pdp__variation [data-variation-data] { display: none; }
@media (max-width: 520px) { .pdp__options { grid-template-columns: 1fr; } }

/* delivery strip. Adapts: 104 products are downloadable, 39 are physical. */
.pdp__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pdp__fact { display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.pdp__fact b { font: 700 .72rem/1.5 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft); }
.pdp__fact span { color: var(--fg-mute); }

/* stock pill */
.pdp__stock { display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .72rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.pdp__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pdp__stock--in { color: #2C6E49; }
.pdp__stock--out { color: var(--red); }
.pdp__stock--back { color: #8A6100; }

/* ---------- long description ---------- */
.pdp__body { padding-block: var(--pad-2); border-top: 1px solid var(--line); }
.pdp__body .wrap { max-width: 74ch; }
.pdp__body h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.015em; margin: 1.8rem 0 .6rem; }
.pdp__body h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.pdp__body p { margin: 0 0 1rem; color: var(--fg-mute); }
.pdp__body ul, .pdp__body ol { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--fg-mute); }
.pdp__body li { margin-bottom: .35rem; }
.pdp__body img { height: auto; margin: 1.25rem 0; }
.pdp__body a { color: var(--red); border-bottom: 1px solid currentColor; }
.pdp__body iframe { max-width: 100%; margin: 1.25rem 0; }

/* ---------- related ---------- */
.rel { padding-block: var(--pad-2); background: var(--paper-2); }
.rel__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 1.35rem; }
.rel__card { background: var(--paper); padding: 1rem; display: grid; gap: .5rem; align-content: start;
  transition: background var(--dur-fast) var(--ease); }
.rel__card:hover { background: var(--paper-2); }
.rel__card img { width: 100%; height: auto; mix-blend-mode: multiply; }
.rel__n { font-size: .95rem; font-weight: 500; line-height: 1.3; }
.rel__p { font: 500 .88rem/1 var(--sans); color: var(--fg-mute); font-variant-numeric: tabular-nums; }

/* ---------- category archive ----------
   Mirrors Woo's own two modes: a category with children is a subcategory index,
   a leaf category is a product grid. Cards reuse the .rel__card geometry so a
   product reads the same wherever it appears. */
.cat { padding-top: .5rem; }
.cat .sechead { max-width: 46ch; }
.cat__list { padding-block: var(--pad-2); }

.cat__grid { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) {
  .cat__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  /* auto-fill already floors each track at 220px, so minmax(0,·) is not needed here */
}
.cat__card { background: var(--paper); padding: 1.1rem; display: grid; gap: .55rem;
  align-content: start; min-width: 0; transition: background var(--dur-fast) var(--ease); }
.cat__card:hover { background: var(--paper-2); }
/* place-items:center sizes a grid child to its content, so width:100% resolved
   against the content box rather than the cell and the product shots broke out
   of their cards. Flex centring with max-* bounds contains them at any ratio. */
.cat__shot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; }
.cat__shot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply; }
/* Program archives mix portrait covers, landscape screenshots and square art.
   A shared frame makes the cards line up without cropping titles out of the
   source artwork. This applies to both Train and Online Courses. */
.cat__grid--uniform-media .cat__shot { aspect-ratio: 4 / 3; padding: clamp(.45rem, 1vw, .8rem);
  background: var(--paper-lift); }
.cat__grid--uniform-media .cat__shot img { width: 100%; height: 100%; max-width: none;
  max-height: none; object-fit: contain; mix-blend-mode: multiply; }
.cat__n { font-size: .95rem; font-weight: 500; line-height: 1.32; }
.cat__p { font: 500 .88rem/1 var(--sans); color: var(--fg-mute);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .45rem; }
.cat__was { text-decoration: line-through; color: var(--fg-soft); font-size: .8rem; }
.cat__oos { font: 600 .68rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft); }

.cat__subs { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .cat__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cat__subs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat__sub { background: var(--paper); padding: 0; display: grid;
  grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  transition: background var(--dur-fast) var(--ease); }
.cat__sub:hover { background: var(--paper-2); }
.cat__subshot { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  padding: clamp(.55rem, 1.2vw, .9rem); background: var(--paper-lift); }
.cat__subshot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat__subbody { min-width: 0; padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .45rem;
  align-content: start; }
.cat__subn { font-size: 1.05rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.cat__subc { font: 600 .72rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft); }

/* Certifications and workshops belong to the Train path, but they are not
   product categories. A larger editorial pair keeps that distinction clear. */
.train-feature { display: grid; gap: 1px; margin-bottom: clamp(1.5rem, 3vw, 2.3rem);
  background: var(--line-inv); border: 1px solid var(--line-inv); }
.train-feature > a { min-width: 0; display: grid; background: var(--ink); color: #fff;
  overflow: hidden; transition: background var(--dur) var(--ease); }
.train-feature > a:hover { background: var(--ink-2); }
.train-feature__media { min-width: 0; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center; background: var(--ink-deep); }
.train-feature__media img { width: 100%; height: 100%; object-fit: contain; }
.train-feature__body { padding: clamp(1.15rem, 2.5vw, 1.7rem); display: grid;
  align-content: start; gap: .6rem; }
.train-feature__body .eyebrow { color: var(--fg-inv-soft); }
.train-feature__title { font: 700 clamp(1.55rem, 1.25rem + 1.2vw, 2.3rem)/1 var(--cond);
  letter-spacing: .01em; text-transform: uppercase; }
.train-feature__copy { max-width: 45ch; color: var(--fg-inv-mute); font-size: .94rem;
  line-height: 1.5; }
.train-feature__link { margin-top: .45rem; font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red-bright); }
@media (min-width: 760px) {
  .train-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .train-feature > a { grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr); }
  .train-feature__media { aspect-ratio: auto; min-height: 16rem; }
}

/* Apparel is a category destination inside a product shelf, so it uses a dark
   navigation treatment instead of looking like another single accessory. */
.cat__card--category { background: var(--ink); color: #fff; }
.cat__card--category:hover { background: var(--ink-2); }
.cat__card--category .cat__shot { background: var(--paper); }
.cat__card--category .cat__p { color: var(--red-bright); text-transform: uppercase;
  font: 600 .7rem/1 var(--cond); letter-spacing: .1em; }

/* ---------- interior-page header ----------
   The homepage header starts transparent over the black hero and only goes
   solid on scroll (.is-stuck). Interior pages have no dark hero, so the white
   logo would sit invisible on white. This variant is solid from the start and
   does not depend on the scroll observer. */
.site-header--solid {
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header--solid .logo img { filter: invert(1); }
.site-header--solid .navicon { color: var(--ink); }
.site-header--solid .navgroup { background: var(--paper-2); }
.site-header--solid .nav-toggle { color: var(--ink); }

/* See post.css: keeps partial rows from showing a grey filler cell. */
.cat__card, .cat__sub { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }