/**
 * LumosBox — storefront styles.
 *
 * Every colour, size and space comes from tokens.css.
 *
 * The shop is named for light, so light is the material: a violet night, one
 * warm accent, and glow spent only where something is worth looking at. Three
 * effects carry the whole idea and there is deliberately no fourth:
 *
 *   1. `.slab`   — product media in a frame lit from within, with a sheen
 *                  that crosses it on hover.
 *   2. `.aurora` — a slow ambient drift behind the hero.
 *   3. `.lumos`  — a soft light that follows the pointer across a shelf of
 *                  products, so the grid lights up under the reader's hand.
 *
 * Nothing here quotes any fictional universe. No wands, no crests, no house
 * colours: the magic is the light.
 */

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

body.collector-store {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * Storefront sets `overflow-x: hidden` on the body and on `.site` to catch
 * anything that pokes past the viewport. `hidden` makes both of them scroll
 * containers, and a scroll container is where `position: sticky` stops
 * sticking — the product gallery and the checkout summary both sat still.
 * `clip` cuts the same overflow without creating one.
 */
body.collector-store,
body.collector-store .site { overflow-x: clip; }

body.collector-store a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
body.collector-store :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
body.collector-store img { max-width: 100%; height: auto; }

body.collector-store h1,
body.collector-store h2,
body.collector-store h3 {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
body.collector-store .site-main { max-width: none; margin: 0; padding: 0 0 var(--s-8); }
body.collector-store .site-content { padding: 0; }

/*
 * Storefront floats `.content-area` at 73.9% to leave room for a sidebar this
 * shop does not have. Left alone it caps every inner page at ~740px, which is
 * what pushed the block checkout's order summary below the form instead of
 * beside it. One reset, and the whole site uses the same container.
 */
body.collector-store .col-full {
  /*
   * `box-sizing` restated, not inherited. Storefront sets `content-box` on
   * this element explicitly, which beats the `*` reset at the top of this
   * file: `width: 100%` plus 72px of padding made every page 72px wider than
   * the viewport, and everything inside inherited the overflow.
   */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* One container pads the page. A `.shell` nested inside `.col-full` would
   otherwise indent the content twice. */
body.collector-store .col-full .shell { max-width: none; padding-inline: 0; }

/*
 * The homepage is the exception: it is built from full-width bands.
 *
 * The hero's aurora and the trust strip's rule are backgrounds on the section
 * itself, and inside a 1240px padded container they stopped 36px short of the
 * window on both sides — the band read as a card floating on the page rather
 * than as the top of it. Here the container gives up its width and each band's
 * own `.shell` takes it back, so the colour runs edge to edge while the type
 * stays on the same 1240px measure as every other page.
 */
body.collector-store.home .site-content > .col-full { max-width: none; padding-inline: 0; }
body.collector-store.home .col-full .shell { max-width: var(--shell); padding-inline: var(--gutter); }
/* Every homepage band pads its own bottom, so the wrapper's does nothing but
   open a strip of empty page above the footer. */
body.collector-store.home .site-main { padding-bottom: 0; }

/* Storefront pushes the content 4.2em clear of the header, which against a
   coloured band reads as a stripe of missing page between the nav and the
   hero. Every template here sets its own top spacing.
   The selectors carry one class more than Storefront's own
   (`.home.page:not(…) .site-header` weighs four classes) because the plain
   `.site-header` reset three hundred lines down loses to them and did
   nothing. */
body.collector-store.home.page .site-header,
body.collector-store.home.blog .site-header,
body.collector-store.home.post-type-archive-product .site-header,
body.collector-store.no-wc-breadcrumb .site-header { margin-bottom: 0; }
body.collector-store .content-area,
body.collector-store .site-content .content-area {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
}
body.collector-store .widget-area { display: none; }

/* ---------------------------------------------------------- page prose */

/*
 * Support and legal pages are documents, not landing pages: someone arrives
 * looking for one answer — how long they have, what it costs, who to write
 * to. They were set at the full 1240px container, headings were larger than
 * the page title and sat the same distance from the text above them as from
 * their own, and every word was the same near-white. This section gives them
 * a measure, groups each heading with what it introduces, and separates the
 * three voices — title, section, prose — by weight and colour.
 *
 * Scoped away from WooCommerce's own pages: cart, checkout and account are
 * forms and tables inside the same `.entry-content`, and a fixed reading
 * column would crush them. The homepage is excluded for the same reason — it
 * is bands.
 *
 * The column runs the full width of the shell, ending level with the last
 * item in the header — asked for explicitly, after a narrower measure was
 * tried and rejected. At 1240px and --t-prose that is roughly 140 characters
 * a line, well past the 65–75 that reads easily, so the leading stays at 1.75
 * to keep the return sweep findable. If the lines ever feel long, the fix is
 * one value: put a `max-width` back on the two selectors below.
 */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-header,
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content { max-width: none; }

/* The light arrives with the title. Same aurora as the homepage hero, at a
   fraction of its strength and bleeding past the measure so the page reads as
   lit from off-frame rather than as a box with a gradient in it. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-header {
  position: relative;
  isolation: isolate;
  margin-bottom: var(--s-5);
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -7rem;
  right: -22%;
  bottom: -3rem;
  left: -8rem;
  pointer-events: none;
  background:
    radial-gradient(34% 58% at 16% 52%, var(--lumos-aurora-a), transparent 70%),
    radial-gradient(26% 48% at 46% 30%, var(--lumos-aurora-c), transparent 72%);
  /* Low enough to read as a tint on the ground rather than as a shape behind
     the title. Anything stronger and the type sits on a coloured patch. */
  opacity: 0.18;
}

body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content p,
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content li {
  color: var(--text-muted);
  font-size: var(--t-prose);
  line-height: 1.75;
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content p { margin: 0 0 var(--s-4); }
/* The one bright paragraph on the page: the answer most readers came for is
   in the first line, so it is the only prose set at the title's weight. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content > p:first-child {
  color: var(--text-body);
  font-size: var(--t-lead);
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content strong { color: var(--text-body); }

/* Each section opens on a rule that is lit at its left end and fades into the
   ordinary border colour — the shop's light entering the page from the
   margin. It carries the section break, so the heading needs no space of its
   own below and sits with the text it introduces. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content h2 {
  position: relative;
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4);
  font-size: var(--t-section);
  line-height: 1.2;
}
/* A page that opens straight on a section (the FAQ) needs no gap of its own:
   the title above already provides one. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content > h2:first-child { margin-top: var(--s-4); }
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) 2rem, var(--border) 8rem, var(--border) 100%);
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 1px;
  box-shadow: 0 0 14px 1px rgba(255, 217, 138, 0.5);
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content h3 {
  margin: var(--s-5) 0 var(--s-2);
  color: var(--text-body);
  font-size: var(--t-h3);
}

/* Markers in the mono voice the shop uses for anything countable. On a list
   of steps the numbers are the point, so they are the lit part. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content ul,
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.5rem;
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content li + li { margin-top: 0.4rem; }
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content li::marker { color: var(--accent); }
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content ol li::marker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-small);
}

/* Prose links only. `/novidades/` and `/promocoes/` are ordinary pages whose
   whole content is a WooCommerce shortcode, so every add-to-cart in the grid
   is an <a> inside .entry-content. This selector is (0,5,1) and the button
   rule is (0,2,1), which painted the label in the accent — on an accent
   background. Controls are excluded here rather than by inflating the button
   rule, because the button rule is right and this one was too greedy. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content a:not(.button):not(.btn):not(.wp-block-button__link) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.18s var(--ease);
}
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content a:not(.button):not(.btn):not(.wp-block-button__link):hover { text-decoration-color: var(--accent); }
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content > *:last-child { margin-bottom: 0; }

/* The reading lamp. `.lumos` is added by the script only where the pointer is
   fine and motion is welcome, so this rule paints nothing on a touch screen
   or under reduced motion. Wider and softer than the pool on a product shelf:
   the light should fall across the paragraph being read and spill into the
   margins, not outline the column like a card.
   Roughly half the alpha of the shelf light, and a wider radius. A card can
   take a bright pool because the light lands on its face; here it lands
   behind body text, where the same strength lifted the background close
   enough to the type to cost contrast. */
body.collector-store.page:not(.woocommerce-page):not(.home) .entry-content.lumos::before {
  /* `display` restated: Storefront uses this same pseudo-element as the top
     half of a clearfix and sets `display: table` on it. A positioned table box
     sizes to its (empty) content and ignores the right/bottom offsets, so the
     lamp was painting at 0×0 — lit, correct colour, no area. */
  display: block;
  inset: -2.5rem -7rem;
  border-radius: 0;
  background: radial-gradient(
    440px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 217, 138, 0.06),
    rgba(139, 108, 255, 0.04) 45%,
    transparent 72%
  );
}

/* The mono voice: set codes, references, quantities — the collector's own
   vocabulary, never used for running prose. */
.eyebrow,
.tag {
  margin: 0;
  color: var(--accent);
  font: 500 var(--t-micro) / 1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- buttons */

.btn,
body.collector-store .btn,
body.collector-store a.btn,
body.collector-store button.btn,
body.collector-store .button,
body.collector-store button.button,
body.collector-store input[type="submit"],
body.collector-store .woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 1.35rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font: 600 var(--t-small) / 1 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.btn:hover,
body.collector-store .btn:hover,
body.collector-store a.btn:hover,
body.collector-store .button:hover,
body.collector-store button.button:hover,
body.collector-store input[type="submit"]:hover,
body.collector-store .woocommerce-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}
.btn:active,
body.collector-store .button:active { transform: translateY(1px); }

/*
 * The secondary button sits on a very dark ground, so its outline is drawn
 * from the text colour rather than from a border token: a `--border-strong`
 * outline measured under 2:1 against the page and read as decoration rather
 * than as a control.
 */
.btn--ghost,
body.collector-store .btn--ghost,
body.collector-store a.btn--ghost,
body.collector-store .button.btn--ghost {
  background: rgba(240, 236, 255, 0.04);
  border-color: rgba(240, 236, 255, 0.32);
  color: var(--text-body);
}
.btn--ghost:hover,
body.collector-store .btn--ghost:hover,
body.collector-store a.btn--ghost:hover,
body.collector-store .button.btn--ghost:hover {
  background: var(--bg-surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

.btn--sm { min-height: 38px; padding: 0 0.9rem; }
.btn--wide { width: 100%; }

/* A sold-out card still needs a control in the same place as every other
   card, or the grid loses its rhythm. It just cannot be bought. */
.btn[disabled],
body.collector-store .btn[disabled],
body.collector-store .button[disabled] {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-faint);
  cursor: not-allowed;
}

.text-link {
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 236, 255, 0.28);
  padding-bottom: 2px;
  white-space: nowrap;
}
.text-link:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------- announcement */

.store-announce {
  background: linear-gradient(90deg, var(--c-night-2), #1a1140 45%, var(--c-night-2));
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 var(--t-micro) var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.store-announce .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  min-height: 34px;
  padding-block: 0.4rem;
}
.store-announce b { color: var(--accent); font-weight: 500; }
.store-announce a { color: var(--accent); text-decoration: none; }
.store-announce a:hover { text-decoration: underline; }
.store-announce__sep { color: var(--border-strong); }

/* --------------------------------------------------------------- header */

body.collector-store .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  background: rgba(10, 7, 24, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
}

.store-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.store-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.store-brand img { max-height: 34px; width: auto; }
.store-brand__mark {
  flex: none;
  align-self: center;
  /* The mark is the only thing on the page that glows at rest. It is the
     shop's name made visible, so it earns the exception. */
  filter: drop-shadow(0 0 10px rgba(255, 217, 138, 0.35));
  transition: filter 0.25s var(--ease);
}
.store-brand:hover .store-brand__mark { filter: drop-shadow(0 0 16px rgba(255, 217, 138, 0.55)); }

.store-brand__word {
  color: var(--text-body);
  background: linear-gradient(100deg, var(--c-ice) 30%, var(--c-lumos) 78%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Only make the text transparent where clipping is actually supported —
   otherwise the wordmark disappears. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .store-brand__word { color: transparent; }
}
.store-brand__sub {
  font: 500 var(--t-micro) var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/*
 * Search sits in the header at every breakpoint — never behind an icon.
 *
 * Storefront's own stylesheet sets `form { margin-bottom: 1.618em }`. That
 * fell on our search form too, growing the grid cell to 68px against the
 * header's 70px row and leaving the 44px field pinned to the top of it
 * instead of centred — the field looked shifted up against the logo and the
 * cart icon beside it. Killed at the source rather than nudged with a
 * transform, since a transform would have masked the real cause.
 */
.store-search { position: relative; }
.store-search form { margin: 0; }
.store-search__field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-band);
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.store-search__field:focus-within { border-color: var(--accent); background: var(--bg-surface); }
.store-search__icon { flex: none; color: var(--text-faint); }
body.collector-store .store-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-size: var(--t-small);
}
body.collector-store .store-search input[type="search"]::placeholder { color: var(--text-faint); }
body.collector-store .store-search input[type="search"]:focus { outline: none; }
.store-search__submit { flex: none; border: 0; background: none; padding: 0; color: var(--text-faint); cursor: pointer; }
.store-search__submit:hover { color: var(--text-body); }
.store-search__key {
  flex: none;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-faint);
  font: var(--t-micro) var(--font-mono);
}

.store-suggest {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  z-index: 10;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  color: var(--text-body);
}
.store-suggest:empty,
.store-suggest[hidden] { display: none; }
.store-suggest li > * {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-body);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.store-suggest li > *:hover,
.store-suggest li[aria-selected="true"] > * { background: var(--bg-surface-2); }
.store-suggest img { width: 40px; height: 40px; object-fit: contain; background: var(--bg-media); border-radius: 4px; }
.store-suggest small { display: block; color: var(--text-faint); font: var(--t-micro) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.store-header__tools { display: flex; align-items: center; gap: var(--s-1); }

.store-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding-inline: 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: 600 var(--t-small) var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.store-icon-btn:hover { color: var(--text-body); background: var(--bg-surface); }
.store-icon-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text-on-accent);
  font: 700 var(--t-micro) var(--font-body);
}
.store-icon-btn__total { font: var(--t-small) var(--font-mono); color: var(--text-body); }

/* ------------------------------------------------- language switcher
   Four bare codes in a row said nothing: "ES" is not a word, and the shop
   sells Japanese-printed cards to people browsing in Portuguese, so the
   control has to state what it changes — and what it does not. */

.store-lang { position: relative; }
.store-lang__btn { gap: 0.45rem; }
.store-lang__btn[aria-expanded="true"] { color: var(--text-body); background: var(--bg-surface); }
.store-lang__flag {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1;
}
.store-lang__code { font: 700 var(--t-small) var(--font-mono); letter-spacing: 0.06em; }
.store-lang__btn .store-lang__chevron { transition: transform 0.18s var(--ease); }
.store-lang__btn[aria-expanded="true"] .store-lang__chevron { transform: rotate(180deg); }

.store-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 240px;
  padding: var(--s-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
}
.store-lang__menu[hidden] { display: none; }
.store-lang__menu ul { margin: 0; padding: 0; list-style: none; }
.store-lang__menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--s-2) 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--t-small);
  text-decoration: none;
}
.store-lang__menu a:hover { background: var(--bg-surface-2); color: var(--text-body); }
.store-lang__menu a[aria-current="true"] { color: var(--text-body); }
.store-lang__menu b { font-weight: 500; }
.store-lang__menu small { margin-left: auto; color: var(--text-faint); font: var(--t-micro) var(--font-mono); letter-spacing: 0.1em; }
.store-lang__menu a[aria-current="true"] small { color: var(--accent); }
.store-lang__note {
  margin: var(--s-1) 0.55rem 0.25rem;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-body);
}

/* ------------------------------------------------------------------ nav
   Top level is the game. A collector shops "Pokémon, then set, then product
   type" — and product types are not shared: an Illumineer's Trove exists
   only in Lorcana, a Commander Deck only in Magic. One flat menu would lie. */

.store-nav {
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg-page);
}
.store-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.store-nav__list::-webkit-scrollbar { display: none; }

/* Storefront prints `ul.menu li a { color: #333 }` as inline customizer CSS,
   which outranks a plain `.store-nav a`. Matching its shape wins the cascade
   without resorting to !important. */
body.collector-store .store-nav__list > li > a,
body.collector-store .store-nav__list > li > button,
body.collector-store .store-nav ul.menu li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.8rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: 600 var(--t-small) var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s var(--ease);
}
body.collector-store .store-nav__list > li > a:hover,
body.collector-store .store-nav__list > li > button:hover,
body.collector-store .store-nav__list > li.is-open > button,
body.collector-store .store-nav ul.menu li a:hover { color: var(--text-body); }

/* The lit rule under a game. It is drawn on every item and revealed by a
   scale, so hovering along the row wipes the light sideways instead of
   flicking a bar on and off; an open or current item holds it lit. */
body.collector-store .store-nav__list > li > a::after,
body.collector-store .store-nav__list > li > button::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px 0 rgba(255, 217, 138, 0.5);
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
body.collector-store .store-nav__list > li > a:hover::after,
body.collector-store .store-nav__list > li > button:hover::after,
body.collector-store .store-nav__list > li > a:focus-visible::after,
body.collector-store .store-nav__list > li > button:focus-visible::after { opacity: 0.55; transform: none; }
body.collector-store .store-nav__list > li.is-open > button::after,
body.collector-store .store-nav__list > li.current-menu-item > a::after { opacity: 1; transform: none; }
@media (max-width: 1240px) {
  body.collector-store .store-nav__list > li > a::after,
  body.collector-store .store-nav__list > li > button::after { left: 0.5rem; right: 0.5rem; }
}
.store-nav__chevron { opacity: 0.65; transition: transform 0.18s var(--ease); }
.is-open > button .store-nav__chevron { transform: rotate(180deg); opacity: 1; }

/* The call to action must never be the thing that scrolls out of sight, so
   the games side gives up the space first. */
.store-nav__rest { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-left: var(--s-4); flex: none; }

@media (max-width: 1240px) {
  body.collector-store .store-nav__list > li > a,
  body.collector-store .store-nav__list > li > button { padding-inline: 0.5rem; font-size: 0.78rem; }
  .store-nav__rest a { padding-inline: 0.45rem; font-size: 0.78rem; }
  .store-nav__rest { padding-left: var(--s-2); }
}
body.collector-store .store-nav__sell {
  margin-left: var(--s-2);
  padding: 0.4rem var(--s-4) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 999px;
  color: var(--accent) !important;
}
body.collector-store .store-nav__sell:hover { background: var(--accent); color: var(--text-on-accent) !important; }
/* The pill is already lit; a rule under it would read as a second control. */
body.collector-store .store-nav__list > li > a.store-nav__sell::after { content: none; }

/* mega panel — dressed like the footer, because it is the same job: a column
   of destinations under a tracked label. Warm label, cool link, and a small
   light that comes on in a gutter the link already reserves. */
.store-mega {
  --mega-gutter: 0.95rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* The panel drops out of the lit rule above it: one warm bloom at the top
     edge, fading into the page before the links start. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 217, 138, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-band), var(--bg-page));
  box-shadow: 0 30px 60px -30px #000;
}
.store-mega[hidden] { display: none; }
.store-mega .shell {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 0.72fr)) 1.6fr;
  gap: var(--s-6);
  padding-block: 1.75rem var(--s-6);
}
/* `body.collector-store` on the selector: the theme's own heading rule is
   `body.collector-store h3`, which outranks a plain `.store-mega h3` and left
   the labels reading as headings rather than as the footer's warm markers. */
body.collector-store .store-mega h3 {
  margin-bottom: var(--s-3);
  padding-left: var(--mega-gutter);
  color: var(--accent);
  font: 700 var(--t-label) var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.store-mega ul { margin: 0; padding: 0; list-style: none; }
.store-mega li + li { margin-top: 0; }
/* Padding, not margins: the whole row is the target, and a long set name that
   wraps keeps the rhythm. */
.store-mega li a {
  position: relative;
  display: block;
  padding: 0.36rem 0 0.36rem var(--mega-gutter);
  color: var(--text-muted);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.store-mega li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 1px rgba(255, 217, 138, 0.55);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.store-mega li a:hover,
.store-mega li a:focus-visible { color: var(--accent); }
.store-mega li a:hover::before,
.store-mega li a:focus-visible::before { opacity: 1; transform: none; }
.store-mega__empty {
  padding-left: var(--mega-gutter);
  color: var(--text-faint);
  font-size: var(--t-small);
}
.store-mega__all {
  display: inline-block;
  margin-top: 0.85rem;
  margin-left: var(--mega-gutter);
  color: var(--accent);
  font: var(--t-micro) var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.18s var(--ease);
}
.store-mega__all:hover { opacity: 1; text-decoration: underline; }
.store-mega__feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.store-mega__feat .product-card { padding: 0; border: 0; background: none; gap: var(--s-2); }
.store-mega__feat .product-card__title { font-size: var(--t-small); }
.store-mega__feat .slab__label { font-size: 0.5625rem; }

.store-burger { display: none; }

/* ------------------------------------------------ signature: the slab
   A dark acrylic frame with a label strip carrying printed language and set
   reference, the way a graded card is held. Hover tilts it a degree and
   sweeps the holographic sheen across. Nowhere else on the site. */

.slab {
  position: relative;
  display: block;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--c-raised-2), var(--c-night-2) 62%);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.slab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lumos-sheen);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.slab__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.3rem 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 var(--t-micro) var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slab__label b { color: var(--text-body); font-weight: 700; }
.slab__window {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-top: 9px;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 90% at 50% 12%, #26324f, var(--bg-media) 72%);
  overflow: hidden;
}
.slab__window img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slab__flags {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font: 700 var(--t-micro) var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--language { border-color: var(--text-body); background: var(--text-body); color: var(--c-night); }
.badge--ok { border-color: rgba(69, 224, 164, 0.45); background: rgba(69, 224, 164, 0.12); color: var(--state-ok); }
.badge--warn { border-color: var(--accent-hover); background: rgba(255, 217, 138, 0.14); color: var(--accent); }
.badge--alert { border-color: rgba(255, 107, 138, 0.5); background: rgba(255, 107, 138, 0.12); color: var(--state-alert); }
.badge--sale { border-color: var(--state-alert); background: var(--state-alert); color: #2a0410; }
.badge--grade { border-color: var(--text-body); background: var(--text-body); color: var(--c-night); }

/* Sold out reads at a glance in the grid: the frame goes cold, the window is
   struck through, and the buy control is replaced rather than hidden. */
.product-card--out .slab { filter: saturate(0.25) brightness(0.72); }
.product-card--out .slab__window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(10, 7, 24, 0.6) 0 12px, rgba(10, 7, 24, 0.34) 12px 24px);
}
.slab__soldout {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--state-alert);
  border-radius: 6px;
  background: rgba(10, 7, 24, 0.88);
  color: var(--state-alert);
  font: 700 var(--t-small) var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- product cards */

body.collector-store ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Rows breathe more than columns: a card's buy button sat 16px from the next
     row's frame, which read as one continuous block instead of a grid. */
  gap: var(--s-7) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.collector-store ul.products::before,
body.collector-store ul.products::after { content: none; }

/*
 * Storefront lays the loop out with percentage widths and floats from
 * `.site-main ul.products.columns-N li.product`, which outranks a plain
 * `ul.products li.product` reset. The column classes are enumerated here so
 * the grid — not the float system — decides the track width.
 */
body.collector-store ul.products li.product,
body.collector-store .site-main ul.products li.product,
body.collector-store .site-main ul.products.columns-1 li.product,
body.collector-store .site-main ul.products.columns-2 li.product,
body.collector-store .site-main ul.products.columns-3 li.product,
body.collector-store .site-main ul.products.columns-4 li.product,
body.collector-store .site-main ul.products.columns-5 li.product,
body.collector-store .site-main ul.products.columns-6 li.product {
  float: none;
  clear: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  /* Storefront centres the loop cell. Centred text put the set line, the title
     and the price each on their own optical axis, and pushed the price right
     whenever the "VAT included" note under it was wider than the amount. */
  text-align: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* The card lifts and the frame lights up: the halo is the only glow in the
   grid, and it lands on exactly the one card being considered. */
.product-card:hover .slab {
  border-color: transparent;
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: var(--lumos-halo-cool), var(--shadow-card);
}
.product-card:hover .slab::after { transform: translateX(120%); }
.product-card--out:hover .slab { transform: none; }

.product-card__body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
/*
 * Two lines, then ellipsis. A set name like "OP-09 Emperors in the New World ·
 * Selado · Primeira edição" ran to three lines and pushed that card's title,
 * price and button out of line with every other card in the row.
 */
.product-card__set {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  color: var(--text-faint);
  font: var(--t-micro) / 1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Two lines of title reserved, so the price row starts at the same height on
   every card whether the name is short or long. */
body.collector-store .product-card__title,
body.collector-store ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.5em;
}
/* The VAT note is absent on a sold-out card; reserving its line keeps the
   buy control on the same baseline across the row. */
.product-card__foot { min-height: 3.1rem; align-items: flex-start; }
body.collector-store .product-card__title,
body.collector-store ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  color: var(--text-body);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.product-card:hover .product-card__title { color: var(--accent); }

.product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
}
body.collector-store ul.products li.product .price,
.product-card .price {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.collector-store ul.products li.product .price del,
.product-card .price del {
  display: block;
  color: var(--text-faint);
  font-weight: 400;
  font-size: var(--t-small);
}
body.collector-store ul.products li.product .price ins,
.product-card .price ins { text-decoration: none; color: var(--text-body); }
.product-card__vat {
  display: block;
  color: var(--text-faint);
  font: var(--t-micro) var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Specificity has to match `body.collector-store .button`, which otherwise
   keeps the add-to-cart at 44px while the sold-out link stays at 38px — the
   taller control then starts above the rest of the row. */
body.collector-store .product-card .button,
body.collector-store .product-card .btn,
body.collector-store ul.products li.product .button,
body.collector-store ul.products li.product .btn {
  width: 100%;
  min-height: 40px;
  /* Storefront hangs a 0.19em bottom margin off the add-to-cart, which lifted
     it ~3px above the "See details" link on the sold-out cards beside it. */
  margin: 0;
  padding-inline: 0.9rem;
}

/* ----------------------------------------------------------------- hero */

/* ------------------------------------------------------- effect: aurora
   A slow drift of coloured light behind the hero. Two layers on long,
   offset durations so the loop never lines up and never reads as a GIF.
   Painted on a pseudo-element, so `prefers-reduced-motion` can stop the
   movement while keeping the colour. */

.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  /* The light is painted on the element itself as well as on the drifting
     layers above it, so the hero still reads as lit in a browser that skips
     the animation — or with reduced motion, where the drift is stopped. */
  background:
    radial-gradient(46% 52% at 20% 26%, var(--lumos-aurora-a), transparent 70%),
    radial-gradient(40% 46% at 78% 16%, var(--lumos-aurora-c), transparent 72%),
    radial-gradient(46% 50% at 66% 82%, var(--lumos-aurora-b), transparent 74%),
    var(--bg-page);
  overflow: hidden;
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero::before {
  background:
    radial-gradient(38% 46% at 22% 32%, var(--lumos-aurora-a), transparent 70%),
    radial-gradient(34% 40% at 74% 20%, var(--lumos-aurora-c), transparent 70%);
  animation: lumos-drift-a 34s ease-in-out infinite alternate;
}
.hero::after {
  background: radial-gradient(40% 44% at 68% 74%, var(--lumos-aurora-b), transparent 72%);
  animation: lumos-drift-b 46s ease-in-out infinite alternate;
}

@keyframes lumos-drift-a {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
@keyframes lumos-drift-b {
  from { transform: translate3d(3%, 3%, 0) scale(1.08); }
  to   { transform: translate3d(-5%, -4%, 0) scale(1); }
}

/* -------------------------------------------------------- effect: lumos
   A light that follows the pointer across a shelf of products. The shelf
   sets `--lx`/`--ly` from JavaScript; with JavaScript off, or before the
   first movement, the light simply never appears and nothing is lost.

   ponytail: one rAF-throttled listener per shelf, CSS does the drawing. */

.lumos { position: relative; }
.lumos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    260px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 217, 138, 0.12),
    rgba(139, 108, 255, 0.08) 45%,
    transparent 70%
  );
}
.lumos[data-lit="true"]::before { opacity: 1; }
.lumos > * { position: relative; z-index: 1; }
.hero .shell { position: relative; z-index: 1; }
/* The copy leads and the product answers it, so the columns are not equal:
   a 380px slab beside a full-width column of type made the hero a screen and
   a half tall and pushed the first shelf of stock below the fold. */
.hero .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
}
.hero__copy { max-width: 38rem; }
.hero__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state-ok);
  box-shadow: 0 0 0 4px rgba(69, 224, 164, 0.2);
}
.hero h1 { margin-bottom: 0.9rem; font-size: var(--t-h1); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { margin: 0; max-width: 46ch; color: var(--text-muted); font-size: var(--t-lead); }

/* The drop is the event in this market, and the date already lives in
   `_store_release_date`. Counting to it is data, not decoration — so the date
   it counts to is stated on the same panel, not left to be inferred from four
   loose numbers. */
.hero__release {
  display: inline-flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.5rem 0;
  padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(10, 7, 24, 0.42);
  backdrop-filter: blur(6px);
}
.hero__release-date {
  margin: 0;
  color: var(--text-faint);
  font: 500 var(--t-micro) var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__release-date b { color: var(--accent); font-weight: 700; }
.hero__count { display: flex; gap: 0.4rem; }
.hero__count div {
  min-width: 58px;
  padding: 0.4rem 0.35rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-band));
  text-align: center;
}
.hero__count b {
  display: block;
  color: var(--text-body);
  font: 700 1.25rem / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hero__count span {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-faint);
  font: var(--t-micro) var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The lead sits at margin 0 and `.hero__release` carried the whole gap in its
   own 1.5rem. On a hero with no upcoming release the countdown block is absent
   and the buttons rose flush against the description. The margin belongs to
   the actions, which are always there; against the release block the two
   collapse to one 1.5rem, so the spaced hero is unchanged. */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.hero__note { margin: 1rem 0 0; color: var(--text-faint); font-size: var(--t-small); }

.hero__showcase { width: 100%; max-width: 320px; margin-inline: auto; }
.hero__showcase .slab__window { aspect-ratio: 4 / 4.6; }

/* ------------------------------------------------------------ trust bar */

.trust-bar { border-bottom: 1px solid var(--border); background: var(--bg-band); }
/*
 * One row, four claims, two lines of type in each.
 *
 * The rows are shared: every title sits in the strip's first line and every
 * detail in the second, through `subgrid` below, so a claim can never fall
 * out of step with its neighbours. The detail lines are written short enough
 * to fit a quarter of the shell in all four languages — see the `.po` files —
 * which is what keeps this to two lines of type rather than three.
 */
.trust-bar ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  /* No column gap: each cell pads itself, so the divider sits the same
     distance from the text on both sides of it. */
  column-gap: 0;
  row-gap: 0.2rem;
  /* `margin-block`, never the `margin` shorthand: this `ul` is also the
     `.shell`, and a blanket `margin: 0` wipes the `margin-inline: auto` that
     centres it. On the homepage, where the band runs edge to edge and the
     shell does the centring itself, that pinned the whole strip to the left
     of the window. */
  margin-block: 0;
  padding-block: var(--s-5);
  list-style: none;
}
/* Four claims in a row read as one grey block without a rule between them;
   the divider is what makes them four separate facts at a glance.

   Each claim is centred in its own column. Flushed left they were four
   ragged left edges of different lengths under a hero whose type is already
   left-aligned, and the eye read them as one broken paragraph rather than as
   four promises. */
.trust-bar li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0.2rem;
  padding-inline: var(--s-4);
  text-align: center;
}
.trust-bar li + li { border-left: 1px solid var(--border); }
.trust-bar__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
}
.trust-bar svg { flex: none; color: var(--state-ok); }
.trust-bar strong { font-size: var(--t-small); font-weight: 600; }
/* `balance` rather than a character cap: a fixed max-width left French and
   Portuguese with one word alone on the second line. */
.trust-bar span {
  display: block;
  color: var(--text-faint);
  font-size: var(--t-small);
  line-height: 1.45;
  text-wrap: balance;
}

/* -------------------------------------------------------------- section */

.section { padding-block: var(--s-8); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  /* `end`, not `baseline`: baseline would align the side link to the eyebrow
     above the heading, leaving it floating well clear of the title. */
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.section__head .eyebrow { margin-bottom: 0.4rem; }
.section__head h2 { font-size: var(--t-h2); }
/* A heading and a sentence, where a sentence earns its place. The eyebrow
   above every heading said the same thing twice in two type styles. */
.section__lead {
  max-width: 60ch;
  margin: calc(var(--s-6) * -1 + 0.35rem) 0 var(--s-5);
  color: var(--text-muted);
  font-size: var(--t-small);
}

/* A rail, not a grid, where the row is a browse: it says "there is more
   sideways" without a second page of vertical scrolling. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 260px);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-5);
  padding-block: var(--s-3);
  padding-inline: var(--s-5);
  margin-inline: calc(var(--s-5) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rail > * { scroll-snap-align: start; }

/* The `[products]` shortcode renders its own `ul.products`, so the rail is
   applied to that list rather than wrapping it in a second scroller. */
.rail-wrap ul.products,
body.collector-store .rail-wrap ul.products {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(215px, 260px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-5);
  padding-block: var(--s-3);
  padding-inline: var(--s-5);
  margin-inline: calc(var(--s-5) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rail-wrap ul.products > li { scroll-snap-align: start; }

/* --------------------------------------------------------- game tiles */

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); }
.game-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15rem;
  min-height: 150px;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--bg-surface), var(--bg-band));
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.game-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: radial-gradient(80% 70% at 82% 8%, hsl(var(--tile-hue, 268) 70% 45% / 0.5), transparent 62%);
}
.game-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.game-tile > * { position: relative; }
/* A game with no stock yet still belongs on the shelf — the shop means to
   carry it — but it should not look as buyable as the ones that are. */
.game-tile--soon { opacity: 0.62; }
.game-tile--soon::before { opacity: 0.2; }
.game-tile--soon .tag { color: var(--text-faint); }
.game-tile--soon:hover { opacity: 1; }
.game-tile strong {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: 1.15rem;
  font-weight: 700;
}
.game-tile span { color: var(--text-muted); font-size: var(--t-small); }
.game-tile .tag { margin-top: var(--s-2); }

/* ------------------------------------------------------ language tiles */

.langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.lang-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--bg-surface), var(--bg-band));
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lang-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.lang-tile__code {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  color: rgba(240, 236, 255, 0.06);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.lang-tile strong {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110;
  font-size: 1.3rem;
  font-weight: 700;
}
.lang-tile span { max-width: 30ch; color: var(--text-muted); font-size: var(--t-small); }
.lang-tile .tag { margin-top: 0.6rem; }

/* -------------------------------------------------------- pre-orders */

.preorders { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.preorder-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-band);
  transition: border-color 0.18s var(--ease);
}
.preorder-row:hover { border-color: var(--border-strong); }
.preorder-row .slab { padding: 5px; }
.preorder-row .slab__label { display: none; }
.preorder-row .slab__window { margin-top: 0; }
.preorder-row h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: 0.9rem;
  font-weight: 600;
}
.preorder-row h3 a { text-decoration: none; }
.preorder-row h3 a:hover { color: var(--accent); }
.preorder-row p { margin: 0.25rem 0 0; color: var(--text-faint); font: var(--t-micro) var(--font-mono); letter-spacing: 0.06em; }
.preorder-row p b { color: var(--state-ok); font-weight: 500; }
.preorder-row__price { font: 700 0.95rem var(--font-mono); color: var(--text-body); }

/* --------------------------------------------------- single product */

body.collector-store.single-product div.product {
  padding-top: var(--s-6);
  /* WooCommerce clips this box to contain the gallery/summary floats. The
     layout is a grid here and the floats are already gone, and the clip was
     shaving the focus ring off anything flush with the left edge — the first
     product tab, for one. */
  overflow: visible;
}
body.collector-store.single-product div.product::before,
body.collector-store.single-product div.product::after { content: none; }
/* Gallery and summary only. The theme opens this wrapper around the two of
   them so the sticky gallery below stops where the summary ends, instead of
   riding on over the tabs and the related products WooCommerce also prints
   inside `div.product`. */
body.collector-store.single-product .product-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
body.collector-store.single-product .woocommerce-product-gallery,
body.collector-store.single-product .summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
/*
 * Both columns are as tall as the taller one by default, and the summary is
 * the taller one — which left a square of empty page under the image. Held to
 * their own height, and the image pinned while the column beside it scrolls,
 * so the card stays in view down to the description instead of leaving a hole
 * behind it. `align-self: start` is what makes `sticky` work here: a stretched
 * grid item is already as tall as its track and has nothing to stick within.
 */
body.collector-store.single-product .product-columns .woocommerce-product-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  align-self: start;
}
body.collector-store.single-product .summary { align-self: start; }
@media (max-width: 767px) {
  body.collector-store.single-product .product-columns .woocommerce-product-gallery { position: static; }
}
body.collector-store .woocommerce-product-gallery__image {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 12%, #26324f, var(--bg-media) 72%);
  overflow: hidden;
}
body.collector-store .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
body.collector-store.single-product .product_title { font-size: var(--t-h2); margin-bottom: var(--s-3); }
body.collector-store.single-product .summary .price {
  color: var(--text-body);
  font: 700 1.6rem var(--font-mono);
  font-variant-numeric: tabular-nums;
}
body.collector-store.single-product .summary .price del { color: var(--text-faint); font-size: 1rem; font-weight: 400; }
body.collector-store.single-product .summary .price ins { text-decoration: none; }

.product-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-band);
}
.product-facts dt {
  color: var(--text-faint);
  font: var(--t-micro) var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-facts dd { margin: 0.2rem 0 0; color: var(--text-body); font-size: var(--t-small); font-weight: 600; }

.product-purchase-notes { display: grid; gap: var(--s-2); margin-block: var(--s-4); }
.product-purchase-notes p { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; color: var(--text-muted); font-size: var(--t-small); }
.product-purchase-notes svg { flex: none; margin-top: 3px; color: var(--state-ok); }

/* The cap is spent. Said where the buy control used to be, because a page that
   simply has no button reads as broken. */
.store-limit-reached {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--state-alert);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  color: var(--text-muted);
  font-size: var(--t-small);
}

/* Storefront floats the tab strip into a left column and the panel into a
   right one, which left half the width of every product page empty. The tabs
   are a strip above their panel, full width. */
body.collector-store .woocommerce-tabs {
  padding-top: var(--s-7);
  /* Storefront adds 2.6em below the panel on top of the related-products
     padding, which left a dead band under a one-line description. The
     padding above each section already separates the two. */
  padding-bottom: 0;
  /* Storefront clips this box to contain its own floats — floats this theme
     already removed — and the clip cut the focus ring off the first tab, which
     sits flush with the left edge. */
  overflow: visible;
}
body.collector-store .woocommerce-tabs .panel,
body.collector-store .woocommerce-tabs .wc-tab {
  float: none;
  width: auto;
  max-width: 70ch;
  margin: 0;
  padding: 0;
}
body.collector-store .woocommerce-tabs .panel > h2:first-child { display: none; }
/* The 70ch measure is there to keep the description readable. The attribute
   table is not prose: held to 70ch it stopped short of the rule above it. */
body.collector-store .woocommerce-tabs .woocommerce-Tabs-panel--additional_information { max-width: none; }
body.collector-store .woocommerce-tabs ul.tabs {
  float: none;
  width: auto;
  display: flex;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding: 0 0 var(--s-2);
  border-bottom: 1px solid var(--border);
  list-style: none;
}
body.collector-store .woocommerce-tabs ul.tabs::before { content: none; }
body.collector-store .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
body.collector-store .woocommerce-tabs ul.tabs li::before,
body.collector-store .woocommerce-tabs ul.tabs li::after { content: none; }
body.collector-store .woocommerce-tabs ul.tabs li a {
  padding: 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
}
body.collector-store .woocommerce-tabs ul.tabs li.active a { color: var(--accent); }
body.collector-store .related.products,
body.collector-store .up-sells { padding-top: var(--s-6); }

body.collector-store .quantity input[type="number"],
body.collector-store input[type="text"],
body.collector-store input[type="email"],
body.collector-store input[type="tel"],
body.collector-store input[type="password"],
body.collector-store input[type="number"],
/* Storefront fills its own search widget #f2f2f2 — the 404 page and the shop
   sidebar were showing a light box on the dark ground. The header's own
   search is dressed above and outranks this by its extra class. */
body.collector-store input[type="search"],
body.collector-store textarea,
body.collector-store select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-band);
  color: var(--text-body);
  font: inherit;
  font-size: var(--t-small);
}
/*
 * `appearance: none` plus one drawn chevron — for the select alone. Sharing the
 * box rule above put that chevron, and the 2.4rem of right padding reserved for
 * it, on every text field: the login form read as two dropdowns.
 */
body.collector-store select {
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
body.collector-store select option { background: var(--bg-band); color: var(--text-body); }
body.collector-store textarea { padding-block: var(--s-2); }
body.collector-store input:focus,
body.collector-store select:focus,
body.collector-store textarea:focus { border-color: var(--accent); outline: none; }

/* ------------------------------------------------------ quantity stepper
 * One pill holding − [n] +, sized to sit level with the add-to-cart beside
 * it. The buttons are painted by storefront.js; the box below still reads as
 * a field without them.
 */
body.collector-store form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: 0;
}
/* WooCommerce's clearfix pseudo-elements are flex items here — two empty
   boxes taking a gap each, which pushed the stepper 12px right of the price,
   the facts and everything else in the column. Its own selector carries
   `div.product`, so this one has to as well to outrank it. */
body.collector-store div.product form.cart::before,
body.collector-store div.product form.cart::after { content: none; }
/* Storefront's own 0.875em to the right of the field, on top of the gap. */
body.collector-store div.product form.cart .quantity { margin: 0; }
/* One unit left to buy and WooCommerce renders the field as a hidden input —
   an empty box that still claimed its flex gap and pushed the button off the
   column's left edge. */
body.collector-store div.product form.cart .quantity:not(:has(input[type="number"])) { display: none; }
/* Variation forms stack their own table above the row — it is not a flex
   item beside the button. */
body.collector-store form.cart.variations_form { display: block; }
body.collector-store form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
body.collector-store form.cart .single_add_to_cart_button { margin: 0; min-height: 46px; }
body.collector-store .qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  transition: border-color 0.18s var(--ease);
}
body.collector-store .qty-stepper:focus-within { border-color: var(--accent); }
body.collector-store .qty-stepper input.qty {
  width: 3.5ch;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-body);
  text-align: center;
  font: 700 1rem var(--font-mono);
  font-variant-numeric: tabular-nums;
  /* The drawn steps replace the browser's own, which otherwise sit on top of
     the digits and re-appear on hover. */
  -moz-appearance: textfield;
}
body.collector-store .qty-stepper input.qty::-webkit-outer-spin-button,
body.collector-store .qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.collector-store .qty-stepper input.qty:focus { border-color: transparent; outline: none; }
body.collector-store .qty-stepper__step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  font: 400 1.15rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
body.collector-store .qty-stepper__step:hover:not(:disabled) {
  background: var(--bg-surface-2);
  color: var(--accent);
}
body.collector-store .qty-stepper__step:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
body.collector-store .qty-stepper__step:disabled { opacity: 0.3; cursor: default; }

/* The cart page lines its quantity column up with the price column; the pill
   is wider than the bare field was, so it gets the room. */
body.collector-store .woocommerce-cart-form td.product-quantity { min-width: 140px; }

/* Storefront's sticky buy bar. Kept — on a long product page it is genuinely
   useful — but dressed in this theme's colours. */
body.collector-store .storefront-sticky-add-to-cart {
  background: rgba(10, 7, 24, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  box-shadow: var(--shadow-pop);
}
body.collector-store .storefront-sticky-add-to-cart__content-title { color: var(--text-muted); }
body.collector-store .storefront-sticky-add-to-cart__content-price { color: var(--text-body); font-family: var(--font-mono); }
body.collector-store .storefront-sticky-add-to-cart img { border-radius: 6px; background: var(--bg-media); }

/* ------------------------------------------------------- shop archive */

/* The trail belongs to the title, not to the header above it. Storefront pads
   the wrapper 1.3em top and bottom and then adds a 4.2em bottom margin — ~97px
   of dead space between "Início / Pokémon" and the heading it introduces. */
body.collector-store .storefront-breadcrumb {
  padding: var(--s-4) 0 0;
  margin-bottom: 0;
}
body.collector-store .woocommerce-breadcrumb {
  margin: 0;
  padding: 0;
}

/* Three names for the same band: the shop archive, Storefront's page header and
   the plain page/post header used by Figuras, Novidades and Promoções. All get
   one rhythm — clear of the breadcrumb, clear of the content below. */
body.collector-store .woocommerce-products-header,
body.collector-store .page-header,
body.collector-store .hentry > .entry-header { padding: var(--s-6) 0 0; margin-bottom: var(--s-6); }
body.collector-store .woocommerce-products-header__title,
body.collector-store .entry-title { font-size: var(--t-h2); }
body.collector-store .term-description { color: var(--text-muted); font-size: var(--t-small); max-width: 65ch; }

/*
 * The sort control and the result count are one row, aligned on their centres.
 * Storefront floats them, which left the count riding high beside a 44px-tall
 * select and a ragged gap above the grid.
 */
body.collector-store .woocommerce-notices-wrapper + .woocommerce-result-count,
body.collector-store .woocommerce-result-count,
body.collector-store .woocommerce-ordering {
  float: none;
  margin: 0;
}
body.collector-store .storefront-sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-block: var(--s-4) var(--s-6);
}
body.collector-store .woocommerce-result-count {
  order: 2;
  color: var(--text-muted);
  font-size: var(--t-small);
}
body.collector-store .woocommerce-ordering { order: 1; }
body.collector-store .storefront-sorting::before,
body.collector-store .storefront-sorting::after { content: none; }
/* WooCommerce prints an empty notices wrapper inside this row. As a zero-width
   flex child it still claimed a column gap, indenting the sort control 24px
   past the title and the grid below it. */
body.collector-store .storefront-sorting .woocommerce-notices-wrapper:empty { display: none; }


/*
 * "In stock only" — a filter chip sharing the row with the sort control.
 * A link, not a form: no JavaScript, and the filtered view has its own URL.
 */
body.collector-store .store-stock-filter {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  color: var(--text-muted);
  font-size: var(--t-small);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
body.collector-store .store-stock-filter svg { opacity: 0.35; }
body.collector-store .store-stock-filter:hover { border-color: var(--border-strong); color: var(--text-body); }
body.collector-store .store-stock-filter.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}
body.collector-store .store-stock-filter.is-on svg { opacity: 1; }
/* Standing alone above the empty state, the chip needs its own gap. */
body.collector-store .store-stock-filter + .store-empty { margin-top: var(--s-4); }
/* A category with nothing in it yet. Not an error state — a shelf being built. */
.store-empty {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  max-width: 58ch;
  padding: var(--s-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-band);
}
.store-empty h2 { font-size: var(--t-h3); }
.store-empty p { margin: 0; color: var(--text-muted); font-size: var(--t-small); }
.store-empty p:last-child { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

body.collector-store .woocommerce-pagination ul {
  display: flex;
  gap: var(--s-1);
  border: 0;
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
}
body.collector-store .woocommerce-pagination li { border: 0; margin: 0; }
body.collector-store .woocommerce-pagination a,
body.collector-store .woocommerce-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  color: var(--text-muted);
  font: 600 var(--t-small) var(--font-mono);
  text-decoration: none;
}
body.collector-store .woocommerce-pagination .current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------- cart drawer */

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 7, 14, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.cart-scrim[data-open="true"] { opacity: 1; }
.cart-scrim[hidden] { display: none; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  border-left: 1px solid var(--border);
  background: var(--bg-band);
  transform: translateX(100%);
  transition: transform 0.25s var(--ease);
}
.cart-drawer[data-open="true"] { transform: none; }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.cart-drawer__head h2 { font-size: var(--t-h3); }
/* An inline <svg> sits on the text baseline, so a button wrapping one is taller
   than the icon by the descender gap and the glyph rides high inside the focus
   ring. Every other icon button in the theme is already a flex box; these two
   were not. */
.cart-drawer__close,
.store-search__submit { display: grid; place-items: center; }
.cart-drawer__close { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: var(--s-1); }
.cart-drawer__close:hover { color: var(--text-body); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); }
.cart-drawer__foot {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
}
/*
 * WooCommerce's mini cart is a float layout: the thumbnail floats right, the
 * remove link is absolutely positioned, and the name wraps under both. Laid
 * out as a three-column grid instead — remove, details, thumbnail — so nothing
 * overlaps and the row reads left to right like the rest of the shop.
 */
body.collector-store .cart-drawer ul.cart_list { margin: 0; padding: 0; list-style: none; }
body.collector-store .cart-drawer ul.cart_list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 52px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
body.collector-store .cart-drawer ul.cart_list li > a:not(.remove) { grid-column: 2; }
body.collector-store .cart-drawer ul.cart_list li .quantity { grid-column: 2; }
body.collector-store .cart-drawer ul.cart_list img {
  grid-column: 3;
  grid-row: 1 / span 2;
  float: none;
  width: 52px;
  height: 52px;
  margin: 0;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-media);
}
body.collector-store .cart-drawer ul.cart_list li a.remove {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: static;
  margin: 0;
}
body.collector-store .cart-drawer ul.cart_list a { color: var(--text-body); text-decoration: none; font-weight: 600; }
body.collector-store .cart-drawer ul.cart_list a:hover { color: var(--accent); }
body.collector-store .cart-drawer .quantity { color: var(--text-muted); font: var(--t-small) var(--font-mono); }
body.collector-store .cart-drawer .mini-qty { display: flex; align-items: center; gap: var(--s-2); }
body.collector-store .cart-drawer .mini-qty__step {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-body);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
body.collector-store .cart-drawer .mini-qty__step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
body.collector-store .cart-drawer .mini-qty__step:disabled { opacity: 0.4; cursor: default; }
body.collector-store .cart-drawer .mini-qty__count { min-width: 1.5ch; text-align: center; color: var(--text-body); }
/* The whole list dims while a step is in flight — one signal for a redraw that
   can change quantity, subtotal and the item count in the header at once. */
body.collector-store .cart-drawer[aria-busy="true"] ul.cart_list { opacity: 0.5; }
body.collector-store .cart-drawer .total,
body.collector-store .cart-drawer .woocommerce-mini-cart__total {
  padding-block: var(--s-3);
  border-top: 1px solid var(--border);
  color: var(--text-body);
  font-family: var(--font-mono);
}
body.collector-store .cart-drawer a.remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-faint) !important;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
}
body.collector-store .cart-drawer a.remove:hover { border-color: var(--state-alert); color: var(--state-alert) !important; background: none; }
/* Storefront layers a Font Awesome times-circle on the remove link at
   `position: absolute; top: 0; left: 0`. Taking the link out of the float
   layout above dropped its `position: relative`, so the glyph anchored to the
   drawer instead and floated loose over the header. Dropped for the link's own
   × instead, which Storefront pushes off-screen with `text-indent: -9999px`
   because it expects that glyph to do the drawing. */
body.collector-store .cart-drawer a.remove::before { content: none; }
body.collector-store .cart-drawer a.remove { text-indent: 0; }
/* WooCommerce prints its own view-cart/checkout pair inside the mini cart.
   The drawer already has both pinned to its footer, where they stay visible
   as the list scrolls, so the inline copy is a duplicate. */
body.collector-store .cart-drawer .woocommerce-mini-cart__buttons { display: none; }
body.cart-open { overflow: hidden; }

/* -------------------------------------------------- account and forms */

/*
 * Classic WooCommerce forms — login, register, lost password, checkout fields.
 * The theme zeroes every heading margin and drops Storefront's column widths,
 * which left the account page as one unbroken stack of full-bleed 1168px
 * inputs. Width, label spacing and heading rhythm restated here.
 */
/* `woocommerce-account` is a body class, not a wrapper — chained, not nested. */
body.collector-store.woocommerce-account .woocommerce-form-login,
body.collector-store.woocommerce-account .woocommerce-form-register,
body.collector-store.woocommerce-account .woocommerce-ResetPassword { max-width: 34rem; }
body.collector-store.woocommerce-account h2 { margin-bottom: var(--s-4); font-size: var(--t-h3); }
body.collector-store .woocommerce form .form-row,
body.collector-store .woocommerce form .woocommerce-form-row { margin: 0 0 var(--s-4); }
body.collector-store .woocommerce form .form-row label { display: block; margin-bottom: var(--s-2); color: var(--text-muted); font-size: var(--t-small); }
body.collector-store .woocommerce form .form-row input.input-text,
body.collector-store .woocommerce form .form-row select,
body.collector-store .woocommerce form .form-row textarea { width: 100%; }
/* The "remember me" line: label beside the box, not under it. */
body.collector-store .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}
/*
 * Checkboxes and radios, drawn from the tokens.
 *
 * `accent-color` alone leaves the browser's own box: on this ground that is a
 * white square with a hard grey border, the one control on the page that does
 * not belong to the theme. Replaced with the same surface, border and radius
 * the text fields use.
 */
/*
 * The block cart and checkout ship their own checkbox and radio, enqueued
 * after this stylesheet — a white square and a white ring. Their class is
 * carried on the same `input` these rules already dress, so it is added to
 * each selector to outrank them rather than drawn a second time below.
 */
body.collector-store input[type="checkbox"],
body.collector-store input[type="radio"],
body.collector-store .wc-block-components-checkbox__input[type="checkbox"],
body.collector-store .wc-block-components-radio-control__input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-sm) - 4px);
  background: var(--bg-band) no-repeat center;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
body.collector-store input[type="radio"],
body.collector-store .wc-block-components-radio-control__input[type="radio"] { border-radius: 50%; }
body.collector-store input[type="checkbox"]:hover,
body.collector-store input[type="radio"]:hover,
body.collector-store .wc-block-components-checkbox__input[type="checkbox"]:hover,
body.collector-store .wc-block-components-radio-control__input[type="radio"]:hover { border-color: var(--accent); }
body.collector-store input[type="checkbox"]:checked,
body.collector-store input[type="radio"]:checked,
body.collector-store .wc-block-components-checkbox__input[type="checkbox"]:checked,
body.collector-store .wc-block-components-radio-control__input[type="radio"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}
/* The tick is the `check` icon, in --text-on-accent. A data URI cannot read a
   custom property, so that one value is spelled out — the only place in the
   stylesheet where a colour is not a token.
   Written as the `background` shorthand on purpose: the block sets its own
   `background: #fff` on a checked box, which reset repeat and position back
   to their defaults and tiled the tick into a second, clipped one. */
body.collector-store input[type="checkbox"]:checked,
body.collector-store .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241a05' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") no-repeat center / 0.72rem;
}
body.collector-store input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--bg-band); }
/* The block draws its own tick as an SVG on top; this one is the background
   image above, so the overlay would be a second, white tick. */
body.collector-store .wc-block-components-checkbox__mark { display: none; }
body.collector-store input[type="checkbox"]:focus-visible,
body.collector-store input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* WooCommerce puts "remember me" and the submit button in the same form row,
   so the button sat 6px under the checkbox with nothing separating them. */
body.collector-store .woocommerce form .form-row label.woocommerce-form-login__rememberme { margin-block-end: var(--s-5); }
body.collector-store .password-input { display: block; position: relative; }
body.collector-store .password-input input { width: 100%; }
body.collector-store .show-password-input {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 2.75rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

/* -------------------------------------------------- cart and checkout */

body.collector-store .woocommerce-cart-form table,
body.collector-store .shop_table,
body.collector-store .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
body.collector-store .shop_table th,
body.collector-store .shop_table td,
body.collector-store .shop_attributes th,
body.collector-store .shop_attributes td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  font-size: var(--t-small);
  text-align: start;
}
body.collector-store .shop_table th,
body.collector-store .shop_attributes th { color: var(--text-faint); font: 700 var(--t-micro) var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
/* The attribute table is two columns, not a header row: the label column is
   ruled off from the value so the rows read as pairs, and the last row drops
   its rule rather than doubling the table's own border. */
body.collector-store .shop_attributes th {
  width: 34%;
  border-right: 1px solid var(--border);
  vertical-align: top;
}
body.collector-store .shop_attributes tr:last-child th,
body.collector-store .shop_attributes tr:last-child td { border-bottom: 0; }
body.collector-store .shop_attributes td p { margin: 0; }
body.collector-store .cart_totals,
body.collector-store .cart-collaterals { color: var(--text-body); }

body.collector-store .woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
body.collector-store .woocommerce-checkout .col2-set .col-1,
body.collector-store .woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
body.collector-store .woocommerce-checkout #order_review,
body.collector-store .woocommerce-checkout #order_review_heading { width: auto; float: none; }
body.collector-store .wc_payment_methods {
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-band);
  list-style: none;
}
/*
 * WooCommerce's block cart and checkout.
 *
 * The blocks inherit text colour from the theme but bring their own field and
 * panel styling, which is built for a light ground. These rules restate only
 * the surfaces — borders, fills, focus — through the same tokens as the rest
 * of the shop, so a customer never types into an invisible box.
 */
/* The fields themselves are dressed once, further down under "Fields" — a
   second set of surface rules here, on a different fill and with the field
   types spelled out, gave the address form a lighter box than the select
   beside it. */
body.collector-store .wc-block-components-text-input label,
body.collector-store .wc-blocks-components-select__label { color: var(--text-faint); }
body.collector-store .wc-block-components-panel,
body.collector-store .wc-block-components-totals-wrapper,
body.collector-store .wp-block-woocommerce-checkout-order-summary-block,
body.collector-store .wc-block-components-order-summary {
  border-color: var(--border);
}
body.collector-store .wp-block-woocommerce-checkout-order-summary-block {
  border-radius: var(--radius);
  background: var(--bg-band);
}
body.collector-store .wc-block-components-product-metadata,
body.collector-store .wc-block-components-totals-item__label { color: var(--text-muted); }
body.collector-store .wc-block-components-order-summary-item__image img { border-radius: 6px; background: var(--bg-media); }
body.collector-store .wc-block-components-button:not(.is-link) {
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
}
body.collector-store .wc-block-components-button:not(.is-link):hover { background: var(--accent-hover); }
/* The block button underlines its own label. In a filled button that reads as
   a broken link, not as a control. */
body.collector-store .wc-block-components-button__text,
body.collector-store .wc-block-components-button:not(.is-link) { text-decoration: none; }

/*
 * The empty-cart page falls back to WooCommerce's own product grid, which
 * arrives with grey buttons and square thumbnails. Dressed here rather than
 * replaced: it shows up once, when the cart is empty, and rebuilding it would
 * be a template to maintain for that one moment.
 */
body.collector-store .wc-block-grid__product,
body.collector-store .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { text-align: start; }
body.collector-store .wc-block-grid__product-image img,
body.collector-store .wp-block-woocommerce-empty-cart-block img {
  border-radius: var(--radius);
  background: var(--bg-media);
}
body.collector-store .wc-block-grid__product-title,
body.collector-store .wp-block-woocommerce-empty-cart-block .woocommerce-loop-product__title {
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
}
body.collector-store .wc-block-grid__product-price,
body.collector-store .wp-block-woocommerce-empty-cart-block .price {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-weight: 700;
}
body.collector-store .wp-block-woocommerce-empty-cart-block .wp-block-heading { font-size: var(--t-h2); }

/* The empty-cart grid renders WooCommerce's own buttons, which arrive grey on
   grey. Same selector shape as theirs so ours wins without !important. */
body.collector-store .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
body.collector-store .wc-block-grid__product-add-to-cart .wp-block-button__link,
body.collector-store .wp-block-woocommerce-empty-cart-block a.button,
body.collector-store .wp-block-woocommerce-empty-cart-block .add_to_cart_button {
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font: 600 var(--t-small) / 38px var(--font-body);
  text-decoration: none;
}
/*
 * A sold-out row links to the listing instead of adding, and must not be drawn
 * as a buy button. WooCommerce puts `add_to_cart_button` on both; only
 * `ajax_add_to_cart` marks the one that can actually add to the cart.
 */
body.collector-store .wp-block-woocommerce-empty-cart-block .wp-block-button__link:not(.ajax_add_to_cart) {
  background: rgba(240, 236, 255, 0.04);
  border-color: rgba(240, 236, 255, 0.32);
  color: var(--text-body);
}
/* WooCommerce's crying-face illustration is a solid light disc dropped on a
   very dark page. Toned to the surface it sits on. */
body.collector-store .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
body.collector-store .wp-block-woocommerce-empty-cart-block svg { opacity: 0.5; }
body.collector-store .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before { filter: grayscale(1) opacity(0.45); }
/* The summary column has to hold a product name and a price side by side;
   left to the block defaults it collapsed to one character per line. */
body.collector-store .wc-block-components-sidebar { min-width: min(100%, 320px); }

/*
 * ------------------------------------------------------- checkout block
 *
 * The block ships a light, borderless form: hairline rules between steps,
 * 1px grey fields, a plain radio list. On this ground it read as a different
 * site from the one the customer was browsing a click earlier — and the last
 * screen before payment is the worst place to look unfamiliar.
 *
 * Each step becomes a panel of the same kind used for the product facts and
 * the order summary, and every field, radio and notice is restated through
 * the shop's own tokens. Structure and markup are left alone: this is the
 * block's own DOM, dressed.
 */
body.collector-store .wc-block-checkout__main { padding-right: 0; }
body.collector-store .wc-block-components-checkout-step {
  margin: 0 0 var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-band);
}
/* The block draws its own rule under each step; the panel edge is the rule. */
body.collector-store .wc-block-components-checkout-step::after { content: none; }
body.collector-store .wc-block-components-checkout-step__heading { margin: 0 0 var(--s-4); }
body.collector-store .wc-block-components-checkout-step__title {
  color: var(--text-body);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
body.collector-store .wc-block-components-checkout-step__heading-content a,
body.collector-store .wc-block-components-address-form__address_2-toggle {
  color: var(--accent);
  font-size: var(--t-small);
}
body.collector-store .wc-block-components-checkout-step__description,
body.collector-store .wc-block-checkout__guest-checkout-notice,
body.collector-store .wc-block-checkout__terms {
  color: var(--text-muted);
  font-size: var(--t-small);
}
body.collector-store .wc-block-components-checkout-step__content { padding-bottom: 0; }

/* Fields. Same 48px box, radius and focus ring as the rest of the shop.
   `input[type]` rather than `input`: the blocks dress each field type by its
   own `[type=…]` selector, which outranked a plain `input` and left the
   password box white while the one above it was violet. Every field carries a
   type, so the attribute costs nothing and covers the ones added later. */
body.collector-store .wc-block-components-text-input input[type],
body.collector-store .wc-block-components-textarea,
body.collector-store .wc-blocks-components-select .wc-blocks-components-select__select {
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-body);
}
/* The blocks flip a focused field to a white fill and near-black text, so a
   dark field turned light the moment the customer typed in it. The fill and
   text colour are restated here, not only the ring. */
body.collector-store .wc-block-components-text-input input[type]:focus,
body.collector-store .wc-block-components-textarea:focus,
body.collector-store .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
  color: var(--text-body);
  box-shadow: none;
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
/* The floating label sits on top of the field, so it needs the field's own
   fill behind it — otherwise it reads as text struck through the border. */
body.collector-store .wc-block-components-text-input.is-active label,
body.collector-store .wc-blocks-components-select__label {
  color: var(--text-faint);
  background: transparent;
}

/* The select sits inside a wrapper the block fills white and rounds to 4px,
   which showed as four pale corners behind the field's own 9px radius. */
body.collector-store .wc-blocks-components-select__container {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}
body.collector-store .wc-blocks-components-select__expand { fill: var(--text-muted); }

/* The block pins its box to a 20px min-width while the height comes from the
   shared rule above, which left a rectangle where a square belongs. */
body.collector-store .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  width: 1.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
}
body.collector-store .wc-block-components-checkbox__label { color: var(--text-body); font-size: var(--t-small); }

/* Shipping and payment options: one card each, the chosen one lit. */
body.collector-store .wc-block-components-radio-control__option {
  padding: var(--s-3) var(--s-4) var(--s-3) 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
body.collector-store .wc-block-components-radio-control__option + .wc-block-components-radio-control__option { margin-top: var(--s-2); }
body.collector-store .wc-block-components-radio-control__option-checked,
body.collector-store .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--accent);
  background: var(--bg-surface-2);
}
/* The control rings the checked option with an inset white shadow of its own,
   which sat just inside the card border as a second, brighter outline. */
body.collector-store .wc-block-components-radio-control__option,
body.collector-store .wc-block-components-radio-control__option-checked { box-shadow: none; }
body.collector-store .wc-block-components-radio-control--highlight-checked::after,
body.collector-store .wc-block-components-radio-control--highlight-checked::before { content: none; }
body.collector-store .wc-block-components-radio-control__label { color: var(--text-body); font-weight: 600; font-size: var(--t-small); }
body.collector-store .wc-block-components-radio-control__secondary-label { color: var(--text-body); font-family: var(--font-mono); }
/* The block pins the input by a fixed top offset measured against its own row
   height; on this taller card it landed low. Centred against the card
   instead, so it stays put whatever the option's contents do. */
body.collector-store .wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__input {
  top: 50%;
  left: var(--s-4);
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
}
/* The dot punched out of the filled circle takes the colour of the card it
   sits on, and the chosen card is the raised surface. */
body.collector-store .wc-block-components-radio-control__input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--bg-surface-2); }

/* Notices — the "no payment methods" banner arrived white-on-pink. */
body.collector-store .wc-block-components-notice-banner {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  color: var(--text-body);
}
body.collector-store .wc-block-components-notice-banner.is-error { border-left-color: var(--state-alert); }
body.collector-store .wc-block-components-notice-banner.is-success { border-left-color: var(--state-ok); }
body.collector-store .wc-block-components-notice-banner > svg { fill: currentColor; }
body.collector-store .wc-block-components-notice-banner.is-error > svg { fill: var(--state-alert); }

/* Order summary: sticky, so the total stays in view down a long form. */
body.collector-store .wc-block-checkout__sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  align-self: start;
}
body.collector-store .wp-block-woocommerce-checkout-order-summary-block { padding: var(--s-2) var(--s-5); }
body.collector-store .wc-block-components-checkout-order-summary__title-text {
  color: var(--text-body);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}
body.collector-store .wc-block-components-order-summary-item__total-price,
body.collector-store .wc-block-components-totals-item__value,
body.collector-store .wc-block-components-product-price {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
body.collector-store .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.4rem; font-weight: 700; }
body.collector-store .wc-block-components-totals-footer-item-tax { color: var(--text-faint); font-size: var(--t-small); }
body.collector-store .wc-block-components-panel__button { color: var(--text-body); font-size: var(--t-small); }
/* The coupon form: a field and a button of the same height, and an Apply that
   reads as unavailable rather than as a washed-out accent while it is. */
body.collector-store .wc-block-components-totals-coupon__form { align-items: center; gap: var(--s-2); }
body.collector-store .wc-block-components-totals-coupon__input input { min-height: 48px; }
body.collector-store .wc-block-components-totals-coupon__button {
  min-height: 48px;
  padding-inline: var(--s-4);
  font-weight: 600;
}
body.collector-store .wc-block-components-totals-coupon__button:disabled {
  /* Storefront dims every disabled button by half with `!important`, which on
     a filled accent read as a smudge rather than as "not yet". Outranked so
     the button can say it plainly: an outline, in muted text. */
  opacity: 1 !important;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-faint);
}
/* Two controls side by side: the field's ring was landing on the button. */
body.collector-store .wc-block-components-totals-coupon input:focus { outline-offset: -1px; }
body.collector-store .wc-block-components-order-summary-item__quantity {
  border-color: var(--border-strong);
  background: var(--bg-surface-2);
  color: var(--text-body);
}

/* The one control that commits the order. Sized like the shop's own buttons. */
body.collector-store .wc-block-components-checkout-place-order-button {
  min-height: 52px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
}
@media (max-width: 782px) {
  body.collector-store .wc-block-checkout__sidebar { position: static; }
  body.collector-store .wc-block-components-checkout-step { padding: var(--s-4); }
}

body.collector-store .woocommerce-info,
body.collector-store .woocommerce-message,
body.collector-store .woocommerce-error {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-band);
  color: var(--text-body);
  list-style: none;
}
body.collector-store .woocommerce-error { border-left-color: var(--state-alert); }
body.collector-store .woocommerce-message { border-left-color: var(--state-ok); }
/* Storefront drops a Font Awesome glyph on the notice with `position: absolute;
   left: 1.5em`, sized for its own 3.5em left padding. Ours is 1em, so the icon
   landed on top of the first word. The coloured left border already says which
   kind of notice this is. */
body.collector-store .woocommerce-info::before,
body.collector-store .woocommerce-message::before,
body.collector-store .woocommerce-error::before { content: none; }

/* --------------------------------------------------------------- footer */

/* Sticky footer. A short page (a thin legal text, an empty search) left the
   footer floating halfway up with dead background beneath it. The page wrapper
   is a column at least as tall as the viewport and the content area absorbs
   the slack, so the footer lands on the bottom edge when there is little
   content and scrolls away normally when there is plenty. Deliberately not
   `position: fixed`: that would park the footer over the content on every
   long page, which is worse than the problem it fixes. */
body.collector-store #page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.collector-store #page > #content { flex: 1 0 auto; }
body.collector-store #page > .site-footer { flex-shrink: 0; }

body.collector-store .site-footer {
  /* The gutter each link reserves on its left for the hover light. Declared
     once here so the column heading can sit on the same optical edge as the
     links underneath it. */
  --footer-gutter: 0.95rem;
  margin-top: var(--s-8);
  padding: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-band);
  color: var(--text-muted);
}
.store-footer__columns {
  --footer-rule-gap: clamp(2rem, 3.5vw, 3.25rem);
  display: grid;
  /* The legal column carries the longest label in every language ("Règlement
     extrajudiciaire des litiges"), so it gets a wider share than the two
     beside it and nothing wraps to a second line. */
  grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  column-gap: var(--footer-rule-gap);
  row-gap: var(--s-6);
  padding-block: clamp(2.5rem, 4vw, 3.25rem);
}
/* One rule, between who the shop is and where to go next. Striping all four
   columns with hairlines turned the footer into a table; the three link
   columns are separated by air alone.
   The rule hangs off the identity column, not off the first link column: the
   padding it needs has to come out of the widest column, or it eats the link
   column's measure and "Pagamentos e Segurança" wraps. Padding and gap are
   the same value, so the line lands centred between the two blocks. */
@media (min-width: 1201px) {
  .store-footer__columns > .store-footer__identity {
    padding-right: var(--footer-rule-gap);
    border-right: 1px solid var(--border);
  }
}
/* Four columns need roughly 1200px of viewport before the narrowest of them
   stops holding "Regras das Pré-encomendas" on one line. Below that the
   footer pairs up rather than letting every second label wrap. */
@media (max-width: 1200px) {
  .store-footer__columns { grid-template-columns: 1fr 1fr; }
}
/* Warm, tracked, mono: the labels are the one place the footer uses the
   brand light, which separates them from the cool lavender links by hue as
   well as by size and case. Before, label and link were both grey and the
   four columns read as one undifferentiated block. */
body.collector-store .site-footer h2 {
  margin-bottom: var(--s-4);
  padding-left: var(--footer-gutter);
  color: var(--accent);
  font: 700 var(--t-label) var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.collector-store .site-footer ul { margin: 0; padding: 0; list-style: none; }
body.collector-store .site-footer li + li { margin-top: 0; }
/*
 * `ul.menu li a` in the selector list on purpose. Storefront prints
 * `ul.menu li a { color: #333 }` as inline customizer CSS, which outranks a
 * plain `.site-footer li a` — the whole footer menu was rendering near-black
 * on the dark ground at about 1.5:1 contrast. Matching its shape wins the
 * cascade without !important.
 */
body.collector-store .site-footer ul.menu li a,
body.collector-store .site-footer ul li a,
body.collector-store .site-footer li a {
  position: relative;
  display: block;
  /* Padding rather than list margins: the whole row becomes the target, and
     the rhythm survives a link that does wrap. */
  padding: 0.42rem 0 0.42rem var(--footer-gutter);
  color: var(--text-muted);
  font-size: var(--t-nav);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
body.collector-store .site-footer p,
.store-footer__identity p { color: var(--text-muted); font-size: var(--t-small); text-decoration: none; }
/* The signature: a small light comes on in the reserved gutter. It lives
   inside the link's own padding, so nothing shifts on hover. */
body.collector-store .site-footer li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 1px rgba(255, 217, 138, 0.55);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
body.collector-store .site-footer ul.menu li a:hover,
body.collector-store .site-footer li a:hover,
body.collector-store .site-footer li a:focus-visible,
body.collector-store .site-footer p a:hover { color: var(--accent); }
body.collector-store .site-footer li a:hover::before,
body.collector-store .site-footer li a:focus-visible::before { opacity: 1; transform: none; }
body.collector-store .site-footer p a { color: var(--text-body); text-decoration: underline; text-underline-offset: 0.2em; }
/* Removing Storefront's inline CSS also removed its blanket `a { text-decoration:
   none }`, which is what had been hiding the browser's default underline under
   the wordmark. Stated here instead of relying on someone else's reset. */
body.collector-store .store-brand,
body.collector-store .site-footer .store-brand { text-decoration: none; }
.store-footer__identity .store-brand { margin-bottom: var(--s-3); }
/* A measure, not a column width: the tagline was running the full 1.6fr and
   breaking at an awkward point. */
.store-footer__identity p { max-width: 34ch; line-height: 1.55; }
.store-footer__identity p + p { margin-top: var(--s-2); }
.store-footer__identity .store-footer__nif { color: var(--text-body); font: var(--t-small) var(--font-mono); letter-spacing: 0.04em; }

.store-footer__social { display: flex; gap: 0.4rem; margin-top: var(--s-4); }
.store-footer__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.store-footer__social a:hover { border-color: var(--accent); color: var(--accent); }

.store-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.store-payments li {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 32px;
  padding-inline: 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface);
  color: var(--text-body);
  font: 700 var(--t-micro) var(--font-mono);
  letter-spacing: 0.06em;
}
/* A method the shop cannot actually take is drawn as an outline, never as a
   solid chip: the checkout must never promise MB WAY before the gateway is
   live. See docs/PAYMENTS.md. */
.store-payments li[data-state="pending"] {
  border-style: dashed;
  background: transparent;
  color: var(--text-faint);
}
.store-payments__note { margin: 0.55rem 0 1.1rem; color: var(--text-muted); font-size: var(--t-micro); }

.store-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding-block: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--t-small);
}
.store-footer__legal a { text-decoration: none; }
.store-footer__legal a:hover { color: var(--accent); }

/* ----------------------------------------------------------- responsive */

/* Below the full 1240px shell a quarter of it stops fitting a sentence, and
   the detail lines wrap. Two across from here down: the claims keep one line
   each, and the divider moves to the middle of the pair. */
@media (max-width: 1300px) {
  .trust-bar ul { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  .trust-bar li + li { border-left: 0; }
  .trust-bar li:nth-child(even) { border-left: 1px solid var(--border); }
}

@media (max-width: 1100px) {
  .store-mega .shell { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-mega__feat { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  body.collector-store ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .hero .shell { grid-template-columns: 1fr; }
  .hero__showcase { order: -1; max-width: 290px; }
  .preorders,
  .langs { grid-template-columns: 1fr; }
  .games { grid-template-columns: repeat(2, 1fr); }
  body.collector-store.single-product .product-columns { grid-template-columns: 1fr; }
  body.collector-store .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .store-header__bar {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-3);
    row-gap: 0.6rem;
    padding-bottom: 0.7rem;
  }
  /* Explicit placement, not source order: the search field spans the full
     width on its own row, and auto-placement then pushed the tools onto a
     third row instead of keeping them beside the wordmark. */
  .store-burger { display: inline-flex; padding-inline: 0.35rem; grid-row: 1; grid-column: 1; }
  .store-brand { grid-row: 1; grid-column: 2; justify-self: start; }
  .store-header__tools { grid-row: 1; grid-column: 3; }
  .store-search { grid-row: 2; grid-column: 1 / -1; }
  .store-search__key { display: none; }
  .store-account { display: none; }
  .store-lang__code { display: none; }

  /* The header's top row has to fit 375px: the wordmark and the cart total
     are what pushed it past that, so both shrink rather than the search
     field, which is the control people actually reach for. */
  .store-brand { font-size: 1.05rem; gap: 0.35rem; }
  .store-brand__mark { width: 26px; height: 26px; font-size: 0.8rem; }
  .store-brand__sub { display: none; }
  .store-icon-btn { padding-inline: 0.4rem; }
  .store-icon-btn__total { display: none; }
  .store-lang__btn { padding-inline: 0.3rem; }
  .store-lang__menu { right: -0.5rem; min-width: 210px; }

  /* Nav becomes a drawer: the mega panels stack as plain lists, because a
     hover panel has nothing to hover on a touch screen. */
  .store-nav { display: none; }
  .store-nav[data-open="true"] { display: block; }
  .store-nav__list { flex-direction: column; align-items: stretch; overflow: visible; }
  .store-nav__rest { flex-direction: column; align-items: stretch; margin: 0; padding: var(--s-2) 0 var(--s-4); border-top: 1px solid var(--border); }
  body.collector-store .store-nav__sell { margin: var(--s-2) 0 0; text-align: center; justify-content: center; }
  .store-mega { position: static; box-shadow: none; border: 0; background: none; }
  .store-mega .shell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-3) var(--s-4); padding-inline: var(--s-4); }
  .store-mega__feat { display: none; }

  body.collector-store ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar ul { grid-template-columns: 1fr; }
  .trust-bar li + li,
  .trust-bar li:nth-child(even) { border-left: 0; }
  .store-footer__columns { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Stacked in one column the links are the only thing to hit, so the row
     grows to a 44px target. `ul.menu` repeated here for the same reason as
     above: without it Storefront's selector shape outranks this one. */
  body.collector-store .site-footer ul.menu li a,
  body.collector-store .site-footer li a { padding-block: 0.8rem; }
  .hero__count div { min-width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .product-card:hover .slab { transform: none; }
  /* The aurora keeps its colour and stops moving; the pointer light is
     motion by definition, so it goes entirely. */
  .lumos::before { display: none; }
}