/* ==========================================================================
   Poggy — Storefront
   --------------------------------------------------------------------------
   A period trade-catalogue treatment, in poggy_core's Ambarino Frost theme. The design leans on typography and hairline rules rather than
   heavy cards, so it reads as a considered catalogue instead of a template.

   Type: poggy_core's pair. IM Fell English (--pg-font-display) for titles,
   labels and buttons; the body font for prose, prices and every number.
   ========================================================================== */


/* Tokens: css/poggy-theme.css maps every --st-* name onto poggy_core's --pg-* tokens. */

.st {
  color: var(--st-ink);
  font-family: var(--pg-font-body);
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 24px 96px;
}

/* --------------------------------------------------------------------------
   Store pages drop the global site nav.
   nav.js injects <header><nav class="navbar"> into every page; on the store it
   competes with the shop's own chrome, so it's hidden here and the top padding
   that used to clear it goes with it.
   -------------------------------------------------------------------------- */
/* No photo backdrop: the page background is the theme's (css/poggy-theme.css). */

body.store-page > header,
body.store-page header:not(.st-masthead):not(.st-guide__head) { display: none !important; }
/* nav.js also emits a .header-spacer div that reserves the fixed header's
   60px. With the header gone that's just a hole at the top of the page. */
body.store-page .header-spacer { display: none !important; }
body.store-page main { padding-top: 0 !important; }

/* Top-right utility cluster: return link + basket, on the masthead's
   eyebrow line. Fixed so both stay reachable once you scroll. */
.st-utilities {
  position: fixed;
  top: 19px; right: 22px;
  z-index: 1402;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Join the Discord — the loudest thing in the corner on purpose. Discord's own
   blurple rather than the store palette, so it reads as "go here" at a glance
   and is recognisable as Discord before the label is even read. The glow keeps
   it standing out when it scrolls over dark artwork. */
.st-return {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--pg-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pg-on-accent);
  text-decoration: none;
  white-space: nowrap;
  background: var(--pg-accent);
  border: 1px solid var(--pg-accent-hi);
  border-radius: var(--pg-radius);
  padding: 0.78em 1.3em;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(var(--pg-accent-rgb), 0.28), 0 6px 22px rgba(var(--pg-accent-rgb), 0.45);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.st-return:hover, .st-return:focus-visible {
  color: var(--pg-on-accent);
  background: var(--pg-accent-hi);
  box-shadow: 0 0 0 4px rgba(var(--pg-accent-rgb), 0.38), 0 8px 28px rgba(var(--pg-accent-rgb), 0.6);
  transform: translateY(-1px);
}
.st-return:focus-visible { outline: 2px solid var(--pg-text); outline-offset: 3px; }
/* White in every link state. The site-wide a:visited colour (orange) outranks a
   single class, so once the invite had been clicked the label and logo turned orange. */
.st-return:link, .st-return:visited, .st-return:hover, .st-return:active, .st-return:focus-visible { color: var(--pg-on-accent); }
.st-return__icon { width: 19px; height: 19px; display: block; flex: none; transition: transform .18s ease; }
.st-return:hover .st-return__icon { transform: scale(1.08); }
.st-discord__short { display: none; }

/* base.css styles the bare <header> element as the fixed site header
   (position:fixed !important, opaque background, z-index 1000). Any <header>
   inside the store would become a second one and cover the page — so the
   store's own banners use <div class="st-masthead">. This guard keeps a stray
   <header> from breaking the layout if one is ever added. */
.st header.st-masthead {
  position: static !important;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.st .eyebrow {
  font-family: var(--pg-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pg-accent2);   /* trailer gold: kickers tie the page to the key art */
  margin: 0 0 0.6rem;
}

/* The site loads ~26 global stylesheets on every page, and two of them style
   bare elements: forms.css centres every h1/h2 and gives h2 a border-bottom,
   base.css sets heading sizes. Neutralise both inside the store so headings
   take their alignment from their own container (the masthead centres, the
   All Access band does not) and Tebex's description HTML renders cleanly. */
.st h1, .st h2, .st h3, .st h4, .st h5, .st h6 {
  font-family: var(--pg-font-display);
  font-weight: 600;
  color: var(--st-ink);
  line-height: 1.14;
  margin: 0;
  padding-bottom: 0;
  border: 0;
  text-align: inherit;
  letter-spacing: -0.005em;
}

.st .rule {
  border: 0;
  border-top: 1px solid var(--st-rule);
  margin: 0;
}

/* Buttons ------------------------------------------------------------------ */

:is(.st, .st-drawer) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  will-change: transform;
  font-family: var(--pg-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.72em 1.45em;
  border-radius: var(--st-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--st-hover), border-color var(--st-hover),
              color var(--st-hover), transform var(--st-hover), box-shadow var(--st-hover);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
:is(.st, .st-drawer) .btn:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }
:is(.st, .st-drawer) .btn--primary { background: var(--st-clay); color: var(--pg-on-accent); border-color: var(--st-clay); }
:is(.st, .st-drawer) .btn:hover { transform: translateY(-2px) scale(1.02); }
:is(.st, .st-drawer) .btn:active { transform: translateY(0) scale(.99); }
:is(.st, .st-drawer) .btn--primary:hover { background: var(--st-clay-lift); border-color: var(--st-clay-lift); color: var(--pg-on-accent); box-shadow: 0 8px 20px rgba(var(--pg-accent-rgb), .28); }
:is(.st, .st-drawer) .btn--ghost { background: transparent; color: var(--st-ink); border-color: var(--st-rule-strong); }
:is(.st, .st-drawer) .btn--ghost:hover { border-color: var(--st-tan); color: var(--st-tan); }
:is(.st, .st-drawer) .btn--go { background: var(--st-go); color: var(--pg-on-accent); border-color: var(--st-go); }
:is(.st, .st-drawer) .btn--go:hover { background: var(--st-go-lift); border-color: var(--st-go-lift); color: var(--pg-on-accent); box-shadow: 0 8px 20px rgba(var(--pg-success-rgb), .32); }
/* The All Access button: the upsell, in the trailer gold as a secondary
   emphasis. An outline, not a fill, so it never competes with a blue primary
   beside it and never reads as a yellow caution slab; it fills on hover. */
:is(.st, .st-drawer) .btn--brass { background: var(--pg-accent2-faint); color: var(--pg-accent2); border-color: var(--pg-accent2); }
:is(.st, .st-drawer) .btn--brass:hover { background: var(--pg-accent2); border-color: var(--pg-accent2); color: var(--pg-on-accent2); box-shadow: 0 8px 20px rgba(var(--pg-accent2-rgb), .28); }
:is(.st, .st-drawer) .btn--brass:focus-visible { outline-color: var(--pg-accent2); }
:is(.st, .st-drawer) .btn--block { width: 100%; }
:is(.st, .st-drawer) .btn[disabled], :is(.st, .st-drawer) .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
:is(.st, .st-drawer) .btn--sm { padding: 0.55em 1em; font-size: 0.74rem; }

/* Tags --------------------------------------------------------------------- */

.st .tag {
  display: inline-block;
  font-family: var(--pg-font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-ink-soft);
  border: 1px solid var(--st-rule-strong);
  border-radius: var(--pg-radius);
  padding: 0.28em 0.62em;
  line-height: 1;
}
/* The chip needs to read green as a whole — green text inside a warm-brown
   hairline just looked like a mistake over this background. */
.st .tag--free {
  color: var(--pg-success);
  border-color: rgba(var(--pg-success-rgb), 0.72);
  background: rgba(var(--pg-success-rgb), 0.18);
}
/* Earned, not decorative — only shown on the actual top seller. The slow
   breath makes the eye land on it without it flashing for attention. */
.st .tag--best {
  color: var(--pg-on-accent2);
  background: var(--st-brass);
  border-color: var(--st-brass);
  animation: st-breathe 3.4s ease-in-out infinite;
}
@keyframes st-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pg-accent2-rgb), 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--pg-accent2-rgb), 0); }
}
.st .tag--sale   { color: var(--pg-on-accent); background: var(--st-crimson); border-color: var(--st-crimson); }
.st .tag--brass  { color: var(--st-brass);   border-color: rgba(var(--pg-accent2-rgb), 0.5); background: var(--pg-accent2-faint); }
/* Frameworks poggy_core detects but cannot drive yet. Dashed and muted so it
   never reads as a supported badge, and lower-case so the words do the work. */
.st .tag--soon {
  color: var(--st-ink-faint);
  border-style: dashed;
  border-color: var(--st-rule);
  background: transparent;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.74rem;
}
.st-compat__soon,
.st-buy__soon { display: block; color: var(--st-ink-faint); font-size: 0.86em; line-height: 1.4; }
.st-product__note {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--st-ink-soft);
  max-width: 62ch;
  margin: -0.6rem 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid rgba(var(--pg-info-rgb), 0.6);
  background: rgba(var(--pg-info-rgb), 0.07);
}
.st-product__note strong { color: var(--pg-info); font-weight: 600; }
.st-product__guide { margin: -0.4rem 0 1.4rem; }
.st-product__guide .btn { font-size: 0.9rem; }
.st-soon {
  margin: 1.1rem auto 0;
  max-width: 70ch;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--st-rule-strong);
  border-radius: var(--pg-radius);
  color: var(--st-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}
.st-soon strong { color: var(--st-brass); }
.st-soon a { color: var(--st-tan); }
.st-fwnav__link--soon { opacity: 0.72; }
.st-fwnav__link--soon small { font-size: 0.72em; text-transform: none; letter-spacing: 0.02em; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* Top padding is a variable so the breakpoint that clears the fixed utility
   row only has to change one number. */
.st-masthead {
  --st-masthead-pad: 30px;
  position: relative;
  padding: var(--st-masthead-pad) 0 40px;
  border-bottom: 1px solid var(--st-rule);
  text-align: center;
}
.st-masthead::after {
  /* the trailer title's rule: a short gold line fading out both ways */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 200px;
  height: 2px;
  margin-left: -100px;
  background: linear-gradient(90deg, transparent, var(--pg-accent2), transparent);
  pointer-events: none;
}
.st-masthead h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight: 500;
}
.st-masthead .st-lede {
  max-width: 60ch;
  margin: 1.1rem auto 0;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--st-ink-soft);
}
.st-masthead .st-lede strong { color: var(--st-ink); font-weight: 600; }

/* Trust strip — the promises that actually close a sale for a script shop. */
.st-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.4rem;
  margin-top: 1.9rem;
  padding: 0;
  list-style: none;
}
.st-assurances li {
  font-family: var(--pg-font-display);
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  padding: 0.35rem 0;
}
.st-assurances li::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.7em;
  vertical-align: middle;
  background: var(--pg-accent2);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Featured hero — rotates "most bought" and "just landed"
   -------------------------------------------------------------------------- */

.st-hero {
  position: relative;
  margin-top: 34px;
  border: 1px solid var(--st-rule-strong);
  border-radius: var(--st-radius);
  background: var(--st-panel);
  overflow: hidden;
}

/* Every slide occupies the same grid cell, so the track is exactly as tall as
   the tallest slide and the cross-fade never shifts the page.
   (Absolute-positioning all but the first slide did NOT work: the inactive
   first slide stayed in flow and reserved its full height, stacking empty
   space above whichever slide was showing.) */
.st-hero__track { display: grid; }

.st-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  /* Wider than it was: the art column held square plates, now it holds 16:9. */
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 30px 34px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.st-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .5s ease, visibility 0s;
  z-index: 1;
}

.st-hero__art {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--st-radius);
  overflow: hidden;
  background: rgb(var(--pg-deep-rgb));
  border: 1px solid var(--st-rule);
}
.st-hero__art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s var(--st-ease), filter .4s ease;
}
.st-hero__art:hover img { transform: scale(1.06); filter: brightness(1.05); }

.st-hero__eyebrow { margin-bottom: 0.55rem; }
.st-hero__eyebrow--best  { color: var(--st-brass); }
.st-hero__eyebrow--new   { color: var(--st-green); }
.st-hero__eyebrow--value { color: var(--st-brass); }
.st-hero__eyebrow--deep  { color: var(--st-tan); }
.st-hero__eyebrow--updated { color: var(--st-tan); }
.st-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.7em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: st-pulse 2.6s ease-in-out infinite;
}
@keyframes st-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(var(--pg-text-rgb), 0); }
}

.st-hero__body h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 500; margin-bottom: 0.6rem; }
.st-hero__body h2 a { color: inherit; text-decoration: none; }
.st-hero__body h2 a:hover { color: var(--st-tan); }
.st-hero__desc {
  margin: 0 0 0.85rem;
  color: var(--st-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 58ch;
}
.st-hero__note {
  margin: 0 0 1.3rem;
  font-family: var(--pg-font-body);
  font-size: 0.7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-hero__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.st-hero__price {
  font-family: var(--pg-font-body);
  font-size: 0.86rem;
  letter-spacing: .08em;
  color: var(--st-ink-soft);
}
.st-hero__price b { font-family: var(--pg-font-body); font-size: 1.35rem; color: var(--pg-accent2); letter-spacing: 0; }

/* Controls */
.st-hero__controls {
  position: absolute;
  right: 16px; bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* base.css line 361 gives every bare <button> `padding: .6rem 1rem`. With
   border-box an element can't shrink below its own padding, so these came out
   34x30 ellipses with the icon shoved right of centre. Zero the padding and
   pin the size. */
.st-hero__btn {
  width: 32px; height: 32px;
  flex: none;
  padding: 0;
  box-sizing: border-box;
  display: grid; place-items: center;
  line-height: 0;
  background: rgba(var(--pg-deep-rgb), 0.66);
  border: 1px solid var(--st-rule);
  border-radius: 50%;
  color: var(--st-ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.st-hero__btn svg { width: 14px; height: 14px; }
/* The pause/play icons swap via the `hidden` attribute, which only carries the
   UA stylesheet's display:none — any author rule setting display on svg beats
   it and both icons render at once. Make hidden win inside the store. */
.st [hidden], .st-hero [hidden], .st-utilities [hidden] { display: none !important; }
.st-hero__btn:hover { color: var(--st-tan); border-color: var(--st-tan); background: rgba(var(--pg-deep-rgb), .9); }
.st-hero__btn:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }

.st-hero__ticks { display: flex; gap: 5px; margin: 0 4px; }
.st-hero__tick {
  position: relative;
  width: 34px; height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--pg-radius);
  background: rgba(var(--pg-text-rgb), 0.22);
  cursor: pointer;
  overflow: hidden;
}
.st-hero__tick:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 3px; }
.st-hero__tickfill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--st-clay);
  border-radius: var(--pg-radius);
}
.st-hero__tick.is-active .st-hero__tickfill { background: var(--st-clay); }
@keyframes st-tickfill { from { width: 0; } to { width: 100%; } }

@media (max-width: 860px) {
  .st-hero__slide { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px 54px; }
  .st-hero__art { max-width: 220px; }
  .st-hero__controls { right: 50%; transform: translateX(50%); bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Category row — the visual way into each shelf
   -------------------------------------------------------------------------- */

.st-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 30px;
}
/* Tebex supplies these as ~250x156 banners. Cropping them into a small circle
   turned them into unreadable dark blobs, so the tile shows the artwork at its
   own proportions and the label sits beneath it. */
.st-cat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--st-panel);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  transition: border-color var(--st-hover), transform var(--st-hover),
              background-color var(--st-hover), box-shadow var(--st-hover);
}
/* base.css sets `button:hover { background-color: var(--highlight-color) }`,
   and these tiles are <button>s — so hovering flooded the label strip solid
   clay. Restate the background so the tile only lifts and warms slightly. */
.st-cat:hover {
  border-color: var(--st-tan);
  background: var(--st-panel-hi);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(var(--pg-shade-rgb), .42);
}
.st-cat:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }
.st-cat.is-active { border-color: var(--st-clay); background: rgba(var(--pg-accent-rgb), 0.1); }
.st-cat__art {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgb(var(--pg-deep-rgb));
  border-bottom: 1px solid var(--st-rule);
}
/* The tile art is Tebex's category banner: a line icon on a warm brown
   glow. It is recoloured here rather than re-uploaded: the image is taken to
   grey with its dim glow crushed to black, the icon and inner rule are then
   multiplied by the glacier blue (gold for All Access), and a midnight panel
   with a cool blue glow is screened over the blacks. */
.st-cat__art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.9) brightness(.86);
  transition: transform .6s var(--st-ease), filter .35s ease;
}
.st-cat:hover .st-cat__art img { transform: scale(1.09); filter: grayscale(1) contrast(1.9) brightness(1.05); }
.st-cat__art::before,
.st-cat__art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* z-index: the filtered img paints in the positioned layer, so without it
   the img (later in tree order) would cover both overlays. */
.st-cat__art::before { z-index: 1; background: var(--pg-accent); mix-blend-mode: multiply; }
.st-cat__art::after {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--pg-accent-rgb), 0.20), rgba(var(--pg-accent-rgb), 0.05) 45%, transparent 70%),
    rgb(var(--pg-bg-rgb));
  mix-blend-mode: screen;
  outline: 1px solid rgba(var(--pg-accent-rgb), 0.24);   /* the inner rule */
  outline-offset: -6px;
  transition: opacity .35s ease;
}
.st-cat--brass .st-cat__art::before { background: var(--pg-accent2); }
.st-cat--brass .st-cat__art::after { outline-color: rgba(var(--pg-accent2-rgb), 0.30); }
.st-cat__name {
  font-family: var(--pg-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--st-ink);
  text-align: center;
  line-height: 1.25;
  padding: 12px 10px 0;
}
.st-cat__n {
  font-family: var(--pg-font-body);
  font-size: 0.64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  text-align: center;
  padding: 4px 10px 13px;
}
.st-cat--brass { border-color: rgba(var(--pg-accent2-rgb), 0.34); }
.st-cat--brass:hover { border-color: var(--st-brass); }
.st-cat--brass .st-cat__name { color: var(--st-brass); }

/* --------------------------------------------------------------------------
   All Access band — the upsell, given real visual primacy
   -------------------------------------------------------------------------- */

.st-allaccess {
  position: relative;
  margin: 40px 0 8px;
  padding: 38px 40px;
  background:
    linear-gradient(180deg, rgba(var(--pg-raise-hi-rgb), 0.55), rgba(var(--pg-deep-rgb), 0.82));
  border: 1px solid rgba(var(--pg-accent2-rgb), 0.34);
  border-radius: var(--st-radius);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: center;
}
.st-allaccess::before {
  /* inner hairline, the way a printed certificate is double-ruled */
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--pg-accent2-rgb), 0.16);
  border-radius: var(--pg-radius);
  pointer-events: none;
}
.st-allaccess .eyebrow { color: var(--st-brass); }
.st-allaccess h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; }
.st-allaccess p {
  margin: 0.85rem 0 0;
  color: var(--st-ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 46ch;
}

/* The maths: what it costs separately vs. what it costs together. */
.st-maths {
  border-left: 1px solid rgba(var(--pg-accent2-rgb), 0.28);
  padding-left: 40px;
}
.st-maths__row { display: flex; align-items: baseline; gap: 0.6rem; }
.st-maths__strike {
  font-size: 1.5rem;
  color: var(--st-ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--pg-danger-rgb), 0.75);
  text-decoration-thickness: 2px;
}
.st-maths__label {
  display: block;
  font-family: var(--pg-font-display);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  margin-top: 0.25rem;
}
.st-maths__price {
  font-size: clamp(2.4rem, 4.6vw, 3.2rem);
  font-weight: 600;
  color: var(--st-brass);
  line-height: 1;
  margin-top: 0.9rem;
}
.st-maths__price span {
  font-family: var(--pg-font-body);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--st-ink-soft);
  font-weight: 500;
}
.st-maths .btn { margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   Category sections + product grid
   -------------------------------------------------------------------------- */

/* Filter + sort toolbar --------------------------------------------------- */

.st-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin: 46px 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--st-rule-strong);
}

.st-filters { display: flex; flex-wrap: wrap; gap: 8px; }

.st-chip {
  font-family: var(--pg-font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--st-ink-soft);
  background: transparent;
  border: 1px solid var(--st-rule-strong);
  border-radius: var(--pg-radius);
  padding: 0.5em 1.05em;
  cursor: pointer;
  line-height: 1;
  transition: color var(--st-hover), border-color var(--st-hover),
              background-color var(--st-hover), transform var(--st-hover);
}
.st-chip:hover { color: var(--st-tan); border-color: var(--st-tan); background: rgba(var(--pg-accent-rgb), 0.1); transform: translateY(-2px); }
.st-chip:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }
.st-chip.is-active {
  background: var(--st-clay);
  border-color: var(--st-clay);
  color: var(--pg-on-accent);
}
.st-chip .n {
  margin-left: 0.55em;
  opacity: .6;
  font-size: 0.9em;
}

.st-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--pg-font-display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  white-space: nowrap;
}
.st-sort select {
  font-family: var(--pg-font-body);
  font-size: 0.94rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--st-ink);
  background: var(--st-panel);
  border: 1px solid var(--st-rule-strong);
  border-radius: var(--st-radius);
  padding: 0.5em 2.1em 0.5em 0.8em;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--st-tan) 50%),
                    linear-gradient(135deg, var(--st-tan) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.st-sort select:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }

.st-noresults {
  text-align: center;
  color: var(--st-ink-faint);
  padding: 54px 0;
  font-size: 1rem;
}
.st-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--st-tan);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-section { padding-top: 52px; scroll-margin-top: 80px; }
.st-section__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--st-rule-strong);
  margin-bottom: 30px;
}
.st-section__head::after {
  /* a short gold rule over the hairline, as under a trailer title */
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 96px;
  height: 2px;
  background: linear-gradient(90deg, var(--pg-accent2), rgba(var(--pg-accent2-rgb), 0));
  pointer-events: none;
}
.st-section__head h2 { font-size: 1.7rem; font-weight: 500; }
.st-section__head p {
  margin: 0.4rem 0 0;
  color: var(--st-ink-faint);
  font-size: 0.95rem;
}
.st-section__count {
  font-family: var(--pg-font-body);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  white-space: nowrap;
}

/* Larger cards so each product's key art reads as its hero image rather than
   a thumbnail. At the 1240px container this settles into three per row. */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 34px 30px;
}
.st-grid .st-card[hidden] { display: none; }

/* Product card ------------------------------------------------------------- */

.st-card {
  display: flex;
  flex-direction: column;
  background: var(--st-panel);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  overflow: hidden;
  transition: border-color var(--st-hover), transform var(--st-hover),
              box-shadow var(--st-hover), background-color var(--st-hover);
}
.st-card:hover {
  border-color: var(--st-tan);
  background: var(--st-panel-hi);
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(var(--pg-shade-rgb), .55);
}
/* Site key art is authored 16:9 (assets/products/*), so the frame matches it
   and nothing is cropped. This was 1:1 while the store used Tebex's square
   forum plates. */
.st-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: rgb(var(--pg-deep-rgb));
  overflow: hidden;
}
.st-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s var(--st-ease), filter .4s ease;
  filter: saturate(0.9) contrast(1.02) brightness(.94);
}
.st-card:hover .st-card__media img { transform: scale(1.07); filter: saturate(1.03) contrast(1.05) brightness(1.02); }
.st-card__badges {
  position: absolute;
  bottom: 10px; right: 10px;   /* bottom right, off the title art at the top of the thumbnails */
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100% - 20px);
}
.st-card__badges .tag { background: rgba(var(--pg-deep-rgb), 0.82); backdrop-filter: blur(3px); }
/* These two carry their own fill and must not inherit the dark overlay pill. */
.st-card__badges .tag--best { background: var(--st-brass); color: var(--pg-on-accent2); }
.st-card__badges .tag--sale { background: var(--st-crimson); color: var(--pg-on-accent); }

.st-card__body { padding: 20px 22px 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.st-card h3 { font-size: 1.46rem; font-weight: 600; margin-bottom: 0.55rem; }
.st-card h3 a { color: inherit; text-decoration: none; }
.st-card h3 a:hover { color: var(--st-tan); text-decoration: underline; text-decoration-color: var(--pg-accent2-soft); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.st-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0.75rem; }
.st-card__excerpt {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--st-ink-soft);
  margin: 0 0 1.2rem;
  flex: 1 1 auto;
}

/* Real sales volume, straight from the ledger. */
.st-card__proof {
  margin: 0 0 1rem;
  font-family: var(--pg-font-body);
  font-size: 0.68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-card__proof strong { color: var(--pg-accent2); font-weight: 700; }
.st-card__proof::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.65em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--st-green);
}

.st-card__foot { padding: 0 22px 20px; }
.st-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 13px 0 15px;
  border-top: 1px solid var(--st-rule);
}
.st-price__main { font-size: 1.42rem; font-weight: 600; color: var(--pg-accent2); line-height: 1; }
.st-price__main .per {
  font-family: var(--pg-font-body);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: var(--st-ink-faint);
  font-weight: 500;
}
.st-price__from {
  display: block;
  font-family: var(--pg-font-body);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  margin-bottom: 0.34rem;
}
.st-price__alt {
  font-family: var(--pg-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--st-ink-faint);
  text-align: right;
  line-height: 1.45;
}
.st-price__alt b { color: var(--st-ink-soft); font-weight: 600; }
.st-card__actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.st-card__actions .btn--icon { padding-left: 0.9em; padding-right: 0.9em; }

/* Card variant for the All Access entry inside the grid */
.st-card--brass { border-color: rgba(var(--pg-accent2-rgb), 0.34); }
.st-card--brass:hover { border-color: rgba(var(--pg-accent2-rgb), 0.6); }
.st-card--brass .st-price__main { color: var(--st-brass); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.st-crumbs {
  font-family: var(--pg-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  padding: 34px 0 22px;
}
.st-crumbs a { color: var(--st-ink-faint); text-decoration: none; }
.st-crumbs a:hover { color: var(--st-tan); }
.st-crumbs span { margin: 0 0.55em; opacity: .5; }

.st-product { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 52px; align-items: start; }

/* Fixed frame + object-fit:contain: every preview is shown whole and in its
   true proportions, whatever its aspect, and swapping images doesn't shunt the
   page around. Previously the stage forced 16:9 onto square art. */
.st-gallery__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgb(var(--pg-deep-rgb));
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  overflow: hidden;
}
.st-gallery__stage img,
.st-gallery__stage iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
  background: rgb(var(--pg-deep-rgb));
}

/* Prev/next */
.st-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  flex: none;
  padding: 0;              /* see note on .st-hero__btn — global button padding */
  box-sizing: border-box;
  line-height: 0;
  display: grid; place-items: center;
  background: rgba(var(--pg-deep-rgb), 0.72);
  border: 1px solid var(--st-rule-strong);
  border-radius: 50%;
  color: var(--st-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background-color .18s ease, border-color .18s ease;
  z-index: 2;
}
.st-gallery__nav svg { width: 20px; height: 20px; }
.st-gallery__nav--prev { left: 12px; }
.st-gallery__nav--next { right: 12px; }
.st-gallery__stage:hover .st-gallery__nav,
.st-gallery__nav:focus-visible { opacity: 1; }
/* base.css sets `button:hover { transform: translateY(-2px) }`, which
   REPLACES this button's translateY(-50%) centring and drops it half its
   own height on hover. Re-assert the centring in both interactive states. */
.st-gallery__nav:hover,
.st-gallery__nav:focus-visible { background: rgba(var(--pg-deep-rgb), .92); border-color: var(--st-tan); color: var(--st-tan); transform: translateY(-50%); }
.st-gallery__nav:active { transform: translateY(-50%) scale(.95); }
.st-gallery__nav:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; }

.st-gallery__counter {
  position: absolute;
  right: 12px; bottom: 12px;
  font-family: var(--pg-font-body);
  font-size: 0.68rem;
  letter-spacing: .12em;
  color: var(--st-ink-soft);
  background: rgba(var(--pg-deep-rgb), 0.78);
  border: 1px solid var(--st-rule);
  border-radius: var(--pg-radius);
  padding: 0.3em 0.7em;
  z-index: 2;
}

/* Touch devices have no hover — keep the arrows visible. */
@media (hover: none) {
  .st-gallery__nav { opacity: 1; }
}

.st-gallery__thumbs { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.st-gallery__thumbs button {
  position: relative;
  width: 96px; aspect-ratio: 16/9;
  padding: 0; cursor: pointer;
  background: rgb(var(--pg-deep-rgb));
  border: 1px solid var(--st-rule);
  border-radius: var(--pg-radius);
  overflow: hidden;
  transition: border-color .18s ease, opacity .18s ease;
  opacity: .62;
}
.st-gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-gallery__thumbs button[aria-current="true"], .st-gallery__thumbs button:hover { opacity: 1; border-color: var(--st-tan); }
.st-gallery__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.8rem; color: var(--pg-text);
  background: rgba(var(--pg-deep-rgb), 0.42);
  text-shadow: 0 1px 3px rgba(var(--pg-shade-rgb), .7);
  pointer-events: none;
}

.st-product__title { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 500; margin-bottom: 0.7rem; }
.st-product__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* Buy panel — sticky so the price follows a long description. */
.st-buy {
  position: sticky;
  top: 84px;
  background: var(--st-panel-hi);
  border: 1px solid var(--st-rule-strong);
  border-radius: var(--st-radius);
  padding: 26px 26px 24px;
}
.st-buy__price { font-size: 2.5rem; font-weight: 600; line-height: 1; margin-bottom: 0.2rem; color: var(--pg-accent2); }
.st-buy__price .per { font-family: var(--pg-font-body); font-size: 0.9rem; letter-spacing: .08em; color: var(--st-ink-faint); font-weight: 500; }
.st-buy__note { font-size: 0.88rem; color: var(--st-ink-faint); margin: 0 0 1.3rem; }

/* Buying options — radio cards for one-time vs monthly */
.st-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 1.3rem; }
.st-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.st-option:hover { border-color: var(--st-rule-strong); }
.st-option input { position: absolute; opacity: 0; pointer-events: none; }
.st-option__name {
  font-family: var(--pg-font-display);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--st-ink-soft);
}
.st-option__price { font-size: 1.16rem; font-weight: 600; color: var(--st-ink); }
.st-option__price .per { font-family: var(--pg-font-body); font-size: 0.72rem; color: var(--st-ink-faint); letter-spacing: .07em; }
.st-option:has(input:checked) { border-color: var(--st-clay); background: rgba(var(--pg-accent-rgb), 0.09); }
.st-option:has(input:checked) .st-option__name { color: var(--st-tan); }
.st-option input:focus-visible + .st-option__name { outline: 2px solid var(--st-tan); outline-offset: 3px; }
.st-option__save {
  font-family: var(--pg-font-body);
  font-size: 0.62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--st-green);
}
.st-option__note {
  font-family: var(--pg-font-display);
  font-size: 0.62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}

.st-buy__meta { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--st-rule); }
.st-buy__meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; }
.st-buy__meta dt {
  font-family: var(--pg-font-display);
  font-size: 0.68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-buy__meta dd { margin: 0; font-size: 0.88rem; color: var(--st-ink-soft); }

/* Cross-sell inside the buy panel */
.st-upsell {
  margin-top: 1.1rem;
  padding: 14px 15px;
  border: 1px dashed rgba(var(--pg-accent2-rgb), 0.38);
  border-radius: var(--st-radius);
  background: rgba(var(--pg-accent2-rgb), 0.05);
}
.st-upsell p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--st-ink-soft); }
.st-upsell b { color: var(--st-brass); }
.st-upsell a { color: var(--st-brass); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   All Access inclusions — generated from the live catalogue
   -------------------------------------------------------------------------- */

.st-includes {
  margin-top: 44px;
  padding: 28px 30px 24px;
  border: 1px solid rgba(var(--pg-accent2-rgb), 0.34);
  border-radius: var(--st-radius);
  background: linear-gradient(180deg, rgba(var(--pg-raise-hi-rgb), 0.4), rgba(var(--pg-deep-rgb), 0.72));
}
.st-includes__head h2 { font-size: 1.6rem; font-weight: 500; margin-bottom: 0.45rem; }
.st-includes__head p { margin: 0 0 1.4rem; color: var(--st-ink-soft); font-size: 0.98rem; }

.st-includes__table { width: 100%; border-collapse: collapse; }
.st-includes__table th,
.st-includes__table td { padding: 0.8rem 0.4rem; text-align: left; vertical-align: top; }
.st-includes__table thead th {
  font-family: var(--pg-font-display);
  font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-ink-faint); font-weight: 600;
  border-bottom: 1px solid rgba(var(--pg-accent2-rgb), 0.3);
}
.st-includes__table tbody tr { border-bottom: 1px solid var(--st-rule); }
.st-includes__table td.num, .st-includes__table th.num { text-align: right; white-space: nowrap; }
.st-includes__table tbody td.num { font-size: 1.02rem; color: var(--st-ink); font-weight: 600; }
.st-includes__table a { color: var(--st-ink); text-decoration: none; font-weight: 600; font-size: 1.02rem; }
.st-includes__table a:hover { color: var(--st-tan); }
.st-includes__fw {
  display: inline-block;
  margin-left: 0.55em;
  font-family: var(--pg-font-display);
  font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-includes__desc {
  display: block;
  margin-top: 0.24rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--st-ink-soft);
  max-width: 62ch;
}
.st-includes__free { color: var(--st-green); }

.st-includes__table tfoot th {
  font-family: var(--pg-font-body);
  font-size: 0.74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--st-ink-soft); font-weight: 600;
  padding-top: 1.1rem;
}
.st-includes__count {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: .13em;
  color: var(--st-ink-faint);
}
.st-includes__table tfoot td.num {
  padding-top: 1.1rem;
  font-size: 1.2rem;
  color: var(--st-ink-faint);
}
.st-includes__table tfoot td.num s { text-decoration-color: rgba(var(--pg-danger-rgb), 0.8); text-decoration-thickness: 2px; }
.st-includes__yours th { color: var(--st-brass); }
.st-includes__yours td.num { color: var(--st-brass); font-size: 1.1rem; padding-top: 0.3rem; }
.st-includes__yours td.num strong { font-size: 2rem; font-weight: 600; }
.st-includes__yours td.num span { font-family: var(--pg-font-body); font-size: 0.8rem; letter-spacing: .1em; }

@media (max-width: 640px) {
  .st-includes { padding: 22px 18px 18px; }
  .st-includes__desc { display: none; }
  .st-includes__table th, .st-includes__table td { padding: 0.65rem 0.2rem; }
}

/* Long-form description from Tebex */
.st-desc { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--st-rule); }
.st-desc h2, .st-desc h3, .st-desc h4 { margin: 1.9rem 0 0.7rem; font-weight: 600; }
.st-desc h2 { font-size: 1.55rem; }
.st-desc h3 { font-size: 1.25rem; }
.st-desc h4 { font-size: 1.06rem; color: var(--st-tan); }
.st-desc p, .st-desc li { font-size: 1rem; line-height: 1.72; color: var(--st-ink-soft); }
.st-desc ul, .st-desc ol { padding-left: 1.3rem; }
.st-desc li { margin-bottom: 0.42rem; }
.st-desc li::marker { color: var(--st-clay); }
.st-desc img { max-width: 100%; height: auto; border-radius: var(--st-radius); border: 1px solid var(--st-rule); margin: 1.1rem 0; }
.st-desc a { color: var(--st-tan); text-decoration: underline; text-underline-offset: 2px; }
.st-desc strong, .st-desc b { color: var(--st-ink); }
.st-desc table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; display: block; overflow-x: auto; }
.st-desc th, .st-desc td { border: 1px solid var(--st-rule); padding: 0.55rem 0.75rem; text-align: left; font-size: 0.94rem; }
.st-desc th { font-family: var(--pg-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--st-tan); font-size: 0.76rem; }
.st-desc iframe { max-width: 100%; border-radius: var(--st-radius); border: 1px solid var(--st-rule); }
.st-desc hr { border: 0; border-top: 1px solid var(--st-rule); margin: 1.8rem 0; }

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */

/* Dims the page behind the open drawer. Not a full takeover — the page still
   scrolls — but enough contrast that the basket is clearly the thing in focus
   instead of competing with the artwork behind it. */
.st-scrim {
  position: fixed;
  inset: 0;
  background: rgba(var(--pg-deep-rgb), 0.62);
  backdrop-filter: saturate(.6) blur(1.5px);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1450;
}
.st-scrim.is-open { opacity: 1; }

/* The top-right utilities sit above the page, but the open drawer's own title
   and close button live in exactly that corner — so they step aside rather
   than overlapping it. */
body.st-drawer-open .st-utilities {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.st-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(384px, 92vw);
  background: var(--st-panel-solid);
  border-left: 1px solid var(--st-rule-strong);
  box-shadow: -22px 0 50px rgba(var(--pg-shade-rgb), 0.42);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.3,.8,.3,1), visibility 0s linear .32s;
  z-index: 1451;   /* above .st-scrim (1450) */
  display: flex;
  flex-direction: column;
  font-family: var(--pg-font-body);
  color: var(--st-ink);
}
.st-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform .32s cubic-bezier(.3,.8,.3,1), visibility 0s;
}
.st-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--st-rule);
}
.st-drawer__head h2 {
  font-family: var(--pg-font-display);
  font-size: 0.92rem; letter-spacing: .18em; text-transform: uppercase;
  margin: 0; font-weight: 600;
}
.st-drawer__close {
  background: none; border: 0; cursor: pointer;
  color: var(--st-ink-faint); font-size: 1.6rem; line-height: 1;
  padding: 0 4px;
}
.st-drawer__close:hover { color: var(--st-ink); }
.st-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px; }
.st-drawer__foot { border-top: 1px solid var(--st-rule); padding: 18px 22px 22px; }

.st-line { display: grid; grid-template-columns: 74px 1fr auto; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--st-rule); }
.st-line:last-child { border-bottom: 0; }
.st-line img { width: 74px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--pg-radius); border: 1px solid var(--st-rule); }
.st-line__name { font-size: 0.98rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.2rem; }
.st-line__kind {
  font-family: var(--pg-font-display);
  font-size: 0.64rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-line__price { font-size: 1rem; font-weight: 600; text-align: right; white-space: nowrap; }
.st-line__remove {
  display: block; margin-top: 0.35rem;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--pg-font-display);
  font-size: 0.64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--st-ink-faint); text-align: right; width: 100%;
}
/* base.css styles every bare <button> on hover with a filled background,
   which turned this into a solid clay pill. Keep it a plain text control and
   use crimson to signal that it's the destructive one. */
.st-line__remove:hover,
.st-line__remove:focus-visible {
  color: var(--pg-danger);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.st-totals { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.st-totals__label { font-family: var(--pg-font-display); font-size: 0.78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--st-ink-faint); }
.st-totals__value { font-size: 1.75rem; font-weight: 600; }

.st-empty { text-align: center; padding: 54px 12px; color: var(--st-ink-faint); }
.st-empty p { margin: 0 0 1.2rem; font-size: 0.98rem; }

/* Auth notice inside the drawer */
.st-authnote {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--st-ink-faint);
  margin: 0 0 0.9rem;
  text-align: center;
}

/* Basket button — pinned top-right, always on screen.
   It used to slide away whenever the basket was empty, which meant most
   visitors never saw a basket at all. Now it's permanent; it just sits back
   in a quieter treatment until something is in it. */
.st-cartbtn {
  display: inline-flex; align-items: center; gap: 0.62em;
  background: var(--st-clay);
  color: var(--pg-on-accent);
  border: 1px solid var(--st-clay);
  border-radius: var(--pg-radius);
  padding: 0.72em 1.15em 0.72em 1em;
  font-family: var(--pg-font-body);
  font-size: 0.8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--pg-shade-rgb), .55);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.st-cartbtn:hover { background: var(--st-clay-lift); border-color: var(--st-clay-lift); transform: translateY(-1px); }
.st-cartbtn:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 3px; }
.st-cartbtn__icon { width: 19px; height: 19px; display: block; }
.st-cartbtn__count {
  background: var(--pg-on-accent); color: var(--st-tan);
  border-radius: var(--pg-radius); min-width: 1.7em;
  padding: 0.2em 0.5em; text-align: center;
  font-size: 0.92em;
}

/* Empty: still clearly a button, just not shouting for attention. */
/* The empty state was near-invisible against the dark page: a 26%-opacity
   hairline and body-coloured text on near-black. It now keeps a solid ground,
   a clay border and full-strength text, so it always reads as a control —
   just without the filled state's shout. */
.st-cartbtn.is-empty {
  background: rgba(var(--pg-raise-rgb), 0.96);
  border-color: var(--st-clay);
  color: var(--st-tan);
}
.st-cartbtn.is-empty:hover { border-color: var(--st-clay-lift); color: var(--pg-text); background: rgba(var(--pg-raise-hi-rgb), 0.98); }
.st-cartbtn.is-empty .st-cartbtn__count { background: rgba(var(--pg-accent-rgb), 0.24); color: var(--st-tan); }

@media (max-width: 780px) {
  /* Not enough room for both labels — keep the wording on the Discord button,
     since the basket's icon and count already say what it is. */
  .st-cartbtn__label { display: none; }
  .st-cartbtn { padding: 0.72em 0.8em; }
  .st-utilities { top: 12px; right: 12px; gap: 8px; }
  .st-return { font-size: 0.72rem; letter-spacing: .1em; padding: 0.72em 1em; }
}
@media (max-width: 460px) {
  /* Still labelled on a phone: the short word keeps it obvious. */
  .st-discord__long { display: none; }
  .st-discord__short { display: inline; }
  .st-return { padding: 0.72em 0.9em; }
}

/* Toast */
.st-toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 90px);
  background: var(--st-panel-solid);
  border: 1px solid var(--st-rule-strong);
  border-left: 3px solid var(--st-clay);
  border-radius: var(--st-radius);
  padding: 13px 20px;
  font-family: var(--pg-font-body);
  font-size: 0.94rem;
  color: var(--st-ink);
  box-shadow: var(--st-shadow);
  z-index: 1500;
  opacity: 0;
  transition: transform .3s cubic-bezier(.3,.8,.3,1), opacity .3s ease;
  max-width: min(90vw, 460px);
}
.st-toast.is-open { transform: translate(-50%, 0); opacity: 1; }
.st-toast--error { border-left-color: var(--st-crimson); }

/* --------------------------------------------------------------------------
   Recent-purchase notice
   Bottom-left, clear of the basket drawer (right) and the toast (centre).
   -------------------------------------------------------------------------- */

.st-proof {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 1300;
  display: flex;
  align-items: stretch;
  max-width: min(340px, calc(100vw - 40px));
  background: var(--st-panel-solid);
  border: 1px solid var(--st-rule-strong);
  border-left: 3px solid var(--st-clay);
  border-radius: var(--st-radius);
  box-shadow: 0 16px 40px rgba(var(--pg-shade-rgb), .55);
  font-family: var(--pg-font-body);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.3,.8,.3,1), opacity .32s ease;
}
.st-proof.is-open { transform: none; opacity: 1; pointer-events: auto; }

.st-proof__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}
.st-proof__art {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--pg-radius);
  overflow: hidden;
  background: rgb(var(--pg-deep-rgb));
  border: 1px solid var(--st-rule);
}
.st-proof__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-proof__body { min-width: 0; }
.st-proof__line {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--st-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.st-proof__meta {
  display: block;
  margin-top: 0.22rem;
  font-family: var(--pg-font-body);
  font-size: 0.64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}
.st-proof__close {
  flex: none;
  background: none;
  border: 0;
  border-left: 1px solid var(--st-rule);
  color: var(--st-ink-faint);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 11px;
  cursor: pointer;
}
.st-proof__close:hover { color: var(--st-ink); }

@media (max-width: 640px) {
  .st-proof { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-proof { transition: none; }
}

/* Spinner for in-flight buttons */
.st-btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.st-btn-busy::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid rgba(var(--pg-on-accent-rgb), .35);
  border-top-color: var(--pg-on-accent);
  border-radius: 50%;
  animation: st-spin .6s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Post-purchase / status pages
   -------------------------------------------------------------------------- */

.st-status { max-width: 660px; margin: 0 auto; text-align: center; padding: 70px 0 40px; }
.st-status__mark {
  width: 62px; height: 62px; margin: 0 auto 26px;
  border: 1px solid var(--st-rule-strong); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.6rem; color: var(--st-green);
}
.st-status--fail .st-status__mark { color: var(--st-crimson); }
.st-status h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; margin-bottom: 0.8rem; }
.st-status p { color: var(--st-ink-soft); font-size: 1.02rem; line-height: 1.65; margin: 0 auto 1.1rem; max-width: 52ch; }
.st-status__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* Library / purchases table */
.st-library { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.st-library th, .st-library td { padding: 0.85rem 0.9rem; text-align: left; border-bottom: 1px solid var(--st-rule); }
.st-library th {
  font-family: var(--pg-font-display);
  font-size: 0.7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-ink-faint); font-weight: 600;
}
.st-library td { font-size: 0.96rem; color: var(--st-ink-soft); }
.st-library td.name { color: var(--st-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .st-allaccess { grid-template-columns: 1fr; gap: 30px; padding: 32px 26px; }
  .st-maths { border-left: 0; border-top: 1px solid rgba(var(--pg-accent2-rgb), .28); padding-left: 0; padding-top: 26px; }
  .st-product { grid-template-columns: 1fr; gap: 34px; }
  .st-buy { position: static; }
}
@media (max-width: 640px) {
  .st { padding: 0 16px 80px; }
  /* Set the variable, not the shorthand — the shorthand would clobber the
     clearance that keeps the eyebrow out from under the utility buttons. */
  .st-masthead { --st-masthead-pad: 64px; padding-bottom: 30px; }
  .st-assurances { gap: 0 1.2rem; }
  .st-grid { grid-template-columns: 1fr; gap: 24px; }
  .st-section__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .st-card__actions { grid-template-columns: 1fr auto; }
  .st-toolbar { margin-top: 34px; gap: 1rem; }
  .st-sort { width: 100%; justify-content: space-between; }
}

/* Narrow enough that the centred masthead would run under the fixed utility
   row — push it clear. Above this width they sit side by side on one line. */
@media (max-width: 1150px) {
  .st-masthead { --st-masthead-pad: 66px; }
}

/* Reduced motion means reduce MOTION — not flatten every state change.
   Killing all transitions made each hover snap instantly, which reads as a
   glitch rather than a considered choice. Movement (transform, zoom, slide)
   is dropped; colour, border and opacity still fade, so the interface stays
   smooth for anyone with the OS setting enabled. */
@media (prefers-reduced-motion: reduce) {
  .st *, .st-drawer, .st-toast, .st-cartbtn, .st-return, .st-proof {
    transition-property: color, background-color, border-color, box-shadow, opacity, filter !important;
    transition-duration: .22s !important;
    transition-timing-function: ease !important;
    animation: none !important;
  }
  /* No movement at all under this setting. */
  .st-card:hover,
  .st-cat:hover,
  :is(.st, .st-drawer) .btn:hover,
  .st-cartbtn:hover,
  .st-return:hover                     { transform: none !important; }
  .st-card:hover .st-card__media img,
  .st-cat:hover .st-cat__art img,
  .st-hero__art:hover img              { transform: none !important; }
  .st-drawer { transition: visibility 0s !important; }
}

/* --------------------------------------------------------------------------
   The plain-text layer under the grid: catalogue table, about, FAQ.
   Built for search engines and answer engines as much as for people — the
   same facts as the cards, in forms that can be quoted. Same hairline-and-
   small-caps treatment as the All Access table so it reads as one catalogue.
   -------------------------------------------------------------------------- */
.st-compat__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-compat__table { width: 100%; min-width: 620px; border-collapse: collapse; }
.st-compat__table th,
.st-compat__table td { padding: 0.8rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--st-rule); }
.st-compat__table thead th {
  font-family: var(--pg-font-display);
  font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-ink-faint); font-weight: 600;
  border-bottom: 1px solid var(--st-rule-strong);
}
.st-compat__table tbody th { font-weight: 600; }
.st-compat__table tbody th a { color: var(--st-ink); text-decoration: none; font-size: 1.02rem; }
.st-compat__table tbody th a:hover { color: var(--st-tan); }
.st-compat__cat {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--pg-font-display);
  font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink-faint); font-weight: 500;
}
.st-compat__fw { font-size: 0.94rem; color: var(--st-ink-soft); line-height: 1.5; }
.st-compat__table td.num, .st-compat__table th.num { text-align: right; white-space: nowrap; }
.st-compat__table tbody td.num { color: var(--st-ink); font-weight: 600; font-size: 1.02rem; }
.st-compat__table .st-compat__aa th a, .st-compat__table tbody .st-compat__aa td.num { color: var(--st-brass); }
.st-compat__aa .st-compat__cat { color: rgba(var(--pg-accent2-rgb), 0.8); }

.st-about p { max-width: 72ch; font-size: 1.02rem; line-height: 1.72; color: var(--st-ink-soft); margin: 0 0 1rem; }
.st-about a { color: var(--st-tan); text-decoration: underline; text-underline-offset: 2px; }

.st-faq__list { border-top: 1px solid var(--st-rule-strong); }
.st-faq__item { border-bottom: 1px solid var(--st-rule); }
.st-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: 1rem 0.2rem;
  transition: color var(--st-hover);
}
.st-faq__item summary::-webkit-details-marker { display: none; }
.st-faq__item summary h3 { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.st-faq__item summary::after {
  content: '+';
  flex: none;
  font-family: var(--pg-font-display);
  font-size: 1.2rem; line-height: 1;
  color: var(--st-clay);
  transition: transform var(--st-hover);
}
.st-faq__item[open] summary::after { content: '\2013'; }
.st-faq__item summary:hover h3, .st-faq__item[open] summary h3 { color: var(--st-tan); }
.st-faq__item summary:focus-visible { outline: 2px solid var(--st-tan); outline-offset: 2px; border-radius: var(--st-radius); }
.st-faq__item > div { padding: 0 0.2rem 1.2rem; max-width: 70ch; }
.st-faq__item p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--st-ink-soft); }

@media (max-width: 640px) {
  .st-compat__table th, .st-compat__table td { padding: 0.65rem 0.35rem; }
  .st-faq__item summary h3 { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Product page: generic phrase above the name, one-line lead, linked tags
   -------------------------------------------------------------------------- */
.st-product__kind {
  display: block;
  font-family: var(--pg-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-accent2);
  margin-bottom: 0.4rem;
}
.st-product__lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--st-ink-soft);
  max-width: 62ch;
  margin: 0 0 1.4rem;
}
.st-product__tags a.tag { text-decoration: none; }
.st-product__tags a.tag:hover { color: var(--st-tan); border-color: var(--st-tan); }
.st-product .st-faq { padding-top: 46px; }

/* --------------------------------------------------------------------------
   Browse-by-framework row: real anchors, so crawlers find the shelves
   -------------------------------------------------------------------------- */
.st-fwnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}
.st-fwnav__label {
  font-family: var(--pg-font-display);
  font-size: 0.68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
  margin-right: 6px;
}
.st-fwnav__link {
  font-family: var(--pg-font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-tan);
  text-decoration: none;
  border: 1px solid rgba(var(--pg-accent-rgb), 0.45);
  border-radius: var(--pg-radius);
  padding: 0.55em 1.05em;
  line-height: 1;
  transition: color var(--st-hover), border-color var(--st-hover), transform var(--st-hover);
}
.st-fwnav__link:hover, .st-fwnav__link:focus-visible { color: var(--st-clay-lift); border-color: var(--st-tan); background: var(--pg-accent-faint); transform: translateY(-1px); }
.st-fwnav__link.is-active { color: var(--pg-on-accent); background: var(--st-tan); border-color: var(--st-tan); }
.st-fwnav__link--guide { color: var(--st-brass); border-color: rgba(var(--pg-accent2-rgb), 0.5); }
.st-fwnav__link--guide:hover, .st-fwnav__link--guide:focus-visible { color: var(--pg-accent2-hi); border-color: var(--st-brass); background: var(--pg-accent2-faint); }
.st-masthead--cat { padding-bottom: 0; }
.st-masthead--cat::after { display: none; }   /* no bottom padding: the gold rule would cross the lede */

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */
.st-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.st-guides__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 24px 24px 22px;
  background: var(--st-panel);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  text-decoration: none;
  color: var(--st-ink);
  transition: border-color var(--st-hover), transform var(--st-hover), box-shadow var(--st-hover);
}
.st-guides__card:hover { border-color: var(--st-tan); transform: translateY(-3px); box-shadow: var(--st-shadow); }
/* Cover art across the top of a card, bleeding to its edges. */
.st-guides__card { overflow: hidden; }
.st-guides__img {
  display: block;
  margin: -24px -24px 6px;
  aspect-ratio: 1200 / 630;
  background: rgb(var(--pg-deep-rgb));
  border-bottom: 1px solid var(--st-rule);
  overflow: hidden;
}
.st-guides__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--st-ease, ease); }
.st-guides__card:hover .st-guides__img img { transform: scale(1.03); }
/* The same art as a banner at the top of the article panel. */
.st-guide__banner {
  display: block;
  margin: -36px -40px 26px;   /* panel padding + the head's own 8px */
  aspect-ratio: 1200 / 630;
  border-radius: var(--pg-radius);
  border-bottom: 1px solid var(--st-rule-strong);
  overflow: hidden;
  background: rgb(var(--pg-deep-rgb));
}
.st-guide__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .st-guide__banner { margin: -28px -18px 20px; border-radius: var(--pg-radius); } }
.st-guides__card h2, .st-guides__card h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.st-guides__card p { margin: 0; color: var(--st-ink-soft); font-size: 0.96rem; line-height: 1.55; flex: 1; }
.st-guides__more {
  font-family: var(--pg-font-display);
  font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-tan);
}

.st-guide {
  max-width: 78ch; margin: 0 auto;
  /* A readable panel over the storefront's scene art: the long-form pages
     were the one place body text sat straight on the photograph. */
  padding: 28px 40px 36px;
  background: rgba(var(--pg-deep-rgb), 0.72);
  border: 1px solid var(--st-rule);
  border-radius: var(--pg-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(var(--pg-shade-rgb), 0.35);
}
@media (max-width: 640px) { .st-guide { padding: 20px 18px 28px; border-radius: var(--pg-radius); } }
/* Code blocks: one dark slab per block, not one bordered chip per line. */
.st-guide__body pre {
  margin: 0 0 1.4rem; padding: 1rem 1.25rem;
  background: rgba(var(--pg-deep-rgb), 0.78);
  border: 1px solid var(--st-rule-strong);
  border-left: 3px solid var(--st-clay);
  border-radius: var(--pg-radius);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.6; color: var(--st-ink);
  white-space: pre; tab-size: 4;
}
.st-guide__body pre code { display: block; background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; }
/* base.css styles every <header> as the old fixed site bar (with !important);
   the article header is an ordinary block in the panel. */
.st .st-guide__head {
  position: static !important; top: auto !important; width: auto !important; z-index: auto !important;
  background: none !important; box-shadow: none;
  padding: 8px 0 28px; border-bottom: 1px solid var(--st-rule-strong); margin-bottom: 32px;
}
.st-guide__head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 500; line-height: 1.15; margin: 0; }
.st-guide__lede { font-size: 1.16rem; line-height: 1.65; color: var(--st-ink); }
.st-guide__body h2 { font-size: 1.5rem; font-weight: 600; margin: 2.4rem 0 0.8rem; padding-top: 1.2rem; border-top: 1px solid var(--st-rule); }
.st-guide__body h2:first-child, .st-guide__body .st-guide__lede + h2 { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.st-guide__body h3 { font-size: 1.15rem; font-weight: 600; margin: 1.6rem 0 0.5rem; }
.st-guide__body p, .st-guide__body li, .st-guide__body dd { font-size: 1.04rem; line-height: 1.75; color: var(--st-ink-soft); }
.st-guide__body p { margin: 0 0 1.1rem; }
.st-guide__body ul, .st-guide__body ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.st-guide__body li { margin-bottom: 0.5rem; }
.st-guide__body li::marker { color: var(--st-clay); }
.st-guide__body a { color: var(--st-tan); text-decoration: underline; text-underline-offset: 2px; }
.st-guide__body strong { color: var(--st-ink); }
.st-guide__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(var(--pg-text-rgb), 0.08);
  border: 1px solid var(--st-rule);
  border-radius: var(--pg-radius);
  padding: 0.08em 0.4em;
  color: var(--st-ink);
}
.st-guide__price { color: var(--st-ink-faint); font-size: 0.92em; }
.st-guide__tablewrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.st-guide__body table { width: 100%; min-width: 620px; border-collapse: collapse; }
.st-guide__body th, .st-guide__body td { padding: 0.7rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--st-rule); font-size: 0.96rem; line-height: 1.5; }
.st-guide__body thead th { font-family: var(--pg-font-display); font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--st-ink-faint); border-bottom: 1px solid var(--st-rule-strong); }
.st-guide__body tbody th { color: var(--st-ink); font-weight: 600; white-space: nowrap; }
.st-guide__body td { color: var(--st-ink-soft); }
.st-guide__dl dt { font-weight: 600; color: var(--st-ink); margin-top: 1rem; }
.st-guide__dl dd { margin: 0.3rem 0 0 0; }
@media (max-width: 640px) {
  .st-guide__body p, .st-guide__body li, .st-guide__body dd { font-size: 1rem; }
}

/* "by Poggy" after the breadcrumb trail: the top-of-page route home.
   It sits inline after the last crumb, not right-aligned — the fixed
   return/basket cluster owns the top-right corner on every store page, and
   the row keeps enough right padding to stay clear of it. */
.st-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0; padding-right: 340px; }
.st-crumbs__by {
  margin-left: 0.9em;
  padding-left: 0.9em;
  border-left: 1px solid var(--st-rule-strong);
  color: var(--st-ink-faint);
  white-space: nowrap;
}
.st-crumbs__by:hover { color: var(--st-tan); }
@media (max-width: 780px) { .st-crumbs { padding-right: 150px; } }
@media (max-width: 460px) { .st-crumbs { padding-right: 110px; } }

/* The video's mouse layer (js/store.js, shield): sits over the YouTube player so
   hovering never wakes YouTube's title bar; clicks play or pause through the API. */
/* base.css styles every button (fill, border, shadow, a lift on hover): none of it here. */
.st-gallery__stage .st-gallery__shield,
.st-gallery__stage .st-gallery__shield:hover,
.st-gallery__stage .st-gallery__shield:active,
.st-gallery__stage .st-gallery__shield:focus {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0; margin: 0; border-radius: 0;
  transform: none !important; outline: none;
  cursor: pointer;
}
.st-gallery__yt {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 10px; border-radius: var(--pg-radius);
  background: rgba(var(--pg-deep-rgb), 0.72); border: 1px solid var(--st-rule-strong);
  color: var(--st-ink); font-size: 12px; text-decoration: none;
  opacity: 0; transition: opacity .2s ease, color .18s ease, border-color .18s ease;
}
.st-gallery__stage:hover .st-gallery__yt,
.st-gallery__yt:focus-visible { opacity: 1; }
.st-gallery__yt:hover { color: var(--st-tan); border-color: var(--st-tan); }

/* Numbers never in the display font: the option notes carry prices ("$83.88/yr"). */
.st-option__note, .st-option__save { font-family: var(--pg-font-body); letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Phones and tablets (27 September 2026)
   -------------------------------------------------------------------------- */

/* Numbers never in the display font: the filter chips carry counts. */
.st-chip .n { font-family: var(--pg-font-body); letter-spacing: 0; }

/* One column: the buy box comes straight after the gallery instead of under
   the whole description and the questions. The main column's children join
   the product grid (display: contents) so the box can sit between them. */
@media (max-width: 980px) {
  .st-product { gap: 0; }
  .st-product__main { display: contents; }
  .st-product__main > .st-gallery ~ * { order: 2; }
  .st-product > .st-buy { order: 1; margin: 30px 0 6px; }
}

/* The carousel: the key art full width above the words, not a small plate
   floating in a tall empty cell; bigger arrows for thumbs. */
@media (max-width: 860px) {
  .st-hero__slide { align-content: start; }
  .st-hero__art { max-width: none; width: 100%; }
}
@media (max-width: 860px) and (hover: none) {
  .st-hero__btn { width: 40px; height: 40px; }
  .st-hero__slide, .pg-home .st-hero__slide { padding-bottom: 68px; }
}

@media (max-width: 640px) {
  /* The type filters: one row that scrolls sideways, edge to edge. */
  .st-filters {
    flex: 0 0 calc(100% + 32px);
    width: calc(100% + 32px);
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
    scroll-padding: 0 16px;
  }
  .st-filters::-webkit-scrollbar { display: none; }
  .st-chip { flex: none; min-height: 42px; }
  .st-chip:hover { transform: none; }
  /* Framework links: the label on its own line, taller targets. */
  .st-fwnav__label { flex: 1 0 100%; margin: 0 0 2px; }
  .st-fwnav__link { min-height: 42px; display: inline-flex; align-items: center; }
}

/* The basket drawer takes the whole width of a phone. */
@media (max-width: 520px) {
  .st-drawer { width: 100%; border-left: 0; }
  .st-drawer__head { padding: 10px 12px 10px 18px; min-height: 60px; }
  .st-drawer__close { min-width: 44px; min-height: 44px; }
  .st-drawer__body { padding: 6px 18px; }
  .st-drawer__foot { padding: 16px 18px 22px; }
}