/**
 * GENERATED — do not edit. Run: npm run build:css
 * Source: common/static/store/css/NN-name.css (concatenated in filename order,
 * which is the cascade order). Editing this file directly loses your work on
 * the next build.
 */

/* ======== 00-fonts.css ======== */
/* ---------------------------------------------------------------------------
   Self-hosted type.

   The storefront branded itself in the system UI stack, which is exactly what
   every other site the shopper visited that day also uses — a brand fold cannot
   sound like Despacha while it is set in the same face as the operating system's
   settings screen. Two families, both variable, latin subset only:

   - Fraunces (SIL OFL 1.1, v38) — display. opsz 9..144, wght 400..800; 67 KB.
     Optical sizing is left on, so the same face works at a 5.5rem wordmark and a
     28px page title without looking like two different fonts.
   - Public Sans (SIL OFL 1.1, v21) — text. wght 400..700; 27 KB.

   `font-src 'self'` in the CSP (common/middleware/csp.py) means these have to be
   served from our own static, not a font CDN — which is also why there is no
   external stylesheet to block first paint. Files came from the Google Fonts
   API, latin subset only: U+0000-00FF already covers every accented character
   European Portuguese needs, so latin-ext (a further 124 KB) is not carried.

   Licences and re-fetch instructions: common/static/store/fonts/README.md.

   `font-display: swap` deliberately: text in the fallback stack for a moment
   beats invisible text on a shopping page.

   The url()s are STATIC_URL-absolute rather than relative, and have to be:
   collectstatic post-processes this partial AND the built store.css it is
   concatenated into, and the two live in different directories
   (store/css/ and store/), so no single relative path resolves from both — a
   relative url() fails the production build on whichever file it is wrong for.
   ManifestStaticFilesStorage rewrites absolute STATIC_URL paths to the hashed
   filename in both. If STATIC_URL ever stops being "/static/", these move with
   it.

   The system stack stays in --font-system and keeps dense surfaces — tables,
   the seller dashboard, the admin console — where its tighter, more familiar
   metrics are worth more than the brand voice.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/store/fonts/fraunces-latin-var.069cb90e11a3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/store/fonts/public-sans-latin-var.e4c9b081863a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Where each family is used.

   Kept in one file on purpose: "which face does this element speak in" is a
   single typographic decision, and scattering it across nine partials is how it
   drifts. Everything else inherits --font from `body`.
   --------------------------------------------------------------------------- */

/* Display — brand surfaces and page titles, nothing smaller. */
.brand,
.store-hero__brand,
.store-hero__tagline,
.checkout-title,
.product-hero__title,
.seller-dash-title,
.profile-name {
  font-family: var(--font-display);
}

/* Fraunces is a wider, higher-contrast face than the system stack it replaces
   here, so the tracking tuned for SF Pro has to come back a little. */
.store-hero__brand {
  letter-spacing: -0.035em;
}

.checkout-title,
.product-hero__title,
.seller-dash-title {
  letter-spacing: -0.02em;
}

/* The header wordmark is 13px uppercase; a display serif needs a touch more
   room at that size, not the tight setting a lowercase title wants. */
.brand {
  letter-spacing: 0.02em;
}

/* System stack — dense surfaces. Tabular data, the seller dashboard body and
   the admin console are read, not looked at; the narrower, more familiar
   metrics fit more rows on screen and are what those surfaces were designed
   against. */
.shop-table,
.admin-shell,
.admin-shell-main,
.seller-crm-app,
.tabular {
  font-family: var(--font-system);
}

/* …but their page titles still belong to the brand. */
.admin-shell .seller-dash-title,
.seller-crm-app .seller-dash-title,
.seller-crm-app .seller-crm-title {
  font-family: var(--font-display);
}

/* ======== 01-base.css ======== */
/* Shared web auth shell — dark, minimal, system typography */

:root {
  --bg-0: #000000;
  --bg-1: #0c0c0e;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --hairline: rgba(255, 255, 255, 0.1);
  --text: #f5f5f7;
  --text-muted: #86868b;
  --accent: #f5f5f7;
  --accent-text: #0c0c0e;
  --danger: #ff453a;
  --ok: #32d74b;

  /* One focus indicator, not eight. This was written as eight base/light pairs
     at three different opacities per theme (0.12 / 0.18 / 0.2 dark, 0.18 / 0.35
     / 0.45 light) and two different widths, for the same control state. Both
     tokens take the *strongest* value already in use, so every ring this
     replaces became more visible or stayed the same — never fainter. */
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.2);

  /* Elevation ramp. Derived from what the product already renders, not invented:
     across all CSS there were 124 drop-shadow layers in 82 distinct values, 72 of
     them used exactly once. The five steps below are the values that actually
     recur. Light and dark carry different alphas because they must — a 6% black
     shadow is invisible on a dark ground — which is precisely why these have to
     be tokens: without them every elevation has to be written twice, and half of
     all shadows in the product live in the light-theme override layer. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.22);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.2);
  --elev-4: 0 12px 32px rgba(0, 0, 0, 0.35);
  /* Step 5 was missing from the first cut of this ramp. Deriving the steps from
     the *most-used* values skipped a real cluster — eight declarations sit at
     y 12-16 / blur 40-48, between step 4 and the old top step, and every one of
     them would have had to be forced 16px of blur in one direction or the other
     to join the ramp. The old top step is now 6. */
  --elev-5: 0 16px 44px rgba(0, 0, 0, 0.34);
  --elev-6: 0 24px 64px rgba(0, 0, 0, 0.5);

  /* The top-light on a raised surface. Always paired with an elevation step,
     never used alone: the drop shadow puts the surface above the page, this
     puts a lit edge on it. Light mode carried it 27 times as a literal at three
     near-identical alphas (0.6 / 0.65 / 0.7); dark uses a far weaker one because
     there is no white ground for the edge to catch. */
  --sheen: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  /* Rating gold. #f5c842 is only legible on the dark ground — 1.42:1 on white. */
  --star: #f5c842;
  /* Aliases + previously-undeclared tokens (were used with inline fallbacks). */
  --muted: var(--text-muted);
  --border: var(--hairline);
  --stroke-secondary: rgba(255, 255, 255, 0.08);
  --surface-raised: rgba(255, 255, 255, 0.03);
  --surface-panel: #1a1d24;
  --badge: #6ee7b7;
  --radius-lg: 18px;
  --radius-md: 12px;
  /* Referenced by three rules that had no fallback, so `border-radius:
     var(--radius-sm)` was invalid at computed-value time and silently
     dropped to 0 — the password toggle and two commerce chips had no
     radius at all. */
  --radius-sm: 8px;
  /* Spacing scale (4px base) — use for margin, padding, and gap */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  /* Type families. `--font` is the storefront's text voice; `--font-system` is
     the old stack, kept as the fallback here and used outright on dense
     surfaces (tables, seller dashboard, admin) where familiar metrics beat
     brand. `--font-display` is for brand surfaces only — see 00-fonts.css. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font: "Public Sans", var(--font-system);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Critically damped: reaches the target and settles without overshoot.
     For UI a tap commits — a tap carries no momentum, so bounce would be
     borrowed energy the gesture never had. Reserve overshoot for motion a
     flick or drag actually threw. */
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  /* Canonical pill radius. 980px is legacy — new work uses this token. */
  --radius-pill: 999px;

  /* Type scale — eleven steps, and the only sizes new work should use.
     Derived from the product's own distribution rather than imposed on it: the
     partials carried 56 distinct authored sizes, but 437 of 541 declarations
     already clustered on a handful of integers. The clusters ARE the scale.
     14px is the single most-used size in the codebase (107 declarations), and
     16px (19) and 11px (37) are load-bearing too — an "ideal" scale that
     dropped them would have forced hundreds of elements to change size, which
     is a redesign, not a cleanup.
     The 33 fractional values (0.78rem, 0.72rem, 0.84375rem…) were the accident,
     and have been snapped to the nearest step. Sizes above 32px are one-off
     display headings, mostly clamp()-driven, and are left to the components. */
  --text-micro: 11px;      /* dense meta, badge counts */
  --text-overline: 12px;   /* uppercase eyebrows, table headers */
  --text-caption: 13px;    /* captions, helper text, table cells */
  --text-ui: 14px;         /* the workhorse: nav, buttons, dense UI */
  --text-body-s: 15px;     /* secondary body */
  --text-body-m: 16px;     /* modal + form body */
  --text-body: 17px;       /* default body, set on <body> */
  --text-title-3: 20px;    /* card and section titles */
  --text-title-2: 24px;    /* sub-page headings */
  --text-title-1: 28px;    /* page headings */
  --text-display: 32px;    /* hero; larger heroes use clamp() locally */

  /* Line-height and tracking for the steps that carry running text. Tracking
     matters below 15px: the global -0.022em is tuned for large type and costs
     legibility at caption sizes. */
  --text-caption-lh: 1.38;
  --text-caption-ls: 0;
  --text-ui-lh: 1.35;
  --text-ui-ls: -0.01em;
  --text-body-lh: 1.47;
  --text-body-ls: -0.014em;
  --text-body-s-lh: 1.45;
  --text-body-s-ls: -0.01em;
  --text-title-3-lh: 1.28;
  --text-title-3-ls: -0.02em;
  --text-title-2-lh: 1.18;
  --text-title-2-ls: -0.024em;
  --text-title-1-lh: 1.1;
  --text-title-1-ls: -0.028em;
  --text-display-lh: 1.04;
  --text-display-ls: -0.03em;
  --text-overline-lh: 1.2;
  --text-overline-ls: 0.12em;

  /* Retained: components written against the previous names still resolve. */
  --text-label: var(--text-caption);
  --text-label-lh: 1.2;
  --text-label-ls: 0;
}

/* ---------------------------------------------------------------------------
   Light-theme token layer.

   The palette above is dark-only. That single fact is why this codebase carried
   962 `html.nav-theme-light` rules and 1,736 override declarations — and 1,370
   of those declarations set nothing but `color`, `background` or `border-color`.
   They exist to re-state, per component, what a token should have said once.
   The layer is down to 544 rules / 1,171 declarations; the deletions so far
   were the ones this token layer had already made inert.

   Restating the tokens here is deliberately ADDITIVE and safe to land on its
   own: every existing override is more specific than a token-driven base rule,
   so anything that already has an override keeps winning and cannot change. The
   only components affected are the ones that were never given an override —
   which is precisely the population that renders wrong in light mode today
   (the invisible newsletter heading, the grey-on-grey login field, the 1:1
   button in the empty state). Once this layer is trusted, the overrides become
   provably redundant and can be deleted in batches.

   How a batch is proven, because "looks redundant" is not good enough here —
   two of the rules that read as pure restatement are load-bearing, and say so
   in their own comments (`.rv-bar.is-active`, `.svc-tabs__btn.is-active`):
   removing them lets a *different*, muted override take the element. The
   deletions are picked by rendering every override's selector as a real
   element in headless Chromium and diffing getComputedStyle across the whole
   file before and after, with three guards. A sentinel pass (every override
   value replaced with a marker) discards any element the rule does not
   actually reach — that is what `::placeholder` looks like, where
   getComputedStyle silently returns the input's own style and every override
   reads as inert. A candidate is dropped if deleting it moves any probed
   value on any element, not only the ones its own selector names, because a
   deletion can expose a lower-priority override on a *neighbouring* element.
   And animations are frozen in both runs, or a mid-flight opacity reads as a
   regression. What survives is a set whose removal changes no computed value
   anywhere; that batch was 171 rules at 0 differences over 1,106 elements
   × 32 properties.

   A second, smaller batch is the one place this stops being free. 29 rules
   differed from the token layer by nothing but alpha — a hairline at 0.08 or
   0.12 where --hairline resolves to 0.1, a hover tint at 0.06 against 0.05 —
   values that were written by hand per component and never agreed with each
   other. Deleting them moves each to the token, which is a real change: at
   most 0.04 alpha, same RGB, no exceptions (the harness enforces exactly that
   bound rather than proving equality). On white that is under 10/255 on a
   1px line. This is the same trade already made for the elevation ramp and
   the focus ring above — one value, centrally decided, instead of a hundred
   near-misses. Rules whose tint would have gone to fully transparent were
   left alone: losing a fill outright is not the same kind of change as
   nudging one.

   What is left is not more of the same. Roughly 485 distinct (light, dark)
   value pairs remain across 573 rules, so there is no small set of new tokens
   that collapses them — most encode a real per-component difference (muting
   text that is full-contrast on dark, giving sticky chrome an opaque panel it
   does not need on black). Those need a design decision per component, not
   another mechanical pass.

   Values are the light equivalents already hardcoded across those overrides,
   so adopting a token changes nothing visually — it just moves the decision to
   one place. `--shop-*` are the storefront's parallel names for the same four
   ideas; they are aliased rather than duplicated so the two systems converge.
   --------------------------------------------------------------------------- */
html.nav-theme-light {
  /* Ground and surfaces */
  --bg-0: #f2f2f7;
  --bg-1: #ffffff;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-hover: rgba(0, 0, 0, 0.05);
  --surface-raised: rgba(255, 255, 255, 0.9);
  --surface-panel: #ffffff;

  /* Ink. #86868b scores 3.62:1 on white and fails AA; #6e6e73 is the same tone
     at 5.07:1, and backs kickers, card meta, captions and helper text. */
  --text: #1d1d1f;
  --text-muted: #6e6e73;

  /* Lines */
  --hairline: rgba(0, 0, 0, 0.1);
  --border: rgba(0, 0, 0, 0.1);
  --stroke-secondary: rgba(0, 0, 0, 0.08);

  /* The solid button inverts: dark fill, light label. */
  --accent: #1d1d1f;
  --accent-text: #ffffff;

  /* Semantic. The dark-mode values (#ff453a, #32d74b) are pale on white —
     2.9:1 and 2.3:1 — so light gets its own.

     --ok was #1b7f3a, chosen because it scores 5.07:1 on white. But the
     components that use it do not paint it on white: the trust badge and the
     status chips sit on a 10% tint *of this same colour*, which lifts the
     backdrop and drops the text to 4.43:1 — under AA at their 11px. Validating
     a token against the page background is not enough when the component
     supplies its own. #187534 scores 5.02:1 on the tint and 5.78:1 on white. */
  --danger: #d70015;
  --ok: #187534;
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.45);

  /* The light ramp is the dominant measured value at each step: elev-3 alone
     (8/28 at 6%) backs 15 declarations, elev-4 nine, elev-2 four. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --elev-2: 0 2px 10px rgba(0, 0, 0, 0.05);
  --elev-3: 0 8px 28px rgba(0, 0, 0, 0.06);
  --elev-4: 0 12px 32px rgba(0, 0, 0, 0.1);
  --elev-5: 0 16px 44px rgba(0, 0, 0, 0.12);
  --elev-6: 0 24px 64px rgba(0, 0, 0, 0.22);
  --sheen: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  --star: #9a6700;

  /* Storefront aliases: same four ideas, different historical names. */
  --shop-bg: var(--bg-0);
  --shop-bg-muted: #e5e5ea;
  --shop-text: var(--text);
  --shop-text-muted: var(--text-muted);
}

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

/* Form controls do not inherit typography from their parent — browsers give
   them their own UA font. Any control that never got an explicit font-family
   was silently rendering in Arial at 13.3333px, which is where two of the
   "accidental" sizes on the page came from. This is a floor at element
   specificity (0,0,1), so every existing component rule still wins. */
button,
input,
select,
textarea,
optgroup {
  font: inherit;
  letter-spacing: inherit;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  /* Fraunces carries an optical-size axis; leaving this on means the wordmark
     and a 28px page title are cut for their own size rather than scaled. */
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--text);
  background: var(--bg-0);
  background-image: radial-gradient(
      ellipse 120% 80% at 50% -20%,
      rgba(55, 55, 60, 0.45) 0%,
      transparent 55%
    ),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(30, 30, 35, 0.5) 0%, transparent 45%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--text);
}

.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right))
    max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
}

.shell--center {
  justify-content: center;
  align-items: center;
}

.brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: calc(var(--space-5) + var(--space-1));
  text-align: center;
}

.premium-section-title {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel {
  width: 100%;
  max-width: 400px;
  padding: calc(var(--space-6) + var(--space-1)) var(--space-6) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.panel--wide {
  max-width: 480px;
}

/* Account page — wider shell, two columns on desktop */
.panel--account {
  width: 100%;
  max-width: min(100%, 560px);
  margin-inline: auto;
  padding: var(--space-6) calc(var(--space-5) + var(--space-2)) calc(var(--space-6) + var(--space-1));
}

@media (min-width: 720px) {
  .panel--account {
    max-width: min(100%, 920px);
    padding: calc(var(--space-6) + var(--space-3)) calc(var(--space-6) + var(--space-2)) calc(var(--space-6) + var(--space-4));
  }
}

@media (min-width: 900px) {
  .panel--account {
    padding: calc(var(--space-6) + var(--space-4)) calc(var(--space-6) + var(--space-4))
      calc(var(--space-6) + var(--space-5));
  }
}

.account-layout {
  width: 100%;
}

@media (min-width: 720px) {
  .account-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
  }

  .account-layout__summary {
    position: sticky;
    top: 88px;
    padding: var(--space-5) calc(var(--space-5) + var(--space-2)) calc(var(--space-5) + var(--space-2));
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    background: rgba(0, 0, 0, 0.22);
  }

  .panel--account .profile-head {
    margin-bottom: calc(var(--space-5) + var(--space-2));
  }

  .avatar.avatar--picker,
  label.avatar.avatar--picker,
  button.avatar.avatar--picker {
    width: 100px;
    height: 100px;
  }

  .avatar__inner {
    font-size: 36px;
  }
}

.account-layout__forms {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dl--account .dl-row {
  padding: var(--space-4) 0;
}

.account-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-5);
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
}

.account-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.15s var(--ease);
}

.account-menu__item:hover {
  background: var(--surface-hover);
}

/* Focus needs its own indicator, not the hover tint. These two states were
   declared together with `outline: none`, so the only thing marking keyboard
   focus was a background identical to mouse-hover — indistinguishable from
   "the pointer happens to be here", and very faint on a dark surface. The
   background stays for continuity; the ring is what makes focus visible. */
.account-menu__item:focus-visible {
  background: var(--surface-hover);
  box-shadow: var(--focus-ring);
  outline: none;
}

.account-menu__chevron {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.15s var(--ease);
}

.account-menu__item:hover .account-menu__chevron {
  transform: translateX(2px);
}

.account-promo-card {
  position: relative;
  margin-top: calc(var(--space-6) + var(--space-1));
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 6px);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.account-promo-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--badge), var(--ok));
}

.account-promo-card .register-title {
  margin-bottom: var(--space-2);
}

.account-promo-card .btn {
  width: auto;
  margin-top: var(--space-4);
}

.account-password-grid {
  display: grid;
  gap: 0;
}

@media (min-width: 640px) {
  .account-section--password .account-password-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 0;
  }

  .account-section--password .account-password-grid .field:first-child {
    grid-column: 1 / -1;
  }
}

h1 {
  margin: 0 0 var(--space-2);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.lede {
  margin: 0 0 calc(var(--space-5) + var(--space-1));
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.field {
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.field input {
  width: 100%;
  padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.field input::placeholder {
  color: rgba(134, 134, 139, 0.75);
}

.field input:hover {
  background: rgba(0, 0, 0, 0.42);
}

.field input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.5);
}

.field input:focus-visible {
  box-shadow: var(--focus-ring);
}

.password-field {
  position: relative;
  display: block;
}

.password-field__input {
  padding-right: calc(var(--space-4) + 36px);
}

.password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.password-field__toggle:hover {
  color: var(--text);
  background: var(--surface);
}

.password-field__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.password-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.field select {
  width: 100%;
  padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.field select:hover {
  background: rgba(0, 0, 0, 0.42);
}

.field select:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.5);
}

.field textarea {
  width: 100%;
  min-height: 112px;
  padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
  font-size: 17px;
  font-family: inherit;
  line-height: 1.45;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.field textarea::placeholder {
  color: rgba(134, 134, 139, 0.75);
}

.field textarea:hover {
  background: rgba(0, 0, 0, 0.42);
}

.field textarea:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.5);
}

.field textarea:focus-visible {
  box-shadow: var(--focus-ring);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid,
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--danger);
}

.field input:user-invalid:focus,
.field select:user-invalid:focus,
.field textarea:user-invalid:focus,

.field--invalid input:focus,
.field--invalid select:focus,
.field--invalid textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.18);
}

.field__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--danger);
}

/* Light theme form controls.
   The defaults above fill inputs with rgba(0,0,0,0.35) and draw the value in
   near-white — correct on the dark shell, but on the light shell it renders as
   a grey slab with barely-visible text. Crisp white fields on the light grey
   page read the way the rest of the light theme does. Deliberately global:
   every shell (order, checkout, seller dashboard) needs it, and only the
   auth shell (`.shell--center`) previously had its own. */
html.nav-theme-light .field input::placeholder,
html.nav-theme-light .field textarea::placeholder {
  color: #a1a1a6;
  -webkit-text-fill-color: #a1a1a6;
  opacity: 1;
}

html.nav-theme-light .field input:hover,
html.nav-theme-light .field textarea:hover,
html.nav-theme-light .field select:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}

html.nav-theme-light .field input:focus,
html.nav-theme-light .field textarea:focus,
html.nav-theme-light .field select:focus {
  background: #ffffff;
  border-color: rgba(0, 122, 255, 0.55);
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-2);
  padding: 15px 20px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.15s var(--ease), opacity 0.2s var(--ease);
}

.btn:hover:not(:disabled) {
  opacity: 0.92;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--ghost {
  margin-top: var(--space-3);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--hairline);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-hover);
  opacity: 1;
}

.status {
  margin-top: 18px;
  min-height: 1.4em;
  font-size: 14px;
  color: var(--text-muted);
}

.status--error {
  color: var(--danger);
}

.status--ok {
  color: var(--ok);
}

.status a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.status a:hover {
  opacity: 0.9;
}

/* Account layout */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  width: 100%;
  margin: 0 auto 32px;
  padding: 4px 0;
}

.topbar .brand {
  margin: 0;
  text-align: left;
}

.topbar-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.topbar-actions .btn {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
}

.topbar-actions .btn--ghost {
  padding: 10px 16px;
}

.shell-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
}

.profile-avatar-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-4);
}

/* File input covers avatar circle — must stay visible to hit-testing (not display:none) */
.avatar--picker {
  position: relative;
}

.account-file-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.profile-photo-hint {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  max-width: 20rem;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-photo-hint:hover {
  color: var(--text);
}

.avatar.avatar--picker,
label.avatar.avatar--picker,
button.avatar.avatar--picker {
  width: 88px;
  height: 88px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.14), var(--elev-3);
  transition:
    border-color 0.2s var(--ease),
    transform 0.15s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s var(--ease);
}

.avatar.avatar--picker:hover,
label.avatar.avatar--picker:hover,
button.avatar.avatar--picker:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), var(--surface));
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.22), 0 10px 26px rgba(0, 0, 0, 0.3);
}

.avatar.avatar--picker:has(.account-file-overlay:focus-visible),
label.avatar.avatar--picker:focus-visible,
button.avatar.avatar--picker:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.avatar__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.avatar__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}

.profile-email {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
}

.dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.dl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}

.dl-row:last-child {
  border-bottom: none;
}

.dl-row dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 400;
}

.dl-row dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.badge--on {
  color: var(--ok);
  background: rgba(50, 215, 75, 0.12);
}

.badge--off {
  color: var(--danger);
  background: rgba(255, 69, 58, 0.12);
}

.loading {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 0;
}

.hidden {
  display: none !important;
}

/* Avoid a logged-out nav flash while shop.js silently refreshes the memory-only access JWT. */
html.auth-restoring #nav-login,
html.auth-restoring #nav-tab-login {
  display: none !important;
}

html.auth-restoring #nav-user-menu.hidden {
  display: block !important;
}

html.auth-restoring #nav-notifications.hidden {
  display: inline-flex !important;
}

html.auth-restoring #nav-tab-orders.hidden,
html.auth-restoring #nav-tab-account.hidden {
  display: flex !important;
}

/*
  Role-dependent chrome is visible in the HTML, then shop.js hides it after
  /api/auth/me/. The head script sets these classes from sessionStorage so the
  first paint already matches the last known role (keep in sync with nav.js).
*/
html.nav-role-seller #nav-site-vender,
html.nav-role-seller #hero-sell-cta,
html.nav-role-pending #nav-site-vender,
html.nav-role-pending #hero-sell-cta,
html.nav-role-admin #nav-site-vender,
html.nav-role-admin #hero-sell-cta {
  display: none !important;
}

/*
  The mirror image: chrome that ships hidden and is revealed once the role is
  known. Without these the boot class suppressed the flash in one direction
  only — an admin still watched "Gestão" and the seller group pop into the
  header a round trip after everything else had settled.
*/
html.nav-role-admin #nav-admin.hidden {
  display: inline-flex !important;
}

html.nav-role-admin #nav-user-admin.hidden {
  display: block !important;
}

html.nav-role-seller #nav-user-seller-group.hidden {
  display: block !important;
}

html.nav-amb-off #footer-ambassador-wrap {
  display: none !important;
}

/* Utility classes — replace inline style="" so CSP style-src can drop 'unsafe-inline'. */
.u-text-left {
  text-align: left;
}

.u-mt-8 {
  margin-top: var(--space-2);
}

.u-mt-12 {
  margin-top: var(--space-3);
}

.u-mb-12 {
  margin: 0 0 var(--space-3);
}

.u-fs-105 {
  font-size: 17px;
}

.u-fs-115 {
  font-size: 17px;
}

.u-fs-64 {
  font-size: 64px;
}

/* ======== 02-storefront.css ======== */
/* Storefront */
.brand-link {
  color: inherit;
  text-decoration: none;
}

.brand-link:hover {
  color: var(--text);
}

.sub-nav {
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
}

/* Orphan sub-nav below a panel (legacy) — align with commerce card width */
.shop-checkout-main > .sub-nav {
  width: 100%;
  max-width: min(100%, 720px);
  margin-top: calc(var(--space-4) + var(--space-1));
  padding-top: 4px;
  text-align: left;
}

.sub-nav a {
  color: var(--text);
  font-weight: 500;
}

.sub-nav a:hover {
  opacity: 0.85;
}

.store-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.store-page > .shell-main,
.store-page > .shop-product-main,
.store-page > .shop-account-main,
.store-page > .shop-checkout-main {
  flex: 1 1 auto;
  width: 100%;
}

.store-page--home {
  position: relative;
}

.store-page--home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 70% at 50% -15%, rgba(72, 72, 88, 0.35) 0%, transparent 52%),
    radial-gradient(ellipse 60% 45% at 100% 30%, rgba(45, 55, 80, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(50, 42, 38, 0.18) 0%, transparent 45%);
}

@media (prefers-reduced-motion: no-preference) {
  .store-page--home::before {
    animation: homeGlow 14s ease-in-out infinite alternate;
  }
}

@keyframes homeGlow {
  0% {
    opacity: 0.85;
    filter: saturate(1);
  }
  100% {
    opacity: 1;
    filter: saturate(1.12);
  }
}

.store-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto var(--space-5);
  gap: var(--space-3) calc(var(--space-3) + var(--space-1));
}

.store-nav--home {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: calc(var(--space-4) + var(--space-1));
  padding: calc(var(--space-3) - 2px) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--stroke-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.store-nav .brand {
  margin: 0;
  text-align: left;
}

.store-nav__cluster {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3) calc(var(--space-3) + var(--space-1));
  min-width: 0;
  margin-left: auto;
}

.store-nav__cluster .store-nav-actions {
  margin-left: 0;
}

.store-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3) 16px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  flex-wrap: nowrap;
}

.store-nav-actions__main,
.store-nav-actions__end {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) - 2px);
  flex-wrap: nowrap;
}

.store-nav-actions__main {
  flex: 1 1 auto;
  /* `safe` matters here. With plain `flex-end`, content wider than this strip
     overflows past the *start* edge — the browser reports no overflow, nothing
     scrolls, and the first pill is painted on top of the search field where it
     can never be reached. `safe flex-end` falls back to start alignment once
     the content stops fitting, so the strip scrolls the way it looks like it
     should. The unprefixed value stays first as the fallback. */
  justify-content: flex-end;
  justify-content: safe flex-end;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.store-nav-actions__main .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.store-nav-actions__end {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding-left: 4px;
  border-left: 1px solid var(--hairline);
}

.store-nav-actions .btn {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
}

.store-nav-search {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 200px;
  min-width: 0;
  max-width: min(440px, 100%);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.38);
  overflow: visible;
}

.store-nav-search__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 8px 10px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  outline: none;
}

.store-nav-search__input::placeholder {
  color: rgba(160, 160, 170, 0.9);
}

.store-nav-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid var(--hairline);
  background: var(--surface);
  color: rgba(235, 235, 240, 0.9);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.store-nav-search__submit:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text);
}

.store-nav-search__submit:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.store-nav-search__submit svg {
  display: block;
}

.store-nav-typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-5);
}

.store-nav-typeahead.hidden {
  display: none;
}

.store-nav-typeahead__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}

.store-nav-typeahead__item:hover,
.store-nav-typeahead__item.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.store-nav-typeahead__kind {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.store-nav-typeahead__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 719px) {
  .store-nav-typeahead {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-nav-typeahead {
    transition: none;
  }
}

/* Register — minimal layout */
.register-wrap {
  width: 100%;
  max-width: 360px;
}

.register-brand {
  display: block;
  text-align: center;
  margin-bottom: 22px;
}

.panel--register {
  padding: 26px 22px 22px;
}

.register-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.034em;
  text-align: center;
}

.register-lede {
  margin: 0 0 calc(var(--space-5) + var(--space-2));
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.register-lede--verify {
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.panel--register .field--compact {
  margin-bottom: 14px;
}

.register-role {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.register-role-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-align: center;
}

.role-segments {
  display: flex;
  padding: 3px;
  gap: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}

.role-segment {
  position: relative;
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.role-segment input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

.role-segment__face {
  display: block;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.role-segment input:checked + .role-segment__face {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.role-segment input:focus-visible + .role-segment__face {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.register-role-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
  min-height: 2.8em;
}

.input-readonly {
  opacity: 0.72;
  cursor: default;
}

.register-divider {
  height: 1px;
  margin: 0 0 calc(var(--space-4) + var(--space-2));
  background: var(--hairline);
  border: none;
}

.register-step-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.register-terms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 calc(var(--space-4) + var(--space-1));
  text-align: left;
}

.register-terms__item {
  font-size: 13px;
}

.register-terms__item a {
  color: var(--accent);
  font-weight: 600;
}

.register-status {
  margin-top: var(--space-4);
  text-align: center;
}

.register-footer {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-3) - 2px);
  font-size: 13px;
  color: var(--text-muted);
}

.register-footer a {
  color: var(--text);
  font-weight: 500;
}

.register-footer a:hover {
  opacity: 0.85;
}

.register-footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}

/* Inline toolbars (promo “Ver todas”, search “Aplicar”) — base .btn is full-width for forms */
.btn--compact {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.store-nav-actions .btn--ghost {
  padding: 10px 16px;
}

/* Sign out — icon-only control (nav + account panel) */
.btn--signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 10px;
  color: #e5484d;
}

.btn--signout svg {
  display: block;
  flex-shrink: 0;
}

.store-nav-actions .btn--signout {
  padding: 8px 10px;
}

.btn--signout:hover:not(:disabled) {
  color: #ff6d6d;
  background: rgba(229, 72, 77, 0.14);
  border-color: rgba(229, 72, 77, 0.4);
}

.btn--signout:focus-visible {
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.45);
}

/* ---------------------------------------------------------------------------
   Home brand fold.

   Replaces the orphan .store-hero* rules that survived the marketing block's
   removal: nothing rendered them, so the shimmer keyframes and the
   seller-context variants were dead weight. What ships here is the live
   composition on `/` — one headline carrying the operator name and tagline,
   one supporting line, one CTA pair, and one atmosphere plane behind them.
   No cards: the fold has no interaction to house in one.
   --------------------------------------------------------------------------- */
.store-hero {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto calc(var(--space-6) + var(--space-2));
  padding: clamp(2rem, 5.5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.store-hero[hidden] {
  display: none;
}

/* The dominant plane. Two soft light sources plus a hairline keep it reading as
   depth rather than as a flat colour field. */
.store-hero__plane {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(255, 214, 170, 0.16) 0%, transparent 58%),
    radial-gradient(90% 90% at 92% 12%, rgba(150, 190, 255, 0.14) 0%, transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.28) 100%),
    #0b0b0f;
}

.store-hero__inner {
  position: relative;
  max-width: 46rem;
}

.store-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin: 0 0 var(--space-4);
}

/* The brand name is the largest thing on the page — the fold has to read as
   Despacha with the nav covered up. */
.store-hero__brand {
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--text);
}

.store-hero__tagline {
  font-size: clamp(1.0625rem, 3.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}

.store-hero__lede {
  margin: 0 0 var(--space-4);
  max-width: 34rem;
  font-size: var(--text-body-s);
  line-height: 1.55;
  letter-spacing: var(--text-body-s-ls);
  color: var(--text-muted);
}

.store-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 calc(var(--space-5) + var(--space-2));
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.store-hero__trust li {
  position: relative;
}

.store-hero__trust li + li::before {
  content: "·";
  margin-right: var(--space-4);
  font-weight: 500;
}

.store-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* .btn is width:100% by design (it is a form button first), so the hero pair
   has to opt out or it stacks into two full-width slabs.

   The transparent border is what keeps the three the same height: .btn draws no
   border and .btn--ghost draws a 1px one, so without it the solid CTA sits 2px
   shorter than the two beside it — invisible in a row, obvious once they stack
   full-width on a phone. */
.store-hero__cta {
  width: auto;
  margin-top: 0;
  padding: 13px 26px;
  font-size: var(--text-body-m);
  font-weight: 600;
  border: 1px solid transparent;
}

/* .store-hero__cta and .btn--ghost are both (0,1,0) and this file loads later,
   so the ghost outline has to be restored at (0,2,0) rather than left to win. */
.store-hero__cta.btn--ghost {
  border-color: var(--hairline);
}

/* The label is unknown until /api/ambassadors/ answers, but only for a visitor
   who might be signed in (see home.html). While it is unknown the text is
   masked rather than replaced: `color: transparent` keeps the join label laying
   out, so the button holds its width and the CTA row does not reflow, and the
   shimmer paints over the space it reserves. The alternative — showing the join
   wording and correcting it — told an existing ambassador to become one.

   `currentColor` is deliberately avoided in the gradient: the ghost button's
   ink differs between themes, and the shimmer has to read on both. */
.store-hero__cta--ambassador .store-hero__cta-label {
  transition: opacity 0.18s var(--ease);
}

.store-hero__cta--ambassador.is-pending .store-hero__cta-label {
  color: transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    110deg,
    rgba(128, 128, 128, 0.1) 0%,
    rgba(128, 128, 128, 0.26) 45%,
    rgba(128, 128, 128, 0.1) 90%
  );
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .store-hero__cta--ambassador.is-pending .store-hero__cta-label {
    animation: shimmer 1.35s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-hero__cta--ambassador .store-hero__cta-label {
    transition: none;
  }
}

/* Stack once the three CTAs stop fitting on one line. The old cut-off was
   479px, which left 480–639px wrapping in row direction: each CTA took its own
   line anyway, but sized to its own label, so the fold ended on three
   left-aligned buttons of three different widths. Stacking through the whole
   band gives one deliberate column instead of a ragged one. */
@media (max-width: 639px) {
  .store-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .store-hero__cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

.home-section-inner {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.section-row {
  margin-bottom: var(--space-3);
}

.section-row--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Section labels are real <h2>s so the home page has an outline instead of
   jumping H1 → H3. The reset keeps them looking exactly like the eyebrow they
   were as <span>s — the heading level is for the document structure, not for
   size. */
.section-kicker {
  display: block;
  margin: 0;
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--text-overline-ls);
  line-height: var(--text-overline-lh);
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-title {
  display: block;
  margin: 0;
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-transform: none;
  color: var(--text);
}

.section-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.home-band {
  margin-bottom: 40px;
}

.promo-band.home-band .section-row--split {
  align-items: center;
  flex-wrap: wrap;
}

.picks-band.home-band .section-row--split {
  align-items: center;
  flex-wrap: wrap;
}

.picks-band .section-row--split .btn,
.promo-band .section-row--split .btn {
  flex-shrink: 0;
}

.home-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .home-spotlight-grid {
    /* `auto-fit`, not a hard-coded column count. The spotlight list is data
       (HOMEPAGE_SPOTLIGHT_SLUGS), so its length changes without anyone touching
       this file — adding a fifth slug to a `repeat(4, ...)` grid stranded one
       card alone on a second row. auto-fit derives the track count from the
       available width and *collapses* empty tracks, so a shorter list still
       stretches to fill the row. At the 1086px container this yields five
       208px tracks. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.home-spotlight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 132px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.home-spotlight-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.home-spotlight-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.home-spotlight-card__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.home-spotlight-card__cta {
  font-size: 13px;
  color: var(--text-muted);
}

/* The sprite host must not take part in layout — it holds <symbol>s only. */
.os-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Theme toggle — crossfade dark ↔ light (View Transitions API + overlay fallback) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: store-theme-fade-out;
  z-index: 1;
}

::view-transition-new(root) {
  animation-name: store-theme-fade-in;
  z-index: 2;
}

@keyframes store-theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes store-theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.store-theme-fade {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s ease-in-out;
}

.store-theme-fade--active {
  pointer-events: auto;
}

.store-theme-fade--visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root) {
    animation: none !important;
  }

  .store-theme-fade {
    transition: none;
  }
}

/* Light shop theme — toggled via `html.nav-theme-light` (navbar sun/moon control).
   The --shop-* values moved to the token layer in 01-base.css, where they are
   aliased onto --bg-0 / --text / --text-muted so the storefront and the auth
   shell stop maintaining two parallel palettes. Only the UA hint stays here. */
html.nav-theme-light {
  color-scheme: light;
}
/* The blanket link overrides that used to live here are gone.
   `html.nav-theme-light a` carried specificity (0,1,2) and therefore beat every
   single-class component rule — `.empty-state__link`, `.product-card__hit`,
   `.skip-link`, `.admin-act--danger`. Each of those then needed its own
   `html.nav-theme-light` counter-override just to get its colour back, which is
   a large share of why this layer grew to 962 rules.
   Now that --text-muted and --text are theme-aware, the base `a` rule in
   01-base.css already resolves to the same values in light mode, so these were
   pure redundancy — and actively harmful redundancy at that. */

html.nav-theme-light .store-page--home::before {
  background: radial-gradient(ellipse 100% 70% at 50% -15%, rgba(255, 255, 255, 0.75) 0%, transparent 52%),
    radial-gradient(ellipse 60% 45% at 100% 30%, rgba(220, 220, 225, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(215, 215, 220, 0.4) 0%, transparent 45%);
  opacity: 0.9;
}
html.nav-theme-light .store-mobile-tabbar {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.94);
}
html.nav-theme-light .store-mobile-tab--active .store-mobile-tab__icon::before {
  background: rgba(0, 0, 0, 0.06);
}

html.nav-theme-light .store-mobile-tab--active::after {
  background: #007aff;
  opacity: 1;
}

html.nav-theme-light .store-mobile-tab:focus-visible {
  outline-color: rgba(0, 122, 255, 0.45);
}

/* Light mode — all standard .btn controls: black fill, white label */
html.nav-theme-light .btn {
  color: #fff;
  background: #1d1d1f;
  border: 1px solid #1d1d1f;
}

html.nav-theme-light .btn:hover:not(:disabled) {
  color: #fff;
  background: #1d1d1f;
  opacity: 0.88;
}

html.nav-theme-light .btn--compact:hover:not(:disabled),
html.nav-theme-light .btn--buy:hover:not(:disabled),
html.nav-theme-light .btn--pick-buy:hover:not(:disabled) {
  color: #fff;
  background: #1d1d1f;
  opacity: 0.88;
}

/* `.btn--ghost` is the secondary control everywhere, but `html.nav-theme-light
   .btn` (0,2,1) out-specifies it (0,1,0) — so in light mode every secondary
   painted as a second primary and CTA pairs read as two identical slabs.
   Restated here at matching weight from the light token layer rather than
   patched per component. */
html.nav-theme-light .btn--ghost {
  color: var(--text);
  background: transparent;
  /* var(--hairline) is rgba(0, 0, 0, 0.1) under this class (01-base.css), and
     matches the token the hover state below already uses. */
  border: 1px solid var(--hairline);
}

html.nav-theme-light .btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
  opacity: 1;
}
html.nav-theme-light .btn--danger:hover:not(:disabled),
html.nav-theme-light .btn--signout:hover:not(:disabled) {
  color: #fff;
  background: #1d1d1f;
  opacity: 0.88;
}

/* Light navbar surface */
html.nav-theme-light .store-nav--home {
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-text: #1d1d1f;
  --nav-text-muted: #6e6e73;
  --nav-hairline: rgba(0, 0, 0, 0.1);
  --nav-surface: rgba(0, 0, 0, 0.04);
  --nav-surface-hover: rgba(0, 0, 0, 0.07);
  --nav-focus: rgba(0, 122, 255, 0.45);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 28px rgba(0, 0, 0, 0.08);

  color: var(--nav-text);
  background: var(--nav-bg);
  border-color: var(--nav-border);
  box-shadow: var(--nav-shadow);
}

html.nav-theme-light .store-nav .store-nav-actions__end {
  border-left-color: var(--nav-hairline);
}
html.nav-theme-light .store-nav .store-nav-search {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.72);
}
html.nav-theme-light .store-nav .store-nav-search__input::placeholder {
  color: rgba(110, 110, 115, 0.95);
}

html.nav-theme-light .store-nav .store-nav-search__submit {
  border-left-color: rgba(0, 0, 0, 0.14);
  background: #1d1d1f;
  color: #fff;
}

html.nav-theme-light .store-nav .store-nav-search__submit:hover {
  background: #333336;
  color: #fff;
  opacity: 0.92;
}

html.nav-theme-light .store-nav .store-nav-search__submit:focus-visible {
  box-shadow: inset 0 0 0 2px var(--nav-focus);
}

html.nav-theme-light .store-nav-typeahead {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .store-nav-typeahead__item {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .store-nav-typeahead__item:hover,
html.nav-theme-light .store-nav-typeahead__item.is-active {
  background: var(--shop-bg-muted, #f2f2f7);
}

html.nav-theme-light .store-nav-typeahead__kind {
  color: var(--shop-text-muted, #6e6e73);
}
html.nav-theme-light .store-nav .nav-user-menu__trigger:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: var(--nav-surface-hover);
}

html.nav-theme-light .store-nav .nav-user-menu__trigger:focus-visible {
  box-shadow: 0 0 0 3px var(--nav-focus);
}
html.nav-theme-light .store-nav .nav-user-menu__dropdown {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .store-nav .nav-user-menu__item:hover,
html.nav-theme-light .store-nav .nav-user-menu__item:focus-visible {
  background: var(--nav-surface-hover);
}

/* The dropdown pane is painted white above, so its dividers and the identity
   avatar's fill — white at 10% and 8% in the dark theme — have to be reversed
   rather than left to disappear into it. */
html.nav-theme-light .store-nav .nav-user-menu__head {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .store-nav .nav-user-menu__sep {
  border-top-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .store-nav .nav-user-menu__label {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .store-nav .nav-user-menu__head-avatar {
  background: rgba(0, 0, 0, 0.06);
}
html.nav-theme-light .store-nav .btn--notifications:hover:not(:disabled) {
  color: #fff;
  background: #1d1d1f;
  opacity: 0.88;
}

html.nav-theme-light .store-nav .btn--theme-toggle {
  color: var(--shop-text, #1d1d1f);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .store-nav .btn--theme-toggle:hover:not(:disabled) {
  color: var(--shop-text, #1d1d1f);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.16);
  opacity: 1;
}

/* Light mode — Categorias em destaque (same toggle as navbar) */
html.nav-theme-light .home-spotlight .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #store-home-root .home-spotlight .section-sub {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-home-root .home-spotlight-card {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: var(--shop-text, #1d1d1f);
  box-shadow: var(--elev-3);
}

html.nav-theme-light #store-home-root .home-spotlight-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: #ffffff;
}

html.nav-theme-light #store-home-root .home-spotlight-card__mark {
  color: var(--shop-text, #1d1d1f);
  background: var(--shop-bg-muted, #f2f2f7);
}

html.nav-theme-light #store-home-root .home-spotlight-card__label {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-home-root .home-spotlight-card__cta {
  color: var(--shop-text-muted, #6e6e73);
}

/* Light mode — home brand fold. Ink comes from the light token layer in
   01-base.css; only the plane needs restating. */
html.nav-theme-light .store-hero__plane {
  border-color: rgba(0, 0, 0, 0.07);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(255, 206, 150, 0.4) 0%, transparent 58%),
    radial-gradient(90% 90% at 92% 12%, rgba(178, 205, 255, 0.42) 0%, transparent 60%),
    linear-gradient(168deg, #ffffff 0%, #fbfaf8 52%, #f1f0ee 100%);
  box-shadow: var(--sheen), var(--elev-5);
}

/* Light mode — Lojas disponíveis band (same toggle as navbar) */
html.nav-theme-light #stores-section .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #stores-section .product-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #stores-section .product-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}
html.nav-theme-light #stores-section .product-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #stores-section .seller-trust-badge--trusted {
  color: var(--ok);
  border-color: rgba(27, 127, 58, 0.28);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light #stores-section .seller-trust-badge--top_rated {
  color: #9a6700;
  border-color: rgba(154, 103, 0, 0.28);
  background: rgba(154, 103, 0, 0.1);
}

/* Light mode — Promoções band (same toggle as navbar) */
html.nav-theme-light #promo-section .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #promo-section .promo-card--product {
  border-color: rgba(229, 72, 77, 0.32);
  background: linear-gradient(168deg, rgba(255, 242, 243, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 8px 24px rgba(229, 72, 77, 0.08);
}

html.nav-theme-light #promo-section .promo-card--product:hover {
  border-color: rgba(229, 72, 77, 0.48);
  box-shadow: 0 12px 32px rgba(229, 72, 77, 0.12);
}

html.nav-theme-light #promo-section .promo-card--product .promo-card__media {
  background: linear-gradient(155deg, rgba(255, 228, 230, 0.95) 0%, rgba(245, 240, 241, 0.98) 100%);
}

html.nav-theme-light #promo-section .promo-card--product .promo-card__tag {
  color: #c41e3a;
  background: rgba(229, 72, 77, 0.1);
  border-color: rgba(229, 72, 77, 0.22);
}

html.nav-theme-light #promo-section .promo-card--product .price-stack__now {
  color: #c41e3a;
  text-shadow: none;
}

html.nav-theme-light #promo-section .promo-card__media--ph,
html.nav-theme-light #promo-section .promo-card--product .promo-card__media--ph {
  color: rgba(196, 30, 58, 0.14);
}

/* Light mode — Produtos em destaque band (same toggle as navbar) */
html.nav-theme-light #picks-section .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #picks-section .pick-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #picks-section .pick-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}

html.nav-theme-light #picks-section .pick-card__media {
  background: linear-gradient(160deg, rgba(235, 235, 240, 0.95), rgba(215, 215, 220, 0.98));
}

html.nav-theme-light #picks-section .pick-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #picks-section .pick-card__name,
html.nav-theme-light #picks-section .pick-card__name a {
  color: #1d1d1f;
}

html.nav-theme-light #picks-section .pick-card__price,
html.nav-theme-light #picks-section .price-stack__now {
  color: #1d1d1f;
}

html.nav-theme-light #picks-section .price-stack__was {
  color: #6e6e73;
}

html.nav-theme-light #picks-section .wish-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
}

html.nav-theme-light #picks-section .wish-btn:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light #picks-section .wish-btn.is-saved {
  background: rgba(255, 71, 122, 0.12);
  border-color: rgba(255, 71, 122, 0.35);
  color: #c41e3a;
}

/* Recommendation rails — reuse picks card look; light-mode text on white surfaces */
.rec-band {
  margin: var(--space-4) 0;
}
.rec-band .section-sub {
  margin-top: var(--space-1);
}
html.nav-theme-light #store-home-root .rec-band .home-section-inner,
html.nav-theme-light #store-search-root .rec-band .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-3);
}
html.nav-theme-light #store-home-root .section-title,
html.nav-theme-light #store-home-root .catalog-title {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-home-root .section-sub,
html.nav-theme-light #store-home-root .store-hero__trust,
html.nav-theme-light #store-home-root .store-hero__lede {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-home-root .rec-band .section-kicker,
html.nav-theme-light #store-home-root .rec-band .section-title,
html.nav-theme-light #store-search-root .rec-band .section-kicker,
html.nav-theme-light .rec-band .premium-section-title,
html.nav-theme-light .rec-band .checkout-section-title {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .rec-band .pick-card__name,
html.nav-theme-light .rec-band .pick-card__name a,
html.nav-theme-light .rec-band .pick-card__price {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .shop-product-main .rec-band .pick-card__name,
html.nav-theme-light .shop-product-main .rec-band .pick-card__name a,
html.nav-theme-light .shop-product-main .rec-band .pick-card__price,
html.nav-theme-light .shop-product-main .rec-band .premium-section-title {
  color: var(--shop-text, #1d1d1f);
}

/* Light mode — Todos os produtos / catálogo principal (home) */
html.nav-theme-light #store-home-root #catalog {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light #store-home-root #catalog .product-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-home-root #catalog .product-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}
html.nav-theme-light #store-home-root #catalog .product-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}
html.nav-theme-light #store-home-root #catalog .price-stack__was {
  color: #6e6e73;
}

html.nav-theme-light #store-home-root #catalog .wish-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
}

html.nav-theme-light #store-home-root #catalog .wish-btn:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light #store-home-root #catalog .wish-btn.is-saved {
  background: rgba(255, 71, 122, 0.12);
  border-color: rgba(255, 71, 122, 0.35);
  color: #c41e3a;
}
html.nav-theme-light #store-home-root #catalog .catalog-pagination__meta,
html.nav-theme-light #store-home-root #catalog .catalog-pagination__fallback,
html.nav-theme-light #store-home-root #catalog .catalog-pagination__btn--disabled {
  color: #6e6e73;
}

html.nav-theme-light #store-home-root #catalog .product-skeleton {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light #store-home-root #catalog .skeleton-shimmer {
  background: linear-gradient(
    110deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.04) 90%
  );
  background-size: 200% 100%;
}

/* Light mode — auth shell (login, register, password reset) */
html.nav-theme-light .shell--center .panel,
html.nav-theme-light .shell--center .panel--register {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

/* Auth fields are white, not grey. The grey fill (#e5e5ea) read as a *filled*
   input rather than an empty one, and the placeholder rule below compounded it
   by painting placeholder text in the same near-black as a real value. */
html.nav-theme-light .shell--center .field input,
html.nav-theme-light .shell--center .field textarea,
html.nav-theme-light .shell--center .field select {
  color: var(--shop-text, #1d1d1f);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shell--center .field input:hover,
html.nav-theme-light .shell--center .field textarea:hover,
html.nav-theme-light .shell--center .field select:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}

html.nav-theme-light .shell--center .field input:focus,
html.nav-theme-light .shell--center .field textarea:focus,
html.nav-theme-light .shell--center .field select:focus {
  border-color: rgba(0, 0, 0, 0.18);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light .shell--center .password-field__toggle:hover {
  color: var(--shop-text, #1d1d1f);
  background: rgba(0, 0, 0, 0.06);
}

html.nav-theme-light .shell--center .password-field__toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light #new-this-week-section .home-section-inner,
html.nav-theme-light #newsletter-section .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light .new-this-week-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ======== 03-catalog.css ======== */
/* Full-page promotions hub (/promocoes/) */
.store-main--promocoes {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-bottom: 48px;
}

.store-page--promocoes .promo-band--hub {
  margin-bottom: calc(var(--space-5) + var(--space-1));
}

.store-page--promocoes .promo-hub-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.store-page--promocoes .promo-hub-head > .btn {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
  align-self: center;
}

.store-page--promocoes .promo-band--hub .promo-grid {
  width: 100%;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .promo-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-3) + var(--space-1));
  }
}

.promo-card {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.promo-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.promo-card--accent {
  background: linear-gradient(145deg, rgba(55, 55, 70, 0.35) 0%, rgba(25, 25, 30, 0.55) 100%);
}

.promo-card__tag {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.promo-card__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}

.promo-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.promo-empty {
  margin: 14px 0 0;
  text-align: center;
}

.promo-grid.promo-grid--products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (min-width: 640px) {
  .promo-grid.promo-grid--products {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

.promo-card--product {
  padding: 0;
  overflow: hidden;
  border-color: rgba(229, 72, 77, 0.42);
  background: linear-gradient(
    168deg,
    rgba(95, 28, 34, 0.5) 0%,
    rgba(28, 12, 14, 0.82) 42%,
    rgba(10, 6, 8, 0.96) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 130, 140, 0.12), var(--elev-4);
}

.promo-card--product:hover {
  border-color: rgba(255, 110, 118, 0.62);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 160, 168, 0.18),
    0 16px 44px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(229, 72, 77, 0.18);
}

.promo-card__media-wrap {
  position: relative;
}

.promo-card--out-of-stock .promo-card__media img {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.promo-card--product .promo-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(155deg, rgba(130, 40, 48, 0.55) 0%, rgba(24, 8, 10, 0.94) 100%);
  overflow: hidden;
}

.promo-card__hit {
  display: block;
  color: inherit;
  text-decoration: none;
}

.promo-card__hit:hover {
  color: inherit;
}

.promo-card--product .promo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-card__media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.1);
}

.promo-card--product .promo-card__body {
  padding: var(--space-4) calc(var(--space-4) + var(--space-2)) 18px;
}

.promo-card--product .promo-card__tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffc8cb;
  background: rgba(229, 72, 77, 0.26);
  border: 1px solid rgba(255, 120, 128, 0.35);
}

.promo-card--product .price-stack__now {
  color: #ff8a8f;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(229, 72, 77, 0.35);
}

.promo-card--product .promo-card__media--ph {
  color: rgba(255, 130, 138, 0.2);
}

.price-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.price-stack__was {
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 0.92em;
}

.price-stack__now {
  font-weight: 600;
  color: var(--ok);
}

.product-hero__price .price-stack__now {
  color: var(--ok);
}

/* /lojas/ hub page */
.store-main--lojas {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-bottom: 48px;
}

.store-page--lojas .stores-band--hub {
  margin-bottom: calc(var(--space-5) + var(--space-1));
}

.store-page--lojas .stores-hub-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.store-page--lojas .stores-hub-head > .btn {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
  align-self: center;
}

.store-page--lojas .stores-band--hub .product-grid {
  width: 100%;
}

.stores-empty {
  margin: 14px 0 0;
  text-align: center;
}

/* Light mode — /lojas/ hub (Ver todas as lojas) */
html.nav-theme-light #store-lojas-root .stores-band--hub .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #store-lojas-root .product-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-lojas-root .product-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}
html.nav-theme-light #store-lojas-root .product-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-lojas-root .seller-trust-badge--trusted {
  color: var(--ok);
  border-color: rgba(27, 127, 58, 0.28);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light #store-lojas-root .seller-trust-badge--top_rated {
  color: #9a6700;
  border-color: rgba(154, 103, 0, 0.28);
  background: rgba(154, 103, 0, 0.1);
}
.seller-trust-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
}

.seller-trust-badge--trusted {
  color: #8fd99a;
  border-color: rgba(143, 217, 154, 0.45);
  background: rgba(40, 90, 50, 0.35);
}

.seller-trust-badge--top_rated {
  color: #f5d782;
  border-color: rgba(245, 215, 130, 0.4);
  background: rgba(90, 70, 20, 0.35);
}

.seller-store-reviews {
  margin-bottom: calc(var(--space-5) + var(--space-1));
  margin-top: clamp(36px, 5vw, 48px);
  padding-top: clamp(32px, 5vw, 44px);
  width: 100%;
  max-width: min(100%, 960px);
  margin-inline: auto;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.seller-store-reviews.product-reviews {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(32px, 5vw, 44px);
}

.seller-store-reviews .premium-section-title {
  margin-bottom: var(--space-3);
}

.seller-store-reviews > .shop-muted {
  text-align: left;
  max-width: none;
  margin-bottom: var(--space-3);
}

.seller-store-reviews .shop-review-list {
  width: 100%;
  max-width: none;
  text-align: left;
}

.seller-public-hero {
  width: 100%;
  max-width: min(100%, 960px);
  margin-inline: auto;
  margin-bottom: 0;
  padding: calc(var(--space-4) + var(--space-1)) 0 clamp(36px, 5vw, 48px);
  border-bottom: 1px solid var(--hairline);
}

.seller-public-card {
  gap: var(--space-4);
  margin-top: 0;
  align-items: flex-start;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.seller-public-card .product-seller-card__avatar {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  font-size: 20px;
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.seller-public-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.seller-public-title-main {
  flex: 1;
  min-width: 0;
}

.seller-public-eyebrow {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seller-public-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.seller-public-name-row .product-seller__name {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 1.875rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.seller-public-share {
  flex-shrink: 0;
  margin-top: 4px;
}

.seller-public-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seller-public-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.seller-public-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 600;
  color: var(--text);
}

.seller-public-rating__score {
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}

.seller-public-rating__star {
  color: #f5c842;
  font-size: 0.8125rem;
  line-height: 1;
}

.seller-public-rating__count {
  margin-left: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.seller-public-rating__count::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.45;
}

.seller-public-stat-sep {
  color: var(--text-muted);
  opacity: 0.45;
  user-select: none;
}

.seller-public-bio {
  margin: 0 0 var(--space-3);
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.seller-public-facts {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-width: none;
}

.seller-public-facts div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  grid-template-columns: none;
}

.seller-public-facts dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.seller-public-facts dt::after {
  content: ":";
}

.seller-public-facts dd {
  margin: 0;
  font-size: 0.875rem;
}

.seller-public-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: none;
}

.seller-public-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.seller-public-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.seller-public-action--contact {
  background: transparent;
  text-decoration: underline;
}

.seller-public-action--contact:hover {
  opacity: 0.72;
  background: transparent;
}

.seller-public-actions__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
}

.seller-public-actions__icons .share-url-copy-icon {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
}

.seller-public-actions__icons .share-url-copy-icon:hover {
  color: var(--text);
  background: transparent;
}

.seller-public-report {
  margin: 0;
  flex-shrink: 0;
}

#store-seller-public-root .seller-public-report-link.content-report-btn,
#store-seller-public-root .seller-public-report .seller-public-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition: color 0.15s ease;
}

#store-seller-public-root .seller-public-report-link.content-report-btn::before,
#store-seller-public-root .seller-public-report .seller-public-report-link::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.75;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

#store-seller-public-root .seller-public-report-link.content-report-btn:hover,
#store-seller-public-root .seller-public-report .seller-public-report-link:hover {
  color: var(--text);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.share-url-copy-icon svg {
  width: 16px;
  height: 16px;
}

.seller-review-form {
  margin: var(--space-3) 0 var(--space-4);
  width: 100%;
  max-width: 32rem;
  padding: var(--space-3) 0 var(--space-4);
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.seller-review-form__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.seller-review-form__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.seller-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.seller-review-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.seller-review-star.is-active {
  opacity: 1;
  color: var(--star);
}

.seller-review-star:hover,
.seller-review-star:focus-visible {
  opacity: 1;
  background: rgba(245, 200, 66, 0.1);
}

.seller-review-form__comment {
  display: block;
  width: 100%;
  min-height: 72px;
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  resize: vertical;
}

.seller-review-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.seller-review-form__public {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.seller-review-form__public input {
  margin: 0;
}

.seller-review-form .status {
  margin: var(--space-2) 0 0;
}

.seller-review-list .shop-review-item {
  padding: var(--space-3) 0;
}

.seller-review-item__stars {
  margin-bottom: 4px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #f5c842;
}

.seller-review-item__comment {
  margin: 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.seller-review-item .shop-review-report {
  margin-top: var(--space-2);
}

.picks-track {
  display: flex;
  gap: calc(var(--space-3) + var(--space-1));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.picks-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.pick-card {
  position: relative;
  flex: 0 0 min(280px, 78vw);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pick-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--elev-5);
}

@media (prefers-reduced-motion: no-preference) {
  .pick-card--enter {
    animation: cardEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

.pick-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, rgba(50, 50, 55, 0.55), rgba(18, 18, 20, 0.92));
  position: relative;
  overflow: hidden;
}

.pick-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .pick-card:hover .pick-card__media img {
    transform: scale(1.04);
  }
}

.pick-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.1);
}

.pick-card__body {
  padding: 14px 16px 16px;
}

.pick-card__cat {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pick-card__name {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pick-card__name .pick-card__hit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pick-card__media-wrap {
  position: relative;
  z-index: 2;
}

.pick-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pick-card__price {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.btn--pick-buy {
  width: auto;
  margin: 0;
  padding: 8px 16px;
  font-size: 13px;
}

.catalog-block.hidden {
  display: none;
}

.catalog-jump {
  display: flex;
  justify-content: center;
  margin: var(--space-5) 0 0;
}

.catalog-jump[hidden] {
  display: none;
}

.catalog-jump__btn {
  width: auto;
  margin-top: 0;
}

.catalog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-secondary);
}

.catalog-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.catalog-count {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Search & browse — minimal toolbar (/search/, matches nav pill aesthetic) */
.store-main--search {
  padding-bottom: 48px;
}

/* Public seller (`/vendedores/<id>/`) — space between profile panel, sort bar, and listings */
.store-page--seller-public .store-main--search {
  align-items: stretch;
  padding-inline: clamp(12px, 3vw, 24px);
}

.store-page--seller-public #seller-public-body {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.store-page--seller-public #seller-browse-order-form {
  margin-top: 22px;
  margin-bottom: calc(var(--space-5) + var(--space-1));
}

#store-seller-public-root #catalog .seller-public-services {
  margin-top: calc(var(--space-5) + var(--space-1));
  padding-top: calc(var(--space-4) + var(--space-1));
  border-top: 1px solid var(--hairline);
}

#store-seller-public-root #catalog .seller-public-services .catalog-head {
  margin-bottom: calc(var(--space-3) + var(--space-1));
}

#store-seller-public-root #catalog .product-card--service .product-card__meta > span:first-child {
  color: var(--text-muted);
  font-size: 13px;
}

.store-category-nav {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto calc(var(--space-3) + var(--space-1));
  padding: 0 clamp(12px, 3vw, 24px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.store-category-nav::-webkit-scrollbar {
  display: none;
}

.store-category-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: min-content;
}

.store-category-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.store-category-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.store-category-nav__link.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------------
   Active filters.

   The bar shows what a filter is set to but not that it is set — a shopper
   scrolling results has no reading of why the list is short. These chips name
   each active filter and remove exactly that one; the trailing link clears all.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Breadcrumbs.

   Loja › Categoria › Produto. Deliberately quiet — caption size, muted, no
   chrome around it: this is orientation for the person who arrived from search
   or a shared link, not a navigation component competing with the page title.
   --------------------------------------------------------------------------- */
.breadcrumbs {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.breadcrumbs.hidden {
  display: none;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The current page is the longest label and the least useful to read in full. */
.breadcrumbs__current {
  overflow: hidden;
  max-width: 22ch;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs__sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.browse-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 calc(var(--space-4) + var(--space-2));
}

.browse-active[hidden] {
  display: none;
}

.browse-active__label {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.browse-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-caption);
  text-decoration: none;
}

.browse-chip:hover {
  background: var(--surface-hover);
}

.browse-chip__x {
  font-size: var(--text-ui);
  line-height: 1;
  color: var(--text-muted);
}

.browse-chip:hover .browse-chip__x {
  color: var(--text);
}

.browse-active__clear {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.browse-active__clear:hover {
  color: var(--text);
}

/* Home in browse mode. Sticky, because the way out of a filtered catalog should
   not require scrolling back to the top. */
.home-browse-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  margin: 0 auto var(--space-4);
  padding: var(--space-3) clamp(12px, 3vw, 24px);
  /* Opaque first: a browser without color-mix must not get a transparent
     sticky bar with the catalog scrolling through it. */
  background: var(--bg-0);
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.home-browse-bar[hidden] {
  display: none;
}

.home-browse-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.home-browse-bar__label {
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-browse-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-browse-bar__clear {
  margin-left: auto;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.browse-filters--minimal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 calc(var(--space-4) + var(--space-2));
  padding: 0;
  border: none;
  background: none;
}

.browse-filters--minimal .browse-filters__pill {
  margin: 0;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  letter-spacing: -0.01em;
  outline: none;
  min-width: 0;
}

.browse-filters--minimal .browse-filters__pill::placeholder {
  color: rgba(160, 160, 170, 0.85);
}

.browse-filters--minimal .browse-filters__pill:focus-visible {
  box-shadow: var(--focus-ring);
}

.browse-filters--minimal .browse-filters__pill--num {
  width: 6.5rem;
  flex: 0 0 auto;
}

.browse-filters--minimal .browse-filters__pill:not(.browse-filters__pill--num):not(.browse-filters__pill--sort) {
  flex: 1 1 120px;
  max-width: min(220px, 100%);
}

.browse-filters--minimal .browse-filters__pill--sort {
  flex: 1 1 118px;
  max-width: 160px;
  cursor: pointer;
  padding-right: 10px;
}

.browse-filters--minimal .browse-filters__go {
  flex-shrink: 0;
}

.browse-filters__clear {
  font-size: 13px;
  font-weight: 500;
  /* Was rgba(245,245,247,0.48) — a dark-mode ink that rendered at 1.09:1 once
     its light override was removed. The token is correct in both themes. */
  color: var(--text-muted);
  text-decoration: none;
  padding: 9px 8px;
  letter-spacing: -0.01em;
}

.browse-filters__clear:hover {
  color: var(--text);
}

.catalog-pagination {
  margin-top: 32px;
}

.catalog-pagination--interactive .catalog-pagination__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-3) - 2px);
  margin-top: 18px;
}

.catalog-pagination__fallback {
  margin: 0;
  font-size: 12px;
  text-align: center;
}

.catalog-infinite-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.catalog-load-more {
  min-width: 200px;
}

.catalog-pagination--more {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-4) + var(--space-1));
}

.catalog-pagination__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--space-3) + var(--space-1));
}

.catalog-pagination__meta {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.catalog-pagination__btn--disabled {
  opacity: 0.38;
  font-size: 14px;
}

.store-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
}

.product-card--latest {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: var(--elev-5);
}

.product-card__latest-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
  color: #1d1d1f;
  background: rgba(255, 214, 10, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--elev-2);
}

.product-card--latest .product-card__name a {
  font-weight: 650;
}

@media (prefers-reduced-motion: no-preference) {
  .product-card--latest.product-card--enter,
  .product-card--latest {
    animation: productLatestIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

@keyframes productLatestIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
html.nav-theme-light .product-card__latest-badge {
  color: #1d1d1f;
  background: #ffd60a;
  border-color: rgba(0, 0, 0, 0.1);
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .product-card--enter {
    animation: cardEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  box-shadow: var(--elev-5);
}

.product-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, rgba(50, 50, 55, 0.6), rgba(20, 20, 22, 0.9));
  position: relative;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .product-card:hover .product-card__media img {
    transform: scale(1.05);
  }
}

.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: -0.03em;
}

.product-card__body {
  padding: var(--space-4) calc(var(--space-4) + var(--space-2)) 18px;
}

.product-card__cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.product-card__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 14px;
  color: var(--text-muted);
}

.product-card__price {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   One target per card.

   The card carried three links to the same PDP — media, name, and a full-width
   "Ver produto" button — plus an inline share icon in the seller row. The button
   is gone (Store.productCardBuyHtml returns nothing) and the whole card is the
   hit area instead; share and wishlist sit over the image as secondary
   controls. Content is back to image, name, seller, rating, price.
   --------------------------------------------------------------------------- */
.product-card {
  position: relative;
}

/* The name's link spans the card. Buttons over the media raise themselves above
   it, so the heart and share still take their own clicks. */
.product-card__name .product-card__hit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__media-wrap {
  z-index: 2;
}

.product-card__actions:empty {
  display: none;
}

/* Secondary control, matched to the heart it sits beside. Sits in the corner
   slot on its own, and steps aside when a wishlist heart precedes it. */
.product-card__share-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: var(--radius-pill);
}

.wish-btn + .product-card__share-overlay {
  right: 56px;
}

.product-card__actions {
  margin-top: 14px;
}

.product-card__actions .btn--buy {
  width: 100%;
  margin-top: 0;
  padding: 11px 16px;
  font-size: 14px;
}

.product-card__actions .btn--buy.btn--oos {
  display: block;
  width: 100%;
  cursor: not-allowed;
  opacity: 0.72;
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--hairline);
  pointer-events: none;
}

/* Wishlist heart on catalog cards */
.product-card__media-wrap,
.pick-card__media-wrap {
  position: relative;
}

.product-stock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}

.product-stock-badge--out {
  color: #fff;
  background: rgba(120, 120, 128, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--elev-2);
}

.product-card--out-of-stock .product-card__media img,
.pick-card--out-of-stock .pick-card__media img {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.product-card__oos,
.pick-card__oos {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html.nav-theme-light .product-stock-badge--out {
  color: #fff;
  background: rgba(72, 72, 78, 0.92);
}

html.nav-theme-light .product-card__actions .btn--buy.btn--oos {
  color: #6e6e73;
  background: rgba(0, 0, 0, 0.05);
}

.product-card__media-wrap > .product-card__media,
.pick-card__media-wrap > .pick-card__media {
  display: block;
}

.wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 14, 0.62);
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.wish-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 14, 0.72);
}

.wish-btn:active {
  transform: translateY(0);
}

.wish-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.wish-btn svg {
  display: block;
}

.wish-btn.is-saved {
  background: rgba(255, 71, 122, 0.22);
  border-color: rgba(255, 71, 122, 0.45);
  color: rgba(255, 200, 220, 0.98);
}

/* Skeleton loading (home) */
.product-skeleton {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  background: var(--surface-raised);
}

.skeleton-shimmer {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.04) 0%,
    var(--surface-hover) 45%,
    rgba(255, 255, 255, 0.04) 90%
  );
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton-shimmer {
    animation: shimmer 1.35s ease-in-out infinite;
  }
}

.product-skeleton__media {
  aspect-ratio: 4 / 3;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.product-skeleton__body {
  padding: var(--space-4) calc(var(--space-4) + var(--space-2)) 18px;
}

.product-skeleton__line {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.product-skeleton__line--short {
  width: 38%;
}

.product-skeleton__line--meta {
  width: 72%;
  margin-bottom: 0;
}

.shop-toast {
  position: fixed;
  z-index: 50;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  max-width: min(400px, calc(100vw - 40px));
  padding: 14px 20px;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  opacity: 0;
  pointer-events: none;
}

.shop-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.feed-status {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
}

.feed-status--error {
  color: var(--danger);
}

.feed-status--retryable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-3) + var(--space-1));
  text-align: center;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.feed-status--retryable .feed-status__msg {
  margin: 0;
  line-height: 1.45;
}

.feed-status--retryable .feed-status__retry {
  margin: 0;
}

.panel-divider {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.panel h2 {
  margin: 0 0 var(--space-2);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.panel .lede {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.store-main#catalog {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .store-page--home::before,
  .skeleton-shimmer,
  .product-skeleton__media,
  .pick-card--enter {
    animation: none !important;
  }

  .product-card:hover .product-card__media img,
  .pick-card:hover .pick-card__media img {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Search page — light mode (html.nav-theme-light) */
html.nav-theme-light #store-search-root .store-category-nav {
  padding: calc(var(--space-3) - 2px) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light #store-search-root .store-category-nav__link {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: var(--shop-bg-muted, #e5e5ea);
  color: var(--shop-text, #1d1d1f);
  text-decoration: none;
}

html.nav-theme-light #store-search-root .store-category-nav__link:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-search-root .store-category-nav__link.is-active,
html.nav-theme-light #store-search-root .store-category-nav__link.is-active:hover {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
}

html.nav-theme-light #store-search-root .browse-filters--minimal {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #store-search-root .browse-filters__clear:hover {
  color: #1d1d1f;
  opacity: 0.72;
}

html.nav-theme-light #store-search-root #catalog {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light #store-search-root #catalog .product-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-search-root #catalog .product-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}
html.nav-theme-light #store-search-root #catalog .product-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-search-root #catalog .price-stack__was {
  color: #6e6e73;
}

html.nav-theme-light #store-search-root #catalog .wish-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
}

html.nav-theme-light #store-search-root #catalog .wish-btn:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light #store-search-root #catalog .wish-btn.is-saved {
  background: rgba(255, 71, 122, 0.12);
  border-color: rgba(255, 71, 122, 0.35);
  color: #c41e3a;
}
html.nav-theme-light #store-search-root #catalog .catalog-pagination__meta,
html.nav-theme-light #store-search-root #catalog .catalog-pagination__fallback,
html.nav-theme-light #store-search-root #catalog .catalog-pagination__btn--disabled {
  color: #6e6e73;
}

html.nav-theme-light #store-search-root #catalog .product-skeleton {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light #store-search-root #catalog .skeleton-shimmer {
  background: linear-gradient(
    110deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.04) 90%
  );
  background-size: 200% 100%;
}

/* Light mode — browse filter fields (black text, gray pills; buttons use global .btn rules) */
html.nav-theme-light .browse-filters--minimal .browse-filters__pill,
html.nav-theme-light .browse-filters--minimal select.browse-filters__pill,
html.nav-theme-light .browse-filters--minimal input.browse-filters__pill {
  border-color: rgba(0, 0, 0, 0.1);
  background: var(--shop-bg-muted, #e5e5ea);
  color: #1d1d1f;
  -webkit-text-fill-color: #1d1d1f;
}
html.nav-theme-light .browse-filters--minimal select.browse-filters__pill option {
  color: #1d1d1f;
  background-color: #fff;
}

html.nav-theme-light .browse-filters__clear:hover {
  color: #1d1d1f;
  opacity: 0.72;
}

/* Fallback for category light styles outside search root (future reuse) */
html.nav-theme-light .store-category-nav__link {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: var(--shop-bg-muted, #e5e5ea);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .store-category-nav__link:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .store-category-nav__link.is-active,
html.nav-theme-light .store-category-nav__link.is-active:hover {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
}

/* Public seller profile — light mode (html.nav-theme-light) */

html.nav-theme-light #store-seller-public-root .seller-public-rating__star {
  color: #9a6700;
}

html.nav-theme-light #store-seller-public-root .seller-public-report-link.content-report-btn:hover,
html.nav-theme-light #store-seller-public-root .seller-public-report .seller-public-report-link:hover {
  color: #1d1d1f !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* See the twin in 04-commerce.css — colour pair dropped, ring retained. */
html.nav-theme-light #store-seller-public-root .product-seller-card__avatar {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9), var(--elev-3);
}

html.nav-theme-light #store-seller-public-root .seller-trust-badge--trusted {
  color: var(--ok);
  border-color: rgba(27, 127, 58, 0.28);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light #store-seller-public-root .seller-trust-badge--top_rated {
  color: #9a6700;
  border-color: rgba(154, 103, 0, 0.28);
  background: rgba(154, 103, 0, 0.1);
}

html.nav-theme-light #store-seller-public-root .shop-review-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-seller-public-root .seller-review-star:hover,
html.nav-theme-light #store-seller-public-root .seller-review-star:focus-visible {
  background: rgba(154, 103, 0, 0.08);
}

html.nav-theme-light #store-seller-public-root .seller-review-form__comment {
  color: var(--shop-text, #1d1d1f);
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.1);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-seller-public-root .seller-review-form__comment:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light #store-seller-public-root .seller-review-form__comment:focus {
  border-color: rgba(0, 0, 0, 0.18);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light #store-seller-public-root .seller-review-item__stars {
  color: #9a6700;
}

html.nav-theme-light #store-seller-public-root #seller-browse-order-form.browse-filters--minimal {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light #store-seller-public-root #catalog {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light #store-seller-public-root #catalog .product-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-seller-public-root #catalog .product-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}
html.nav-theme-light #store-seller-public-root #catalog .product-card__placeholder {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-seller-public-root #catalog .price-stack__was {
  color: #6e6e73;
}

html.nav-theme-light #store-seller-public-root #catalog .wish-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
}

html.nav-theme-light #store-seller-public-root #catalog .wish-btn:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light #store-seller-public-root #catalog .wish-btn.is-saved {
  background: rgba(255, 71, 122, 0.12);
  border-color: rgba(255, 71, 122, 0.35);
  color: #c41e3a;
}

html.nav-theme-light #store-seller-public-root #catalog .product-skeleton {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light #store-seller-public-root #catalog .skeleton-shimmer {
  background: linear-gradient(
    110deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.04) 90%
  );
  background-size: 200% 100%;
}

html.nav-theme-light #store-seller-public-root .catalog-pagination__meta,
html.nav-theme-light #store-seller-public-root .catalog-pagination__fallback,
html.nav-theme-light #store-seller-public-root .catalog-pagination__btn--disabled {
  color: #6e6e73;
}

/* ======== 04-commerce.css ======== */
/* Store — PDP, checkout, orders */
.store-nav--sub {
  margin-bottom: calc(var(--space-5) + var(--space-2));
}

.pick-card__hit,
.product-card__hit {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pick-card__hit:hover,
.product-card__hit:hover {
  color: inherit;
}

.pick-card__name .pick-card__hit {
  display: inline;
}

.product-card__name .product-card__hit {
  display: inline;
}

.shop-product-main,
.shop-checkout-main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 calc(var(--space-2) - 2px);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/*
 * PDP children must fill the column width. Recommendation carousels (.picks-track)
 * have a large intrinsic min-width; without an explicit width the centered flex
 * item grows past the viewport and overflow-x:clip shears the hero into a thin strip.
 */
.shop-product-main > #panel,
.shop-product-main > #pdp-skeleton,
.shop-product-main > .shop-product-panel {
  width: 100%;
  max-width: min(100%, 960px);
  min-width: 0;
  box-sizing: border-box;
}

/* Back link + foot nav live inside the panel on order/commerce pages */
.commerce-back {
  margin: 0 0 calc(var(--space-4) + var(--space-2));
  font-size: 14px;
  line-height: 1.4;
}

.commerce-back a {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
}

.commerce-back a:hover {
  color: var(--text);
}

.panel-foot-nav {
  margin-top: calc(var(--space-5) + var(--space-1));
  padding-top: calc(var(--space-4) + var(--space-1));
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: var(--text-muted);
}

.panel-foot-nav a {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
}

.panel-foot-nav a:hover {
  color: var(--text);
}

.panel-foot-nav__sep {
  margin: 0 0.4em;
  opacity: 0.45;
}

@media (min-width: 720px) {
  .shop-product-main,
  .shop-checkout-main {
    padding: 0 var(--space-4);
  }
}

.shop-muted {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}

.shop-muted a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: var(--space-3) 0 var(--space-2);
}

.shop-table th,
.shop-table td {
  padding: var(--space-3) calc(var(--space-3) - 2px);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}

.shop-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.shop-table tbody tr:last-child td {
  border-bottom: none;
}

.shop-table a {
  color: var(--text);
  font-weight: 500;
}

.shop-total {
  margin: var(--space-2) 0 calc(var(--space-4) + var(--space-1));
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Checkout — readability: summary shell, line amounts, total row */
.checkout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shop-checkout-main .checkout-panel.panel--wide {
  max-width: min(100%, 720px);
  padding: var(--space-6) calc(var(--space-5) + var(--space-2)) calc(var(--space-6) + var(--space-1));
}

@media (min-width: 720px) {
  .shop-checkout-main .checkout-panel.panel--wide {
    padding: calc(var(--space-6) + var(--space-3)) calc(var(--space-6) + var(--space-1))
      calc(var(--space-6) + var(--space-4));
  }
}

.checkout-title {
  margin: 0 0 var(--space-2);
  text-align: left;
  font-size: clamp(1.38rem, 3.2vw, 1.68rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

.checkout-lede {
  margin: 0 0 calc(var(--space-5) + var(--space-2));
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(220, 220, 228, 0.94);
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Purchase progress: 1 Artigos → 2 Entrega → 3 Pagamento.

   The three pages already were a sequence; nothing on them said so, so every
   step read as a possible dead end. Compact by design — this is orientation,
   not a component to look at.
   --------------------------------------------------------------------------- */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.checkout-steps__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

/* The connector is drawn on the item rather than between them, so a wrapped
   row never leaves a dangling rule. */
.checkout-steps__item + .checkout-steps__item::before {
  content: "";
  width: clamp(12px, 4vw, 28px);
  height: 1px;
  margin-right: var(--space-1);
  background: var(--hairline);
}

.checkout-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: var(--text-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.checkout-steps__item.is-current {
  color: var(--text);
  font-weight: 600;
}

.checkout-steps__item.is-current .checkout-steps__n {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.checkout-steps__item.is-done .checkout-steps__n {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Below ~520px the three steps measured 320px against a 315px column, so
   "Pagamento" wrapped to a second line — and because the connector is drawn on
   the *item*, the wrapped step then led with a dangling dash and read as
   indented rather than as step three.

   The row is held on one line instead, and everything that can give, gives:
   smaller type and badge, tighter gaps, a connector that scales with the
   viewport. Below roughly 340px the labels ellipse — which still reads as a
   sequence, where a wrapped row did not. */
@media (max-width: 519px) {
  .checkout-steps {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .checkout-steps__item {
    flex: 0 1 auto;
    min-width: 0;
    gap: 5px;
    font-size: var(--text-micro);
  }

  .checkout-steps__item + .checkout-steps__item::before {
    flex: 0 0 auto;
    width: clamp(4px, 2vw, 12px);
    margin-right: 0;
  }

  .checkout-steps__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkout-steps__n {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
}

.checkout-callout {
  margin: 0;
  padding: var(--space-4) calc(var(--space-4) + var(--space-2));
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* Mixed EUR / AOA cart. Amber rather than red: nothing has failed yet, the
   shopper just has to choose a rail before Finalizar can open. */
.cart-currency-callout {
  margin: 0 0 var(--space-4);
  border-color: rgba(245, 200, 66, 0.38);
  background: rgba(245, 200, 66, 0.09);
}

.cart-currency-callout[hidden] {
  display: none;
}

.cart-currency-callout__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text);
}

.cart-currency-callout__body {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.cart-currency-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 479px) {
  .cart-currency-callout__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-currency-callout__actions .btn {
    width: 100%;
  }
}

.checkout-callout.shop-muted {
  margin-bottom: 0;
}

.checkout-summary {
  margin-top: var(--space-1);
  padding: var(--space-4) calc(var(--space-4) - 2px) calc(var(--space-4) + var(--space-2));
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.38);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 560px) {
  .checkout-summary {
    padding: calc(var(--space-4) + var(--space-2)) calc(var(--space-4) + var(--space-1))
      calc(var(--space-4) + var(--space-1));
  }
}

.checkout-section-title {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(228, 228, 235, 0.88);
}

.shop-table.shop-table--checkout {
  margin: 0;
  min-width: 540px;
  font-size: 15px;
}

.shop-table--checkout th,
.shop-table--checkout td {
  padding: calc(var(--space-3) + var(--space-1)) calc(var(--space-3) - 2px);
  border-bottom-color: var(--hairline);
}

.shop-table--checkout th {
  color: rgba(232, 232, 238, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.shop-table--checkout .checkout-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-table--checkout .checkout-col-qty {
  width: 1%;
  white-space: nowrap;
}

.shop-table--checkout .checkout-col-action {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

@media (hover: hover) {
  .shop-table--checkout tbody tr:hover td {
    background: rgba(255, 255, 255, 0.045);
  }
}

.shop-table--checkout .checkout-line-total {
  font-weight: 600;
  color: var(--text);
}

.shop-table--checkout .checkout-item-cell {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) + var(--space-1));
  min-width: 0;
}

.shop-table--checkout .checkout-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
}

.shop-table--checkout .checkout-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-table--checkout .checkout-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.18);
}

.shop-table--checkout .checkout-item-text {
  min-width: 0;
}

.shop-table--checkout .checkout-item-text a {
  display: inline-block;
  max-width: 100%;
}

.shop-table--checkout .qty-input.qty-input--table {
  width: 64px;
  min-width: 60px;
  max-width: 88px;
  margin: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Line items below the tab-bar breakpoint.

   `min-width: 540px` above forced the cart and both checkouts — the primary
   purchase path — to scroll sideways on every phone. Below 720px the same rows
   become stacked cards instead: the item spans the card, and each remaining
   cell becomes a label/value line reading its header from `data-label`.

   The markup stays a table so the desktop layout, the e2e selectors, and the
   row-building JS are untouched; only the box model changes.
   --------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .checkout-summary {
    overflow-x: visible;
  }

  .shop-table.shop-table--checkout {
    min-width: 0;
    display: block;
  }

  /* The headers move into data-label, so hide them from sight but not from AT. */
  .shop-table--checkout thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .shop-table--checkout tbody {
    display: block;
  }

  .shop-table--checkout tbody tr {
    display: block;
    margin: 0 0 var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
  }

  .shop-table--checkout tbody tr:last-child {
    margin-bottom: 0;
  }

  .shop-table--checkout tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 0;
  }

  /* The column classes carry `width: 1%` and column alignment at (0,2,0), so the
     card rules have to name them to win — a plain `tbody td` is only (0,1,2). */
  .shop-table--checkout tbody td.checkout-col-num,
  .shop-table--checkout tbody td.checkout-col-qty,
  .shop-table--checkout tbody td.checkout-col-action {
    width: auto;
    text-align: right;
    white-space: normal;
  }

  .shop-table--checkout tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--text-caption);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
    text-align: left;
  }

  .shop-table--checkout tbody .checkout-item-cell {
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline);
    text-align: left;
  }

  .shop-table--checkout tbody td.checkout-col-action {
    justify-content: flex-end;
    padding-bottom: 0;
  }

  /* Wider tap targets once the row is no longer competing for column width. */
  .shop-table--checkout .qty-input.qty-input--table {
    max-width: none;
  }

  @media (hover: hover) {
    .shop-table--checkout tbody tr:hover td {
      background: transparent;
    }
  }
}

/* Quantity stepper — the number input alone has no visible spinner on touch. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.qty-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.qty-stepper__btn:hover {
  background: var(--surface-hover);
}

.qty-stepper .qty-input.qty-input--table {
  width: 52px;
  min-width: 48px;
  text-align: center;
}

.checkout-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) calc(var(--space-4) + var(--space-1));
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-1) var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.checkout-total__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.checkout-total__amount {
  margin-left: auto;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}

/* One line under the primary CTA saying what the next screen is. */
.checkout-trust {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.checkout-trust:empty {
  display: none;
}

/* Checkout is review-only; quantities live on /carrinho/. */
.checkout-edit-link {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
}

.checkout-edit-link a {
  color: var(--text-muted);
}

.checkout-actions {
  margin-top: calc(var(--space-4) + var(--space-1));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.checkout-actions .btn {
  width: 100%;
  margin-top: 0;
}

/* Dedicated cart (/carrinho/) — primary + secondary without full-width stack on wide screens */
.checkout-actions.cart-page-actions--dual {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

.checkout-actions.cart-page-actions--dual .btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 519px) {
  .checkout-actions.cart-page-actions--dual {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-actions.cart-page-actions--dual .btn {
    width: 100%;
  }
}

/* AOA bank transfer — IBAN blocks stay inside panel width */
.checkout-panel.panel--wide,
.checkout-summary,
.ao-iban-panel,
#destinations-list,
#ao-destinations-list {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* AOA payment step — space between bank select, IBAN card(s), and confirm action */
#bank-block {
  margin-top: calc(var(--space-5) + var(--space-1));
}

#bank-block .checkout-summary > .shop-muted,
#pay-ao-wrap > .shop-muted {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  line-height: 1.55;
}

#pay-ao-wrap > #ao-pay-ref.shop-muted {
  margin-bottom: var(--space-4);
}

.checkout-ao-bank-field,
.order-pay-ao-bank-field {
  margin: calc(var(--space-4) + var(--space-1)) 0 0;
  max-width: 100%;
}

.checkout-ao-bank-field + .ao-iban-panel,
.order-pay-ao-bank-field + .ao-iban-panel,
#ao-bank-field + #ao-iban-box {
  margin-top: calc(var(--space-4) + var(--space-3));
}

.ao-iban-panel {
  margin-top: calc(var(--space-4) + var(--space-3));
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-4) + var(--space-1))
    calc(var(--space-4) + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) + var(--space-1));
}

.ao-iban-panel > p {
  margin: 0;
  line-height: 1.5;
}

.ao-iban-panel > p strong {
  font-size: 17px;
}

#bank-block .checkout-actions {
  margin-top: calc(var(--space-5) + var(--space-1));
  padding-top: var(--space-1);
}

#pay-ao-wrap #btn-ao-confirm.order-pay__btn {
  margin-top: var(--space-5);
}

.checkout-ao-bank-field select,
.order-pay-ao-bank-field select {
  width: 100%;
  max-width: 100%;
}

.ao-destination-block .ao-iban-value,
.ao-destination-block .ao-iban-box {
  margin-top: var(--space-1);
}

.ao-iban-panel .ao-iban-value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  word-spacing: 0.2em;
  white-space: pre-wrap;
  word-break: break-all;
  margin: var(--space-1) 0 calc(var(--space-2) + var(--space-1));
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
}

.ao-iban-panel .ao-iban-copy,
.ao-destination-block .ao-iban-copy {
  margin: calc(var(--space-2) + var(--space-1)) 0 0;
}

#destinations-list,
#ao-destinations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-1) 0 calc(var(--space-2) + var(--space-1));
}

.ao-destination-block {
  margin: 0;
  padding: var(--space-4) calc(var(--space-4) + var(--space-1)) calc(var(--space-4) + var(--space-1));
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.2);
}

.ao-destination-block__head {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ao-destination-block__head strong {
  font-weight: 600;
}

.ao-iban-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) calc(var(--space-3) + var(--space-1));
  max-width: 100%;
  min-width: 0;
  padding: calc(var(--space-3) - 2px) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ao-iban-box .ao-iban-value {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-1)) var(--space-2);
  min-width: min(100%, 12rem);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.8125rem, 2.8vw, 0.9375rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.ao-iban-chunk {
  display: inline-block;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  background: var(--surface);
  white-space: nowrap;
}

.ao-iban-copy {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.shop-table.shop-table--ao-banks {
  table-layout: fixed;
  width: 100%;
}

.shop-table--ao-banks .ao-iban-col {
  width: 58%;
}

.shop-table--ao-banks td.ao-iban-cell {
  vertical-align: top;
}

.shop-table--ao-banks td.ao-iban-cell .ao-iban-box {
  padding: 8px 10px;
}

.shop-table--ao-banks td.ao-iban-cell .ao-iban-value {
  font-size: clamp(0.72rem, 2.4vw, 0.8125rem);
  gap: 0.25rem 0.35rem;
  min-width: 0;
}

.shop-table--ao-banks td.ao-iban-cell .ao-iban-chunk {
  padding: 0.05rem 0.15rem;
  font-size: inherit;
}

.ao-admin-card {
  margin-bottom: var(--space-5);
  max-width: 100%;
  min-width: 0;
}

.ao-admin-card .field,
.ao-admin-card .qty-input {
  max-width: 100%;
  box-sizing: border-box;
}

.ao-admin-payout-field {
  margin: var(--space-3) 0 0;
}

.ao-admin-payout-field select {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: var(--space-3) calc(var(--space-3) + var(--space-1));
  font-size: 15px;
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.review-mod-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

.review-mod-filters .field {
  min-width: 10rem;
}

.review-mod-card {
  margin-bottom: var(--space-4);
}

.review-mod-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.review-mod-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  border: 1px solid var(--hairline);
}

.review-mod-pill--public {
  color: var(--text-muted);
}

.review-mod-pill--hidden {
  color: var(--danger, #b42318);
  border-color: color-mix(in srgb, var(--danger, #b42318) 35%, var(--hairline));
}

.review-mod-meta {
  margin-top: var(--space-1);
}

.review-mod-comment {
  margin: var(--space-3) 0 var(--space-2);
}

.review-mod-subject a {
  font-weight: 600;
}

.review-mod-actions {
  margin-top: var(--space-3);
}

.review-mod-status {
  margin-top: var(--space-2);
}

.content-report-dialog {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 0;
  max-width: min(32rem, calc(100vw - 2rem));
  background: var(--surface-panel);
  color: var(--text);
}

.content-report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.content-report-dialog__panel {
  padding: calc(var(--space-4) + var(--space-1));
  margin: 0;
}

.content-report-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.btn--sm {
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  min-height: auto;
}

/* Guided tour (spotlight + tooltip) — above nav/chrome, below toast stack */
.store-tour {
  position: fixed;
  inset: 0;
  z-index: 15000;
  pointer-events: none;
  isolation: isolate;
}

.store-tour.hidden {
  display: none;
}

html.store-onboarding-open {
  overflow: hidden;
}

.store-tour__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: store-tour-fade-in 0.35s ease forwards;
  pointer-events: auto;
}

.store-tour__spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68);
  transition:
    top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
  will-change: top, left, width, height;
}

.store-tour__spotlight--hidden {
  opacity: 0;
  width: 0;
  height: 0;
}

.store-tour__card {
  position: fixed;
  z-index: 3;
  width: min(22rem, calc(100vw - 24px));
  padding: calc(var(--space-4) + var(--space-1));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: store-tour-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.store-tour__card--center {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(22rem, calc(100vw - 24px));
  transform: translate(-50%, -50%) scale(0.98);
  animation: store-tour-card-center-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.store-tour__card--dock {
  width: auto;
  max-width: none;
  left: 12px;
  right: 12px;
  animation: store-tour-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.store-tour__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  color: var(--muted, #888);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-tour__body {
  margin: var(--space-3) 0 0;
  line-height: 1.55;
}

.store-tour__progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.store-tour__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--hairline, #333);
  transition: transform 0.25s ease, background 0.25s ease;
}

.store-tour__dot--active {
  background: var(--accent, #c9a227);
  transform: scale(1.25);
}

.store-tour__dot--done {
  background: color-mix(in srgb, var(--accent, #c9a227) 60%, transparent);
}

.store-tour__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.store-tour__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.store-tour__skip,
.store-tour__nav .btn {
  width: auto;
  min-width: 0;
  margin-top: 0;
}

.store-tour-target--pulse {
  outline: 2px solid color-mix(in srgb, var(--accent, #c9a227) 85%, #fff);
  outline-offset: 3px;
  border-radius: 10px;
  animation: store-tour-target-pulse 1.6s ease-in-out infinite;
}

@keyframes store-tour-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes store-tour-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes store-tour-card-center-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes store-tour-target-pulse {
  0%,
  100% {
    outline-color: color-mix(in srgb, var(--accent, #c9a227) 70%, #fff);
  }
  50% {
    outline-color: color-mix(in srgb, var(--accent, #c9a227) 100%, #fff);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-tour__backdrop,
  .store-tour__card,
  .store-tour__spotlight,
  .store-tour-target--pulse {
    animation: none !important;
    transition: none !important;
  }

  .store-tour__backdrop {
    opacity: 1;
  }

  .store-tour__card {
    opacity: 1;
    transform: none;
  }

  .store-tour__card--center {
    transform: translate(-50%, -50%);
  }
}

/* Light mode — platform guide (Guia da plataforma / store tour) */
html.nav-theme-light .store-tour__backdrop {
  background: rgba(0, 0, 0, 0.28);
}

html.nav-theme-light .store-tour__spotlight {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}

html.nav-theme-light .store-tour__card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--shop-text, #1d1d1f);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset, var(--elev-5);
}

html.nav-theme-light .store-tour__card .checkout-section-title,
html.nav-theme-light .store-tour__card #store-tour-title {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .store-tour__dot {
  background: rgba(0, 0, 0, 0.14);
}

html.nav-theme-light .store-tour__dot--done {
  background: rgba(29, 29, 31, 0.38);
}

html.nav-theme-light .store-tour-target--pulse {
  outline-color: rgba(0, 122, 255, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  html.nav-theme-light .store-tour-target--pulse {
    animation: store-tour-target-pulse-light 1.6s ease-in-out infinite;
  }
}

@keyframes store-tour-target-pulse-light {
  0%,
  100% {
    outline-color: rgba(0, 122, 255, 0.45);
  }
  50% {
    outline-color: rgba(0, 122, 255, 0.75);
  }
}

.content-report-btn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  display: inline-flex;
}

.content-report-btn.btn--ghost {
  margin-top: 0;
}

.shop-review-report {
  margin-top: var(--space-2);
}

.product-report-actions,
.product-seller__report-wrap {
  margin-top: var(--space-3);
}

#pay-ao-wrap {
  margin-top: calc(var(--space-2) + var(--space-1));
}

#ao-bank-field {
  margin-top: var(--space-2);
}

.order-pay #pay-status.order-pay__status {
  margin-top: var(--space-4);
}

/* Seller — AOA bank accounts */
.seller-section--ao-banks .seller-ao-banks-lede {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  max-width: 56ch;
  line-height: 1.55;
}

.seller-ao-banks-form {
  margin: 0 0 calc(var(--space-5) + var(--space-1));
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-4) + var(--space-1))
    calc(var(--space-4) + var(--space-3));
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

@media (min-width: 560px) {
  .seller-ao-banks-form {
    padding: var(--space-5) calc(var(--space-4) + var(--space-3)) var(--space-5);
  }
}

.seller-ao-banks-form__title,
.seller-ao-banks-list__title {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.seller-ao-banks-form .feed-status {
  margin: 0 0 var(--space-4);
}

.seller-ao-banks-fields {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) + var(--space-1));
}

.seller-ao-banks-fields .field {
  margin: 0;
}

.seller-ao-banks-fields .field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seller-ao-banks-fields .field select,
.seller-ao-banks-fields .field input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.seller-ao-banks-fields .field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1a6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.seller-ao-banks-fields .field select:hover {
  background-color: rgba(0, 0, 0, 0.42);
}

.seller-ao-banks-fields .field select:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: var(--focus-ring);
}

.seller-ao-banks-fields .field select option {
  color: #111;
  background: #fff;
}

.seller-ao-banks-iban {
  min-height: 56px;
  padding: 15px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.seller-ao-banks-example {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.seller-ao-banks-example code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  word-spacing: 0.2em;
}

.seller-ao-banks-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.seller-ao-banks-actions {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}

.seller-ao-banks-actions .btn {
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .seller-ao-banks-actions .btn {
    width: auto;
    min-width: 10rem;
  }
}

.seller-ao-banks-list {
  margin-top: 0.25rem;
}

.seller-ao-banks-list__title {
  margin-bottom: 0.75rem;
}

.seller-ao-banks-list .seller-empty {
  margin: 0 0 1rem;
}

.seller-ao-banks-list .seller-table-wrap {
  margin-top: 0;
}

.shop-table--ao-banks td:last-child {
  width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

/* Seller dashboard — EUR SEPA bank accounts (IBAN spacing matches AOA) */
.seller-section--eur-banks .seller-eur-banks-lede {
  margin: 0 0 1.25rem;
  max-width: 42rem;
  line-height: 1.5;
}

.seller-eur-banks-form {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.18);
}

@media (min-width: 640px) {
  .seller-eur-banks-form {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}

.seller-eur-banks-form__title,
.seller-eur-banks-list__title,
.seller-eur-payouts__title {
  margin: 0 0 1rem;
  font-size: 16px;
  font-weight: 600;
}

.seller-eur-banks-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.seller-eur-banks-iban {
  min-height: 56px;
  padding: 15px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.seller-eur-banks-example {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.seller-eur-banks-example code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  word-spacing: 0.2em;
}

.seller-eur-banks-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.seller-eur-banks-actions {
  margin-top: 1.25rem;
}

.shop-table.shop-table--eur-banks {
  table-layout: fixed;
  width: 100%;
}

.shop-table--eur-banks .eur-iban-col {
  width: 52%;
}

.shop-table--eur-banks td.eur-iban-cell {
  vertical-align: top;
}

.shop-table--eur-banks td.eur-iban-cell .ao-iban-box {
  padding: 8px 10px;
}

.shop-table--eur-banks td.eur-iban-cell .ao-iban-value {
  font-size: clamp(0.72rem, 2.4vw, 0.8125rem);
  gap: 0.25rem 0.35rem;
  min-width: 0;
}

.shop-table--eur-banks td.eur-iban-cell .ao-iban-chunk {
  padding: 0.05rem 0.15rem;
  font-size: inherit;
}

.btn--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.checkout-status {
  margin: 0;
  min-height: 1.35em;
}

/* Orders list (/orders/) */
.shop-orders-panel.panel--wide {
  max-width: min(100%, 720px);
  padding: 32px 20px 40px;
}

@media (min-width: 720px) {
  .shop-orders-panel.panel--wide {
    padding: 40px 36px 48px;
  }
}

.orders-page-head {
  margin-bottom: calc(var(--space-4) + var(--space-1));
  text-align: left;
}

.orders-page-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

.orders-page-sub {
  margin: 0;
  max-width: 48ch;
}

.orders-status {
  margin-top: 0;
  text-align: left;
}

.orders-status--empty {
  max-width: 40rem;
  line-height: 1.55;
}

/* Bare status links only — the empty state's own .btn / .empty-state__link
   must keep their component colours. See the same guard in 05-dashboard.css. */
.orders-status--empty a:not(.btn):not(.empty-state__link) {
  color: var(--text);
  font-weight: 600;
}

.orders-list-wrap {
  margin-top: var(--space-2);
}

.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) 16px;
  margin-bottom: calc(var(--space-4) + var(--space-2));
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke-secondary);
  border-radius: var(--radius-lg);
}

.orders-toolbar__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.orders-toolbar__select {
  flex: 1 1 min(100%, 260px);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.orders-toolbar__select:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.orders-toolbar__select:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.orders-card--pending {
  border-color: rgba(255, 193, 7, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.1);
}

.orders-card__pending-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 220, 175, 0.95);
}

.orders-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-3) - 2px);
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.btn--orders-pay {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s var(--ease);
}

.btn--orders-pay:hover {
  opacity: 0.92;
}

.orders-receipt-placeholder[disabled],
.orders-receipt-placeholder:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (max-width: 519px) {
  .orders-card__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .orders-card__actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) + var(--space-1));
  margin: 0;
  padding: 0;
}

.orders-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) - 2px);
  padding: calc(var(--space-4) + var(--space-2)) 18px 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .orders-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--surface);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orders-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--surface);
  }
}

.orders-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) - 2px) 14px;
}

.orders-card__id {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.orders-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 18px;
  font-size: 14px;
  color: var(--text-muted);
}

.orders-card__when {
  font-variant-numeric: tabular-nums;
}

.orders-card__lines {
  color: var(--text-muted);
}

.orders-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.orders-card__total {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.order-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.order-status--pending {
  color: rgba(255, 210, 120, 0.98);
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.28);
}

.order-status--paid {
  color: rgba(150, 210, 255, 0.98);
  background: rgba(100, 180, 255, 0.12);
  border-color: rgba(100, 180, 255, 0.25);
}

.order-status--shipped {
  color: rgba(190, 200, 255, 0.96);
  background: rgba(130, 140, 255, 0.12);
  border-color: rgba(130, 140, 255, 0.22);
}

.order-status--completed {
  color: rgba(170, 255, 195, 0.96);
  background: rgba(50, 215, 75, 0.12);
  border-color: rgba(50, 215, 75, 0.28);
}

.order-status--cancelled {
  color: rgba(255, 170, 165, 0.96);
  background: rgba(255, 69, 58, 0.12);
  border-color: rgba(255, 69, 58, 0.25);
}

.order-status--refund-pending {
  color: rgba(255, 210, 120, 0.98);
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.28);
}

.order-status--refunded {
  color: rgba(170, 255, 195, 0.96);
  background: rgba(50, 215, 75, 0.12);
  border-color: rgba(50, 215, 75, 0.28);
}

.order-status--default {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hairline);
}

.btn--orders-cta {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
  flex-shrink: 0;
}

.qty-input {
  width: 100%;
  max-width: 120px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
}

.qty-input--table {
  max-width: 72px;
  padding: 8px 10px;
  font-size: 14px;
}

.btn-text {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-text:hover {
  color: var(--text);
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.shop-note {
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.product-hero {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .product-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: clamp(40px, 5vw, 64px);
  }

  .product-hero__aside {
    position: sticky;
    top: max(16px, env(safe-area-inset-top, 0px));
  }
}

.product-hero__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  aspect-ratio: 1 / 1;
  min-height: 260px;
}

.product-hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.product-gallery {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  flex: 1;
  grid-template-rows: minmax(200px, 1fr) auto;
}

.product-gallery__main,
.product-gallery__main--solo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.product-gallery__main img,
.product-gallery__main--solo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-gallery__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.product-gallery__thumb.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.28);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seller-product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.seller-product-gallery__item {
  display: grid;
  gap: var(--space-2);
}

.seller-product-gallery__zoom {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  cursor: zoom-in;
}

.seller-product-gallery__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seller-product-gallery__hint {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
}

.image-lightbox.hidden {
  display: none;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}

.image-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  max-height: min(92vh, 900px);
  margin: var(--space-4);
  display: grid;
  place-items: center;
}

.image-lightbox__img {
  max-width: 100%;
  max-height: min(92vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-6);
}

.image-lightbox__close,
.image-lightbox__nav {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.image-lightbox__close {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  font-size: 1.5rem;
  line-height: 1;
}

.image-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  font-size: 1.75rem;
  line-height: 1;
}

.image-lightbox__nav--prev {
  left: max(12px, env(safe-area-inset-left));
}

.image-lightbox__nav--next {
  right: max(12px, env(safe-area-inset-right));
}

body.image-lightbox-open {
  overflow: hidden;
}

.product-hero__media:has(.product-gallery) {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.product-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-hero__info .section-kicker,
.product-hero__kicker {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.625rem, 4.2vw, 2.125rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.product-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.product-hero__price {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.product-hero__rating {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.product-hero__rating--empty {
  font-size: 0.8125rem;
}

.pdp-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 600;
  color: var(--text);
}

.pdp-rating__score {
  font-size: 0.875rem;
  letter-spacing: -0.02em;
}

.pdp-rating__star {
  color: #f5c842;
  font-size: 0.75rem;
  line-height: 1;
}

.pdp-rating__count {
  margin-left: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pdp-rating__count::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.45;
}

.pdp-meta-sep {
  margin: 0 6px;
  opacity: 0.45;
}

.product-hero__stock {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ok);
}

.product-hero__stock::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.4;
}

.product-hero__stock--out {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.product-hero__buy--out .qty-input {
  opacity: 0.55;
}

.product-hero__oos-note {
  color: var(--text-muted) !important;
  font-weight: 500;
  font-size: 0.8125rem;
}

.product-hero__desc-wrap {
  margin-bottom: var(--space-4);
}

.product-hero__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 48ch;
}

.pdp-buy-card {
  margin: 0;
  padding: var(--space-4) 0 0;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.pdp-buy-card__qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.pdp-buy-card__qty-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pdp-buy-card__qty-input {
  width: 3.75rem;
  min-height: 2.125rem;
  margin: 0;
  text-align: center;
}

.pdp-buy-card__subtotal {
  margin: 0 0 0 auto;
  font-size: 0.8125rem;
}

.pdp-buy-card__cta {
  width: 100%;
  min-height: 3rem;
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 12px;
}

.pdp-buy-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.pdp-buy-card__tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.pdp-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.pdp-tool-btn--text:hover,
.pdp-tool-btn.pdp-tool-btn--icon:hover,
.pdp-tool-btn:not(.hidden):hover {
  color: var(--text);
  background: transparent;
}

.pdp-tool-btn.pdp-tool-btn--icon,
.pdp-tool-btn.share-trigger-btn {
  width: auto;
  height: auto;
  min-height: auto;
  padding: 4px 0;
}

.pdp-buy-card > .status {
  margin-top: var(--space-3);
}

/* Buyer assurance strip, directly under the buy card.
   Sits outside the card on purpose: it is context for the purchase, not another
   control, so it reads as the page reassuring you rather than the seller
   claiming something. Muted by default and only as loud as it needs to be. */
.pdp-assurance {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.pdp-assurance__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.pdp-assurance__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-muted);
}

.pdp-assurance__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.pdp-assurance__text a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-assurance__text a:hover {
  opacity: 0.8;
}
.pdp-report-wrap,
.pdp-seller-report {
  margin: 0;
}

.pdp-report-link.content-report-btn,
#btn-report-product.pdp-report-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 1;
  transition: color 0.15s ease;
}

.pdp-report-link.content-report-btn:hover,
#btn-report-product.pdp-report-link:hover {
  color: var(--text);
  background: transparent;
  text-decoration: underline;
}

.product-hero__buy .shop-note {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.shop-product-panel.panel--wide,
.shop-product-panel.pdp-panel {
  width: 100%;
  max-width: min(100%, 960px);
  min-width: 0;
  padding: var(--space-2) 0 calc(var(--space-6) + var(--space-2));
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-product-main .product-hero {
  width: 100%;
  min-width: 0;
}

.shop-product-main .product-hero__media,
.shop-product-main .product-hero__info {
  min-width: 0;
}

.shop-product-main .rec-band {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shop-product-main .rec-band .picks-track,
.shop-checkout-main .rec-band .picks-track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.shop-checkout-main .rec-band {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 720px) {
  .shop-product-panel.panel--wide,
  .shop-product-panel.pdp-panel {
    padding: var(--space-3) 0 calc(var(--space-6) + var(--space-3));
  }
}

.pdp-section {
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: clamp(32px, 5vw, 44px);
  border-top: 1px solid var(--hairline);
}

.pdp-section .premium-section-title {
  margin-bottom: var(--space-4);
}

.shop-product-panel {
  text-align: left;
}

.shop-line-total {
  margin: 0;
}

.product-seller {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pdp-seller-card {
  gap: var(--space-4);
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pdp-seller-card .product-seller-card__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.pdp-seller-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: none;
}

.pdp-seller-store-link {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  transition: opacity 0.15s ease;
}

.pdp-seller-store-link:hover {
  color: var(--text);
  opacity: 0.75;
  background: transparent;
}

.pdp-seller-share {
  width: auto;
  height: auto;
  min-height: auto;
  padding: 0;
  margin-left: 0;
}

.product-seller-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: var(--space-2);
}

.product-seller-card__avatar {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}

.product-seller-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-seller-card__body {
  flex: 1;
  min-width: 0;
}

.product-seller__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}

.product-seller__meta {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.product-seller__bio {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  max-width: 58ch;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.pdp-seller-facts {
  margin: 0 0 var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-width: none;
}

.pdp-seller-facts div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  grid-template-columns: none;
}

.pdp-seller-facts dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.pdp-seller-facts dt::after {
  content: ":";
}

.pdp-seller-facts dd {
  margin: 0;
  font-size: 0.875rem;
}

.product-seller-facts {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  display: grid;
  gap: var(--space-2);
  max-width: 40rem;
}

.product-seller-facts div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: calc(var(--space-3) - 2px);
  align-items: baseline;
}

.product-seller-facts dt {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-seller-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.product-seller-facts a {
  color: var(--accent, #2563eb);
  word-break: break-all;
}

.product-seller__lede {
  margin: 0;
  max-width: 52ch;
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 519px) {
  .product-seller-card {
    flex-direction: column;
  }
}

.account-section textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface, #fff);
  color: var(--text);
}

.product-reviews {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pdp-reviews .premium-section-title {
  margin-bottom: var(--space-3);
}

.pdp-review-list .shop-review-item {
  padding: var(--space-3) 0;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.pdp-review-list .shop-review-item:last-child {
  border-bottom: none;
}

.pdp-review-item__stars {
  margin-bottom: 4px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #f5c842;
}

.pdp-review-item__comment {
  margin: 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pdp-review-item .shop-review-report {
  margin-top: var(--space-2);
}

.reviews-pdp-hint {
  margin: -4px 0 var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.product-reviews__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--text);
}

/* The base .btn is the full-width auth-form CTA. On the order page the buttons
   are secondary actions sitting inline with content, so they size to their own
   label instead of stretching the whole panel. */
.shop-order-panel .btn:not(.btn--compact) {
  width: auto;
  min-width: 0;
  padding: 10px 18px;
  font-size: 15px;
}

.shop-order-panel .order-policy__actions,
.shop-order-panel .order-review-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Both titles hard-code the dark-shell text colour, which disappears on the
   light order page. The product page has its own scoped override further down. */

.product-reviews > .shop-muted {
  margin: 0 0 calc(var(--space-4) + var(--space-2));
}

.shop-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-review-item {
  padding: calc(var(--space-4) + var(--space-2)) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-review-item:last-child {
  border-bottom: none;
}

.shop-review-meta {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.shop-review-meta span {
  opacity: 0.45;
  padding: 0 4px;
}

.wr-public-label {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) - 2px);
  margin: 0 0 var(--space-4);
  cursor: pointer;
}

.wr-public-label input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.order-pay {
  margin-top: calc(var(--space-4) + var(--space-1));
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-4) + var(--space-2))
    calc(var(--space-4) + var(--space-2));
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
}

.order-pay__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
}

.order-pay__lede {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  line-height: 1.5;
}

.order-pay__notice--failed {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  padding: var(--space-3) calc(var(--space-3) + var(--space-1));
  border-radius: 8px;
  border: 1px solid rgba(255, 180, 80, 0.35);
  background: rgba(255, 180, 80, 0.08);
  color: #f5d9a8;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.order-pay__btn {
  width: auto;
  min-width: 10rem;
}

.order-pay__status {
  margin-top: var(--space-3);
}

.order-policy {
  margin-top: calc(var(--space-4) + var(--space-1));
  padding: calc(var(--space-4) + var(--space-2));
}

.order-policy__actions {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.order-policy__form {
  display: grid;
  gap: var(--space-3);
}

/* Stripe embedded checkout — match checkout / order-pay shell */
.stripe-checkout-panel.checkout-panel.panel--wide {
  max-width: min(100%, 720px);
  padding: 32px 22px 36px;
}

@media (min-width: 720px) {
  .stripe-checkout-panel.checkout-panel.panel--wide {
    padding: 42px 36px 46px;
  }
}

.stripe-checkout-loading {
  margin: 8px 0 0;
}

.stripe-checkout-summary {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.stripe-checkout-summary .shop-total {
  margin: 0;
}

.stripe-checkout-pay.order-pay {
  margin-top: 0;
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-4) + var(--space-2)) 18px;
}

.stripe-payment-form {
  display: grid;
  gap: 0;
  margin-top: 4px;
}

.stripe-payment-element {
  min-height: 120px;
  padding: 4px 0 8px;
}

/* Stripe iframes sit on a light default — keep container visually integrated */
.stripe-payment-element .p-Accordion,
.stripe-payment-element .p-TabsPanel {
  background: transparent !important;
}

.stripe-checkout-actions {
  margin-top: calc(var(--space-4) + var(--space-1));
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.stripe-checkout-actions .btn {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 480px) {
  .stripe-checkout-actions .btn.order-pay__btn {
    width: auto;
    min-width: 12rem;
  }
}

.stripe-checkout-status {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.stripe-checkout-subnav {
  margin-top: calc(var(--space-4) + var(--space-1));
  text-align: center;
  font-size: 14px;
}

.stripe-submit-btn {
  margin-top: 0;
}

.shop-order-panel.panel--wide {
  max-width: min(100%, 720px);
  padding: 32px 22px 36px;
}

@media (min-width: 720px) {
  .shop-order-panel.panel--wide {
    padding: 40px 36px 44px;
  }
}

.order-reviews {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.order-seller-reviews {
  margin-top: calc(var(--space-5) + var(--space-1));
  padding-top: calc(var(--space-4) + var(--space-1));
  border-top: 1px dashed var(--hairline);
}

.order-seller-reviews > .order-review-card__title {
  margin-bottom: var(--space-2);
}

.order-review-card {
  margin-bottom: calc(var(--space-5) + var(--space-1));
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.order-review-card:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.order-review-card__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.order-review-card__link {
  margin: 0 0 var(--space-4);
  font-size: 14px;
}

.order-review-form .field {
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.order-review-form .order-review-rating {
  max-width: 280px;
}

.order-review-form .btn {
  margin-top: 6px;
}

.order-review-status {
  margin-top: var(--space-3);
}

/* Page skeletons (PDP, cart, orders, wishlist) */
.pdp-skeleton {
  margin: 0 auto;
}

.pdp-skeleton__hero {
  margin-bottom: calc(var(--space-5) + var(--space-1));
}

.pdp-skeleton__media {
  aspect-ratio: 4 / 3;
  min-height: 200px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}

.pdp-skeleton__line {
  display: block;
  height: 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.pdp-skeleton__line--kicker {
  width: 28%;
  height: 10px;
  margin-bottom: var(--space-4);
}

.pdp-skeleton__line--title {
  width: 88%;
  height: 28px;
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.pdp-skeleton__line--price {
  width: 42%;
  height: 22px;
}

.pdp-skeleton__line--short {
  width: 55%;
}

.pdp-skeleton__line--desc {
  width: 100%;
  margin-bottom: 10px;
}

.pdp-skeleton__line--btn {
  width: min(100%, 220px);
  height: 44px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}

.pdp-skeleton__block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.pdp-skeleton__heading {
  width: 38%;
  height: 18px;
  border-radius: 6px;
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.pdp-skeleton__seller {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.pdp-skeleton__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.pdp-skeleton__seller-lines {
  flex: 1;
  min-width: 0;
}

.orders-skeleton-wrap {
  margin-top: var(--space-2);
}

.orders-skeleton-toolbar {
  height: 48px;
  border-radius: var(--radius-lg);
  margin-bottom: calc(var(--space-4) + var(--space-2));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.order-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: calc(var(--space-4) + var(--space-2));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.order-skeleton__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--space-3) - 2px);
}

.order-skeleton__pill {
  display: block;
  height: 14px;
  width: 96px;
  border-radius: 6px;
}

.order-skeleton__pill--wide {
  width: 120px;
}

.order-skeleton__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) 20px;
}

.order-skeleton__line {
  display: block;
  height: 12px;
  width: 140px;
  border-radius: 6px;
}

.order-skeleton__line--short {
  width: 88px;
}

.order-skeleton__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 4px;
}

.order-skeleton__total {
  display: block;
  height: 18px;
  width: 100px;
  border-radius: 6px;
}

.order-skeleton__actions {
  display: block;
  height: 36px;
  width: min(100%, 200px);
  border-radius: var(--radius-pill);
}

.cart-skeleton {
  margin-top: var(--space-2);
}

.cart-skeleton__total {
  display: block;
  height: 22px;
  width: min(100%, 200px);
  margin: 20px 0 0 auto;
  border-radius: 6px;
}

.cart-skeleton__thumb {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  vertical-align: middle;
  flex-shrink: 0;
}

.cart-skeleton__name {
  display: inline-block;
  height: 14px;
  width: min(100%, 180px);
  margin-left: 12px;
  border-radius: 6px;
  vertical-align: middle;
}

.cart-skeleton__cell {
  display: inline-block;
  height: 14px;
  width: 56px;
  border-radius: 6px;
}

.cart-skeleton__cell--btn {
  width: 72px;
}

.cart-skeleton__qty {
  display: inline-block;
  height: 36px;
  width: 64px;
  border-radius: var(--radius-md);
}

.cart-skeleton-row .checkout-item-cell {
  display: flex;
  align-items: center;
}

.wishlist-skeleton-wrap {
  margin-top: 4px;
}

.review-skeleton {
  list-style: none;
  margin: 0;
  padding: 0;
}

.review-skeleton__line {
  display: block;
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.review-skeleton__line--short {
  width: 72%;
  margin-bottom: 0;
}

/* Light mode — cart + checkout commerce panels */
html.nav-theme-light .shop-checkout-main .shop-table--checkout tbody tr {
  border-color: rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

html.nav-theme-light .shop-checkout-main .shop-table--checkout tbody td[data-label]::before {
  color: var(--shop-text-muted);
}

html.nav-theme-light .qty-stepper__btn {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .cart-currency-callout {
  border-color: rgba(154, 103, 0, 0.35);
  background: rgba(255, 214, 102, 0.16);
}

html.nav-theme-light .shop-checkout-main .checkout-panel.panel--wide {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light .shop-checkout-main .checkout-lede {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .shop-checkout-main .checkout-summary {
  border-color: rgba(0, 0, 0, 0.08);
  background: var(--shop-bg-muted, #e5e5ea);
}

html.nav-theme-light .shop-checkout-main .checkout-section-title {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .shop-table--checkout th,
html.nav-theme-light .shop-checkout-main .shop-table--checkout td {
  color: var(--shop-text, #1d1d1f);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .shop-checkout-main .shop-table--checkout th {
  border-bottom-color: rgba(0, 0, 0, 0.14);
}

html.nav-theme-light .shop-checkout-main .shop-table--checkout .checkout-line-total,
html.nav-theme-light .shop-checkout-main .shop-table--checkout a {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .shop-table--checkout tbody tr:hover td {
  background: rgba(0, 0, 0, 0.04);
}

html.nav-theme-light .shop-checkout-main .checkout-total {
  border-top-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .shop-checkout-main .checkout-total__label,
html.nav-theme-light .shop-checkout-main .checkout-total__amount {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .qty-input,
html.nav-theme-light .shop-checkout-main .qty-input.qty-input--table {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .qty-input:hover,
html.nav-theme-light .shop-checkout-main .qty-input.qty-input--table:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
}

html.nav-theme-light .shop-checkout-main .qty-input:focus,
html.nav-theme-light .shop-checkout-main .qty-input.qty-input--table:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light .shop-checkout-main .checkout-thumb {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .shop-checkout-main .checkout-thumb--ph {
  color: rgba(0, 0, 0, 0.18);
}

html.nav-theme-light .shop-checkout-main .checkout-callout {
  border-color: rgba(0, 0, 0, 0.08);
  background: var(--shop-bg-muted, #e5e5ea);
}

/* Light mode — payment blocks (Stripe checkout, order pay) */
html.nav-theme-light .shop-checkout-main .order-pay {
  border-color: rgba(0, 0, 0, 0.08);
  background: var(--shop-bg-muted, #e5e5ea);
}

html.nav-theme-light .shop-checkout-main .order-pay__lede {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .shop-checkout-main .order-pay-ao-bank-field select,
html.nav-theme-light .shop-checkout-main .order-pay-ao-bank-field .field select {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .ao-iban-panel {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

html.nav-theme-light .ao-iban-box {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .ao-iban-chunk {
  color: var(--shop-text, #1d1d1f);
  background: rgba(0, 0, 0, 0.06);
}

html.nav-theme-light .ao-destination-block {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Light mode — orders list (/orders/) */
html.nav-theme-light .shop-checkout-main .shop-orders-panel.panel--wide,
html.nav-theme-light .shop-checkout-main .shop-order-panel.panel--wide {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light .shop-checkout-main .orders-status--empty a:not(.btn):not(.empty-state__link) {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .orders-toolbar {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}
html.nav-theme-light .shop-checkout-main .orders-toolbar__select {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .orders-toolbar__select:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

html.nav-theme-light .shop-checkout-main .orders-toolbar__select:focus-visible {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light .shop-checkout-main .orders-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .orders-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light .shop-checkout-main .orders-card--pending {
  border-color: rgba(180, 130, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(180, 130, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .orders-card__pending-hint {
  color: #8a6100;
}

html.nav-theme-light .shop-checkout-main .orders-card__foot {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Order badges: the dark-mode colours above are hardcoded rgba tuned for a
   near-black card, so they cannot be reached by the token remap and need real
   light-mode values. These used to be scoped to `.shop-checkout-main` — the
   container on /orders/ — which meant the same badge rendered at roughly 1.5:1
   contrast anywhere else, including the account hub. The badge is the same
   badge wherever it appears, so the scope is gone. */
html.nav-theme-light .order-status--pending,
html.nav-theme-light .order-status--refund-pending {
  color: #8a6100;
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(180, 130, 0, 0.28);
}

html.nav-theme-light .order-status--paid {
  color: #0055b3;
  background: rgba(0, 122, 255, 0.12);
  border-color: rgba(0, 122, 255, 0.22);
}

html.nav-theme-light .order-status--shipped {
  color: #4b4fbf;
  background: rgba(88, 86, 214, 0.12);
  border-color: rgba(88, 86, 214, 0.22);
}

html.nav-theme-light .order-status--completed,
html.nav-theme-light .order-status--refunded {
  color: var(--ok);
  background: rgba(50, 215, 75, 0.12);
  border-color: rgba(27, 127, 58, 0.22);
}

html.nav-theme-light .order-status--cancelled {
  color: #c41e3a;
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(196, 30, 58, 0.22);
}

html.nav-theme-light .order-status--default {
  color: var(--shop-text-muted, #6e6e73);
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .shop-checkout-main .orders-skeleton-toolbar,
html.nav-theme-light .shop-checkout-main .order-skeleton {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .shop-checkout-main .catalog-pagination__meta,
html.nav-theme-light .shop-checkout-main .catalog-pagination__fallback {
  color: var(--shop-text-muted, #6e6e73);
}

/* Light mode — product detail page (PDP) */
html.nav-theme-light .shop-product-main .product-hero__price .price-stack__was,
html.nav-theme-light .shop-product-main .price-stack__was {
  color: var(--shop-text-muted, #6e6e73);
  opacity: 0.75;
}

html.nav-theme-light .shop-product-main .pdp-rating__star,
html.nav-theme-light .shop-product-main .pdp-review-item__stars {
  color: #9a6700;
}

html.nav-theme-light .shop-product-main .shop-note a,
html.nav-theme-light .shop-product-main .pdp-seller-facts a,
html.nav-theme-light .shop-product-main .product-seller-facts a {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-product-main .product-hero__meta,
html.nav-theme-light .shop-product-main .pdp-buy-card,
html.nav-theme-light .shop-product-main .pdp-section {
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-product-main .product-hero__media {
  border-color: rgba(0, 0, 0, 0.06);
  background: #f5f5f7;
  box-shadow: none;
}

html.nav-theme-light .shop-product-main .pdp-buy-card {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  box-shadow: none;
}
html.nav-theme-light .shop-product-main .pdp-buy-card__qty-input,
html.nav-theme-light .shop-product-main .product-hero__buy .qty-input {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-product-main .pdp-buy-card__qty-input:hover,
html.nav-theme-light .shop-product-main .product-hero__buy .qty-input:hover {
  background: #f5f5f7;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light .shop-product-main .pdp-buy-card__qty-input:focus,
html.nav-theme-light .shop-product-main .product-hero__buy .qty-input:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}
html.nav-theme-light .shop-product-main .pdp-tool-btn--text:hover,
html.nav-theme-light .shop-product-main .pdp-tool-btn.share-trigger-btn:hover,
html.nav-theme-light .shop-product-main .pdp-tool-btn:not(.hidden):hover {
  color: #1d1d1f;
  background: transparent;
}

html.nav-theme-light .shop-product-main .product-seller,
html.nav-theme-light .shop-product-main .product-reviews,
html.nav-theme-light .shop-product-main .pdp-skeleton__block {
  border-top-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-product-main .pdp-seller-store-link:hover {
  opacity: 0.72;
  background: transparent;
}

/* Colour pair removed: it restated the base rule and landed on 4.04:1.
   --surface-hover / --text resolve correctly in both themes; only the ring,
   which the base rule does not provide, still belongs here. */
html.nav-theme-light .shop-product-main .pdp-seller-card .product-seller-card__avatar {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), var(--elev-3);
}

html.nav-theme-light .shop-product-main .seller-trust-badge--trusted {
  color: var(--ok);
  border-color: rgba(27, 127, 58, 0.28);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light .shop-product-main .seller-trust-badge--top_rated {
  color: #9a6700;
  border-color: rgba(154, 103, 0, 0.28);
  background: rgba(154, 103, 0, 0.1);
}

html.nav-theme-light .shop-product-main .shop-review-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------------------
   PDP sticky buy bar (phones).

   The buy card sits at the top of a page that runs on for several screens —
   gallery, description, assurance list, seller card, reviews, two rails. This
   brings the decision back within reach once the real CTA is behind you, and
   forwards its click to that same button so nothing about quantity, stock or
   the currency guard is reimplemented here.

   Sits above the tab bar, never replaces it.
   --------------------------------------------------------------------------- */
.pdp-sticky-buy {
  display: none;
}

@media (max-width: 719px) {
  .pdp-sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 44;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) clamp(12px, 4vw, 20px);
    border-top: 1px solid var(--hairline);
    background: rgba(12, 12, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(100%);
    transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
    opacity: 0;
  }

  .pdp-sticky-buy[hidden] {
    display: none;
  }

  .pdp-sticky-buy.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-sticky-buy {
      transition: none;
    }
  }

  .pdp-sticky-buy__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .pdp-sticky-buy__name {
    overflow: hidden;
    font-size: var(--text-caption);
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdp-sticky-buy__price {
    font-size: var(--text-body-m);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .pdp-sticky-buy__cta {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    padding: 11px 20px;
    font-size: var(--text-ui);
  }
}

html.nav-theme-light .pdp-sticky-buy {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light .pdp-sticky-buy__name {
  color: var(--shop-text-muted);
}

/* ======== 05-dashboard.css ======== */
/* Wishlist page — card grid */
.shop-wishlist-panel.panel--wide {
  max-width: min(100%, 980px);
  padding: 32px 20px 40px;
}

@media (min-width: 720px) {
  .shop-wishlist-panel.panel--wide {
    padding: 40px 36px 48px;
  }
}

.wishlist-page-head {
  margin-bottom: 22px;
}

.wishlist-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
  color: var(--text);
}

.wishlist-sub {
  margin: 0;
  max-width: 44ch;
  line-height: 1.5;
}

.wishlist-status {
  margin-top: 0;
}

.wishlist-wrap {
  margin-top: 4px;
}

.wishlist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 560px) {
  .wishlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
  }
}

@media (min-width: 960px) {
  .wishlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 22px;
  }
}

.wishlist-card {
  container-type: inline-size;
  container-name: wishlist-card;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .wishlist-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
  }
}

.wishlist-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, rgba(50, 50, 55, 0.5), rgba(18, 18, 20, 0.92));
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.wishlist-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wishlist-card__ph {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 8vw, 3.25rem);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.03em;
}

.wishlist-card__body {
  padding: var(--space-4) 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.wishlist-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.wishlist-card__title a {
  color: var(--text);
  text-decoration: none;
}

.wishlist-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wishlist-card__price {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.wishlist-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-3) - 2px);
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  min-width: 0;
}

/* Side-by-side only when the card itself is wide enough (viewport breakpoints miss narrow grid columns). */
@container wishlist-card (min-width: 260px) {
  .wishlist-card__actions {
    grid-template-columns: 1fr 1fr;
  }
}

.wishlist-card__actions .btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wishlist-card__remove {
  font-size: inherit;
}

/* Seller dashboard & product form (Phase 3) */
.seller-dash-panel.panel--wide,
.seller-form-panel.panel--wide {
  width: 100%;
  max-width: min(100%, 1160px);
  padding: 32px 20px 40px;
}

@media (max-width: 719px) {
  .seller-dash-panel.panel--wide,
  .seller-form-panel.panel--wide {
    padding: var(--space-4) var(--space-3);
  }
}

@media (min-width: 720px) {
  .seller-dash-panel.panel--wide,
  .seller-form-panel.panel--wide {
    padding: 40px 36px 48px;
  }
}

.seller-dash-title,
.seller-form-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
  color: var(--text);
}

.seller-dash-lede {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  max-width: 52ch;
}

.seller-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.seller-dash-guide {
  margin: var(--space-2) 0 0;
}

.seller-dash-guide__btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, #c9a227);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.seller-dash-guide__btn:hover {
  color: color-mix(in srgb, var(--accent, #c9a227) 80%, #fff);
}

.seller-dash-head .btn--seller-new {
  flex-shrink: 0;
}

.seller-dash-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.seller-dash-head__actions .btn--seller-new {
  min-width: 9.75rem;
  text-align: center;
  justify-content: center;
}

.btn--seller-new {
  width: auto;
  margin-top: 0;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

.seller-banner {
  margin: 0 0 calc(var(--space-5) + var(--space-2));
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid transparent;
}

.seller-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seller-banner--warn {
  color: rgba(255, 214, 140, 0.98);
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.28);
}

.seller-banner--info {
  color: rgba(180, 200, 255, 0.95);
  background: rgba(100, 140, 255, 0.1);
  border-color: rgba(100, 140, 255, 0.22);
}

.seller-dash-status {
  margin-top: 0;
  text-align: left;
}

.seller-section {
  margin-top: 32px;
}

.seller-section-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Seller dashboard — sidebar layout */
.seller-dash-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.seller-dash-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  scrollbar-width: none;
}

.seller-dash-nav::-webkit-scrollbar {
  display: none;
}

/* Groups: on mobile the nav stays a horizontal scroll rail, so groups lay out
   inline and their labels are hidden — a heading mid-rail reads as an item.
   The desktop block below turns them back into a real sidebar. */
.seller-dash-nav__group {
  display: contents;
}

.seller-dash-nav__label {
  display: none;
}

.seller-dash-nav__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 500;
  text-align: left;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.seller-dash-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: opacity 0.18s var(--ease);
}

.seller-dash-nav__icon svg {
  width: 100%;
  height: 100%;
}

.seller-dash-nav__btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.seller-dash-nav__btn:hover .seller-dash-nav__icon,
.seller-dash-nav__btn.is-active .seller-dash-nav__icon {
  opacity: 1;
}

.seller-dash-nav__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.45);
}

.seller-dash-nav__btn.is-active {
  color: var(--text);
  background: var(--surface-hover);
  font-weight: 600;
}

.seller-dash-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.seller-dash-content .seller-section {
  margin-top: 0;
}

.seller-section--off {
  display: none !important;
}

@media (min-width: 860px) {
  .seller-dash-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(var(--space-5) + var(--space-2));
  }

  .seller-dash-sidebar {
    position: sticky;
    top: var(--space-4);
    width: 212px;
    flex-shrink: 0;
  }

  .seller-dash-nav {
    flex-direction: column;
    overflow: visible;
    padding: 8px;
    gap: var(--space-4);
    /* The rail's card chrome is right for a horizontal strip and wrong for a
       sidebar — the admin console's sidebar sits directly on the page. */
    border: 0;
    background: none;
  }

  /* Real groups on desktop: a labelled stack, like the admin console. */
  .seller-dash-nav__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .seller-dash-nav__group.hidden {
    display: none;
  }

  .seller-dash-nav__label {
    display: block;
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    font-size: var(--text-overline);
    font-weight: 700;
    letter-spacing: var(--text-overline-ls);
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.75;
  }

  .seller-dash-nav__btn {
    width: 100%;
  }
}

.seller-econ-currency {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.seller-econ-currency__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-muted, rgba(255, 255, 255, 0.72));
}

.seller-econ-currency--meta {
  margin-bottom: 0;
}

.seller-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 560px) {
  .seller-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .seller-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Column layout with the value pushed to the bottom. Labels wrap to different
   line counts — "Taxas da plataforma (aloc.)" takes two lines where "Receita
   bruta" takes one — and without this the numbers sat at three different
   heights across one row, so the eye could not scan them as a set. */
.seller-stat {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.seller-stat__val {
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}

.seller-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.seller-stat__val {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.seller-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
}

.seller-table {
  margin: 0;
  font-size: 14px;
}

.seller-table .tabular {
  font-variant-numeric: tabular-nums;
}

.seller-product-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.seller-product-name__text {
  min-width: 0;
}

.seller-product-row--oos .seller-product-name__text {
  color: var(--text-muted);
}

.seller-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: #f5f5f7;
  background: rgba(120, 120, 128, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.seller-stock-badge__icon {
  flex-shrink: 0;
  opacity: 0.95;
}

.seller-stock-reserved {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Out-of-stock / lifecycle — banner, form cards, table menu */
.seller-lifecycle-banner {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 214, 10, 0.28);
  background: rgba(255, 214, 10, 0.1);
}

.seller-lifecycle-banner__title {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.01em;
}

.seller-lifecycle-banner__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.seller-lifecycle-banner__list li + li {
  margin-top: 6px;
}

.seller-lifecycle-banner__list strong {
  color: var(--text);
  font-weight: 600;
}

.seller-lifecycle-panel {
  margin-top: calc(var(--space-5) + var(--space-2));
  padding-top: calc(var(--space-5) + var(--space-2));
  border-top: 1px solid var(--hairline);
}

.seller-lifecycle-panel__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.seller-lifecycle-panel__lede {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 1.5;
}

.seller-lifecycle-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .seller-lifecycle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.seller-lifecycle-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.seller-lifecycle-card--highlight {
  border-color: rgba(255, 214, 10, 0.35);
  background: rgba(255, 214, 10, 0.08);
}

.seller-lifecycle-card--danger {
  border-color: rgba(255, 69, 58, 0.22);
  background: rgba(255, 69, 58, 0.06);
}

.seller-lifecycle-card__body {
  flex: 1 1 auto;
}

.seller-lifecycle-card__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.seller-lifecycle-card--danger .seller-lifecycle-card__title {
  color: #ff6961;
}

.seller-lifecycle-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.seller-lifecycle-card__action {
  margin-top: auto;
}

.seller-lifecycle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.seller-lifecycle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.seller-lifecycle-btn--danger {
  color: #ff6961;
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.28);
}

.seller-lifecycle-btn--danger:hover {
  color: #fff;
  background: rgba(255, 69, 58, 0.82);
  border-color: rgba(255, 69, 58, 0.82);
}

.seller-form-actions--save {
  margin-top: var(--space-4);
}

.seller-product-actions {
  white-space: nowrap;
}

.seller-lifecycle-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.seller-lifecycle-open:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.seller-lifecycle-open__icon {
  opacity: 0.72;
}

/* Product options — action sheet modal */
.seller-product-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), visibility 0.24s var(--ease);
}

@media (min-width: 40rem) {
  .seller-product-modal {
    align-items: center;
    padding: var(--space-4);
  }
}

.seller-product-modal.is-open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.seller-product-modal-open {
  overflow: hidden;
}

.seller-product-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}

.seller-product-modal.is-open .seller-product-modal__backdrop {
  opacity: 1;
}

.seller-product-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  max-height: min(90vh, 36rem);
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--hairline);
  border-bottom: none;
  background: var(--surface-panel, #1a1d24);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s var(--ease);
}

@media (min-width: 40rem) {
  .seller-product-modal__panel {
    max-height: min(88vh, 34rem);
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--elev-6);
    transform: translateY(20px) scale(0.97);
  }

  .seller-product-modal.is-open .seller-product-modal__panel {
    transform: translateY(0) scale(1);
  }
}

.seller-product-modal.is-open .seller-product-modal__panel {
  opacity: 1;
  transform: translateY(0);
}

.seller-product-modal__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
}

@media (min-width: 40rem) {
  .seller-product-modal__handle {
    display: none;
  }
}

.seller-product-modal__header {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

.seller-product-modal__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text);
}

.seller-product-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.seller-product-modal__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
}

.seller-product-modal__badge--oos {
  color: #f5f5f7;
  background: rgba(120, 120, 128, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

.seller-product-modal__badge--stock {
  color: #c8f5d8;
  background: rgba(50, 215, 75, 0.14);
  border-color: rgba(50, 215, 75, 0.28);
}

.seller-product-modal__badge--live {
  color: #b8dcff;
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.28);
}

.seller-product-modal__badge--hidden {
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--hairline);
}

.seller-product-modal__badge--ok {
  color: #9ae6b0;
  background: rgba(50, 215, 75, 0.12);
  border-color: rgba(50, 215, 75, 0.22);
}

.seller-product-modal__badge--pending {
  color: #ffe08a;
  background: rgba(255, 214, 10, 0.14);
  border-color: rgba(255, 214, 10, 0.28);
}

.seller-product-modal__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.seller-svc-req-detail {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  max-height: min(42vh, 320px);
  overflow: auto;
}

.seller-svc-req-detail__title {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seller-svc-req-detail__list {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.seller-svc-req-detail__row {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) 1fr;
  gap: var(--space-2);
  align-items: start;
}

.seller-svc-req-detail__row--block {
  grid-template-columns: 1fr;
}

.seller-svc-req-detail__row dt {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.seller-svc-req-detail__row dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.seller-svc-req-detail__row--block dd {
  white-space: pre-wrap;
}

.seller-product-modal__sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3) var(--space-4) var(--space-2);
  -webkit-overflow-scrolling: touch;
}

/* Service-request modal — detail + actions share one scroll region */
.seller-product-modal--svc-req .seller-product-modal__panel {
  max-height: min(92vh, 40rem);
}

.seller-product-modal--svc-req .seller-product-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.seller-product-modal--svc-req .seller-svc-req-detail {
  max-height: none;
  overflow: visible;
}

.seller-product-modal--svc-req .seller-product-modal__sections {
  flex: none;
  min-height: auto;
  overflow: visible;
}

.seller-product-modal__section + .seller-product-modal__section {
  margin-top: var(--space-4);
}

.seller-product-modal__section-label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seller-product-modal__group {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.seller-product-modal__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 0.12s ease;
}

.seller-product-modal__row:last-child {
  border-bottom: none;
}

.seller-product-modal__row:hover {
  background: var(--surface);
}

.seller-product-modal__row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.seller-product-modal__row-icon-svg {
  display: block;
}

.seller-product-modal__row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.seller-product-modal__row-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.seller-product-modal__row-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.seller-product-modal__row-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.65;
}

.seller-product-modal__row--primary .seller-product-modal__row-icon {
  color: #7ec8ff;
  background: rgba(10, 132, 255, 0.16);
}

.seller-product-modal__section--danger .seller-product-modal__group {
  border-color: rgba(255, 69, 58, 0.22);
  background: rgba(255, 69, 58, 0.05);
}

.seller-product-modal__row--danger .seller-product-modal__row-icon {
  color: #ff6961;
  background: rgba(255, 69, 58, 0.14);
}

.seller-product-modal__row--danger .seller-product-modal__row-title {
  color: #ff6961;
}

.seller-product-modal__row--danger:hover {
  background: rgba(255, 69, 58, 0.1);
}

.seller-product-modal__footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.12);
}

.seller-product-modal__cancel {
  display: block;
  width: 100%;
  margin: 0;
  padding: 13px var(--space-4);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.seller-product-modal__cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .seller-product-modal,
  .seller-product-modal__backdrop,
  .seller-product-modal__panel {
    transition: none;
  }
}

.seller-empty {
  margin: 8px 0 0;
}

.seller-dash-actions .btn {
  width: auto;
  margin: 12px 12px 0 0;
}

.seller-form-back {
  margin: 0 0 var(--space-4);
  text-align: left;
}

.seller-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 18px;
}

@media (min-width: 520px) {
  .seller-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.seller-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.seller-form-actions .btn {
  width: auto;
  margin: 0;
}

.seller-aoa-bank-hint {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.seller-aoa-bank-hint a {
  color: var(--accent);
}

.seller-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
}

.seller-checkbox-label input {
  width: auto;
  margin: 4px 0 0;
  flex-shrink: 0;
}

.account-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.account-layout__forms > .account-section:first-child {
  margin-top: 32px;
}

@media (min-width: 720px) {
  .account-layout__forms > .account-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.account-section-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.account-section-hint {
  margin: 0 0 var(--space-4) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.account-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: 4px;
}

.account-actions-row .btn {
  width: auto;
  margin-top: 0;
  flex: 1 1 140px;
  min-width: 0;
}

.account-actions-row--avatar {
  justify-content: center;
}

.account-actions-row--avatar .btn {
  flex: 0 1 auto;
  min-width: min(100%, 200px);
}

.account-section .field {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.account-section .field:last-of-type {
  margin-bottom: 14px;
}

.account-section .btn + .status {
  margin-top: var(--space-4);
}

.account-section .status {
  margin-top: var(--space-4);
}

/* The seller panel (/seller/) layout lives in 23-seller.css. */

.shop-checkout-main:has(.seller-form-panel) {
  align-items: stretch;
}
html.nav-theme-light .shop-checkout-main .seller-form-panel.panel--wide {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light .shop-checkout-main .seller-form-title, html.nav-theme-light .shop-checkout-main .seller-section-title, html.nav-theme-light .shop-checkout-main .seller-ao-banks-form__title, html.nav-theme-light .shop-checkout-main .seller-ao-banks-list__title, html.nav-theme-light .shop-checkout-main .seller-eur-banks-form__title, html.nav-theme-light .shop-checkout-main .seller-eur-banks-list__title, html.nav-theme-light .shop-checkout-main .seller-eur-payouts__title, html.nav-theme-light .shop-checkout-main .seller-econ-currency__title {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .shop-checkout-main .seller-banner--warn {
  color: #8a6100;
  background: rgba(255, 193, 7, 0.14);
  border-color: rgba(180, 130, 0, 0.28);
}
html.nav-theme-light .shop-checkout-main .seller-banner--info {
  color: #0055b3;
  background: rgba(0, 122, 255, 0.1);
  border-color: rgba(0, 122, 255, 0.2);
}

html.nav-theme-light .shop-checkout-main .seller-stat,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-form,
html.nav-theme-light .shop-checkout-main .seller-eur-banks-form {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .seller-stock-badge--oos {
  color: #fff;
  background: rgba(72, 72, 78, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-banner {
  border-color: rgba(122, 92, 0, 0.22);
  background: rgba(255, 214, 10, 0.14);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-panel__lede,
html.nav-theme-light .shop-checkout-main .seller-lifecycle-card__desc {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-card--highlight {
  border-color: rgba(122, 92, 0, 0.24);
  background: rgba(255, 214, 10, 0.16);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-card--danger {
  border-color: rgba(196, 30, 58, 0.2);
  background: rgba(255, 69, 58, 0.08);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-card--danger .seller-lifecycle-card__title {
  color: #c41e3a;
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-btn {
  color: var(--shop-text, #1d1d1f);
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-btn:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-btn--danger {
  color: #c41e3a;
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(196, 30, 58, 0.22);
}

html.nav-theme-light .shop-checkout-main .seller-lifecycle-btn--danger:hover {
  color: #fff;
  background: #c41e3a;
  border-color: #c41e3a;
}

html.nav-theme-light .seller-lifecycle-open {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .seller-lifecycle-open:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light .seller-product-modal__panel {
  --text: var(--shop-text, #1d1d1f);
  --text-muted: var(--shop-text-muted, #6e6e73);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}

@media (min-width: 40rem) {
  html.nav-theme-light .seller-product-modal__panel {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
  }
}

html.nav-theme-light .seller-product-modal__handle {
  background: rgba(0, 0, 0, 0.14);
}

html.nav-theme-light .seller-product-modal__header,
html.nav-theme-light .seller-product-modal__footer {
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .seller-product-modal__footer {
  background: rgba(0, 0, 0, 0.02);
}

html.nav-theme-light .seller-product-modal__badge--oos {
  color: #fff;
  background: rgba(72, 72, 78, 0.92);
}

html.nav-theme-light .seller-product-modal__badge--stock {
  color: var(--ok);
  background: rgba(50, 215, 75, 0.14);
  border-color: rgba(27, 127, 58, 0.2);
}

html.nav-theme-light .seller-product-modal__badge--live {
  color: #0a4d8c;
  background: rgba(10, 132, 255, 0.12);
  border-color: rgba(10, 132, 255, 0.22);
}

html.nav-theme-light .seller-product-modal__badge--hidden {
  color: #6e6e73;
  background: rgba(0, 0, 0, 0.05);
}

html.nav-theme-light .seller-product-modal__badge--ok {
  color: var(--ok);
  background: rgba(50, 215, 75, 0.12);
}

html.nav-theme-light .seller-product-modal__badge--pending {
  color: #7a5c00;
  background: rgba(255, 214, 10, 0.2);
}

html.nav-theme-light .seller-product-modal__group {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .seller-product-modal__row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .seller-product-modal__row:hover {
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .seller-product-modal__row-icon {
  background: var(--shop-bg-muted, #e5e5ea);
}

html.nav-theme-light .seller-product-modal__row--primary .seller-product-modal__row-icon {
  color: #0a4d8c;
  background: rgba(10, 132, 255, 0.12);
}

html.nav-theme-light .seller-product-modal__section--danger .seller-product-modal__group {
  border-color: rgba(196, 30, 58, 0.18);
  background: rgba(255, 69, 58, 0.06);
}

html.nav-theme-light .seller-product-modal__row--danger .seller-product-modal__row-icon {
  color: #c41e3a;
  background: rgba(255, 69, 58, 0.12);
}

html.nav-theme-light .seller-product-modal__row--danger .seller-product-modal__row-title {
  color: #c41e3a;
}

html.nav-theme-light .seller-product-modal__cancel {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .seller-product-modal__cancel:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.14);
}

html.nav-theme-light .shop-checkout-main .seller-dash-panel .field input,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field textarea,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field select,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field input,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field textarea,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field select,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field select,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field input,
html.nav-theme-light .shop-checkout-main .seller-eur-banks-fields .field input {
  color: var(--shop-text, #1d1d1f);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field input:hover,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field textarea:hover,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field select:hover,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field input:hover,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field textarea:hover,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field select:hover,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field select:hover,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field input:hover,
html.nav-theme-light .shop-checkout-main .seller-eur-banks-fields .field input:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}

html.nav-theme-light .shop-checkout-main .seller-dash-panel .field input:focus,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field textarea:focus,
html.nav-theme-light .shop-checkout-main .seller-dash-panel .field select:focus,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field input:focus,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field textarea:focus,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field select:focus,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field select:focus,
html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field input:focus,
html.nav-theme-light .shop-checkout-main .seller-eur-banks-fields .field input:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light .shop-checkout-main .seller-ao-banks-fields .field select option {
  background: #fff;
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .seller-ship-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
html.nav-theme-light .seller-ship-form .field input,
html.nav-theme-light .seller-ship-form .field textarea {
  color: var(--shop-text, #1d1d1f);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}
/* Light mode — seller product form (novo produto / editar) */
html.nav-theme-light .shop-checkout-main .seller-form-panel .panel-divider,
html.nav-theme-light .shop-checkout-main .seller-form-panel .seller-promo-on-form {
  border-top-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .field input[type="file"] {
  color: var(--shop-text-muted, #6e6e73);
  background: #fff;
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-pill);
  background: var(--shop-bg-muted, #e5e5ea);
  color: var(--shop-text, #1d1d1f);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .field input[type="file"]::file-selector-button:hover {
  background: #d1d1d6;
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .field--invalid input,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field--invalid textarea,
html.nav-theme-light .shop-checkout-main .seller-form-panel .field--invalid select {
  border-color: rgba(215, 0, 21, 0.45);
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .seller-aoa-bank-hint,
html.nav-theme-light .shop-checkout-main .seller-form-panel .seller-aoa-bank-hint a {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .shop-checkout-main .seller-form-panel .seller-aoa-bank-hint a:hover {
  color: var(--shop-text, #1d1d1f);
}

/* Light mode — wishlist (lista de desejos) */
html.nav-theme-light .shop-checkout-main .shop-wishlist-panel.panel--wide {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
/* Bare status links only. These containers used to hold nothing but a sentence
   and a link; now they can hold an .empty-state, whose primary action is a
   solid .btn. This selector is (0,3,2) and out-specifies
   `html.nav-theme-light .btn` (0,2,1), so without the exclusion it painted the
   button label #1d1d1f on a #1d1d1f fill — an invisible 1:1 button. */
html.nav-theme-light .shop-checkout-main .wishlist-status a:not(.btn):not(.empty-state__link),
html.nav-theme-light .shop-checkout-main .shop-wishlist-panel .feed-status a:not(.btn):not(.empty-state__link) {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .wishlist-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .wishlist-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light .shop-checkout-main .wishlist-card__media {
  background: linear-gradient(160deg, rgba(230, 230, 235, 0.95), rgba(210, 210, 215, 0.88));
}

html.nav-theme-light .shop-checkout-main .wishlist-card__ph {
  color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .shop-checkout-main .shop-wishlist-panel .product-skeleton {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
/* Light mode — account page (conta) */
html.nav-theme-light .shop-checkout-main .panel--account {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light .shop-checkout-main .loading a {
  color: var(--shop-text, #1d1d1f);
}

@media (min-width: 720px) {
}
html.nav-theme-light .shop-checkout-main .avatar.avatar--picker:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: linear-gradient(145deg, #fff, rgba(229, 229, 234, 0.98));
}

html.nav-theme-light .shop-checkout-main .avatar.avatar--picker:has(.account-file-overlay:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light .shop-checkout-main .dl-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .badge--off {
  color: #c41e3a;
  background: rgba(255, 69, 58, 0.1);
}
html.nav-theme-light .shop-checkout-main .account-section-hint,
html.nav-theme-light .shop-checkout-main .panel--account .shop-muted,
html.nav-theme-light .shop-checkout-main .panel--account .register-lede {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .shop-checkout-main .panel--account .register-lede a {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .account-promo-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .account-menu {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}
html.nav-theme-light .shop-checkout-main .panel--account .field input::placeholder,
html.nav-theme-light .shop-checkout-main .panel--account .field textarea::placeholder {
  color: rgba(29, 29, 31, 0.45);
  -webkit-text-fill-color: rgba(29, 29, 31, 0.45);
}

html.nav-theme-light .shop-checkout-main .panel--account .field input:hover,
html.nav-theme-light .shop-checkout-main .panel--account .field textarea:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light .shop-checkout-main .panel--account .field input:focus,
html.nav-theme-light .shop-checkout-main .panel--account .field textarea:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

/* Light mode — account settings (definições) */
html.nav-theme-light .shop-checkout-main .settings-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .shop-checkout-main .settings-checkbox {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shop-checkout-main .settings-theme__option:hover span {
  border-color: rgba(0, 0, 0, 0.16);
  background: #d1d1d6;
}

html.nav-theme-light .shop-checkout-main .settings-theme__option input:checked:hover + span {
  border-color: #1d1d1f;
  background: #1d1d1f;
  color: #fff;
  opacity: 0.92;
}
html.nav-theme-light .shop-checkout-main .settings-panel .password-field__toggle:hover {
  color: var(--shop-text, #1d1d1f);
  background: rgba(0, 0, 0, 0.06);
}

html.nav-theme-light .shop-checkout-main .settings-panel .btn--danger:hover:not(:disabled) {
  color: #fff;
  background: #1d1d1f;
  opacity: 0.88;
}

/* Seller overview — the panel's single call to action (Pass C). */
.seller-overview-cta {
  margin-top: calc(var(--space-5) + var(--space-1));
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.seller-overview-cta.hidden {
  display: none;
}

.seller-overview-cta .btn {
  width: auto;
  margin-top: 0;
}

.seller-overview-cta__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
}

/* Order count reads as a sentence now, not a seventh KPI tile. */
.seller-econ-orders {
  margin: var(--space-4) 0 0;
  font-size: var(--text-caption);
}

/* ======== 06-chrome.css ======== */
/* Account settings page */
.settings-panel {
  max-width: min(100%, 860px);
}

.settings-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-2);
  text-align: left;
}

@media (min-width: 680px) {
  .settings-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.settings-head .eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.settings-title {
  margin-bottom: 6px;
  text-align: left;
}

.settings-lede {
  margin: 0;
  max-width: 56ch;
  line-height: 1.55;
}

.settings-grid {
  display: grid;
  gap: 18px;
  margin-top: var(--space-5);
}

@media (min-width: 760px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-card {
  margin-top: 0;
  padding: 22px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
}

.settings-card.account-section {
  border-top: 1px solid var(--hairline);
}

.settings-card--wide {
  grid-column: 1 / -1;
}

.settings-dl .dl-row:first-child {
  padding-top: 0;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-3) - 2px);
  margin-top: var(--space-4);
}

.settings-actions .btn,
.settings-head .btn,
#btn-settings-logout,
#btn-delete-account,
#btn-export-data {
  width: auto;
  margin: 0;
}

.settings-delete-block {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-3);
}

.settings-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
}

.settings-checkbox input {
  margin-top: 3px;
}

.settings-theme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.settings-theme__option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.settings-theme__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.settings-theme__option span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.settings-theme__option input:checked + span {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.settings-theme__option input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  outline: none;
}

.settings-theme__option:hover span {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.btn--danger {
  color: #e5484d;
  border-color: rgba(229, 72, 77, 0.45);
  background: rgba(229, 72, 77, 0.08);
}

.btn--danger:hover:not(:disabled) {
  color: #ff6d6d;
  background: rgba(229, 72, 77, 0.14);
  border-color: rgba(229, 72, 77, 0.55);
}

.seller-promo-panel {
  margin-top: 4px;
  max-width: 560px;
}

.seller-promo-date-hint {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.seller-promo-on-form {
  margin-top: var(--space-2);
  padding-top: calc(var(--space-4) + var(--space-1));
}

/* --- Global storefront UI: nav progress + toasts (minimal, SF-like) --- */

.store-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.store-nav-progress--active {
  opacity: 1;
}

.store-nav-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(0.2px);
  animation: store-nav-sweep 0.95s var(--ease) infinite;
  will-change: transform;
}

@keyframes store-nav-sweep {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(320%, 0, 0);
  }
}

.store-toast-stack {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-3);
  pointer-events: none;
  width: min(440px, calc(100vw - 24px - env(safe-area-inset-left)));
  max-width: min(440px, calc(100vw - 24px));
  isolation: isolate;
}

.store-toast {
  pointer-events: none;
  padding: var(--space-4) 22px 17px;
  border-radius: 18px;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: left;
  /* The toast surface is dark in both themes, so its ink cannot come from
     --text: under html.nav-theme-light that token is #1d1d1f, which put
     near-black type on a near-black pane. Fixed here rather than in a light
     override because the value is the same in both. */
  color: #f5f5f7;
  background: rgba(30, 30, 32, 0.82);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
  animation: store-toast-in 0.4s var(--ease) both;
  max-width: 100%;
}

.store-toast--success {
  border-color: rgba(50, 215, 74, 0.22);
}

.store-toast--error {
  border-color: rgba(255, 69, 58, 0.28);
  color: #ffeceb;
}

.store-toast--default {
  border-color: rgba(255, 255, 255, 0.12);
}

.store-toast--out {
  animation: store-toast-out 0.3s var(--ease) forwards;
}

/* A toast carrying an action (Store.toast({ action })). The stack is
   pointer-events: none so a passive toast can never intercept a click on the
   page beneath it; only this variant opts back in. */
.store-toast--actionable {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-right: var(--space-3);
}

.store-toast__msg {
  min-width: 0;
}

.store-toast__action {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f7;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.12s var(--ease);
}

.store-toast__action:hover {
  background: rgba(255, 255, 255, 0.17);
}

.store-toast__action:active {
  transform: scale(0.95);
}

.store-toast__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@keyframes store-toast-in {
  from {
    opacity: 0;
    transform: translateX(22px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes store-toast-out {
  to {
    opacity: 0;
    transform: translateX(16px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-nav-progress__bar {
    animation: none;
    width: 100%;
    transform: none;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.55);
  }

  .store-toast {
    animation: none;
  }

  .store-toast--out {
    animation: none;
    opacity: 0;
  }
}

/* Branded HTTP error pages (handler404 / handler500) */

.shell-main--error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(72vh, 560px);
  padding: clamp(24px, 5vw, 48px) 16px;
}

.store-error-panel {
  max-width: 32rem;
  text-align: center;
  padding: clamp(28px, 6vw, 44px);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--surface, #fff);
  box-shadow: 0 18px 48px rgba(16, 20, 30, 0.06);
}

.store-error-panel--500 {
  border-color: rgba(180, 60, 50, 0.18);
}

.store-error-code {
  margin: 0 0 var(--space-2);
  font-size: clamp(3rem, 10vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--muted);
  opacity: 0.85;
}

.store-error-panel--500 .store-error-code {
  color: #b45348;
}

.store-error-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.35rem, 3.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.store-error-lede {
  margin: 0 0 var(--space-5);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.store-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-3) - 2px);
  justify-content: center;
}

.store-error-legal {
  margin: 20px 0 0;
  font-size: 13px;
  text-align: center;
}

/* Legal / trust pages + site footer links */

.shell--legal .shell-main {
  padding-bottom: clamp(32px, 6vw, 64px);
}

.legal-doc {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px);
  text-align: left;
}

.legal-doc__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.legal-doc__meta {
  margin: 0 0 calc(var(--space-5) + var(--space-1));
  font-size: 14px;
  line-height: 1.5;
}

.legal-doc__section {
  margin-bottom: 1.35rem;
}

.legal-doc__section h2 {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.legal-doc__section p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.legal-doc__section p + p {
  margin-top: 0.65rem;
}

.legal-doc__list {
  margin: 0 0 0 1.15rem;
  padding: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.legal-doc__list li {
  margin-bottom: 0.65rem;
}

.legal-doc__list li:last-child {
  margin-bottom: 0;
}

.legal-doc__list a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc__mailto {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.legal-doc__code {
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.legal-doc__footer {
  margin: 36px 0 0;
  padding-top: calc(var(--space-4) + var(--space-1));
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

/* Light mode — legal / trust pages (/ajuda/, /terms/, /privacy/, …) */

html.nav-theme-light .shell--legal .legal-doc__meta,
html.nav-theme-light .shell--legal .legal-doc__section p,
html.nav-theme-light .shell--legal .legal-doc__list,
html.nav-theme-light .shell--legal .shop-muted {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .shell--legal .legal-doc__meta a,
html.nav-theme-light .shell--legal .legal-doc__section p a:not(.btn) {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shell--legal .legal-doc__meta a:hover,
html.nav-theme-light .shell--legal .legal-doc__section p a:not(.btn):hover,
html.nav-theme-light .shell--legal .legal-doc__list a:hover {
  color: var(--shop-text, #1d1d1f);
  opacity: 0.72;
}

html.nav-theme-light .shell--legal .legal-doc__section p .btn,
html.nav-theme-light .shell--legal .legal-doc__section p .btn:hover:not(:disabled) {
  color: #fff;
  opacity: 1;
}

html.nav-theme-light .shell--legal .legal-doc__meta strong,
html.nav-theme-light .shell--legal .legal-doc__section strong,
html.nav-theme-light .shell--legal .legal-doc__list strong {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .shell--legal .legal-doc__code,
html.nav-theme-light .shell--legal .legal-doc code {
  color: var(--shop-text, #1d1d1f);
  background: var(--shop-bg-muted, #e5e5ea);
}

/* Seller upgrade — customer → seller flow (`/vendedor/registo/`) */
.store-page--seller-upgrade {
  padding-inline: clamp(12px, 3vw, 24px);
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.store-page--seller-upgrade .store-main--seller-upgrade {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  flex: 1;
  padding-bottom: clamp(24px, 5vw, 48px);
}

.seller-upgrade-head {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.seller-upgrade-head .seller-dash-lede {
  margin-bottom: 0;
}

.seller-upgrade-shell {
  width: 100%;
  max-width: min(100%, 860px);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--elev-5);
}

.seller-upgrade-shell--ready {
  animation: seller-upgrade-in 0.35s var(--ease) both;
}

@keyframes seller-upgrade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.seller-upgrade__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  color: var(--text-muted);
  font-size: 15px;
}

.seller-upgrade__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--hairline);
  border-top-color: var(--badge);
  border-radius: 50%;
  animation: seller-upgrade-spin 0.7s linear infinite;
}

@keyframes seller-upgrade-spin {
  to {
    transform: rotate(360deg);
  }
}

.seller-upgrade__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--badge);
}

.seller-upgrade__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 calc(var(--space-5) + var(--space-1));
  padding: 0;
  list-style: none;
}

.seller-upgrade__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.seller-upgrade__step--current {
  border-color: color-mix(in srgb, var(--badge) 45%, var(--hairline));
  background: color-mix(in srgb, var(--badge) 10%, transparent);
}

.seller-upgrade__step--current .seller-upgrade__step-num {
  background: var(--badge);
  color: #0c0c0e;
}

.seller-upgrade__step--done .seller-upgrade__step-num {
  background: color-mix(in srgb, var(--badge) 72%, #0c0c0e);
  color: #0c0c0e;
}

.seller-upgrade__step--muted {
  opacity: 0.72;
}

.seller-upgrade__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.seller-upgrade__step-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.seller-upgrade__step--current .seller-upgrade__step-label {
  color: var(--text);
  font-weight: 600;
}

.seller-upgrade__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 calc(var(--space-5) + var(--space-1));
  padding: 0;
  list-style: none;
}

.seller-upgrade__highlights li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.seller-upgrade__highlight-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 2px;
}

.seller-upgrade__highlights strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.seller-upgrade__highlights span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.seller-upgrade__terms {
  margin-bottom: calc(var(--space-5) + var(--space-1));
}

.seller-upgrade__terms-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.seller-upgrade__terms-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.seller-upgrade__terms-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--badge);
  text-decoration: none;
}

.seller-upgrade__terms-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seller-upgrade__terms-scroll {
  position: relative;
  max-height: min(42vh, 340px);
  overflow: auto;
  padding: 16px 16px 24px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  scroll-behavior: smooth;
}

.seller-upgrade__terms-scroll::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 32px;
  margin-top: -32px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(12, 12, 14, 0.92));
}

.seller-upgrade__terms-scroll .legal-doc__meta {
  margin-bottom: var(--space-4);
}

.seller-upgrade__terms-scroll .legal-doc__section {
  margin-bottom: 1rem;
}

.seller-upgrade__terms-scroll .legal-doc__section h2 {
  font-size: 15px;
}

.seller-upgrade__terms-scroll .legal-doc__meta,
.seller-upgrade__terms-scroll .legal-doc__section p,
.seller-upgrade__terms-scroll .legal-doc__list {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.seller-upgrade__terms-scroll .legal-doc__section h2 {
  color: var(--text);
}

.seller-upgrade__terms-scroll .legal-doc__section p a,
.seller-upgrade__terms-scroll .legal-doc__list a {
  color: var(--badge);
  font-weight: 600;
}

.seller-upgrade__notice {
  margin-bottom: calc(var(--space-4) + var(--space-1));
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
}

.seller-upgrade__notice--info {
  background: color-mix(in srgb, var(--badge) 10%, transparent);
  border-color: color-mix(in srgb, var(--badge) 30%, var(--hairline));
}

.seller-upgrade__notice--success {
  background: color-mix(in srgb, #34c759 12%, transparent);
  border-color: color-mix(in srgb, #34c759 35%, var(--hairline));
}

.seller-upgrade__notice--warn {
  background: color-mix(in srgb, #ff9f0a 10%, transparent);
  border-color: color-mix(in srgb, #ff9f0a 32%, var(--hairline));
}

.seller-upgrade__notice-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.seller-upgrade__notice-actions {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seller-upgrade__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.seller-upgrade__accept-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.seller-upgrade__accept-card:hover {
  border-color: color-mix(in srgb, var(--badge) 35%, var(--hairline));
}

.seller-upgrade__accept-card--on {
  border-color: color-mix(in srgb, var(--badge) 50%, var(--hairline));
  background: color-mix(in srgb, var(--badge) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge) 16%, transparent);
}

.seller-upgrade__accept-card--shake {
  animation: seller-upgrade-shake 0.45s var(--ease);
}

@keyframes seller-upgrade-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.seller-upgrade__accept-card input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--badge);
}

.seller-upgrade__accept-copy {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.seller-upgrade__accept-copy strong {
  color: var(--text);
}

.seller-upgrade__accept-copy a {
  color: var(--badge);
  font-weight: 600;
}

.seller-upgrade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.seller-upgrade__submit {
  flex: 1 1 200px;
}

.seller-upgrade__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.seller-upgrade__status {
  margin: 0;
  min-height: 1.25em;
}

@media (max-width: 719px) {
  .seller-upgrade__steps {
    grid-template-columns: 1fr;
  }

  .seller-upgrade__step {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .seller-upgrade__highlights {
    grid-template-columns: 1fr;
  }

  .seller-upgrade__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .seller-upgrade__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

html.nav-theme-light .seller-upgrade-shell {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--elev-3);
}

html.nav-theme-light .seller-upgrade__form {
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .seller-upgrade__eyebrow {
  color: #0d7a56;
}

html.nav-theme-light .seller-upgrade__step,
html.nav-theme-light .seller-upgrade__highlights li,
html.nav-theme-light .seller-upgrade__accept-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .seller-upgrade__step--current {
  background: color-mix(in srgb, var(--badge) 14%, #fff);
  border-color: color-mix(in srgb, var(--badge) 40%, rgba(0, 0, 0, 0.1));
}

html.nav-theme-light .seller-upgrade__step-num {
  background: rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
}

html.nav-theme-light .seller-upgrade__step--current .seller-upgrade__step-num,
html.nav-theme-light .seller-upgrade__step--done .seller-upgrade__step-num {
  background: var(--badge);
  color: #0c0c0e;
}

html.nav-theme-light .seller-upgrade__terms-scroll {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .seller-upgrade__terms-scroll::after {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95));
}

html.nav-theme-light .seller-upgrade__terms-scroll .legal-doc__section p a,
html.nav-theme-light .seller-upgrade__terms-scroll .legal-doc__list a,
html.nav-theme-light .seller-upgrade__terms-link,
html.nav-theme-light .seller-upgrade__accept-copy a {
  color: #0d7a56;
}

html.nav-theme-light #seller-upgrade-root .seller-dash-lede {
  color: #6e6e73;
}

/* Legacy alias — keep if referenced elsewhere */
.seller-upgrade-page {
  padding-bottom: clamp(32px, 6vw, 56px);
}

.site-footer-legal {
  margin-top: auto;
  padding: 24px clamp(16px, 4vw, 48px) 32px;
  display: flex;
  /* Two stacked rows since B1: the demoted marketplace destinations, then the
     legal set. Pages that include only the legal nav are unaffected. */
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
}

.site-footer-legal .site-legal-nav {
  font-size: 14px;
}

.site-legal-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.site-legal-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-legal-nav a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Marketplace destinations demoted from the primary pill row (B1). Same shape
   as the legal row, one notch more prominent, and separated from it. */
.site-explore-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1120px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-ui);
}

.site-explore-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-explore-nav a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-legal-nav__sep {
  color: var(--muted);
  opacity: 0.65;
}

/* —— Nav user menu (avatar) —— */
.nav-user-menu {
  position: relative;
  flex-shrink: 0;
}

.nav-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.5rem;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.nav-user-menu__trigger:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

.nav-user-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-user-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.nav-user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  First page of a session: the avatar's initials come from /api/auth/me/, so
  the disc sat empty until that answered. A shimmer says "loading" instead of
  looking like a broken avatar. Later navigations paint the cached initials
  straight away (NAV_IDENTITY_KEY) and never reach this state.
*/
.nav-user-menu__avatar--loading {
  /* currentColor, so the disc themes itself in light mode with no override —
     see the light-theme convention note at the top of 01-base.css. */
  background: linear-gradient(
    100deg,
    color-mix(in srgb, currentColor 9%, transparent) 30%,
    color-mix(in srgb, currentColor 20%, transparent) 50%,
    color-mix(in srgb, currentColor 9%, transparent) 70%
  );
  background-size: 220% 100%;
  animation: nav-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes nav-skeleton-shimmer {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-user-menu__avatar--loading {
    animation: none;
  }
}

.nav-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 11.5rem;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 14, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Identity block. The menu is short now, so it can afford to open by saying who
   you are — which is the one thing neither the header buttons nor the account
   hub's own nav tell you. */
.nav-user-menu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-user-menu__head-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.nav-user-menu__head-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-user-menu__head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-user-menu__head-name,
.nav-user-menu__head-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 13rem;
}

.nav-user-menu__head-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.nav-user-menu__head-email {
  font-size: 12px;
  color: var(--text-muted);
}

.nav-user-menu__sep {
  height: 0;
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-user-menu__group {
  margin-top: 2px;
}

.nav-user-menu__group.hidden {
  display: none;
}

.nav-user-menu__label {
  margin: 8px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-user-menu__item--sub {
  padding-left: 20px;
}

.nav-user-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.nav-user-menu__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Same split as .account-menu__item in 01-base.css: a hover-identical tint is
   not a focus indicator. */
.nav-user-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Token, not the old hardcoded #f87171: the dropdown pane is repainted white in
   light mode (02-storefront.css), where that salmon sat at about 2.9:1. The
   token is #ff453a on the dark pane and #d70015 on the white one — both pass. */
.nav-user-menu__item--danger {
  color: var(--danger);
}

.nav-user-menu__item--danger:hover,
.nav-user-menu__item--danger:focus-visible {
  background: rgba(248, 113, 113, 0.12);
}

@media (max-width: 719px) {
  .store-nav-actions__end {
    border-left: none;
    padding-left: 0;
  }

  .store-nav-actions {
    gap: var(--space-2);
  }
}

/* —— Add-to-cart motion (fly + badge pulse) —— */
@keyframes cart-nav-pulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes cart-badge-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

.cart-nav--pulse {
  animation: cart-nav-pulse 0.48s var(--ease);
}

#nav-tab-cart-n.cart-nav--pulse,
#nav-cart-n.cart-nav--pulse {
  animation: cart-badge-pop 0.48s var(--ease);
}

.cart-fly-particle {
  position: fixed;
  z-index: 200;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.cart-fly-particle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-fly-particle--dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--badge);
  border-color: rgba(0, 0, 0, 0.2);
}

.cart-add-source--success {
  animation: cart-add-source-flash 0.48s var(--ease);
}

@keyframes cart-add-source-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.45);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(110, 231, 183, 0);
  }
}

/* —— Mobile bottom tab bar (primary nav on phones) —— */
.store-mobile-tabbar {
  display: none;
}

/* Admin chrome: no storefront tab bar, and no space held for one. Set by
   Store.applyAdminChrome from the role in /api/auth/me/ (nav.js). */
html.nav-admin-chrome .store-mobile-tabbar {
  display: none;
}

html.nav-admin-chrome body.has-mobile-tabbar {
  padding-bottom: 0;
}

.store-mobile-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  min-height: 52px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease);
}

.store-mobile-tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  border-radius: 0 0 2px 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity 0.2s var(--ease),
    transform 0.28s var(--ease);
  pointer-events: none;
}

.store-mobile-tab__icon {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.store-mobile-tab__icon::before {
  content: "";
  position: absolute;
  inset: -1px -6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.2s var(--ease),
    transform 0.28s var(--ease);
  z-index: -1;
}

.store-mobile-tab__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: font-weight 0.2s var(--ease);
}

.store-mobile-tab--active {
  color: var(--text);
}

.store-mobile-tab--active::after {
  opacity: 0.95;
  transform: scaleX(1);
  background: #0a84ff;
}

.store-mobile-tab--active .store-mobile-tab__icon {
  color: var(--text);
}

.store-mobile-tab--active .store-mobile-tab__icon::before {
  opacity: 1;
  transform: scale(1);
}

.store-mobile-tab--active .store-mobile-tab__label {
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .store-mobile-tab--active .store-mobile-tab__icon svg {
    animation: mobile-tab-icon-in 0.38s var(--ease);
  }
}

@keyframes mobile-tab-icon-in {
  0% {
    transform: scale(0.86);
    opacity: 0.65;
  }

  55% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.store-mobile-tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: -2px;
  border-radius: 10px;
}

.store-mobile-tab--badge-host .store-mobile-tab__badge {
  top: 2px;
  right: calc(50% - 22px);
}

@media (max-width: 719px) {
  .store-mobile-tabbar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    border-top: 1px solid var(--hairline);
    background: rgba(12, 12, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.has-mobile-tabbar {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .store-nav-actions__main {
    display: none;
  }

  /* Header: brand + icons on the first row, search on its own full-width row.
     The cluster's children join the header's wrapping flex directly — otherwise
     the non-shrinkable icon group overflows onto the search pill. */
  .store-nav__cluster {
    display: contents;
  }

  .store-nav__cluster .store-nav-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .store-nav .store-nav-search {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Catalog search lives in the bottom tab bar (Pesquisar). */
  body.has-mobile-tabbar .store-nav-search:not(.store-nav-search--seller) {
    display: none;
  }

  .store-nav-actions #nav-login {
    display: none;
  }

  .cookie-consent:not(.hidden) {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 720px) {
  body.has-mobile-tabbar {
    padding-bottom: 0;
  }
}

/* —— Notifications —— */
.btn--theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: auto;
  min-width: 2.5rem;
  padding: 0.5rem 0.65rem;
}

.btn--theme-toggle svg {
  display: block;
}

.store-nav-actions .btn--theme-toggle {
  width: auto;
}

.nav-theme-toggle__icon--moon {
  display: none;
}
.btn--notifications {
  position: relative;
  flex-shrink: 0;
  width: auto;
  min-width: 2.5rem;
  padding: 0.5rem 0.65rem;
}

.btn--notifications svg {
  display: block;
}

.store-nav-actions .btn--notifications {
  width: auto;
}

.btn--cart {
  position: relative;
  flex-shrink: 0;
  width: auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
}

.btn--cart svg {
  display: block;
}

.store-nav-actions .btn.btn--cart {
  width: auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
}

.nav-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #0a0a0a;
  background: var(--badge);
  border: 1px solid rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.notifications-panel {
  max-width: 640px;
}

.notifications-page-head {
  margin-bottom: 1.25rem;
}

.notifications-title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.notifications-sub {
  margin: 0 0 0.75rem;
}

.notifications-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) - 2px);
}

.notifications-item {
  border: 1px solid var(--border, var(--stroke-secondary));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.notifications-item--unread {
  border-color: rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.06);
}

.notifications-item__link {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}

.notifications-item__link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.notifications-item__title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 15px;
}

.notifications-item__body {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
}

.notifications-item__time {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}

/* Light mode — notifications (/notificacoes/) */
html.nav-theme-light .shop-checkout-main .notifications-panel.panel--wide {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light .shop-checkout-main .notifications-item {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

html.nav-theme-light .shop-checkout-main .notifications-item--unread {
  border-color: rgba(27, 127, 58, 0.35);
  background: rgba(27, 127, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(27, 127, 58, 0.06);
}
html.nav-theme-light .shop-checkout-main .notifications-item__link:hover {
  background: rgba(0, 0, 0, 0.04);
}
html.nav-theme-light .shop-checkout-main .notifications-item__body,
html.nav-theme-light .shop-checkout-main .notifications-item__time {
  color: var(--shop-text-muted, #6e6e73);
  opacity: 1;
}
/* —— Customer receipt —— */
.receipt-panel {
  max-width: 720px;
  margin: 0 auto;
}

.receipt-doc {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.35);
}

.receipt-doc__brand {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.receipt-doc__title {
  margin: 0 0 var(--space-2);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.receipt-doc__meta {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  font-size: 14px;
  color: var(--text-muted);
}

.receipt-doc__section {
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.receipt-doc__label {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.receipt-doc__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.receipt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.receipt-table th,
.receipt-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--stroke-secondary);
}

.receipt-table th:last-child,
.receipt-table td:last-child {
  text-align: right;
}

.receipt-doc__totals {
  margin: 16px 0 20px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.receipt-doc__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: 15px;
}

.receipt-doc__row--muted {
  color: var(--text-muted);
  font-size: 14px;
}

.receipt-doc__row--total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-weight: 600;
  font-size: 17px;
}

.receipt-doc__disclaimer {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-3) - 2px);
  align-items: center;
}

.receipt-actions .btn {
  width: auto;
  margin: 0;
}

.receipt-doc__note {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  line-height: 1.45;
}

.receipt-doc--seller .receipt-doc__title {
  font-size: 1.25rem;
}

.order-receipt-link {
  margin: 0 0 var(--space-4);
}

@media print {
  body {
    background: #fff;
    color: #111;
  }

  .receipt-no-print,
  #store-nav-progress,
  #store-toast-stack {
    display: none !important;
  }

  .receipt-shell {
    padding: 0;
  }

  .receipt-doc {
    border: none;
    background: transparent;
    color: #111;
    padding: 0;
  }

  .receipt-doc__brand,
  .receipt-doc__meta,
  .receipt-doc__label,
  .receipt-doc__disclaimer,
  .receipt-doc__row--muted {
    color: #444;
  }

  .receipt-table th,
  .receipt-table td {
    border-color: #ccc;
    color: #111;
  }
}

/* Checkout fulfillment (pickup vs delivery) */
.checkout-fulfillment {
  margin-top: var(--space-5);
  padding-top: calc(var(--space-4) + var(--space-1));
  border-top: 1px solid var(--stroke-secondary, var(--stroke-secondary));
}

.checkout-fulfillment-methods {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) - 2px);
  margin: 14px 0 16px;
  border: none;
  padding: 0;
}

.checkout-fulfillment-option {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-3) - 2px);
  cursor: pointer;
}

.checkout-fulfillment-option--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-fulfillment-panel {
  margin-top: var(--space-3);
}

.checkout-pickup-sellers {
  margin: 10px 0 0;
  padding-left: 1.2rem;
}

.checkout-pickup-sellers li + li {
  margin-top: 10px;
}

.seller-delivery-toggles {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) - 2px);
  margin-bottom: var(--space-4);
}

/* Order fulfillment display + seller ship dialog */
.order-fulfillment-block {
  margin: var(--space-5) 0;
  padding: var(--space-5) calc(var(--space-4) + var(--space-2));
  border: 1px solid var(--stroke-secondary, var(--stroke-secondary));
  border-radius: var(--radius-lg);
  background: var(--surface-raised, var(--surface-raised));
}

.order-fulfillment-block__title {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.order-fulfillment-block__method {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.order-fulfillment-pickup-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.order-fulfillment-pickup-list li + li {
  margin-top: var(--space-2);
}

.order-fulfillment-tracking {
  margin-top: var(--space-3);
  padding-top: 12px;
  border-top: 1px solid var(--stroke-secondary, var(--stroke-secondary));
}

.orders-card__fulfillment {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted, #9ca3af);
}

/* Fulfillment Phase 2: status chips, timeline, per-seller cards */
.fulfillment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border: 1px solid var(--stroke-secondary);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-muted);
}

.fulfillment-chip--preparing {
  border-color: rgba(255, 214, 10, 0.35);
  background: rgba(255, 214, 10, 0.12);
  color: #ffd60a;
}

.fulfillment-chip--shipped {
  border-color: rgba(50, 215, 75, 0.35);
  background: rgba(50, 215, 75, 0.12);
  color: var(--ok);
}

.fulfillment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.fulfillment-meta__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.fulfillment-meta__item .shop-muted {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fulfillment-timeline {
  margin: var(--space-4) 0;
  padding: 0 0 0 var(--space-4);
  list-style: none;
}

.fulfillment-timeline__step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  font-size: 15px;
  color: var(--text-muted);
}

.fulfillment-timeline__step:last-child {
  padding-bottom: 0;
}

/* Connector between dots; stops at the last step. */
.fulfillment-timeline__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) + 4px);
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: var(--stroke-secondary);
}

.fulfillment-timeline__step:last-child::before {
  display: none;
}

.fulfillment-timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: 6px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 50%;
  background: var(--bg-1);
}

.fulfillment-timeline__step--done {
  color: var(--text);
}

.fulfillment-timeline__step--done .fulfillment-timeline__dot {
  border-color: var(--ok);
  background: var(--ok);
}

.fulfillment-timeline__step--current {
  color: var(--text);
  font-weight: 600;
}

.fulfillment-timeline__step--current .fulfillment-timeline__dot {
  border-color: var(--badge);
  background: var(--badge);
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.16);
}

.fulfillment-timeline__now {
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(110, 231, 183, 0.14);
  color: var(--badge);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fulfillment-sellers {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.fulfillment-seller {
  padding: var(--space-4);
  border: 1px solid var(--stroke-secondary);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.fulfillment-seller:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--surface);
}

.fulfillment-seller__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.fulfillment-seller__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fulfillment-seller__row {
  margin: var(--space-2) 0 0;
  font-size: 14px;
}

.fulfillment-seller__status {
  margin: var(--space-1) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.fulfillment-seller__empty {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  font-style: italic;
}

/* Tracking / pickup details: a labelled key-value block rather than a run-on line. */
.fulfillment-track {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--stroke-secondary);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.fulfillment-track__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-size: 14px;
}

.fulfillment-track__row + .fulfillment-track__row {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--stroke-secondary);
}

.fulfillment-track__label {
  flex: 0 0 8.5rem;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.fulfillment-track__value {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fulfillment-track__value--lines {
  line-height: 1.5;
}

.fulfillment-track__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.fulfillment-track__link {
  display: inline-block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--stroke-secondary);
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fulfillment-track__link:hover {
  opacity: 0.75;
}

/* Stack the labels above their values where a two-column row would squeeze. */
@media (max-width: 26rem) {
  .fulfillment-track__label {
    flex: 1 1 100%;
  }
}

.fulfillment-seller__note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-left: 2px solid var(--badge);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.5;
  /* Seller notes are free text — respect the line breaks they typed. */
  overflow-wrap: anywhere;
}

.order-confirm-received {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--stroke-secondary);
}

.order-confirm-received__copy {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 14px;
}

@media (min-width: 40rem) {
  .fulfillment-sellers--multi {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* Light theme: the base tokens are dark-only, so every surface, hairline and
   status colour used by the fulfillment blocks needs a readable counterpart. */
html.nav-theme-light .order-fulfillment-block,
html.nav-theme-light .fulfillment-seller,
html.nav-theme-light .seller-ship-form__summary {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .fulfillment-track {
  border-color: rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

html.nav-theme-light .order-fulfillment-tracking,
html.nav-theme-light .order-confirm-received,
html.nav-theme-light .fulfillment-timeline__step::before {
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .fulfillment-timeline__dot {
  border-color: rgba(0, 0, 0, 0.2);
  background: #ffffff;
}

html.nav-theme-light .fulfillment-timeline__step--done .fulfillment-timeline__dot,
html.nav-theme-light .fulfillment-timeline__step--current .fulfillment-timeline__dot {
  border-color: #1f9e5c;
  background: #1f9e5c;
}

html.nav-theme-light .fulfillment-timeline__step--current .fulfillment-timeline__dot {
  box-shadow: 0 0 0 4px rgba(31, 158, 92, 0.18);
}

html.nav-theme-light .fulfillment-timeline__now {
  background: rgba(31, 158, 92, 0.14);
  color: #147a45;
}

html.nav-theme-light .fulfillment-chip--preparing {
  border-color: rgba(146, 104, 0, 0.28);
  background: rgba(255, 214, 10, 0.2);
  color: #7a5c00;
}

html.nav-theme-light .fulfillment-chip--shipped {
  border-color: rgba(31, 158, 92, 0.3);
  background: rgba(31, 158, 92, 0.14);
  color: #147a45;
}

html.nav-theme-light .fulfillment-seller__note {
  border-left-color: #1f9e5c;
  background: rgba(0, 0, 0, 0.035);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .fulfillment-meta {
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .fulfillment-seller:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.04);
}

.seller-ship-dialog {
  max-width: 28rem;
  width: calc(100% - 2rem);
  padding: 0;
  border: 1px solid var(--stroke-secondary, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  background: var(--surface-panel, #1a1d24);
  color: inherit;
}

.seller-ship-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.seller-ship-form {
  padding: 20px 22px;
}

.seller-ship-form__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
}

.seller-ship-form__address {
  margin: 0 0 calc(var(--space-3) + var(--space-1));
  font-size: 14px;
}

.seller-ship-form__summary {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--stroke-secondary);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.seller-ship-form__summary > :last-child {
  margin-bottom: 0;
}

.seller-ship-form__method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}

.seller-ship-form__summary .fulfillment-meta {
  margin: var(--space-2) 0;
}

.seller-ship-form__mark {
  margin: 14px 0 8px;
}

.seller-ship-form__actions {
  display: flex;
  gap: calc(var(--space-3) - 2px);
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Accessibility — skip link, visible keyboard focus, reduced motion */
/* Both selectors are needed: `html.nav-theme-light a` in 02-storefront.css has
   specificity (0,1,2) and out-specifies a bare `.skip-link` (0,1,0), so the
   light theme was repainting this link in muted grey on its blue chip — 1.39:1
   for the one control a keyboard user hits first. The blue is also darkened
   from #0a84ff, which only reached 3.65:1 against white text. */
.skip-link,
html.nav-theme-light .skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 10px;
  background: #0060df;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#store-main:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .store-nav-progress__bar {
    transition: none !important;
  }

  .store-mobile-tabbar {
    display: none !important;
  }

  .cart-fly-particle,
  .cart-nav--pulse,
  .cart-add-source--success {
    animation: none !important;
  }
}

.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 18px;
  background: #1c1c1e;
  color: #f5f5f7;
  border-radius: 14px;
  box-shadow: var(--elev-4);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-consent.hidden {
  display: none;
}

.cookie-consent__text {
  flex: 1 1 280px;
}

.cookie-consent__text a {
  color: #5ac8fa;
  text-decoration: underline;
}

.cookie-consent__actions {
  flex: 0 0 auto;
}

.cookie-consent__accept {
  padding: 9px 18px;
  border: 0;
  border-radius: 10px;
  /* #0a84ff carries white text at only 3.65:1. Same darker blue as .skip-link,
     so the one interactive fill in the product is consistent and clears AA. */
  background: #0060df;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cookie-consent__accept:hover {
  background: #0052bd;
}

/* ======== 07-engagement.css ======== */
/* Site navigation, engagement pages, newsletter, contact modal */

.store-site-nav {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto calc(var(--space-4) + var(--space-1));
  padding: 0 clamp(12px, 3vw, 24px);
}

.store-site-nav__inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: calc(var(--space-3) - 2px) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--stroke-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.store-site-nav__inner::-webkit-scrollbar {
  display: none;
}

.store-site-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: min-content;
}

.store-site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store-site-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text);
}

.store-site-nav__link.is-active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text);
  font-weight: 600;
}

/* The bottom tab bar (≤719px) already carries Início / Pesquisar / Carrinho /
   Pedidos / Conta. Keeping the pill row as well put two navigations on the same
   phone screen, and the pills overflowed into a scroll most people never found. */
@media (max-width: 719px) {
  .store-site-nav {
    display: none;
  }
}

html.nav-theme-light .store-site-nav__inner {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light .store-site-nav__link:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1d1d1f;
}
/* Newsletter */
.newsletter-card {
  display: grid;
  gap: var(--space-4);
  padding: calc(var(--space-4) + var(--space-1));
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

.newsletter-card__lead {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.newsletter-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.newsletter-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.newsletter-card__sub {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.newsletter-form {
  display: grid;
  gap: var(--space-3);
}

.newsletter-form__row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 36rem) {
  .newsletter-form__row {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
}

.newsletter-form__input {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
}

.newsletter-form__input::placeholder {
  color: var(--text-muted);
}

.newsletter-form__input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 1px;
}

.newsletter-form__btn {
  min-height: 44px;
  white-space: nowrap;
}

.newsletter-form__consent {
  display: flex;
  gap: var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  align-items: flex-start;
  cursor: pointer;
}

.newsletter-form__consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.newsletter-form__status {
  margin: 0;
  font-size: 0.875rem;
}

.newsletter-form__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

html.nav-theme-light .newsletter-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--elev-3);
}

/* The card flips to white above but the title kept var(--text) (#f5f5f7), which
   is 1.09:1 on that background — the heading was effectively invisible. The
   icon chip had the same problem: a white-on-white fill with a white hairline. */

html.nav-theme-light .newsletter-card__icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .newsletter-form__input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1d1d1f;
}

.shell .newsletter-band,
.store-page--home .newsletter-band {
  margin-top: clamp(40px, 5vw, 56px);
}

.shell .newsletter-band .home-section-inner {
  max-width: min(100%, 720px);
  margin: 0 auto;
  padding: 0;
}

/* Novidades page */
.novidades-head {
  margin-bottom: var(--space-4);
}

.novidades-tabs,
.admin-engagement-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.novidades-tab,
.admin-engagement-tab {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.novidades-tab:hover,
.admin-engagement-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.novidades-tab--active,
.admin-engagement-tab--active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  font-weight: 600;
}
html.nav-theme-light #store-novidades-root .shop-muted,
html.nav-theme-light #store-novidades-root .seller-dash-lede,
html.nav-theme-light #store-novidades-root .catalog-count,
html.nav-theme-light #store-novidades-root .feed-status {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-novidades-root .catalog-title {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light #store-novidades-root .novidades-tab:hover {
  background: var(--shop-bg-muted, #f2f2f7);
}

/* Novidades desta semana — latest product chip */
#store-home-root .new-this-week-card {
  position: relative;
}

#store-home-root .new-this-week-card--latest {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

#store-home-root .new-this-week-card__latest-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
  color: #1d1d1f;
  background: rgba(255, 214, 10, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--elev-2);
}

html.nav-theme-light #store-home-root .new-this-week-card--latest {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}

html.nav-theme-light #store-home-root .new-this-week-card__latest-badge {
  color: #1d1d1f;
  background: #ffd60a;
  border-color: rgba(0, 0, 0, 0.1);
}

.browse-filters--stores-hidden {
  display: none !important;
}

.store-page--featured-stores #featured-search-form {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}

.featured-stores-grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  width: 100%;
}

.featured-store-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.featured-store-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .featured-store-card--enter {
    animation: cardEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

.featured-store-card__top {
  position: relative;
}

.featured-store-card__banner {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(72, 72, 88, 0.55), rgba(28, 28, 34, 0.92));
  text-decoration: none;
}

.featured-store-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

.featured-store-card:hover .featured-store-card__banner img {
  transform: scale(1.03);
}

.featured-store-card__banner--empty {
  background: linear-gradient(135deg, rgba(72, 72, 88, 0.45), rgba(18, 18, 22, 0.95));
}

.featured-store-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0c0c0e;
  background: var(--badge);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--elev-2);
}

.featured-store-card__avatar-slot {
  position: absolute;
  left: var(--space-4);
  bottom: -1.5rem;
  z-index: 2;
}

.featured-store-card__avatar-link {
  display: block;
  text-decoration: none;
}

.featured-store-card__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  background: var(--bg-1);
  box-shadow: var(--elev-2);
}

.featured-store-card__avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: linear-gradient(160deg, rgba(72, 72, 88, 0.9), rgba(28, 28, 34, 0.98));
}

.featured-store-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: calc(1.5rem + var(--space-2)) var(--space-4) var(--space-4);
}

.featured-store-card__head {
  min-width: 0;
}

.featured-store-card__badges {
  margin-bottom: 6px;
}

.featured-store-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.featured-store-card__name-row .featured-store-card__name {
  flex: 1;
  min-width: 0;
}

.featured-store-card__name-row .product-discover-seller__share {
  margin-top: 1px;
}

.featured-store-card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.featured-store-card__name a {
  color: var(--text);
  text-decoration: none;
}

.featured-store-card__name a:hover {
  opacity: 0.9;
}

.featured-store-card__location {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.featured-store-card__rating {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: #f5c842;
}

.featured-store-card__rating.shop-muted {
  color: var(--text-muted);
}

.featured-store-card__bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-store-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 4px;
}

.featured-store-card__meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.featured-store-card__footer .btn {
  flex-shrink: 0;
}

/* Light mode — /lojas-destaque/ */
html.nav-theme-light #store-featured-stores-root .stores-band--hub .home-section-inner {
  padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-3) + var(--space-1));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #store-featured-stores-root .featured-store-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-featured-stores-root .featured-store-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}

html.nav-theme-light #store-featured-stores-root .featured-store-card__banner--empty {
  background: linear-gradient(135deg, rgba(235, 235, 240, 0.95), rgba(210, 210, 218, 0.98));
}

html.nav-theme-light #store-featured-stores-root .featured-store-card__avatar--empty {
  color: rgba(0, 0, 0, 0.28);
  background: linear-gradient(160deg, rgba(235, 235, 240, 0.95), rgba(215, 215, 220, 0.98));
}

html.nav-theme-light #store-featured-stores-root .featured-store-card__rating {
  color: #9a6700;
}

html.nav-theme-light #store-featured-stores-root .seller-trust-badge--trusted {
  color: var(--ok);
  border-color: rgba(27, 127, 58, 0.28);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light #store-featured-stores-root .seller-trust-badge--top_rated {
  color: #9a6700;
  border-color: rgba(154, 103, 0, 0.28);
  background: rgba(154, 103, 0, 0.1);
}
.store-page--updates .store-main--search {
  padding-bottom: clamp(24px, 5vw, 48px);
}

.updates-list {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.update-card {
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.update-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--elev-3);
}

@media (min-width: 40rem) {
  .update-card:not(.update-card--no-image) {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    align-items: start;
  }
}

.update-card--pinned {
  border-color: color-mix(in srgb, var(--badge) 35%, var(--hairline));
  background: color-mix(in srgb, var(--badge) 6%, var(--surface));
}

.update-card__media {
  min-width: 0;
}

.update-card__media a {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.update-card__img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.update-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.update-card__badge {
  display: inline-block;
  width: fit-content;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0c0c0e;
  background: var(--badge);
  margin-bottom: 2px;
}

.update-card__meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.update-card__cat {
  font-weight: 600;
  color: var(--text);
}

.update-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.update-card__title a {
  color: var(--text);
  text-decoration: none;
}

.update-card__title a:hover {
  opacity: 0.9;
}

.update-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.update-card__actions {
  margin-top: 4px;
}

.update-detail {
  width: 100%;
  max-width: min(100%, 48rem);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.update-detail__content.hidden {
  display: none;
}

.update-detail__media {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.update-detail__img {
  display: block;
  width: 100%;
  max-height: min(42vh, 20rem);
  object-fit: cover;
}

.update-detail__head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.update-detail__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

.update-detail__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: normal;
  word-break: break-word;
}

.update-detail__body a {
  color: var(--badge);
  font-weight: 600;
}

.update-detail__back {
  width: 100%;
  max-width: min(100%, 48rem);
  margin: calc(var(--space-4) + var(--space-1)) auto 0;
  text-align: left;
}

html.nav-theme-light #store-updates-root .update-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}

html.nav-theme-light #store-updates-root .update-card--pinned {
  background: color-mix(in srgb, var(--badge) 10%, #fff);
  border-color: color-mix(in srgb, var(--badge) 35%, rgba(0, 0, 0, 0.1));
}

html.nav-theme-light #store-update-detail-root .update-detail__head {
  border-color: rgba(0, 0, 0, 0.08);
}

.new-this-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
}

.new-this-week-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface-raised);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.new-this-week-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.new-this-week-card__img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.new-this-week-card__img--empty {
  background: var(--bg-1);
}

.new-this-week-card__body {
  padding: var(--space-2) var(--space-3);
}

.new-this-week-card__meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.new-this-week-card__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-4), env(safe-area-inset-top, 0px))
    max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px))
    max(var(--space-4), env(safe-area-inset-left, 0px));
}

@media (max-width: 719px) {
  body.has-mobile-tabbar.contact-modal-open .contact-modal {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + var(--space-4));
  }
}

body.contact-modal-open {
  overflow: hidden;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.contact-modal__panel {
  position: relative;
  width: min(100%, 28rem);
  max-height: min(90vh, calc(100dvh - 2 * var(--space-4)));
  overflow: auto;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.contact-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.contact-seller-form .field {
  margin-bottom: var(--space-3);
}

/* Light mode — contact seller modal (body-level, outside shop-checkout-main) */
html.nav-theme-light #contact-seller-modal .contact-modal__panel.panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--sheen), var(--elev-3);
}
html.nav-theme-light #contact-seller-modal .contact-seller-form .field input,
html.nav-theme-light #contact-seller-modal .contact-seller-form .field textarea {
  color: var(--shop-text, #1d1d1f);
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.12);
  -webkit-text-fill-color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #contact-seller-modal .contact-seller-form .field input:hover,
html.nav-theme-light #contact-seller-modal .contact-seller-form .field textarea:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light #contact-seller-modal .contact-seller-form .field input:focus,
html.nav-theme-light #contact-seller-modal .contact-seller-form .field textarea:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light #contact-seller-modal .contact-modal__close {
  color: var(--shop-text-muted, #6e6e73);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #contact-seller-modal .contact-modal__close:hover:not(:disabled) {
  color: var(--shop-text, #1d1d1f);
  background: rgba(0, 0, 0, 0.06);
  opacity: 1;
}

.seller-message-row--unread {
  font-weight: 600;
}

.admin-engagement-pane.hidden {
  display: none;
}

/* ======== 08-support.css ======== */
/* Support tickets — Contacto / Ajuda */

/* --- Contacto list page --- */

.store-page--contacto .store-main--search {
  padding-inline: clamp(12px, 3vw, 24px);
  padding-bottom: clamp(32px, 6vw, 56px);
}

.store-page--contacto .contacto-head {
  margin-bottom: calc(var(--space-4) + var(--space-2));
}

.store-page--contacto .contacto-head__copy .seller-dash-lede {
  margin-bottom: 0;
}

.store-page--contacto .contacto-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.contacto-gate {
  max-width: min(100%, 34rem);
  margin: 0 0 var(--space-4);
  padding: clamp(18px, 3.5vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  line-height: 1.55;
}

.contacto-gate--auth {
  text-align: center;
}

.contacto-gate__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.contacto-gate__text {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.contacto-gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
}

.contacto-shell {
  display: grid;
  gap: calc(var(--space-5) + var(--space-3));
  width: 100%;
}

@media (min-width: 56rem) {
  .contacto-shell {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 44px);
  }

  .contacto-form-panel {
    position: sticky;
    top: max(16px, env(safe-area-inset-top));
  }
}

.contacto-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.contacto-section__intro {
  display: grid;
  gap: 6px;
}

.contacto-section__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.contacto-section__lede {
  margin: 0;
  max-width: 48ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.contacto-form-panel {
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.contacto-form-panel .field {
  margin-bottom: var(--space-4);
}

.contacto-form-panel .field:last-of-type {
  margin-bottom: 0;
}

.contacto-form-panel__hint {
  font-weight: 400;
  color: var(--text-muted);
}

.contacto-form-panel__files input[type="file"] {
  width: 100%;
  padding: var(--space-3);
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--hairline) 80%, transparent);
  background: rgba(255, 255, 255, 0.02);
}

.contacto-form-panel__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: calc(var(--space-4) + var(--space-1));
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.contacto-form-panel__status {
  margin: 0;
  min-height: 1.25em;
}

.contacto-filters.browse-filters--minimal {
  margin: 0;
}

.contacto-ticket-list {
  margin-top: var(--space-1);
}

.contacto-list-status {
  margin: 0;
}

.contacto-list-status--empty {
  padding: clamp(20px, 4vw, 28px);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--hairline);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
}

/* --- Contacto detail page --- */

.store-page--contacto-detail .store-main--search {
  padding-inline: clamp(12px, 3vw, 24px);
  padding-bottom: clamp(32px, 6vw, 56px);
}

.store-page--contacto-detail .contacto-detail-back {
  margin: 0 0 var(--space-4);
}

.store-page--contacto-detail .support-panel + .support-panel {
  margin-top: var(--space-4);
}

.store-page--contacto-detail .support-panel .checkout-section-title {
  margin-top: calc(var(--space-4) + var(--space-1));
}

.support-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.support-status--pending {
  color: #7a5c00;
  background: rgba(255, 214, 10, 0.22);
  border-color: rgba(255, 214, 10, 0.35);
}

.support-status--reviewing {
  color: #0a4d8c;
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.28);
}

.support-status--completed {
  color: #0d7a56;
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.28);
}

.support-status--rejected {
  color: #a12828;
  background: rgba(255, 59, 48, 0.14);
  border-color: rgba(255, 59, 48, 0.28);
}

.support-status--closed {
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--hairline);
}

.support-ticket-list {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.support-ticket-card {
  display: grid;
  gap: 10px;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.support-ticket-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--elev-3);
}

.support-ticket-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.support-ticket-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.support-ticket-card__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.support-panel {
  width: 100%;
  max-width: min(100%, 52rem);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.support-thread {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.support-thread__msg {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.support-thread__msg--staff {
  border-color: color-mix(in srgb, #0a84ff 28%, var(--hairline));
  background: color-mix(in srgb, #0a84ff 8%, transparent);
}

.support-thread__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.support-thread__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.support-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.support-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--text);
}

.support-attachment-link:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.support-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.support-stat-card {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.support-stat-card__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.support-stat-card__label {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.support-admin-layout {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 56rem) {
  .support-admin-layout {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}

.support-admin-detail.hidden {
  display: none;
}
html.nav-theme-light .contacto-list-status--empty {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: #6e6e73;
}
html.nav-theme-light .support-ticket-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-3);
}

html.nav-theme-light .support-thread__msg {
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .support-thread__msg--staff {
  background: rgba(10, 132, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.2);
}

/* Light mode — Contacto list + detail (scoped; --text / --text-muted stay dark-theme values) */

html.nav-theme-light #store-contacto-root .seller-dash-title,
html.nav-theme-light #store-contacto-root .contacto-section__title,
html.nav-theme-light #store-contacto-root .contacto-gate__title,
html.nav-theme-light #store-contacto-root .support-ticket-card__title,
html.nav-theme-light #store-contacto-detail-root .checkout-section-title {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-contacto-detail-root .contacto-detail-back,
html.nav-theme-light #store-contacto-detail-root .contacto-detail-back a {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-contacto-detail-root .contacto-detail-back a:hover {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light #store-contacto-root .contacto-form-panel .field select option,
html.nav-theme-light #store-contacto-detail-root .support-panel .field select option {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
}

html.nav-theme-light #store-contacto-root .contacto-form-panel .field input:hover,
html.nav-theme-light #store-contacto-root .contacto-form-panel .field textarea:hover,
html.nav-theme-light #store-contacto-root .contacto-form-panel .field select:hover,
html.nav-theme-light #store-contacto-detail-root .support-panel .field input:hover,
html.nav-theme-light #store-contacto-detail-root .support-panel .field textarea:hover,
html.nav-theme-light #store-contacto-detail-root .support-panel .field select:hover {
  background: #d1d1d6;
  border-color: rgba(0, 0, 0, 0.16);
}

html.nav-theme-light #store-contacto-root .contacto-form-panel .field input:focus,
html.nav-theme-light #store-contacto-root .contacto-form-panel .field textarea:focus,
html.nav-theme-light #store-contacto-root .contacto-form-panel .field select:focus,
html.nav-theme-light #store-contacto-detail-root .support-panel .field input:focus,
html.nav-theme-light #store-contacto-detail-root .support-panel .field textarea:focus,
html.nav-theme-light #store-contacto-detail-root .support-panel .field select:focus {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

html.nav-theme-light #store-contacto-root .contacto-form-panel .field input::placeholder,
html.nav-theme-light #store-contacto-root .contacto-form-panel .field textarea::placeholder,
html.nav-theme-light #store-contacto-detail-root .support-panel .field input::placeholder,
html.nav-theme-light #store-contacto-detail-root .support-panel .field textarea::placeholder {
  color: var(--shop-text-muted, #6e6e73);
  -webkit-text-fill-color: var(--shop-text-muted, #6e6e73);
  opacity: 1;
}

html.nav-theme-light #store-contacto-detail-root .support-panel .field input[type="file"] {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-contacto-detail-root .support-attachment-link {
  color: var(--shop-text, #1d1d1f);
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

html.nav-theme-light #store-contacto-detail-root .support-attachment-link:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.04);
}

html.nav-theme-light #store-contacto-root .support-status--closed,
html.nav-theme-light #store-contacto-detail-root .support-status--closed {
  color: #6e6e73;
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-contacto-detail-root .update-detail__head {
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-contacto-detail-root .feed-status a {
  color: var(--shop-text, #1d1d1f);
}

/* ======== 09-admin.css ======== */
/* Admin console — unified minimal shell shared by every /admin-* page.
   Layout: sticky sidebar on desktop, horizontal pill rail on mobile. */

.shell--admin {
  padding-bottom: var(--space-6);
}

.admin-shell-main.shop-checkout-main {
  max-width: none;
  width: 100%;
  align-items: stretch;
  padding-inline: 0;
}

.admin-main {
  min-width: 0;
  width: 100%;
}

.admin-shell-main .feed-status,
.admin-shell-main .feed-status--error {
  max-width: 42rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  line-height: 1.55;
}

.admin-shell-main .feed-status--error {
  border-color: rgba(255, 69, 58, 0.35);
  background: rgba(255, 69, 58, 0.08);
  color: #ff6961;
}

.admin-shell-main .checkout-section-title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-shell-main .checkout-section-title:first-child {
  margin-top: 0;
}

.admin-shell-main .seller-promo-panel,
.admin-shell-main .seller-form-row,
.admin-shell-main .browse-filters {
  margin-bottom: var(--space-4);
}

.admin-shell-main .seller-table-wrap {
  margin-top: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: auto;
  background: var(--surface-raised);
}

.admin-shell-main .shop-table th,
.admin-shell-main .shop-table td {
  border-color: var(--hairline);
}

.admin-shell-main .shop-table th {
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-shell-main .field input,
.admin-shell-main .field textarea,
.admin-shell-main .field select,
.admin-shell-main .browse-filters__pill,
.admin-shell-main .qty-input {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--text);
}

.admin-shell-main .field input:focus,
.admin-shell-main .field textarea:focus,
.admin-shell-main .field select:focus,
.admin-shell-main .browse-filters__pill:focus {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.admin-shell-main .support-stats-grid {
  margin-bottom: var(--space-5);
}

.admin-shell-main .support-admin-layout {
  margin-top: var(--space-4);
}

.admin-shell-main .support-ticket-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-shell-main .support-ticket-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.admin-shell-main .support-admin-detail {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.admin-shell-main .review-mod-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.admin-shell-main .review-mod-card {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  margin-bottom: var(--space-3);
}

.admin-shell-main .admin-engagement-tabs {
  margin-bottom: var(--space-4);
}

.admin-shell-main .admin-engagement-pane {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

/* 880, not 879. This hides the mobile tab bar at the same width the admin nav
   collapses into its pill rail (`.admin-shell`, below). At 879 the two moments
   were one pixel apart, so at exactly 880px the page showed the collapsed rail
   *and* the tab bar — two navigations at once. */
@media (max-width: 880px) {
  body.is-admin-page .store-mobile-tabbar {
    display: none;
  }
}

.admin-shell-main {
  align-items: stretch;
  width: 100%;
}

.admin-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-top: var(--space-4);
}

/* ---- Sidebar ---- */

.admin-nav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-2) 0;
}

.admin-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav__group[hidden],
.admin-nav__item[hidden] {
  display: none;
}

.admin-nav__label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--space-3);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  border-radius: 10px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.admin-nav__item:hover {
  color: var(--text);
  background: var(--surface);
}

.admin-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-nav__item--active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.admin-nav__item--active .admin-nav__icon {
  opacity: 1;
}

.admin-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: opacity 0.18s var(--ease);
}

.admin-nav__item:hover .admin-nav__icon {
  opacity: 1;
}

.admin-nav__icon svg {
  width: 100%;
  height: 100%;
}

.admin-nav__ext {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
}

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

.admin-head {
  margin-bottom: var(--space-5);
}

.admin-head__eyebrow {
  margin: 0 0 6px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-head__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.admin-head__lede {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- Cards / surfaces ---- */

.admin-card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.admin-card + .admin-card {
  margin-top: var(--space-5);
}

.admin-card__title {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Hub (Painel) ---- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.admin-stat {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.admin-stat__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.admin-stat__value--pending {
  color: #ffd60a;
}

.admin-stat__label {
  display: block;
  margin-top: 4px;
  font-size: var(--text-label);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.admin-hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
    background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.admin-hub-card:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface);
  box-shadow: var(--elev-4);
}

.admin-hub-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-hub-card__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  transition: color 0.22s var(--ease);
}

.admin-hub-card:hover .admin-hub-card__icon {
  color: var(--text);
}

.admin-hub-card__icon svg {
  width: 100%;
  height: 100%;
}

.admin-hub-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-hub-card__desc {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

.admin-hub-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  min-width: 22px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #0c0c0e;
  background: #ffd60a;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

.admin-hub-card {
  position: relative;
}

/* ---- Responsive: nav collapses to a horizontal pill rail ---- */

@media (max-width: 880px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .admin-nav {
    position: static;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: var(--space-1) 0 var(--space-2);
    margin: 0 calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav__group {
    flex-direction: row;
    gap: 6px;
  }

  .admin-nav__label {
    display: none;
  }

  .admin-nav__item {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    border-radius: 99px;
    background: var(--surface-raised);
    white-space: nowrap;
  }

  .admin-nav__item--active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
  }

  .admin-nav__item--active:hover {
    color: var(--accent-text);
    background: var(--accent);
  }

  .admin-nav__ext {
    display: none;
  }
}

/* ---- Light theme ---- */

html.nav-theme-light .admin-nav__item:hover {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.05);
}

html.nav-theme-light .admin-nav__item--active {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .admin-card,
html.nav-theme-light .admin-stat,
html.nav-theme-light .admin-hub-card {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .admin-hub-card:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
  
  color: var(--shop-text);
}
html.nav-theme-light .admin-stat__value--pending {
  color: #b25000;
}

html.nav-theme-light .admin-shell-main .feed-status {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--shop-text-muted);
}

html.nav-theme-light .admin-shell-main .feed-status--error {
  border-color: rgba(255, 59, 48, 0.35);
  background: rgba(255, 59, 48, 0.08);
  color: #c9342a;
}

html.nav-theme-light .admin-shell-main .seller-table-wrap,
html.nav-theme-light .admin-shell-main .support-ticket-card,
html.nav-theme-light .admin-shell-main .support-admin-detail,
html.nav-theme-light .admin-shell-main .review-mod-filters,
html.nav-theme-light .admin-shell-main .review-mod-card,
html.nav-theme-light .admin-shell-main .admin-engagement-pane {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .admin-shell-main .shop-table th {
  background: rgba(0, 0, 0, 0.04);
  color: var(--shop-text-muted);
}

html.nav-theme-light .admin-shell-main .shop-table th,
html.nav-theme-light .admin-shell-main .shop-table td {
  border-color: rgba(0, 0, 0, 0.08);
}
html.nav-theme-light .admin-shell-main .checkout-section-title {
  color: var(--shop-text);
}
/* Full catalog index on admin hub — links to storefront tools + Django ORM */
.admin-catalog {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.admin-catalog__head {
  margin-bottom: var(--space-4);
}

.admin-catalog__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-catalog__lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 42rem;
}

.admin-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.admin-catalog__group-title {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-catalog__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}

.admin-catalog__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}

.admin-catalog__list li:last-child {
  border-bottom: none;
}

.admin-catalog__list a {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.admin-catalog__list a:hover {
  color: var(--accent, #0a84ff);
  text-decoration: underline;
}

.admin-catalog__tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(10, 132, 255, 0.15);
  color: #64b5ff;
}

.admin-catalog__tag--orm {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

html.nav-theme-light .admin-catalog__list {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .admin-catalog__list li {
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .admin-catalog__tag--orm {
  background: rgba(0, 0, 0, 0.06);
}

.admin-row-actions {
  white-space: nowrap;
}

.admin-row-actions .btn,
.admin-row-actions .btn-text {
  margin-right: 0.35rem;
  margin-bottom: 0.25rem;
}

/* Moderation row actions.
   These deliberately do NOT build on .btn-text. That class is repainted by
   `html.nav-theme-light .shop-checkout-main .btn-text` (0,2,2) in two separate
   stylesheets, which out-specified the old `.admin-act--danger` (0,1,0) and
   flattened "Eliminar" to the same muted grey as the safe actions — a
   destructive control that looked exactly like its neighbours. Owning the whole
   component keeps the danger state out of that fight. */
/* Spacing rides on the buttons, because admin_registry.html puts this class on
   the <td> itself and turning a table cell into a flex container drops it out
   of the column model. */
.admin-row-actions .admin-act {
  margin: 0 6px 6px 0;
}

/* Where the class is on a real wrapper (admin_products.html) the buttons get a
   proper wrapping flex row. Without this the three pills have no break
   opportunity between them, so the column claims its full 336px min-content
   width and shoves the table into horizontal scroll. */
div.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

div.admin-row-actions .admin-act {
  margin: 0;
}

/* Pills are wider than the bare text links they replaced, so the actions column
   needs a budget — without it the whole table tips into horizontal scroll and
   the actions are the part that ends up off-screen. Buttons wrap inside it. */
.admin-shell-main .shop-table th.admin-col-actions {
  width: 14rem;
}

/* Seller identifiers are long enough on their own to push the table past its
   container. The clip has to live on an inner block, not the <td>: in an
   auto-layout table a cell's min-content width is the full unbroken string, so
   max-width on the cell is only a suggestion and nothing ever truncates. */
.admin-shell-main .shop-table .admin-cell-clip {
  display: block;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two-line cell: the thing you recognise, then the thing that disambiguates. */
.admin-shell-main .shop-table .admin-cell__primary {
  font-weight: 500;
  color: var(--text);
}

.admin-shell-main .shop-table .admin-cell__secondary {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-muted);
}
/* Numbers get tabular figures and right alignment so magnitudes line up down
   the column; the currency rides along as a quiet unit rather than wrapping
   "49.90 / EUR" onto two lines. */
.admin-shell-main .shop-table td.admin-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-shell-main .shop-table .admin-cell__unit {
  margin-left: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-shell-main .shop-table td.admin-cell--id {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* State reads as a chip, so "pending" is findable by shape as well as by word. */
.admin-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}

.admin-chip--ok {
  color: #32d74b;
  background: rgba(50, 215, 75, 0.13);
}

.admin-chip--pending {
  color: #f5c842;
  background: rgba(245, 200, 66, 0.14);
}

.admin-chip--muted {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.07);
}

html.nav-theme-light .admin-chip--ok {
  color: var(--ok);
  background: rgba(27, 127, 58, 0.1);
}

html.nav-theme-light .admin-chip--pending {
  color: #9a6700;
  background: rgba(154, 103, 0, 0.12);
}

html.nav-theme-light .admin-chip--muted {
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.06);
}

/* Row hover — the table is scanned across, so give the eye a rail. */
.admin-shell-main .shop-table tbody tr {
  transition: background 0.12s var(--ease);
}

.admin-shell-main .shop-table tbody tr:hover {
  background: var(--surface-raised);
}

html.nav-theme-light .admin-shell-main .shop-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.025);
}

.admin-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.admin-act:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.24);
}

.admin-act:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}

/* Primary — the action that moves a listing forward. One per row. */
.admin-act--primary {
  color: var(--accent-text);
  background: var(--accent);
  border-color: transparent;
}

.admin-act--primary:hover {
  background: var(--accent);
  border-color: transparent;
  opacity: 0.9;
}

.admin-act--danger {
  color: #ff6961;
  border-color: rgba(255, 105, 97, 0.4);
}

.admin-act--danger:hover {
  color: #fff;
  background: #d70015;
  border-color: #d70015;
}
html.nav-theme-light .admin-act:hover {
  background: var(--shop-bg-muted, #f2f2f7);
  border-color: rgba(0, 0, 0, 0.24);
}

html.nav-theme-light .admin-act--primary {
  color: #fff;
  background: #1d1d1f;
  border-color: #1d1d1f;
}

html.nav-theme-light .admin-act--primary:hover {
  background: #000;
  border-color: #000;
}

/* #d70015 on white is 5.9:1 — the dark-mode #ff6961 only reaches 2.9:1 there. */
html.nav-theme-light .admin-act--danger {
  color: #d70015;
  background: #fff;
  border-color: rgba(215, 0, 21, 0.35);
}

html.nav-theme-light .admin-act--danger:hover {
  color: #fff;
  background: #d70015;
  border-color: #d70015;
}

.admin-row-actions .registry-inline-edit {
  min-width: 8.5rem;
  font-size: 13px;
}

@media (max-width: 880px) {
  html.nav-theme-light .admin-nav__item--active {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #fff;
  }

  html.nav-theme-light .admin-nav__item--active:hover {
    color: #fff;
    background: #1d1d1f;
  }
}

/* ============================================================
   Console shell — topbar, collapsible sidebar, palette, skeletons.
   Added in the admin console redesign. Sidebar/palette behaviour lives in
   store/admin-console.js; everything here degrades gracefully without it.
   ============================================================ */

/* ---- Sticky topbar ---- */

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
  background: color-mix(in srgb, var(--bg-0) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.admin-topbar__drawer {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.admin-topbar__drawer svg {
  width: 16px;
  height: 16px;
}

.admin-topbar__drawer:hover {
  color: var(--text);
  background: var(--surface);
}

.admin-topbar__actions {
  margin-left: auto;
}

/* ---- Breadcrumbs ---- */

.admin-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 13px;
}

.admin-crumbs__link {
  color: var(--text-muted);
  transition: color 0.18s var(--ease);
}

.admin-crumbs__link:hover {
  color: var(--text);
}

.admin-crumbs__sep {
  color: var(--text-muted);
  opacity: 0.5;
}

.admin-crumbs__current {
  color: var(--text);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Search trigger (opens the palette) ---- */

.admin-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 10px;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.admin-search-trigger:hover {
  color: var(--text);
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.22);
}

.admin-search-trigger svg {
  width: 14px;
  height: 14px;
}

.admin-search-trigger__kbd,
.admin-palette__esc {
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

/* ---- Command palette ---- */

/* `display` here would beat the UA rule for [hidden], so restate it. */
.admin-palette[hidden] {
  display: none;
}

.admin-palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: clamp(48px, 14vh, 140px) var(--space-4) var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: admin-fade-in 0.16s var(--ease);
}

.admin-palette__dialog {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(420px, 70vh);
  overflow: hidden;
  background: var(--surface-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-6);
  animation: admin-pop-in 0.18s var(--ease);
}

.admin-palette__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.admin-palette__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.admin-palette__input {
  flex: 1;
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.admin-palette__input::placeholder {
  color: var(--text-muted);
}

.admin-palette__list {
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  list-style: none;
}

.admin-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

.admin-palette__item.is-active {
  background: rgba(255, 255, 255, 0.1);
}

.admin-palette__label {
  color: var(--text);
}

.admin-palette__section {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.admin-palette__empty {
  margin: 0;
  padding: var(--space-5);
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

@keyframes admin-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes admin-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---- Sidebar head (filter + collapse) ---- */

.admin-nav__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-nav__search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.admin-nav__search-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.admin-nav__search-input {
  width: 100%;
  padding: 7px 9px 7px 28px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  outline: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.admin-nav__search-input::placeholder {
  color: var(--text-muted);
}

.admin-nav__search-input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--surface);
}

.admin-nav__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    transform 0.22s var(--ease);
}

.admin-nav__collapse svg {
  width: 14px;
  height: 14px;
}

.admin-nav__collapse:hover {
  color: var(--text);
  background: var(--surface);
}

.admin-nav__empty {
  margin: 0;
  padding: var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
}

.admin-nav__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Collapsed icon rail ---- */

html.admin-nav-collapsed .admin-shell {
  grid-template-columns: 60px minmax(0, 1fr);
}

html.admin-nav-collapsed .admin-nav__search,
html.admin-nav-collapsed .admin-nav__label,
html.admin-nav-collapsed .admin-nav__text,
html.admin-nav-collapsed .admin-nav__ext {
  display: none;
}

html.admin-nav-collapsed .admin-nav__collapse {
  transform: rotate(180deg);
}

html.admin-nav-collapsed .admin-nav__item {
  justify-content: center;
  padding-inline: 0;
}

/* Tooltip stands in for the hidden label while collapsed. */
html.admin-nav-collapsed .admin-nav__item::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  z-index: 30;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-panel);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-50%) translateX(-3px);
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

html.admin-nav-collapsed .admin-nav__item:hover::after,
html.admin-nav-collapsed .admin-nav__item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

html.admin-nav-collapsed .admin-nav__item {
  position: relative;
}

/* ---- Skeletons ---- */

.admin-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 37%,
    rgba(255, 255, 255, 0.05) 63%
  );
  background-size: 400% 100%;
  animation: admin-shimmer 1.4s ease-in-out infinite;
}

@keyframes admin-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* ---- Attention queue ---- */

.admin-section {
  margin-bottom: var(--space-6);
}

.admin-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-section__title {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.admin-section__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.admin-queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--space-3);
}

.admin-queue[hidden] {
  display: none;
}

.admin-queue__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 76px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
    background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

a.admin-queue__card:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface);
  box-shadow: var(--elev-4);
}

a.admin-queue__card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Amber only when the queue actually needs someone — a zero stays neutral. */
.admin-queue__card--due {
  border-color: rgba(255, 214, 10, 0.32);
  background: rgba(255, 214, 10, 0.06);
}

a.admin-queue__card--due:hover {
  border-color: rgba(255, 214, 10, 0.5);
  background: rgba(255, 214, 10, 0.1);
}

.admin-queue__value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 1.4ch;
}

.admin-queue__card--due .admin-queue__value {
  color: #ffd60a;
}

.admin-queue__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-queue__label {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
}

.admin-queue__cta {
  font-size: var(--text-label);
  color: var(--text-muted);
}

.admin-queue__card--due .admin-queue__cta {
  color: #ffd60a;
  opacity: 0.85;
}

.admin-queue__arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

a.admin-queue__card:hover .admin-queue__arrow {
  opacity: 1;
  transform: none;
}

.admin-queue__card--error {
  border-color: rgba(255, 69, 58, 0.3);
}

.admin-queue__value--error {
  font-size: 20px;
  color: var(--danger);
}

/* ---- All-clear empty state ---- */

.admin-allclear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.admin-allclear__art {
  width: 44px;
  height: 44px;
  color: var(--ok);
  animation: admin-pop-in 0.32s var(--ease);
}

.admin-allclear__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-allclear__desc {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- Mobile drawer ---- */

.admin-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: admin-fade-in 0.18s var(--ease);
}

@media (max-width: 880px) {
  .admin-topbar__drawer {
    display: inline-flex;
  }

  .admin-search-trigger__label {
    display: none;
  }

  /* Off-canvas drawer, scoped to pages that render the console topbar — the
     hamburger that opens it lives there. Admin pages without a topbar keep the
     horizontal pill rail defined above; without this scope their sidebar would
     be pushed off-screen with no way to open it. */
  .admin-shell:has(.admin-topbar) .admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(272px, 82vw);
    margin: 0;
    padding: var(--space-4);
    overflow-y: auto;
    flex-direction: column;
    gap: var(--space-5);
    background: var(--surface-panel);
    border-right: 1px solid var(--hairline);
    transform: translateX(-100%);
    transition: transform 0.24s var(--ease);
  }

  html.admin-drawer-open .admin-shell:has(.admin-topbar) .admin-nav {
    transform: none;
  }

  .admin-shell:has(.admin-topbar) .admin-nav__group {
    flex-direction: column;
    gap: 2px;
  }

  .admin-shell:has(.admin-topbar) .admin-nav__label {
    display: block;
  }

  .admin-shell:has(.admin-topbar) .admin-nav__item {
    flex-shrink: 1;
    padding: 9px var(--space-3);
    border: 0;
    border-radius: 10px;
    background: transparent;
    white-space: normal;
  }

  .admin-shell:has(.admin-topbar) .admin-nav__item--active {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: var(--text);
  }

  .admin-shell:has(.admin-topbar) .admin-nav__item--active:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.12);
  }

  .admin-shell:has(.admin-topbar) .admin-nav__ext {
    display: inline;
  }

  /* The filter/collapse head is desktop-only chrome; on the pill rail it would
     stretch the horizontal scroller, and in the drawer the filter still works. */
  .admin-nav__collapse {
    display: none;
  }

  .admin-shell:not(:has(.admin-topbar)) .admin-nav__head,
  .admin-shell:not(:has(.admin-topbar)) .admin-nav__empty {
    display: none;
  }

  /* Collapsed is a desktop-only state: never let it shrink the single-column
     mobile grid or hide labels in the drawer. */
  html.admin-nav-collapsed .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  html.admin-nav-collapsed .admin-nav__search,
  html.admin-nav-collapsed .admin-nav__label,
  html.admin-nav-collapsed .admin-nav__text,
  html.admin-nav-collapsed .admin-nav__ext {
    display: revert;
  }

  html.admin-nav-collapsed .admin-nav__item {
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }

  html.admin-nav-collapsed .admin-nav__item::after {
    content: none;
  }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .admin-skeleton {
    animation: none;
  }

  .admin-palette,
  .admin-palette__dialog,
  .admin-allclear__art,
  .admin-drawer-scrim {
    animation: none;
  }

  .admin-nav,
  .admin-queue__card,
  .admin-queue__arrow {
    transition: none;
  }

  a.admin-queue__card:hover {
    transform: none;
  }
}

/* ---- Light theme: console shell ---- */

html.nav-theme-light .admin-topbar__drawer,
html.nav-theme-light .admin-search-trigger,
html.nav-theme-light .admin-nav__collapse,
html.nav-theme-light .admin-nav__search-input {
  color: var(--shop-text-muted);
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

html.nav-theme-light .admin-topbar__drawer:hover,
html.nav-theme-light .admin-search-trigger:hover,
html.nav-theme-light .admin-nav__collapse:hover {
  color: var(--shop-text);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.2);
}

html.nav-theme-light .admin-nav__search-input {
  color: var(--shop-text);
}

html.nav-theme-light .admin-nav__search-input:focus {
  border-color: rgba(0, 0, 0, 0.28);
  background: #fff;
}
html.nav-theme-light .admin-palette {
  background: rgba(0, 0, 0, 0.28);
}

html.nav-theme-light .admin-palette__item.is-active {
  background: rgba(0, 0, 0, 0.06);
}

html.nav-theme-light .admin-search-trigger__kbd,
html.nav-theme-light .admin-palette__esc {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .admin-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 37%,
    rgba(0, 0, 0, 0.04) 63%
  );
  background-size: 400% 100%;
}

html.nav-theme-light .admin-queue__card,
html.nav-theme-light .admin-allclear {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

/* The card is an <a>, and `html.nav-theme-light a` out-specifies the card
   rule — so the label needs its own override or it renders muted grey. */

html.nav-theme-light a.admin-queue__card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: #fff;
  
}

/* Amber on white needs a darker tone to clear contrast. */
html.nav-theme-light .admin-queue__card--due {
  border-color: rgba(180, 120, 0, 0.3);
  background: rgba(255, 214, 10, 0.12);
}

html.nav-theme-light a.admin-queue__card--due:hover {
  border-color: rgba(180, 120, 0, 0.45);
  background: rgba(255, 214, 10, 0.18);
}

html.nav-theme-light .admin-queue__card--due .admin-queue__value {
  color: #8a6100;
}

html.nav-theme-light .admin-queue__card--due .admin-queue__cta {
  color: #8a6100;
  opacity: 1;
}

html.nav-theme-light .admin-nav {
  background: #fff;
}

html.nav-theme-light .admin-nav__item::after {
  color: var(--shop-text);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

/* ---- Revenue & commission (Painel) ---- */

.admin-econ__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-econ__head .admin-section__title {
  margin: 0;
}

/* Segmented period control */

.admin-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-raised);
}

.admin-seg__btn {
  padding: 5px 11px;
  font: inherit;
  font-size: var(--text-label);
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.admin-seg__btn:hover {
  color: var(--text);
}

.admin-seg__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-seg__btn[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent);
}

/* Currency cards */

.admin-econ__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.admin-econ__grid[hidden] {
  display: none;
}

.admin-econ__card {
  padding: var(--space-4) var(--space-5) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.admin-econ__currency {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-econ__hero {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.admin-econ__hero-label {
  display: block;
  margin-top: 2px;
  margin-bottom: var(--space-3);
  font-size: var(--text-label);
  color: var(--text-muted);
}

.admin-econ__rows {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-econ__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
}

.admin-econ__row dt {
  color: var(--text-muted);
}

.admin-econ__row dd {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* MIXED bucket only renders when nonzero — that's a data anomaly, show it loud. */
.admin-econ__card--anomaly {
  border-color: rgba(255, 214, 10, 0.32);
  background: rgba(255, 214, 10, 0.06);
}

.admin-econ__note {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-econ__error {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--text-caption);
  color: #ff6961;
  border: 1px solid rgba(255, 69, 58, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 69, 58, 0.06);
}

.admin-econ__error[hidden] {
  display: none;
}

/* ---- Light theme: revenue section ---- */

html.nav-theme-light .admin-seg {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

html.nav-theme-light .admin-econ__card {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

html.nav-theme-light .admin-econ__card--anomaly {
  border-color: rgba(180, 120, 0, 0.3);
  background: rgba(255, 214, 10, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .admin-seg__btn {
    transition: none;
  }
}

/* ---- Revenue trend chart ---- */

.admin-econ__chart {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.admin-econ__chart svg {
  display: block;
  width: 100%;
  height: 56px;
}

.admin-econ__bar {
  fill: currentColor;
  opacity: 0.4;
  transition: opacity 0.15s var(--ease);
}

.admin-econ__bar:hover {
  opacity: 0.9;
}

.admin-econ__baseline {
  fill: currentColor;
  opacity: 0.15;
}

@media (prefers-reduced-motion: no-preference) {
  .admin-econ__bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: admin-bar-grow 0.35s var(--ease) backwards;
  }
}

@keyframes admin-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ======== 10-motion.css ======== */
/* Sitewide motion layer — page entrance, scroll reveal, micro-interactions.
   Reveal classes are only activated by motion.js (html.motion-ready), so
   content stays fully visible when JS fails or reduced motion is on. */

html {
  scroll-behavior: smooth;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn {
  touch-action: manipulation;
}

/* Page entrance — one subtle rise per navigation */
@media (prefers-reduced-motion: no-preference) {
  #store-main {
    animation: store-page-in 0.5s var(--ease) both;
  }
}

@keyframes store-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Home brand fold — the headline settles a beat before the lede and the CTAs,
   so the first thing that resolves is the brand. Guarded by the media query, so
   reduced motion gets the composition already in place. */
@media (prefers-reduced-motion: no-preference) {
  .store-hero__inner > * {
    animation: store-hero-rise 0.6s var(--ease) both;
  }

  .store-hero__lede {
    animation-delay: 0.08s;
  }

  .store-hero__actions {
    animation-delay: 0.16s;
  }
}

@keyframes store-hero-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll reveal — motion.js tags elements with .sr and flips on .sr-in */
html.motion-ready .sr {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--sr-delay, 0s);
  will-change: opacity, transform;
}

html.motion-ready .sr-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Generic interactive smoothing */
@media (prefers-reduced-motion: no-preference) {
  summary,
  .shop-table tr,
  .dl-row {
    transition: background-color 0.2s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.motion-ready .sr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======== 11-referrals.css ======== */
/* Refer-a-vendor program */

.refer-page {
  --refer-accent: #7c5cff;
  --refer-accent-soft: rgba(124, 92, 255, 0.16);
  --refer-gold: #f5c451;
  --refer-silver: #c8d0dc;
  --refer-bronze: #cd7f32;
  --refer-platinum: #9fd4ff;
}

.refer-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: var(--space-5);
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(124, 92, 255, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(56, 189, 248, 0.2), transparent 50%),
    linear-gradient(145deg, var(--surface), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hairline);
  animation: refer-fade-in 0.6s ease both;
}

.refer-hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--refer-accent);
  margin: 0 0 8px;
}

.refer-hero__title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.refer-hero__lede {
  margin: 0;
  max-width: 52ch;
  color: var(--text-muted);
}

.refer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.refer-stat-card {
  padding: var(--space-4);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--stroke-secondary);
  animation: refer-slide-up 0.5s ease both;
}

.refer-stat-card:nth-child(2) { animation-delay: 0.05s; }
.refer-stat-card:nth-child(3) { animation-delay: 0.1s; }
.refer-stat-card:nth-child(4) { animation-delay: 0.15s; }

.refer-stat-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.refer-stat-card__label {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.refer-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--refer-accent-soft);
  border: 1px solid rgba(124, 92, 255, 0.35);
  margin-top: var(--space-3);
}

.refer-tier-badge--BRONZE { background: rgba(205, 127, 50, 0.2); border-color: rgba(205, 127, 50, 0.45); }
.refer-tier-badge--SILVER { background: rgba(200, 208, 220, 0.15); border-color: rgba(200, 208, 220, 0.4); }
.refer-tier-badge--GOLD { background: rgba(245, 196, 81, 0.18); border-color: rgba(245, 196, 81, 0.45); }
.refer-tier-badge--PLATINUM { background: rgba(159, 212, 255, 0.18); border-color: rgba(159, 212, 255, 0.45); }

.refer-progress {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--stroke-secondary);
}

.refer-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.refer-progress__bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.refer-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--refer-accent), #38bdf8);
  width: 0%;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.refer-reward-timer {
  margin-top: var(--space-3);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  color: #86efac;
}

.refer-share {
  margin-bottom: var(--space-5);
}

.refer-share__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.refer-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.refer-share__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.refer-link-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.refer-link-row input {
  flex: 1;
  min-width: 0;
}

.refer-milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.refer-milestone {
  padding: var(--space-3);
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.refer-milestone--achieved {
  opacity: 1;
  border-style: solid;
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.08);
}

.refer-leaderboard {
  margin-bottom: var(--space-5);
}

.refer-leaderboard table {
  width: 100%;
}

.refer-leaderboard tr {
  animation: refer-fade-in 0.4s ease both;
}

.refer-vendors-list .refer-vendor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.refer-vendor-row__info {
  min-width: 0;
}

.refer-vendor-row__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.refer-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.625rem;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.refer-status-pill--QUALIFIED {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.refer-status-pill--PENDING {
  background: rgba(250, 204, 21, 0.22);
  border-color: rgba(250, 204, 21, 0.4);
  color: #fde047;
}

.refer-status-pill--FLAGGED {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.refer-status-pill--REJECTED {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

@keyframes refer-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes refer-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 639px) {
  .refer-link-row {
    flex-direction: column;
  }
}

html.nav-theme-light .refer-hero,
html.nav-theme-light .refer-stat-card,
html.nav-theme-light .refer-progress {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .refer-progress__bar {
  background: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .refer-reward-timer {
  color: #15803d;
}

html.nav-theme-light .refer-vendors-list .refer-vendor-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .refer-milestone {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

html.nav-theme-light .refer-milestone--achieved {
  border-color: rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.06);
}

html.nav-theme-light .refer-status-pill--QUALIFIED {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}

html.nav-theme-light .refer-status-pill--PENDING {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(202, 138, 4, 0.45);
  color: #92400e;
}

html.nav-theme-light .refer-status-pill--FLAGGED {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

html.nav-theme-light .refer-status-pill--REJECTED {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.35);
  color: #475569;
}

html.nav-theme-light .refer-share .checkout-section-title,
html.nav-theme-light .refer-leaderboard .checkout-section-title,
html.nav-theme-light .refer-vendors-list .checkout-section-title {
  color: var(--shop-text);
}

html.nav-theme-light .refer-link-row input {
  color: var(--shop-text);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .refer-link-row input:focus {
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
}

html.nav-theme-light .refer-share__btn {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .refer-share__btn:hover {
  color: #5b21b6;
  background: rgba(124, 92, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.28);
}

/* ======== 12-share.css ======== */
/* Shareable product & store links */

.share-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.share-trigger-btn svg {
  flex-shrink: 0;
  color: inherit;
}

.share-trigger-btn--compact {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.share-trigger-btn--compact:hover {
  transform: translateY(-1px);
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.18);
}

.share-sheet {
  border: none;
  padding: 0;
  max-width: min(440px, calc(100vw - 24px));
  width: 100%;
  background: transparent;
  color: var(--text);
}

.share-sheet::backdrop {
  background: rgba(8, 10, 18, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.share-sheet__panel {
  margin: 0;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(124, 92, 255, 0.22), transparent 55%),
    linear-gradient(160deg, rgba(28, 32, 48, 0.96), rgba(18, 20, 32, 0.98));
  box-shadow: var(--elev-6);
  animation: share-sheet-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.share-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 6px;
}

.share-sheet__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}

.share-sheet__close {
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.share-sheet__close span {
  display: block;
  margin-top: -1px;
}

.share-sheet__close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.share-sheet__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35);
}

.share-sheet__lede {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
}

.share-url-card {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

.share-url-card--panel {
  margin-bottom: var(--space-3);
}

.share-url-card__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.share-url-card__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.share-url-card__input {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.share-url-card__copy {
  flex-shrink: 0;
}

.share-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.share-sheet__channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.share-sheet__channel:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.35);
}

.share-sheet__channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.share-sheet__channel-icon--wa { color: #25d366; }
.share-sheet__channel-icon--fb { color: #1877f2; }
.share-sheet__channel-icon--x { color: var(--text); }
.share-sheet__channel-icon--em { color: #60a5fa; }

.share-sheet__native {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.share-store-panel {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4);
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    var(--surface-raised);
}

.share-store-panel__name {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
}

.share-store-panel__actions {
  margin-top: var(--space-3);
}

.seller-public-head-actions {
  display: none;
}

.product-discover-seller,
.product-discover-store {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.product-discover-seller {
  margin: 0 0 6px;
  font-size: 0.8125rem;
}

.product-discover-store {
  margin: 0 0 4px;
}

.product-discover-seller__link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.product-discover-store .product-card__name {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.product-discover-store .product-card__name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-discover-seller__share {
  flex-shrink: 0;
  margin-left: auto;
}

.product-discover-seller__link:hover {
  color: var(--text);
  text-decoration: underline;
}

.product-hero__actions .share-trigger-btn--primary {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.14);
}

.product-hero__actions .share-trigger-btn--primary:hover {
  background: rgba(124, 92, 255, 0.24);
}

.product-seller__store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.featured-store-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.featured-store-card__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.product-card--store .product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@keyframes share-sheet-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 479px) {
  .share-sheet__grid {
    grid-template-columns: 1fr;
  }

  .share-url-card__row {
    flex-direction: column;
  }

  .share-url-card__copy {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .share-sheet__panel,
  .share-sheet__channel,
  .share-trigger-btn--compact {
    animation: none;
    transition: none;
  }
}

html.nav-theme-light .share-sheet::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

html.nav-theme-light .share-sheet__panel {
  border-color: rgba(0, 0, 0, 0.1);
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(124, 92, 255, 0.1), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
}

html.nav-theme-light .share-sheet__lede,
html.nav-theme-light .share-url-card__label {
  color: var(--shop-text-muted);
}

html.nav-theme-light .share-sheet__close {
  color: #64748b;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .share-sheet__close:hover {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}

html.nav-theme-light .share-url-card,
html.nav-theme-light .share-store-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .share-url-card__input {
  color: var(--shop-text);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .share-url-card__input:focus {
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
}

html.nav-theme-light .share-sheet__channel {
  color: var(--shop-text);
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .share-sheet__channel:hover {
  background: rgba(124, 92, 255, 0.08);
  border-color: rgba(124, 92, 255, 0.28);
}

html.nav-theme-light .share-sheet__channel-icon {
  background: rgba(0, 0, 0, 0.05);
}

html.nav-theme-light .share-trigger-btn--compact {
  color: #475569;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light .share-trigger-btn--compact:hover {
  color: #5b21b6;
  background: rgba(124, 92, 255, 0.12);
  border-color: rgba(124, 92, 255, 0.35);
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.12);
}

html.nav-theme-light .share-trigger-btn.btn--ghost,
html.nav-theme-light .share-trigger-btn.btn--ghost:hover:not(:disabled) {
  color: #fff;
}

html.nav-theme-light .product-hero__actions .share-trigger-btn--primary {
  background: rgba(124, 92, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.35);
  color: #4c1d95;
}

html.nav-theme-light .product-hero__actions .share-trigger-btn--primary:hover:not(:disabled) {
  color: #5b21b6;
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.45);
}
html.nav-theme-light .seller-public-share:hover,
html.nav-theme-light .seller-public-actions__icons .share-url-copy-icon:hover {
  color: #5b21b6;
  background: rgba(124, 92, 255, 0.1);
  border-color: transparent;
}

html.nav-theme-light .product-discover-seller__link:hover {
  color: #0f172a;
}

/* ======== 13-services.css ======== */
/* ── Platform services (Rocha Studio & partners) ─────────────────────────── */

/* Catalog grid */
.svc-filters {
  margin-bottom: var(--space-3);
}

.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.svc-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised, rgba(255, 255, 255, 0.04));
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.svc-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, rgba(255, 255, 255, 0.18));
  box-shadow: var(--elev-3);
}

.svc-card__hit {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.svc-card__media {
  aspect-ratio: 16 / 9;
  background: var(--surface, rgba(255, 255, 255, 0.05));
  overflow: hidden;
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-card__media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-muted);
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  flex: 1;
}

.svc-card__tag {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-card__title {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

.svc-card__provider {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  color: var(--text-muted);
}

.svc-card__provider-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.svc-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ok, #1a9d5a);
  font-weight: 600;
  font-size: 12px;
}

.svc-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.svc-card__price {
  font-weight: 700;
  color: var(--text);
}

.svc-card__price--quote {
  font-weight: 600;
  color: var(--text-muted);
}

.svc-card__delivery {
  font-size: 13px;
  color: var(--text-muted);
}

.svc-card__cta {
  margin: 0 var(--space-3) var(--space-3);
  text-align: center;
}

/* Detail page */
.svc-detail__back {
  margin-bottom: var(--space-3);
}

.svc-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 820px) {
  .svc-hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

.svc-hero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface, rgba(255, 255, 255, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-muted);
}

.svc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-hero__provider {
  margin: var(--space-2) 0;
}

.svc-hero__meta {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin: var(--space-2) 0;
}

.svc-hero__meta .svc-card__price {
  font-size: 20px;
}

.svc-hero__desc {
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.6;
}

/* Gallery / FAQ */
.svc-gallery,
.svc-faq,
.svc-request {
  margin-top: var(--space-5);
}

.svc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

.svc-gallery__item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.svc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-faq__item {
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-2) 0;
}

.svc-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.svc-faq__item p {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.svc-hero__status {
  margin: var(--space-2) 0 0;
}

.svc-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .svc-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Request tracking page */
.store-page--servico-pedido .store-main--search {
  padding-inline: clamp(12px, 3vw, 24px);
  padding-bottom: clamp(32px, 6vw, 56px);
}

.store-page--servico-pedido .svc-track__back {
  max-width: min(100%, 52rem);
  margin: 0 auto var(--space-4);
  text-align: left;
}

.svc-track__panel {
  max-width: min(100%, 52rem);
}

.svc-track__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: calc(var(--space-4) + var(--space-2));
  padding-bottom: calc(var(--space-4) + var(--space-2));
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .svc-track__hero {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.svc-track__hero-text {
  min-width: 0;
}

.svc-track__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-track__title {
  margin: 0 0 var(--space-2);
}

.svc-track__provider {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
}

.svc-track__provider strong {
  color: var(--text);
  font-weight: 600;
}

.svc-track__meta {
  margin: 0;
  font-size: 0.8125rem;
}

.svc-track__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .svc-track__status {
    align-items: flex-end;
    text-align: right;
  }
}

.svc-track__ref {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.svc-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.svc-status-pill--wait {
  color: #7a5c00;
  background: rgba(255, 214, 10, 0.22);
  border-color: rgba(255, 214, 10, 0.35);
}

.svc-status-pill--go {
  color: #0a4d8c;
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.28);
}

.svc-status-pill--attn {
  color: #8a4b00;
  background: rgba(255, 149, 0, 0.18);
  border-color: rgba(255, 149, 0, 0.32);
}

.svc-status-pill--done {
  color: #0d7a56;
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.28);
}

.svc-status-pill--stop {
  color: #a12828;
  background: rgba(255, 59, 48, 0.14);
  border-color: rgba(255, 59, 48, 0.28);
}

.svc-track__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 820px) {
  .svc-track__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

.svc-panel {
  padding: clamp(16px, 2.5vw, 22px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}

.svc-panel__title {
  margin-bottom: var(--space-4);
}

.svc-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}

.svc-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}

.svc-step.is-done:not(:last-child)::before {
  background: var(--ok, #1a9d5a);
}

.svc-step__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.svc-step__marker svg {
  display: block;
}

.svc-step__body {
  min-width: 0;
  padding-top: 4px;
}

.svc-step__label {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.svc-step__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.svc-step.is-done .svc-step__label,
.svc-step.is-current .svc-step__label {
  color: var(--text);
}

.svc-step.is-current .svc-step__desc {
  color: var(--text);
}

.svc-step.is-done .svc-step__marker {
  background: var(--ok, #1a9d5a);
  border-color: var(--ok, #1a9d5a);
  color: #fff;
}

.svc-step.is-current .svc-step__marker {
  background: var(--accent, #4b7bec);
  border-color: var(--accent, #4b7bec);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(75, 123, 236, 0.22);
}

.svc-step--stop .svc-step__marker {
  background: #ff3b30;
  border-color: #ff3b30;
  color: #fff;
}

.svc-step--stop .svc-step__label {
  color: var(--text);
}

.svc-summary {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.svc-summary__row {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

.svc-summary__row dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.svc-summary__row dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.svc-summary__row--block {
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.svc-summary__row--block dd {
  white-space: pre-wrap;
  line-height: 1.55;
}

.svc-attachments {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.svc-attachments__title {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.svc-attachments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.svc-attachments__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--badge, #4b7bec);
  text-decoration: none;
}

.svc-attachments__link:hover {
  text-decoration: underline;
}

.svc-help {
  margin-top: var(--space-4);
}

.svc-help__title {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.svc-help__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Quote / info callouts on tracking page */
.svc-quote {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

.svc-quote--info {
  border-color: rgba(255, 149, 0, 0.35);
  background: rgba(255, 149, 0, 0.08);
}

.svc-quote__title {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.svc-quote__amount {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.svc-quote__meta,
.svc-quote__notes,
.svc-quote__body {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  line-height: 1.55;
}

.svc-quote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.svc-quote-pay {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--stroke-secondary);
}

.svc-quote-pay__lede,
.svc-quote-pay__paid {
  font-size: 0.875rem;
  margin: 0 0 var(--space-2);
}

.svc-quote-pay__bank {
  margin-bottom: var(--space-2);
}

.svc-quote-pay__status {
  margin-top: var(--space-2);
  font-size: 0.875rem;
}

.svc-quote-pay .ao-iban-panel {
  margin: var(--space-2) 0;
}

.svc-quote-pay #req-quote-pay-aoa-start,
.svc-quote-pay #req-quote-pay-stripe,
.svc-quote-pay #req-quote-ao-confirm {
  margin-top: var(--space-2);
}

.svc-quote-decision {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--stroke-secondary);
}

.svc-quote-decision__lede,
.svc-quote-decision__rejected {
  font-size: 0.875rem;
  margin: 0 0 var(--space-2);
}

.svc-quote-decision__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.svc-quote-decision__status {
  margin-top: var(--space-2);
  font-size: 0.875rem;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
/* --text / --text-muted stay dark-theme values under html.nav-theme-light.
   Scope by page root and use --shop-text / --shop-text-muted (see 08-support.css). */

html.nav-theme-light .svc-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-2);
}

html.nav-theme-light .svc-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--elev-4);
}

html.nav-theme-light .svc-card__media,
html.nav-theme-light .svc-hero__media {
  background: linear-gradient(155deg, rgba(240, 240, 245, 0.95) 0%, rgba(228, 228, 234, 0.98) 100%);
}

html.nav-theme-light .svc-card__media--ph,
html.nav-theme-light .svc-hero__media.svc-card__media--ph {
  color: rgba(0, 0, 0, 0.18);
}

/* Same story as .rv-bar.is-active in 16-reviews.css: looks redundant against the
   base rule, is not — removing it lets a muted rule take the active tab. */
html.nav-theme-light .svc-tabs__btn.is-active {
  color: var(--shop-text, #1d1d1f);
}

/* Detail — #store-servico-root */

html.nav-theme-light #store-servico-root .shop-muted,
html.nav-theme-light #store-servico-root .contacto-section__lede,
html.nav-theme-light #store-servico-root .contacto-gate__text,
html.nav-theme-light #store-servico-root .contacto-form-panel__hint,
html.nav-theme-light #store-servico-root .feed-status,
html.nav-theme-light #store-servico-root .svc-hero__desc {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-servico-root .contacto-form-panel,
html.nav-theme-light #store-servico-root .contacto-gate {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-2);
}

html.nav-theme-light #store-servico-root .contacto-form-panel .field input,
html.nav-theme-light #store-servico-root .contacto-form-panel .field textarea,
html.nav-theme-light #store-servico-root .contacto-form-panel .field select {
  color: var(--shop-text, #1d1d1f);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-servico-root .svc-detail__back {
  color: var(--shop-text-muted, #6e6e73);
}

/* Request tracking — #store-servico-pedido-root */

html.nav-theme-light #store-servico-pedido-root .support-panel,
html.nav-theme-light #store-servico-pedido-root .contacto-gate {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-2);
}

html.nav-theme-light #store-servico-pedido-root .svc-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-1);
}

html.nav-theme-light #store-servico-pedido-root .seller-dash-title,
html.nav-theme-light #store-servico-pedido-root .contacto-section__title,
html.nav-theme-light #store-servico-pedido-root .svc-panel__title,
html.nav-theme-light #store-servico-pedido-root .contacto-gate__title,
html.nav-theme-light #store-servico-pedido-root .svc-help__title,
html.nav-theme-light #store-servico-pedido-root .svc-attachments__title,
html.nav-theme-light #store-servico-pedido-root .svc-track__provider strong,
html.nav-theme-light #store-servico-pedido-root .svc-step__label,
html.nav-theme-light #store-servico-pedido-root .svc-step.is-done .svc-step__label,
html.nav-theme-light #store-servico-pedido-root .svc-step.is-current .svc-step__label,
html.nav-theme-light #store-servico-pedido-root .svc-step.is-current .svc-step__desc,
html.nav-theme-light #store-servico-pedido-root .svc-step--stop .svc-step__label,
html.nav-theme-light #store-servico-pedido-root .svc-summary__row dd,
html.nav-theme-light #store-servico-pedido-root .svc-quote__title,
html.nav-theme-light #store-servico-pedido-root .svc-quote__amount,
html.nav-theme-light #store-servico-pedido-root .svc-quote__meta,
html.nav-theme-light #store-servico-pedido-root .svc-quote__notes,
html.nav-theme-light #store-servico-pedido-root .svc-quote__body {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-servico-pedido-root .shop-muted,
html.nav-theme-light #store-servico-pedido-root .contacto-gate__text,
html.nav-theme-light #store-servico-pedido-root .svc-track__eyebrow,
html.nav-theme-light #store-servico-pedido-root .svc-track__ref,
html.nav-theme-light #store-servico-pedido-root .svc-track__meta,
html.nav-theme-light #store-servico-pedido-root .svc-step__desc,
html.nav-theme-light #store-servico-pedido-root .svc-step.is-todo .svc-step__label,
html.nav-theme-light #store-servico-pedido-root .svc-step.is-todo .svc-step__desc,
html.nav-theme-light #store-servico-pedido-root .svc-summary__row dt,
html.nav-theme-light #store-servico-pedido-root .svc-help__text,
html.nav-theme-light #store-servico-pedido-root .feed-status,
html.nav-theme-light #store-servico-pedido-root .status,
html.nav-theme-light #store-servico-pedido-root .sub-nav,
html.nav-theme-light #store-servico-pedido-root .sub-nav a {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-servico-pedido-root .sub-nav a:hover {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light #store-servico-pedido-root .feed-status--error,
html.nav-theme-light #store-servico-pedido-root .status.status--error,
html.nav-theme-light #store-servico-pedido-root .svc-quote-decision__status.status--error {
  color: #d70015;
}

html.nav-theme-light #store-servico-pedido-root .status.status--ok {
  color: var(--ok);
}

html.nav-theme-light #store-servico-pedido-root .svc-step__marker {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-servico-pedido-root .svc-step.is-current .svc-step__marker {
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}

html.nav-theme-light #store-servico-pedido-root .svc-step:not(:last-child)::before {
  background: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-servico-pedido-root .svc-step.is-done:not(:last-child)::before {
  background: #1a9d5a;
}

html.nav-theme-light #store-servico-pedido-root .svc-attachments__link {
  color: #0066cc;
}

html.nav-theme-light #store-servico-pedido-root .svc-help.checkout-callout {
  border-color: rgba(0, 0, 0, 0.08);
  background: var(--shop-bg-muted, #e5e5ea);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote {
  background: var(--shop-bg-muted, #f2f2f7);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-pay__lede,
html.nav-theme-light #store-servico-pedido-root .svc-quote-pay__paid,
html.nav-theme-light #store-servico-pedido-root .svc-quote-pay__status {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-pay__status.status--error {
  color: #d70015;
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-pay__status.status--ok {
  color: var(--ok);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-pay .checkout-callout {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-servico-pedido-root .ao-iban-panel {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-pay .field select {
  color: var(--shop-text, #1d1d1f);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
}

html.nav-theme-light #store-servico-pedido-root .svc-quote-decision__lede,
html.nav-theme-light #store-servico-pedido-root .svc-quote-decision__rejected,
html.nav-theme-light #store-servico-pedido-root .svc-quote-decision__status {
  color: var(--shop-text-muted, #6e6e73);
}

/* Hub tabs + search */
.svc-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.svc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.svc-tabs__btn {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.svc-tabs__btn.is-active {
  color: var(--text);
  border-color: var(--accent, rgba(255, 255, 255, 0.25));
  background: var(--surface-raised, var(--surface));
}

.svc-filters__search {
  min-width: min(100%, 220px);
}

.svc-verified--store {
  color: #5ac8fa;
}

/* My services list */
.svc-meus-panel {
  max-width: 920px;
  margin: 0 auto;
}

.svc-meus-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.svc-meus-head__actions {
  flex-shrink: 0;
}

.svc-meus-head__actions .btn {
  white-space: nowrap;
}

.svc-meus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.svc-meus-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised, rgba(255, 255, 255, 0.04));
}

.svc-meus-card__hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.svc-meus-card__title {
  margin: 0.15rem 0;
  font-size: 17px;
}

.svc-meus-card__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.svc-meus-card__meta {
  margin: 0;
  font-size: 14px;
}

html.nav-theme-light .svc-tabs__btn {
  color: var(--shop-text-muted, #6e6e73);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .svc-tabs__btn.is-active {
  background: var(--shop-bg-muted, #f2f2f7);
}

/* Home shop — highlighted services band (#store-home-root) */
#store-home-root .home-services-band {
  position: relative;
  margin-bottom: 40px;
}

#store-home-root .home-services-band__shell {
  position: relative;
  padding: clamp(20px, 4vw, 32px);
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 50%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

#store-home-root .home-services-band__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(56, 189, 248, 0.22) 0%,
    transparent 38%,
    transparent 62%,
    rgba(99, 102, 241, 0.18) 100%
  );
  opacity: 0.55;
}

#store-home-root .home-services-band__head,
#store-home-root .home-services-grid,
#store-home-root .home-services-status {
  position: relative;
  z-index: 1;
}

#store-home-root .home-services-band__head {
  align-items: flex-end;
}

#store-home-root .home-services-band__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Pale blue text on a semi-transparent blue gradient reached only 3.98:1 in
     light mode. Opaque stops and white text hold ~5.9:1 across the sweep and
     keep the badge reading as a badge in both themes. */
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: 1px solid rgba(186, 230, 253, 0.35);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
  #store-home-root .home-services-band__badge {
    animation: homeServicesBadgePulse 2.8s ease-in-out infinite;
  }
}

@keyframes homeServicesBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.25);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.38);
    transform: translateY(-1px);
  }
}

#store-home-root .home-services-band__lede {
  max-width: 42ch;
}

#store-home-root .home-services-band__cta {
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.22);
}

#store-home-root .home-services-grid {
  margin-top: var(--space-3);
}

/* Spinning blue border around home service cards */
#store-home-root .svc-card--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 2px;
  box-shadow: none;
}

#store-home-root .svc-card--home::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0) 0deg,
    rgba(56, 189, 248, 0.15) 40deg,
    rgba(56, 189, 248, 0.95) 110deg,
    rgba(99, 102, 241, 0.92) 180deg,
    rgba(14, 165, 233, 0.95) 250deg,
    rgba(56, 189, 248, 0.2) 320deg,
    rgba(56, 189, 248, 0) 360deg
  );
}

@media (prefers-reduced-motion: no-preference) {
  #store-home-root .svc-card--home::before {
    animation: homeServicesBorderSpin 3.8s linear infinite;
  }

  #store-home-root .svc-card--home:nth-child(2)::before {
    animation-delay: -1.25s;
  }

  #store-home-root .svc-card--home:nth-child(3)::before {
    animation-delay: -2.5s;
  }
}

@keyframes homeServicesBorderSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#store-home-root .svc-card--home .svc-card__hit {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: calc(var(--radius-lg) - 2px);
  overflow: hidden;
  background: rgba(8, 12, 22, 0.96);
}

#store-home-root .svc-card--home:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 14px 36px rgba(56, 189, 248, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  #store-home-root .svc-card--home:hover::before {
    animation-duration: 2.6s;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #store-home-root .svc-card--enter {
    animation: cardEnter 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

html.nav-theme-light #store-home-root .home-services-band__shell {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, 0.1), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(99, 102, 241, 0.08), transparent 50%),
    rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 122, 255, 0.22);
  box-shadow:
    var(--sheen), var(--elev-4);
}

html.nav-theme-light #store-home-root .home-services-band__shell::before {
  opacity: 0.35;
}

/* Colour pair removed: #0369a1 on a pale blue wash was 3.98:1. The base rule's
   solid gradient with white text clears AA and reads the same in both themes,
   so only the light-specific border and lift stay here. */
html.nav-theme-light #store-home-root .home-services-band__badge {
  border-color: rgba(0, 122, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.12);
}

html.nav-theme-light #store-home-root .home-services-band #services-heading,
html.nav-theme-light #store-home-root .home-services-band .section-title,
html.nav-theme-light #store-home-root .home-services-band .section-kicker {
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light #store-home-root .svc-card--home .svc-card__hit {
  background: rgba(255, 255, 255, 0.96);
}

html.nav-theme-light #store-home-root .svc-card--home::before {
  background: conic-gradient(
    from 0deg,
    rgba(0, 122, 255, 0) 0deg,
    rgba(0, 122, 255, 0.12) 40deg,
    rgba(0, 122, 255, 0.88) 110deg,
    rgba(99, 102, 241, 0.82) 180deg,
    rgba(14, 165, 233, 0.88) 250deg,
    rgba(0, 122, 255, 0.15) 320deg,
    rgba(0, 122, 255, 0) 360deg
  );
}
html.nav-theme-light #store-home-root .svc-card--home:hover {
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(0, 122, 255, 0.14);
}

/* ======== 14-gamification.css ======== */
/* —— Gamification ————————————————————————————————————————————————————————
 *
 * One accent (the XP green) carries progress everywhere; rarity colour is
 * confined to a hairline edge and a tag on achievement cards so the page reads
 * as one system rather than a rainbow. Hierarchy is carried by size and
 * density — hero, then milestone, then mission, then the achievement grid —
 * not by giving every block the same card treatment.
 * ------------------------------------------------------------------------ */

:root {
  --rarity-common: #9ca3af;
  --rarity-common-glow: rgba(156, 163, 175, 0.35);
  --rarity-rare: #38bdf8;
  --rarity-rare-glow: rgba(56, 189, 248, 0.4);
  --rarity-epic: #a78bfa;
  --rarity-epic-glow: rgba(167, 139, 250, 0.42);
  --rarity-legendary: #fbbf24;
  --rarity-legendary-glow: rgba(251, 191, 36, 0.48);
  --xp-from: #6ee7b7;
  --xp-to: #32d74b;
}

/* —— Nav pill —————————————————————————————————————————————————————————— */

.gamification-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-pill);
}

.gamification-nav-pill:hover {
  background: var(--surface-hover);
}

.gamification-nav-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--xp-from), var(--xp-to));
  color: #04220f;
  font-size: var(--text-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.gamification-nav-pill__coins {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.gamification-nav-pill__coins::before {
  content: "🪙";
  font-size: 11px;
}

/* —— Page shell ———————————————————————————————————————————————————————— */

.gamification-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.gamification-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
}

.gamification-bg__orb--1 {
  top: -14%;
  left: -8%;
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle, var(--xp-from), transparent 68%);
}

.gamification-bg__orb--2 {
  bottom: -18%;
  right: -10%;
  width: 38vw;
  height: 38vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, #38bdf8, transparent 68%);
}

.gamification-hub {
  /* width:100% is load-bearing. `.shell` is a column flex container, and the
     auto side margins here opt this item out of `align-items: stretch`, so
     without a width it sizes to its content — the hub would then grow and
     shrink with whichever track is showing, sliding the tabs sideways on every
     switch. Filling the line and capping with max-width keeps the frame still. */
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.gamification-hub__head {
  margin-bottom: var(--space-5);
}

.gamification-hub__eyebrow {
  font-size: var(--text-overline);
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ok);
  margin: 0 0 var(--space-2);
}

.gamification-hub__title {
  font-size: var(--text-title-1);
  line-height: var(--text-title-1-lh);
  letter-spacing: var(--text-title-1-ls);
  font-weight: 700;
  margin: 0;
}

.gamification-hub__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.gamification-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.gamification-panel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-lg);
}

/* —— Track switcher ———————————————————————————————————————————————————— */

.gamification-switcher {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  align-self: flex-start;
}

/* The travelling pill. Two tabs cross-fading their own backgrounds reads as a
   blink — one object moving between them reads as a switch, and the eye can
   follow it. JS measures the active tab and writes --thumb-x/--thumb-w; until
   it does, the active tab paints its own background (see --ready below), so a
   failed or slow script still leaves the selection visible. */
.gamification-switcher__thumb {
  position: absolute;
  /* Geometry comes wholly from JS measuring the active tab, so the pill lands
     on it exactly at any tab width or breakpoint — including the mobile layout
     where the tabs share the row with flex: 1. */
  top: 0;
  left: 0;
  width: var(--thumb-w, 0);
  height: var(--thumb-h, 0);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translate3d(var(--thumb-x, 0), var(--thumb-y, 0), 0);
  opacity: 0;
  pointer-events: none;
  /* Out of flow, so its width animates without reflowing the tabs beside it. */
  transition:
    transform 0.38s var(--ease-settle),
    width 0.38s var(--ease-settle),
    opacity 0.16s linear;
}

.gamification-switcher--ready .gamification-switcher__thumb {
  opacity: 1;
}

/* First paint, a resize, or a tab appearing: the pill is placed, not moved. */
.gamification-switcher--instant .gamification-switcher__thumb {
  transition: opacity 0.16s linear;
}

.gamification-switcher__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  /* Above the thumb, so the label stays legible as the pill slides under it. */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 44px min target height on touch, per the mobile-first rule. */
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: var(--text-ui-ls);
  transition:
    background 0.18s var(--ease),
    color 0.24s var(--ease),
    transform 0.14s ease-out;
}

/* :not(--active) matters: a bare :hover outranks the --active rule below on
   specificity, so hovering the selected tab repainted its label --text — black
   on the black pill. Hover feedback belongs to the tabs you can still move to. */
.gamification-switcher__tab:hover:not(.gamification-switcher__tab--active) {
  color: var(--text);
}

.gamification-switcher__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Feedback on press, not on release — waiting for the click to acknowledge the
   touch is the difference between a control that answers and one that lags. */
.gamification-switcher__tab:active {
  transform: scale(0.96);
}

.gamification-switcher__tab--active {
  background: var(--accent);
  color: var(--accent-text);
}

/* Once the pill is carrying the selection, the tab stops painting its own. */
.gamification-switcher--ready .gamification-switcher__tab--active {
  background: transparent;
}

/* The panel arrives with the pill rather than snapping in behind it: a short
   rise and fade, no horizontal travel — the tabs are peers, not a stack, so
   sliding sideways would imply an order they do not have. */
@keyframes gamification-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gamification-panel--enter {
  animation: gamification-panel-in 0.34s var(--ease-settle) both;
}

/* —— Progress bar (the one XP primitive, reused everywhere) ———————————— */

.gamification-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.gamification-bar--large {
  height: 12px;
}

.gamification-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xp-from), var(--xp-to));
  transition: width 0.75s var(--ease);
}

/* —— Hero —————————————————————————————————————————————————————————————— */

.gamification-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--sheen), var(--elev-3);
}

.gamification-hero__main {
  flex: 1 1 auto;
  min-width: 0;
}

.gamification-hero__eyebrow {
  font-size: var(--text-overline);
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.gamification-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 700;
}

.gamification-hero__sep {
  color: var(--text-muted);
  font-weight: 400;
}

.gamification-hero__name {
  background: linear-gradient(100deg, var(--xp-from), var(--xp-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gamification-hero__perks {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.gamification-hero__xp {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gamification-hero__next {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.gamification-hero__side {
  display: flex;
  gap: var(--space-3);
}

.gamification-hero__side-card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.gamification-hero__side-value {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gamification-hero__side-unit {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--text-muted);
}

.gamification-hero__side-label {
  margin: 2px 0 0;
  font-size: var(--text-overline);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.gamification-hero__side-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

/* —— Section blocks ———————————————————————————————————————————————————— */

.gamification-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.gamification-block__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  letter-spacing: var(--text-title-3-ls);
  font-weight: 700;
}

.gamification-block__head .gamification-block__title {
  margin: 0;
}

.gamification-block__meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* —— Next milestone (the loudest thing on the page after the hero) ————— */

.gamification-milestone {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--sheen), var(--elev-2);
  overflow: hidden;
}

.gamification-milestone::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--xp-from), var(--xp-to));
}

.gamification-milestone__lede {
  margin: 0 0 var(--space-2);
  font-size: var(--text-overline);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ok);
}

.gamification-milestone__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-2);
  line-height: var(--text-title-2-lh);
  letter-spacing: var(--text-title-2-ls);
  font-weight: 700;
}

.gamification-milestone__desc {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.gamification-milestone__count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gamification-milestone__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.gamification-milestone__rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.gamification-milestone__rewards-label {
  font-size: var(--text-overline);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The design-system `.btn` base is width:100%, which turns every CTA into a
   full-card bar. These are inline actions sitting next to their reward pills,
   so they size to their label — 44px tall for touch, but never edge to edge. */
.gamification-milestone__cta,
.gamification-daily__cta {
  width: auto;
  margin-top: 0;
  min-height: 44px;
  padding: 11px 22px;
  font-size: var(--text-ui);
}

.gamification-milestone__passive,
.gamification-daily__passive {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* —— Reward pills —————————————————————————————————————————————————————— */

.gamification-reward {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(110, 231, 183, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.28);
  color: var(--xp-from);
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gamification-reward--coin {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.26);
  color: var(--rarity-legendary);
}

/* —— Today's mission ——————————————————————————————————————————————————— */

.gamification-daily {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
}

.gamification-daily__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  font-weight: 700;
}

.gamification-daily__desc {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.gamification-daily__count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-m);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gamification-daily__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.gamification-daily__rewards {
  display: inline-flex;
  gap: var(--space-2);
}

/* —— Mission list (secondary) —————————————————————————————————————————— */

.gamification-more {
  margin-top: var(--space-3);
}

.gamification-more__summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text-muted);
}

.gamification-more__summary:hover {
  color: var(--text);
}

.gamification-more__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.gamification-mission-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gamification-mission {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.gamification-mission--done {
  opacity: 0.72;
}

.gamification-mission__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.gamification-mission__title {
  font-size: var(--text-ui);
  font-weight: 600;
}

.gamification-mission__count {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gamification-mission__done-tag {
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ok);
  white-space: nowrap;
}

.gamification-mission__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.gamification-mission__rewards {
  display: inline-flex;
  gap: var(--space-2);
}

.gamification-mission__cta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ok);
}

.gamification-mission__cta:hover {
  text-decoration: underline;
}

/* —— Achievements —————————————————————————————————————————————————————— */

.gamification-ach-group + .gamification-ach-group {
  margin-top: var(--space-5);
}

.gamification-ach-group__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-overline);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}

.gamification-ach-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.gamification-ach {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

/* Rarity is a hairline edge and a tag — never a full-card wash. */
.gamification-ach::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--rarity-common);
}

.gamification-card--common::before { background: var(--rarity-common); }
.gamification-card--rare::before { background: var(--rarity-rare); }
.gamification-card--epic::before { background: var(--rarity-epic); }
.gamification-card--legendary::before { background: var(--rarity-legendary); }

.gamification-ach--unlocked {
  border-color: rgba(110, 231, 183, 0.32);
  box-shadow: var(--sheen), 0 0 0 1px rgba(110, 231, 183, 0.1);
}

.gamification-ach--locked .gamification-ach__icon {
  filter: grayscale(1);
  opacity: 0.6;
}

.gamification-ach__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.gamification-ach__icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.gamification-ach__heads {
  min-width: 0;
}

.gamification-ach__name {
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.3;
  font-weight: 700;
}

.gamification-ach__rarity {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rarity-common);
}

.gamification-card--rare .gamification-ach__rarity { color: var(--rarity-rare); }
.gamification-card--epic .gamification-ach__rarity { color: var(--rarity-epic); }
.gamification-card--legendary .gamification-ach__rarity { color: var(--rarity-legendary); }

.gamification-ach__desc {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.gamification-ach__count {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gamification-ach__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.gamification-ach__unlocked {
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--ok);
}

/* —— Activity —————————————————————————————————————————————————————————— */

.gamification-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.gamification-activity__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.gamification-activity__row + .gamification-activity__row {
  border-top: 1px solid var(--hairline);
}

.gamification-activity__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-ui);
}

.gamification-activity__delta {
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gamification-activity__time {
  font-size: var(--text-micro);
  color: var(--text-muted);
  white-space: nowrap;
}

/* —— Empty states —————————————————————————————————————————————————————— */

.gamification-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px dashed var(--hairline);
}

.gamification-empty__title {
  margin: 0;
  font-size: var(--text-title-3);
  font-weight: 700;
}

.gamification-empty__desc {
  margin: 0;
  font-size: var(--text-body-s);
  color: var(--text-muted);
  max-width: 52ch;
}

.gamification-empty .btn {
  width: auto;
  margin-top: var(--space-2);
  min-height: 44px;
  padding: 11px 22px;
  font-size: var(--text-ui);
}

/* —— Skeletons ————————————————————————————————————————————————————————— */

.gamification-skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 45%,
    rgba(255, 255, 255, 0.04) 90%
  );
  background-size: 200% 100%;
  animation: gamification-skeleton-sweep 1.4s ease-in-out infinite;
}

.gamification-skeleton--hero { height: 220px; }
.gamification-skeleton--milestone { height: 190px; }
.gamification-skeleton--mission { height: 150px; }

@keyframes gamification-skeleton-sweep {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* —— XP feedback chips ————————————————————————————————————————————————— */

.gamification-xp-feed {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  transform: translateX(-50%);
  z-index: 290;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.gamification-xp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  border: 1px solid rgba(110, 231, 183, 0.36);
  box-shadow: var(--elev-4);
  font-size: var(--text-ui);
  white-space: nowrap;
  animation: gamification-chip-in 0.32s var(--ease) both;
}

.gamification-xp-chip--out {
  animation: gamification-chip-out 0.3s var(--ease) both;
}

.gamification-xp-chip__amount {
  font-weight: 800;
  color: var(--xp-from);
  font-variant-numeric: tabular-nums;
}

.gamification-xp-chip__coins {
  font-weight: 700;
  color: var(--rarity-legendary);
  font-variant-numeric: tabular-nums;
}

.gamification-xp-chip__message {
  color: var(--text-muted);
}

@keyframes gamification-chip-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gamification-chip-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* —— Level-up overlay —————————————————————————————————————————————————— */

.gamification-levelup {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  animation: gamification-fade-in 0.24s var(--ease) both;
}

.gamification-levelup__card {
  width: min(100%, 420px);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--elev-6);
  text-align: center;
  animation: gamification-pop-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.gamification-levelup__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-overline);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ok);
}

.gamification-levelup__title {
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: 800;
}

.gamification-levelup__name {
  margin: var(--space-2) 0 0;
  font-size: var(--text-title-3);
  font-weight: 700;
  background: linear-gradient(100deg, var(--xp-from), var(--xp-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gamification-levelup__jump {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.gamification-levelup__perk {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-s);
  color: var(--text);
}

.gamification-levelup__next {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.gamification-levelup__cta {
  width: auto;
  min-width: 168px;
  margin-top: var(--space-5);
  min-height: 44px;
  padding: 12px 28px;
  font-size: var(--text-ui);
}

@keyframes gamification-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gamification-pop-in {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* —— Confetti / coin particles (shared, fired from js/gamification.js) —— */

.gamification-celebration {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}

.gamification-celebration__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 640px;
  max-height: 640px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.28), transparent 70%);
  animation: gamification-glow-fade 1.4s ease-out forwards;
}

@keyframes gamification-glow-fade {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.15); }
}

.gamification-confetti {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 13px;
  border-radius: 1px;
  animation-name: gamification-confetti-fall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
  --drift: 0px;
  --spin: 240deg;
}

.gamification-confetti--round {
  border-radius: 50%;
}

@keyframes gamification-confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift), 78vh) rotate(var(--spin)); opacity: 0; }
}

.gamification-coin-particle {
  position: fixed;
  z-index: 300;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--xp-from), #22a866);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* —— Compact widgets reused on /account/ and /seller/ ————————————————— */

.gamification-summary-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
}

.gamification-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
}

.gamification-stat__value {
  font-size: var(--text-title-3);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.gamification-stat__label {
  font-size: var(--text-overline);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gamification-xp-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gamification-xp-bar__label {
  font-size: var(--text-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.gamification-xp-bar__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.gamification-xp-bar__fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xp-from), var(--xp-to));
  transition: width 0.7s var(--ease);
  overflow: hidden;
}

/* —— Responsive ———————————————————————————————————————————————————————— */

@media (min-width: 640px) {
  .gamification-ach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .gamification-hub {
    padding: var(--space-6) var(--space-5) var(--space-6);
  }

  /* Desktop: the hero splits into progress + stats rather than stacking, and
     the achievement grid opens to three. Nothing else changes size — the
     hierarchy is the same on both. */
  .gamification-hero {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .gamification-hero__side {
    flex: 0 0 240px;
    flex-direction: column;
  }

  .gamification-ach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .gamification-hub {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }

  .gamification-hero,
  .gamification-milestone {
    padding: var(--space-4);
  }

  .gamification-daily {
    padding: var(--space-4);
  }

  .gamification-switcher {
    width: 100%;
  }

  .gamification-switcher__tab {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-2);
  }

  .gamification-xp-feed {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    width: calc(100% - var(--space-5));
  }

  .gamification-xp-chip {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* —— Reduced motion ———————————————————————————————————————————————————
 * Same information, no movement: bars jump straight to their value, chips and
 * the level-up card appear without travelling, particles do not animate. */

@media (prefers-reduced-motion: reduce) {
  .gamification-bar__fill,
  .gamification-xp-bar__fill,
  .gamification-skeleton,
  .gamification-confetti,
  .gamification-celebration__glow,
  .gamification-coin-particle,
  .gamification-switcher__tab,
  .gamification-switcher__thumb,
  .gamification-panel--enter {
    animation: none !important;
    transition: none !important;
  }

  .gamification-xp-chip,
  .gamification-xp-chip--out,
  .gamification-levelup,
  .gamification-levelup__card {
    animation: none !important;
  }
}

/* —— Light theme ——————————————————————————————————————————————————————— */

html.nav-theme-light .gamification-hero,
html.nav-theme-light .gamification-milestone,
html.nav-theme-light .gamification-daily,
html.nav-theme-light .gamification-ach,
html.nav-theme-light .gamification-activity,
html.nav-theme-light .gamification-empty,
html.nav-theme-light .gamification-summary-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .gamification-hero {
  box-shadow: var(--sheen), var(--elev-3);
}

html.nav-theme-light .gamification-hero__side-card,
html.nav-theme-light .gamification-mission,
html.nav-theme-light .gamification-bar,
html.nav-theme-light .gamification-xp-bar__track,
html.nav-theme-light .gamification-switcher,
html.nav-theme-light .gamification-levelup__jump {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.09);
}

/* The gradient-clipped text loses contrast on white; fall back to the
   AA-cleared green so the level name stays readable. */
html.nav-theme-light .gamification-hero__name,
html.nav-theme-light .gamification-levelup__name {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ok);
}

html.nav-theme-light .gamification-reward {
  background: rgba(24, 117, 52, 0.1);
  border-color: rgba(24, 117, 52, 0.26);
  color: var(--ok);
}

html.nav-theme-light .gamification-reward--coin {
  background: rgba(154, 103, 0, 0.1);
  border-color: rgba(154, 103, 0, 0.26);
  color: var(--star);
}

html.nav-theme-light .gamification-ach__rarity,
html.nav-theme-light .gamification-card--legendary .gamification-ach__rarity {
  color: var(--text-muted);
}

html.nav-theme-light .gamification-xp-chip {
  background: #fff;
  border-color: rgba(24, 117, 52, 0.32);
}

html.nav-theme-light .gamification-xp-chip__amount {
  color: var(--ok);
}

html.nav-theme-light .gamification-xp-chip__coins {
  color: var(--star);
}

html.nav-theme-light .gamification-bg__orb {
  opacity: 0.3;
}

html.nav-theme-light .gamification-skeleton {
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.09) 45%,
    rgba(0, 0, 0, 0.04) 90%
  );
  background-size: 200% 100%;
}

/* ======== 15-site-status.css ======== */
/* Site maintenance / updating overlay + admin status page */

.site-status-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(90, 120, 255, 0.18), transparent 55%),
    rgba(0, 0, 0, 0.92);
  color: var(--text, #f5f5f7);
  opacity: 1;
  transition: opacity 0.45s ease;
}

.site-status-overlay.hidden,
.site-status-overlay[hidden] {
  display: none !important;
}

.site-status-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

.site-status-overlay__inner {
  max-width: 28rem;
  text-align: center;
}

.site-status-overlay__brand {
  margin: 0 0 1.75rem;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: inherit;
}

.site-status-overlay__pulse {
  position: relative;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
}

.site-status-overlay__pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  animation: site-status-pulse 1.8s ease-out infinite;
}

.site-status-overlay__pulse-dot {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.site-status-overlay--maintenance .site-status-overlay__pulse-ring {
  border-color: rgba(255, 180, 90, 0.45);
}

.site-status-overlay--maintenance .site-status-overlay__pulse-dot {
  background: rgba(255, 200, 120, 0.95);
}

.site-status-overlay__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 3.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: inherit;
}

.site-status-overlay__message {
  margin: 0 0 1.25rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted, #86868b);
}

.site-status-overlay__hint {
  margin: 0;
  font-size: 0.8125rem;
}

@keyframes site-status-pulse {
  0% {
    transform: scale(0.72);
    opacity: 0.85;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-status-overlay__pulse-ring {
    animation: none;
    opacity: 0.55;
  }
  .site-status-overlay {
    transition: none;
  }
}

html.nav-theme-light .site-status-overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(90, 120, 255, 0.12), transparent 55%),
    rgba(242, 242, 247, 0.97);
  color: var(--shop-text, #1d1d1f);
}
html.nav-theme-light .site-status-overlay__pulse-ring {
  border-color: rgba(0, 0, 0, 0.2);
}

html.nav-theme-light .site-status-overlay__pulse-dot {
  background: rgba(29, 29, 31, 0.85);
}

html.nav-theme-light .site-status-overlay--maintenance .site-status-overlay__pulse-ring {
  border-color: rgba(180, 100, 20, 0.4);
}

html.nav-theme-light .site-status-overlay--maintenance .site-status-overlay__pulse-dot {
  background: rgba(180, 100, 20, 0.9);
}

html.site-status-locked {
  overflow: hidden;
}

/* Admin: estado do site */
.site-status-admin__badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.site-status-admin__badge-row .seller-ao-banks-form__title {
  margin: 0;
}

.site-status-admin__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--surface);
  color: var(--text, #f5f5f7);
}

.site-status-admin__badge--off {
  border-color: rgba(27, 127, 58, 0.35);
  background: rgba(27, 127, 58, 0.12);
  color: #3dd68c;
}

.site-status-admin__badge--updating {
  border-color: rgba(90, 140, 255, 0.4);
  background: rgba(90, 140, 255, 0.14);
  color: #9db7ff;
}

.site-status-admin__badge--maintenance {
  border-color: rgba(255, 180, 90, 0.4);
  background: rgba(255, 180, 90, 0.12);
  color: #ffc87a;
}

.site-status-admin__preview {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
}

.site-status-admin__preview-label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #86868b);
}

.site-status-admin__preview-title {
  margin: 0 0 0.35rem;
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #f5f5f7);
}

.site-status-admin__preview-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

html.nav-theme-light .site-status-admin__badge {
  color: var(--shop-text, #1d1d1f);
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
}

html.nav-theme-light .site-status-admin__badge--off {
  border-color: rgba(27, 127, 58, 0.25);
  background: rgba(27, 127, 58, 0.1);
  color: var(--ok);
}

html.nav-theme-light .site-status-admin__badge--updating {
  border-color: rgba(0, 80, 200, 0.22);
  background: rgba(0, 80, 200, 0.08);
  color: #0040c0;
}

html.nav-theme-light .site-status-admin__badge--maintenance {
  border-color: rgba(180, 100, 20, 0.28);
  background: rgba(180, 100, 20, 0.1);
  color: #9a4e00;
}

html.nav-theme-light .site-status-admin__preview {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light .site-status-admin__preview-label,
html.nav-theme-light .site-status-admin__preview-body {
  color: var(--shop-text-muted, #6e6e73);
}

/* ======== 16-reviews.css ======== */
/* Premium review & reputation UI (Phase 2).
   Owns the product-page review section: summary header with rating breakdown,
   filter/sort toolbar, rich review cards, seller responses, timeline, and the
   loading skeletons. Light-mode overrides live at the bottom of this file. */

.rv-section {
  margin-top: var(--space-6);
}

.rv-shell {
  display: grid;
  gap: var(--space-5);
}

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

.rv-summary {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.rv-summary--empty {
  grid-template-columns: 1fr;
  text-align: center;
}

.rv-score {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

/* The score stack is three <p>s — kill the UA margins so `gap` alone spaces it. */
.rv-score > p {
  margin: 0;
}

.rv-score__value {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rv-score__stars {
  font-size: 16px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #f5c842;
}

.rv-score__count {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Breakdown bars */

.rv-bars {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.rv-bar {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.rv-bar:hover,
.rv-bar:focus-visible {
  background: var(--surface);
}

.rv-bar.is-active {
  background: var(--surface-hover);
  color: var(--text);
}

.rv-bar__label {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.rv-bar__label span {
  color: #f5c842;
}

.rv-bar__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.rv-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f5c842, #f0b429);
  transition: width 700ms var(--ease);
}

.rv-bar__percent {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Toolbar ---------- */

.rv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-chip {
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease);
}

.rv-chip:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
}

.rv-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.rv-sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.rv-sort select {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
}

/* ---------- Review cards ---------- */

.rv-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  animation: rv-card-in 420ms var(--ease) both;
}

@keyframes rv-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.rv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-card__body {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.rv-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.rv-card__author {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.rv-card__date,
.rv-card__edited {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rv-stars {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #f5c842;
}

.rv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rv-badge--verified {
  background: rgba(50, 215, 75, 0.14);
  color: var(--badge);
}

.rv-badge--hidden {
  background: rgba(255, 69, 58, 0.14);
  color: #ff8a80;
}

.rv-card__comment {
  margin: 0;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}

.rv-card__purchase {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Photo strip */

.rv-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-photo {
  width: 84px;
  height: 84px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

.rv-photo:hover,
.rv-photo:focus-visible {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.28);
}

.rv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.rv-photo img.is-loaded {
  opacity: 1;
}

/* Timeline */

.rv-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.rv-timeline__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rv-timeline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.6;
}

.rv-timeline__item--reviewed .rv-timeline__dot {
  background: #f5c842;
  opacity: 1;
}

/* Seller response */

.rv-response {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid rgba(245, 200, 66, 0.5);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.rv-response__head {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--text);
}

.rv-response__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.rv-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ---------- States ---------- */

.rv-empty {
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-muted);
}

.rv-empty__title {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}

.rv-empty__hint {
  margin: 0;
  font-size: 0.875rem;
}

.rv-skeleton {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.rv-skeleton__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.rv-skeleton__lines {
  display: grid;
  gap: 10px;
  align-content: start;
}

.rv-skeleton__line {
  height: 12px;
  border-radius: 6px;
}

.rv-skeleton__line--title {
  width: 34%;
}

.rv-skeleton__line--short {
  width: 62%;
}

.rv-more {
  display: flex;
  justify-content: center;
}

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

@media (max-width: 719px) {
  .rv-summary {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .rv-score {
    justify-items: start;
  }

  .rv-score__value {
    font-size: 2.25rem;
  }

  .rv-card,
  .rv-skeleton {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .rv-avatar,
  .rv-skeleton__avatar {
    width: 36px;
    height: 36px;
  }

  .rv-sort {
    margin-left: 0;
    width: 100%;
  }

  .rv-sort select {
    flex: 1;
  }

  .rv-photo {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-card {
    animation: none;
  }

  .rv-bar__fill,
  .rv-photo,
  .rv-photo img {
    transition: none;
  }
}

/* ---------- Seller dashboard widgets ---------- */

.srv-wrap {
  display: grid;
  gap: var(--space-5);
}

.srv-subtitle {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.srv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.srv-tile {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.srv-tile__label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.srv-tile__value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.srv-tile__hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.srv-bars {
  display: grid;
  gap: 6px;
}

.srv-bar {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.srv-bar__label span {
  color: #f5c842;
}

.srv-bar__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.srv-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f5c842, #f0b429);
  transition: width 600ms var(--ease);
}

.srv-bar__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.srv-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.srv-rank__title {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--text);
}

.srv-rank__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.srv-rank__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.srv-rank__name {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srv-rank__name:hover {
  text-decoration: underline;
}

.srv-rank__score {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.srv-rank__empty,
.srv-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  list-style: none;
}

.srv-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.srv-item {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.srv-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.srv-item__avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 650;
}

.srv-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srv-item__stars {
  color: #f5c842;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
}

.srv-item__product {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.srv-item__product:hover {
  text-decoration: underline;
}

.srv-item__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.srv-item__comment {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}

.srv-item__reply {
  padding: var(--space-3);
  border-left: 2px solid rgba(245, 200, 66, 0.5);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
}

.srv-item__reply-head {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--text);
}

.srv-item__reply-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.srv-reply-form__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.srv-reply-form__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
}

.srv-reply-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* The dashboard's .btn stretches to fill its container; a reply button should
   size to its label instead. */
.srv-reply-form__actions .btn {
  width: auto;
  flex: 0 0 auto;
}

.srv-reply-form__status {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---------- Admin moderation extras ----------
   Adds the flag chips, state pill variants and edit-history panel on top of the
   .review-mod-* rules that already live in 04-commerce.css. */

/* With four actions per card, full-width stacked buttons buried the review
   text; lay them out in a wrapping row sized to their labels. */
.review-mod-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.review-mod-actions .btn {
  width: auto;
  flex: 0 0 auto;
}

.review-mod-actions .review-mod-status {
  flex-basis: 100%;
  margin-top: 0;
}

.review-mod-pill--state {
  border-style: dashed;
}

.review-mod-pill--flagged {
  color: #f5c842;
  border-color: rgba(245, 200, 66, 0.45);
}

.review-mod-pill--approved {
  color: var(--badge);
  border-color: rgba(110, 231, 183, 0.4);
}

.review-mod-pill--rejected {
  color: var(--danger, #b42318);
  border-color: rgba(255, 69, 58, 0.4);
}

.review-mod-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.review-mod-flag {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(245, 200, 66, 0.14);
  color: #f5c842;
  font-size: 0.6875rem;
  font-weight: 600;
}

.review-mod-history-panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.review-mod-history__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-mod-history__row {
  display: grid;
  gap: 2px;
}

.review-mod-history__stars {
  color: #f5c842;
  letter-spacing: 0.06em;
}

.review-mod-history__date {
  font-size: 0.6875rem;
}

.review-mod-history__comment {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Light mode ----------
   Base tokens are dark-only (see 01-base.css), so every surface, text colour
   and hairline used above needs an explicit light value here. */

html.nav-theme-light .rv-summary,
html.nav-theme-light .rv-card,
html.nav-theme-light .rv-skeleton {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-1);
}

/* Kept deliberately. The other five selectors that shared this declaration were
   redundant — their base rule already resolves to the same ink in light — but
   .rv-bar.is-active is not: a lower-specificity muted rule wins once this is
   gone, and the active bar drops from #1d1d1f to #6e6e73. Verified by measuring
   computed colour before and after, which is the only way to tell these apart. */
html.nav-theme-light .rv-bar.is-active {
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .rv-score__count,
html.nav-theme-light .rv-card__date,
html.nav-theme-light .rv-card__edited,
html.nav-theme-light .rv-card__purchase,
html.nav-theme-light .rv-bar,
html.nav-theme-light .rv-chip,
html.nav-theme-light .rv-sort,
html.nav-theme-light .rv-timeline,
html.nav-theme-light .rv-response__body,
html.nav-theme-light .rv-empty,
html.nav-theme-light .rv-empty__hint {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light .rv-bar__track {
  background: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .rv-bar:hover,
html.nav-theme-light .rv-bar:focus-visible,
html.nav-theme-light .rv-bar.is-active {
  background: rgba(0, 0, 0, 0.05);
}

html.nav-theme-light .rv-sort select {
  background: #fff;
}

html.nav-theme-light .rv-chip:hover {
  border-color: rgba(0, 0, 0, 0.28);
  color: var(--shop-text, #1d1d1f);
}

html.nav-theme-light .rv-chip.is-active {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
}

html.nav-theme-light .rv-badge--verified {
  background: rgba(31, 158, 92, 0.12);
  color: #1f9e5c;
}

html.nav-theme-light .rv-badge--hidden {
  background: rgba(200, 40, 30, 0.1);
  color: #c8281e;
}

html.nav-theme-light .rv-response {
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .srv-bar__track {
  background: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light .srv-item__reply {
  background: rgba(0, 0, 0, 0.03);
}

html.nav-theme-light .srv-reply-form__input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--shop-text, #1d1d1f);
}

/* ======== 17-connect.css ======== */
/* Stripe Connect seller + storefront pages */

/* ── Seller Payment Ready banners / badges ─────────────────────────── */

.seller-banner--payment-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.seller-banner--payment-setup .seller-banner__body {
  flex: 1 1 16rem;
  min-width: 0;
}

.seller-banner--payment-setup .seller-banner__text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.92;
}

.seller-banner--payment-setup .seller-banner__actions {
  flex: 0 0 auto;
}

#prod-eur-payments-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

#prod-eur-payments-cta .btn {
  width: auto;
  margin: 0;
}

.seller-stock-badge--payment {
  margin-left: 6px;
  color: rgba(255, 214, 140, 0.98);
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.28);
}

html.nav-theme-light #seller-crm-root .seller-banner--payment-setup {
  color: var(--shop-text, #1d1d1f);
  background: #fff8e6;
  border-color: rgba(0, 0, 0, 0.1);
}

html.nav-theme-light #seller-crm-root .seller-banner--payment-setup .seller-banner__text {
  color: var(--shop-text-muted, #6e6e73);
}

html.nav-theme-light #seller-crm-root .seller-stock-badge--payment {
  color: #8a6d00;
  background: #fff4cc;
  border-color: rgba(0, 0, 0, 0.08);
}
/* ── Seller dashboard Pagamentos panel ─────────────────────────────── */

.seller-pay-block.seller-section {
  margin-top: 0;
}

.seller-pay-card {
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.seller-pay-card__head {
  margin: 0 0 var(--space-3);
}

.seller-pay-card__eyebrow {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shop-text-muted, var(--text-muted));
}

.seller-pay-card__title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--shop-text, var(--text));
}

.seller-connect-lede,
.seller-section--ao-banks .seller-ao-banks-lede,
.seller-section--eur-banks .seller-eur-banks-lede {
  margin: 0;
  max-width: 52ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--shop-text-muted, var(--text-muted));
}

.seller-pay-callout {
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.seller-pay-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 var(--space-3);
}

@media (max-width: 559px) {
  .seller-pay-status {
    grid-template-columns: 1fr;
  }
}

.seller-pay-status__item {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke-secondary);
  background: rgba(0, 0, 0, 0.18);
}

.seller-pay-status__item dt {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shop-text-muted, var(--text-muted));
}

.seller-pay-status__item dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--shop-text, var(--text));
  word-break: break-word;
}

.seller-pay-actions,
.seller-connect-actions.seller-pay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.seller-pay-actions .btn,
.seller-connect-actions.seller-pay-actions .btn,
.seller-ao-banks-actions.seller-pay-actions .btn {
  width: auto;
  margin: 0;
  min-height: 34px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-pill);
}

.seller-pay-actions .btn--ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--shop-text, var(--text));
}

.seller-pay-actions .btn--ghost:hover:not(:disabled) {
  background: var(--surface-hover, var(--surface));
  opacity: 1;
}

/* AOA form — compact inside payments card */
.seller-pay-card .seller-ao-banks-form {
  margin: 0 0 var(--space-3);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--stroke-secondary);
  background: rgba(0, 0, 0, 0.16);
}

.seller-pay-card .seller-ao-banks-form__title,
.seller-pay-card .seller-ao-banks-list__title,
.seller-pay-card .seller-eur-banks-list__title,
.seller-pay-card .seller-eur-payouts__title,
.seller-eur-legacy__body .seller-eur-banks-list__title,
.seller-eur-legacy__body .seller-eur-payouts__title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--shop-text, var(--text));
}

.seller-pay-card .seller-ao-banks-fields {
  gap: 12px;
}

.seller-pay-card .seller-ao-banks-fields .field-label {
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
}

.seller-pay-card .seller-ao-banks-fields .field select,
.seller-pay-card .seller-ao-banks-fields .field input,
.seller-pay-card .seller-ao-banks-iban {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 10px;
}

.seller-pay-card .seller-ao-banks-fields .field select {
  padding-right: 36px;
  background-position: right 12px center;
}

.seller-pay-card .seller-ao-banks-iban {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

.seller-pay-card .seller-ao-banks-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.seller-pay-card .seller-ao-banks-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.seller-pay-card .seller-ao-banks-actions {
  margin-top: 12px;
  padding-top: 0;
}

.seller-pay-card .seller-ao-banks-list {
  margin-top: 0;
}

.seller-pay-card .seller-ao-banks-list .seller-empty {
  margin: 0 0 8px;
  font-size: 0.8125rem;
}

.seller-pay-card .seller-table-wrap,
.seller-eur-legacy__body .seller-table-wrap {
  margin-top: 0;
}

/* Legado SEPA accordion */
.seller-eur-legacy {
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
}

.seller-eur-legacy__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--shop-text, var(--text));
  transition: background 0.15s var(--ease);
}

.seller-eur-legacy__summary:hover {
  background: var(--surface-raised);
}

.seller-eur-legacy__summary::-webkit-details-marker {
  display: none;
}

.seller-eur-legacy__label::before {
  content: "▸ ";
  color: var(--shop-text-muted, var(--text-muted));
  font-weight: 400;
}

.seller-eur-legacy[open] .seller-eur-legacy__label::before {
  content: "▾ ";
}

.seller-eur-legacy__meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shop-text-muted, var(--text-muted));
}

.seller-eur-legacy__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--hairline);
}

.seller-eur-legacy__body .seller-eur-banks-lede {
  margin: 12px 0;
  font-size: 0.8125rem;
}

.seller-eur-legacy__body .seller-eur-banks-list {
  margin-bottom: var(--space-3);
}

.seller-eur-legacy__body .seller-eur-payouts__title {
  margin-top: 4px;
}

/* Light mode — Pagamentos */
html.nav-theme-light #seller-crm-root .seller-pay-card,
html.nav-theme-light #seller-crm-root .seller-eur-legacy {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-1);
}
html.nav-theme-light #seller-crm-root .seller-pay-status__item {
  background: var(--shop-bg-muted, #f2f2f7);
  border-color: rgba(0, 0, 0, 0.08);
}
html.nav-theme-light #seller-crm-root .seller-pay-card .seller-ao-banks-form {
  background: var(--shop-bg-muted, #f2f2f7);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #seller-crm-root .seller-pay-actions .btn--ghost {
  color: var(--shop-text, #1d1d1f);
  border-color: rgba(0, 0, 0, 0.14);
  background: transparent;
}

html.nav-theme-light #seller-crm-root .seller-pay-actions .btn--ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

html.nav-theme-light #seller-crm-root .seller-eur-legacy__summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ── Standalone Connect pages ──────────────────────────────────────── */

#store-connect-root .connect-panel,
#store-connect-store-root .connect-panel,
#store-connect-success-root .connect-panel {
  max-width: min(100%, 640px);
}

/* Flatten outer shell — the pay card is the visual surface */
#store-connect-root .connect-panel.panel {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#store-connect-root .connect-back {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--shop-text-muted, var(--text-muted));
}

#store-connect-root .connect-back a {
  color: inherit;
  text-decoration: none;
}

#store-connect-root .connect-back a:hover {
  text-decoration: underline;
}

#store-connect-root .connect-detail-card {
  margin: 0;
}

#store-connect-root .connect-title.seller-pay-card__title {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--shop-text, var(--text));
}

#store-connect-root .seller-connect-lede {
  margin: 0;
}

#store-connect-root .seller-pay-status--detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-3);
}

@media (max-width: 559px) {
  #store-connect-root .seller-pay-status--detail {
    grid-template-columns: 1fr;
  }
}

#store-connect-root .seller-pay-status__item--wide {
  grid-column: 1 / -1;
}

#store-connect-root .connect-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--shop-text-muted, var(--text-muted));
}

#store-connect-root .seller-pay-callout:not(.hidden) {
  display: block;
}

/* Tokens, not the light-palette literals these used to hold. #1b7f3a and
   #d70015 are the *light* semantic colours; unscoped here they also painted the
   dark theme, where they score 3.9:1 and 3.7:1 on the near-black surface and
   miss AA. var() lets each theme supply its own — dark resolves to the brighter
   #32d74b / #ff453a, light to the values in the override block below. */
#store-connect-root .seller-pay-callout.feed-status--ok {
  color: var(--ok);
}

#store-connect-root .seller-pay-callout.feed-status--error {
  color: var(--danger);
}

.connect-lede,
.connect-back {
  margin: 0 0 var(--space-4);
  line-height: 1.5;
  color: var(--shop-text-muted, var(--text-muted));
}

.connect-card {
  margin: 0 0 var(--space-5);
  padding: clamp(16px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.connect-card__title {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  color: var(--shop-text, var(--text));
}

.connect-status-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.connect-status-list div {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--space-2);
  align-items: baseline;
}

.connect-status-list dt {
  margin: 0;
  font-size: 0.875rem;
  color: var(--shop-text-muted, var(--text-muted));
}

.connect-status-list dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--shop-text, var(--text));
  word-break: break-word;
}

.connect-status-list--compact {
  margin-bottom: var(--space-3);
}

.connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

#store-connect-root .connect-actions.seller-pay-actions {
  margin-top: 0;
}

.connect-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.connect-hint {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
}

.connect-store-grid {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.connect-product-card {
  padding: clamp(14px, 2.5vw, 20px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.connect-product-card h2 {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  color: var(--shop-text, var(--text));
}

.connect-meta {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  color: var(--shop-text-muted, var(--text-muted));
}

html.nav-theme-light #store-connect-root .connect-card,
html.nav-theme-light #store-connect-root .seller-pay-card,
html.nav-theme-light #store-connect-store-root .connect-product-card,
html.nav-theme-light #store-connect-success-root .connect-panel,
html.nav-theme-light #store-connect-store-root .connect-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--elev-1);
}

html.nav-theme-light #store-connect-root .seller-pay-status__item {
  background: var(--shop-bg-muted, #f2f2f7);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-connect-root .seller-pay-callout,
html.nav-theme-light #store-connect-root .checkout-callout {
  background: var(--shop-bg-muted, #e5e5ea);
  border-color: rgba(0, 0, 0, 0.08);
}

html.nav-theme-light #store-connect-root .seller-pay-actions .btn--ghost {
  color: var(--shop-text, #1d1d1f);
  border-color: rgba(0, 0, 0, 0.14);
  background: transparent;
}

html.nav-theme-light #store-connect-root .seller-pay-actions .btn--ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

html.nav-theme-light #store-connect-root .feed-status--ok {
  color: var(--ok);
}

/* ======== 18-targets.css ======== */
/* Interactive target sizes — enforcement layer.
   Loads last (highest prefix) so it wins ties against component rules.

   Two different thresholds, because they answer different questions:

   - WCAG 2.2 AA "Target Size (Minimum)" is 24x24 CSS px and applies to every
     pointer. That is the accessibility floor and is enforced unconditionally.
   - 44x44 is Apple HIG / WCAG AAA and is about *fingers*. Applying it on the
     desktop would inflate every pill and chip on the page for no benefit, so it
     is scoped to `pointer: coarse`.

   Icon buttons grow via a centred ::after hit area rather than a bigger box, so
   a 44px target does not push the layout around.

   Not covered on purpose: links inside running prose (for example "painel de
   vendedor" in the hero lede). WCAG 2.2 exempts targets in a sentence or block
   of text, and padding them would break the line box around them. */

/* ---- AA floor: 24px, all pointers ---------------------------------------- */

/* Card title links and nav links run 18–21px tall. They are discrete controls,
   not prose, so the inline-text exception does not cover them.

   These are matched STRUCTURALLY rather than by listing class names. The first
   version of this layer enumerated `.product-card__hit` and `.site-legal-nav a`,
   and every component added afterwards silently bypassed it — `.pick-card__hit`
   and `.site-explore-nav a` both shipped at 18–20px because they were not on
   the list. A rule that describes the *shape* keeps covering components nobody
   has written yet. */
[class*="card__name"] > a,
.product-discover-seller__link {
  display: inline-block;
  padding-block: 4px;
}

/* Deliberately NOT `[class*="card__hit"]`. That class carries two different
   roles: a title link inside `<h3 class="…card__name">`, and a wrapper around
   the card's media block (`product-card__media product-card__hit`,
   `svc-card__hit`). Matching it directly forced `display: inline-block` onto
   the media wrappers, which shrink-wrapped them to their content — service
   cards rendered a 204px image box inside a 365px card, with the aspect ratio
   then deriving a different height for every card. The title case is already
   covered by the `card__name > a` selector above; the media case must be left
   alone. */

/* Any nav list of links — legal, explore, footer, and whatever comes next. */
nav a,
.site-legal-nav a,
.site-explore-nav a {
  display: inline-block;
  padding-block: 3px;
}

/* Standalone action links. Components in this codebase name them consistently
   (`__link`, `-link`, `__action`), so the shape is matchable without listing
   every one: pdp-report-link, pdp-seller-store-link, breadcrumbs__link and any
   future sibling. Links inside running prose carry no class and so are not
   matched — which is the WCAG inline exception, kept by construction.

   The plurals are excluded because these are substring matches, and every
   component in the codebase names its button row with the plural of the same
   word: `store-hero__actions`, `orders-card__actions`, `svc-quote__actions`.
   Those are flex containers, not targets. Matching them forced
   `display: inline-block` onto the row, which took `flex-direction`, `gap` and
   `flex-wrap` down with it — the home hero's stacked CTAs rendered edge to edge
   with no space between them on mobile, and every other `__actions` row lost
   its gap the same way. The exclusion is wrapped in `:where()` so it adds no
   specificity: this layer is meant to win ties by load order, not by weight. */
[class*="__link"]:not(:where([class*="__links"])),
[class$="-link"],
[class*="__action"]:not(:where([class*="__actions"])),
.sub-nav a {
  display: inline-block;
  padding-block: 4px;
}

/* The report control resets padding to 0 at (0,2,0) / (1,1,0) to strip its
   button chrome, which also strips the target height. Match that specificity
   here rather than weakening the reset — the chrome should stay gone, the
   hit area should not. */
.pdp-report-link.content-report-btn,
#btn-report-product.pdp-report-link,
.seller-public-report-link.content-report-btn {
  padding-block: 4px;
}

/* No "protection" rule is needed for pills and tabs: a component class such as
   .store-site-nav__link is (0,1,0) and already outranks `nav a` at (0,0,2).
   An earlier attempt added `nav a.store-site-nav__link { padding-block: revert }`
   to be safe — at (0,1,2) it won instead, reverting the component's own padding
   to the UA default and shrinking 36px pills to 20px. Specificity was already
   doing the job. */

/* The wordmark is a discrete control, not prose — 18px of cap height is not a
   target. Padding only; the header lays it out with flex so nothing shifts. */
.brand-link {
  display: inline-block;
  padding-block: 3px;
}

/* ---- Touch: 44px, coarse pointers only ----------------------------------- */
@media (pointer: coarse) {
  .btn,
  .store-site-nav__link,
  .novidades-tab,
  .admin-engagement-tab,
  .admin-act {
    min-height: 44px;
  }

  .store-nav-search__input,
  .store-nav-search__submit {
    min-height: 44px;
  }

  /* Icon-only controls: keep the painted box, grow the hit area around it.
     wish-btn / password-field__toggle stay position:absolute (over media / input)
     — absolute already establishes a containing block for ::after, so do not
     force relative (that un-pins the catalog heart from the image corner). */
  .share-trigger-btn,
  .pdp-tool-btn--icon {
    position: relative;
  }

  .share-trigger-btn::after,
  .wish-btn::after,
  .pdp-tool-btn--icon::after,
  .password-field__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Purely a hit area — must never paint or catch its own hover. */
    background: transparent;
    border-radius: inherit;
  }

  /* NOT `.product-card__hit` — the same two-roles trap as the AA block above,
     just quieter. That class is on title links *and* on the media wrapper
     (`product-card__media product-card__hit`), so padding it put 6px top and
     bottom *inside every product image* on touch: 12px of dead band, the photo
     inset from its own frame, on every card on the phone. It was not even
     buying the 44px it exists for — the title link is 29px and the padding
     takes it to 33px, still short — while the AA floor of 24px is already met
     without it. Removed rather than rescoped. */
  .product-discover-seller__link {
    padding-block: 6px;
  }
}

/* Checkboxes sit inside their <label>, so the activation area is already the
   whole row — but the 13px UA default box is hard to hit deliberately and hard
   to read as checked. This is about the control, not the target. */
.newsletter-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0a84ff;
}

/* The newsletter honeypot is deliberately tiny and off-screen; never resize it,
   or it stops being a honeypot. */
.newsletter-form__hp,
.newsletter-form__hp input {
  min-height: 0 !important;
}

/* ======== 19-components.css ======== */
/* Shared cross-page components.
   Anything used by more than one surface and owned by no single page belongs
   here rather than being redefined per feature stylesheet. */

/* ---- Empty state ---------------------------------------------------------
   Modelled on the admin Painel's "Tudo em dia" panel, which is the best empty
   state already in the product: an icon, a headline, one sentence explaining
   what it means, and a way forward. Replaces the grey one-line callout that
   cart, checkout, orders and wishlist each reimplemented, where the highest
   intent screens in the funnel dead-ended in a sentence. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: clamp(32px, 6vw, 56px) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
}

.empty-state__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.empty-state__title {
  margin: 0;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: var(--text-title-3-ls);
  line-height: var(--text-title-3-lh);
  color: var(--text);
}

.empty-state__body {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.empty-state__actions .btn {
  width: auto;
  margin: 0;
  padding: 12px 22px;
  font-size: var(--text-body-s);
}

.empty-state__link {
  font-size: var(--text-body-s);
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty-state__link:hover {
  opacity: 0.8;
}

html.nav-theme-light .empty-state {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--elev-3);
}

html.nav-theme-light .empty-state__icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}

/* ======== 20-ambassador.css ======== */
/* —— Despacha Ambassador Program ————————————————————————————————————————
 *
 * The hub has to read as a game profile, not an accounting page, so the
 * hierarchy is deliberately steep: the hero (level + XP bar + rank) takes the
 * whole first fold, earnings and the share card sit side by side under it, and
 * everything else is a denser grid below.
 *
 * Colour discipline follows 14-gamification.css: the XP green carries every
 * progress bar, and gold is reserved for money and podium positions so a
 * number in gold always means "this is real Kz". Rarity colours are inherited
 * from the gamification partial rather than redefined — an achievement looks
 * the same whichever hub it is shown in.
 * ------------------------------------------------------------------------ */

:root {
  --amb-gold: #f5c842;
  --amb-gold-soft: rgba(245, 200, 66, 0.14);
  --amb-silver: #cbd5e1;
  --amb-bronze: #d09a6a;
  --amb-fire: #ff8a3d;
  --amb-fire-soft: rgba(255, 138, 61, 0.16);
}

/* —— Shell ————————————————————————————————————————————————————————————— */

.amb {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.amb__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.amb__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.amb-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.amb-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.amb-section__title {
  margin: 0;
  font-size: var(--text-title-3);
  letter-spacing: -0.015em;
}

.amb-section__meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* —— Hero: level, XP, rank ————————————————————————————————————————————— */

.amb-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(110, 231, 183, 0.12), transparent 58%),
    radial-gradient(100% 120% at 92% 8%, rgba(245, 200, 66, 0.1), transparent 55%),
    var(--surface-panel);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.amb-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}

.amb-hero__level {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.amb-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-pill);
  font-size: 26px;
  background: linear-gradient(140deg, rgba(245, 200, 66, 0.24), rgba(110, 231, 183, 0.16));
  border: 1px solid rgba(245, 200, 66, 0.32);
}

.amb-hero__level-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.amb-hero__level-sub {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.amb-hero__stats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.amb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.amb-chip--rank {
  border-color: rgba(245, 200, 66, 0.34);
  background: var(--amb-gold-soft);
  color: var(--amb-gold);
}

.amb-chip--streak {
  border-color: rgba(255, 138, 61, 0.34);
  background: var(--amb-fire-soft);
  color: var(--amb-fire);
}

/* XP bar. One accent, tabular numerals, and a width transition slow enough to
   read as progress rather than a layout jump. */
.amb-xp {
  display: grid;
  gap: 6px;
}

.amb-xp__track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.amb-xp__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xp-from), var(--xp-to));
  transition: width 900ms var(--ease);
  width: 0;
}

.amb-xp__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.amb-xp__labels strong {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .amb-xp__fill {
    transition: none;
  }
}

/* —— Next steps: the "what do I do now" strip ——————————————————————————— */

.amb-next {
  display: grid;
  gap: var(--space-2);
}

.amb-next__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  font-size: var(--text-body-s);
  line-height: 1.4;
}

.amb-next__item:first-child {
  border-color: rgba(110, 231, 183, 0.28);
  background: rgba(110, 231, 183, 0.07);
}

.amb-next__icon {
  flex: none;
  font-size: 18px;
  line-height: 1.2;
}

/* —— Two-column band: earnings + share ————————————————————————————————— */

.amb-band {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .amb-band {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

.amb-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.amb-card__title {
  margin: 0;
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Earnings. The available figure is the hero number — it is the one the
   ambassador can act on; lifetime is context. */
.amb-earnings__primary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.amb-earnings__amount {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--amb-gold);
  font-variant-numeric: tabular-nums;
}

.amb-earnings__label {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.amb-earnings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.amb-figure {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--stroke-secondary);
}

.amb-figure__value {
  font-size: var(--text-body-m);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.amb-figure__label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Share card. The code is the object of the page, so it is set large,
   monospaced-by-tabular-figures, and selectable. */
.amb-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(245, 200, 66, 0.42);
  background: var(--amb-gold-soft);
}

.amb-code__value {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 32px);
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--amb-gold);
  user-select: all;
  word-break: break-all;
}

.amb-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.amb-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
}

.amb-share__btn:hover {
  background: var(--surface-hover);
}

.amb-share__btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--xp-from), var(--xp-to));
  color: #04220f;
  flex: 1 1 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: var(--text-body-m);
}

.amb-link {
  font-size: var(--text-caption);
  color: var(--text-muted);
  word-break: break-all;
}

/* —— Stats strip ——————————————————————————————————————————————————————— */

.amb-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .amb-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* —— Missions ——————————————————————————————————————————————————————————— */

.amb-missions {
  display: grid;
  gap: var(--space-2);
}

.amb-mission {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-panel);
  border-left: 3px solid var(--rarity-common);
}

.amb-mission[data-rarity="RARE"] { border-left-color: var(--rarity-rare); }
.amb-mission[data-rarity="EPIC"] { border-left-color: var(--rarity-epic); }
.amb-mission[data-rarity="LEGENDARY"] { border-left-color: var(--rarity-legendary); }

.amb-mission--done {
  opacity: 0.62;
}

.amb-mission__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.amb-mission__title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 620;
}

.amb-mission__reward {
  flex: none;
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--xp-to);
}

.amb-mission__desc {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.amb-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.amb-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xp-from), var(--xp-to));
  transition: width 600ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .amb-bar__fill { transition: none; }
}

.amb-mission__count {
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* —— Achievements ——————————————————————————————————————————————————————— */

.amb-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

.amb-achievement {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-panel);
}

.amb-achievement--locked {
  opacity: 0.48;
  filter: grayscale(1);
}

.amb-achievement__icon {
  font-size: 26px;
  line-height: 1.1;
}

.amb-achievement--unlocked .amb-achievement__icon {
  filter: drop-shadow(0 0 10px var(--rarity-common-glow));
}

.amb-achievement[data-rarity="RARE"].amb-achievement--unlocked .amb-achievement__icon {
  filter: drop-shadow(0 0 10px var(--rarity-rare-glow));
}
.amb-achievement[data-rarity="EPIC"].amb-achievement--unlocked .amb-achievement__icon {
  filter: drop-shadow(0 0 10px var(--rarity-epic-glow));
}
.amb-achievement[data-rarity="LEGENDARY"].amb-achievement--unlocked .amb-achievement__icon {
  filter: drop-shadow(0 0 12px var(--rarity-legendary-glow));
}

.amb-achievement__name {
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.25;
}

.amb-achievement__meta {
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* —— Leaderboard ———————————————————————————————————————————————————————— */

.amb-board {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  overflow: hidden;
}

.amb-board__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--stroke-secondary);
}

.amb-board__row:last-child {
  border-bottom: 0;
}

.amb-board__row--you {
  background: rgba(110, 231, 183, 0.08);
  border-left: 3px solid var(--xp-to);
  padding-left: calc(var(--space-4) - 3px);
}

.amb-board__rank {
  font-family: var(--font-display);
  font-size: var(--text-title-3);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: center;
}

.amb-board__row[data-rank="1"] .amb-board__rank { color: var(--amb-gold); }
.amb-board__row[data-rank="2"] .amb-board__rank { color: var(--amb-silver); }
.amb-board__row[data-rank="3"] .amb-board__rank { color: var(--amb-bronze); }

.amb-board__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.amb-board__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--hairline);
}

.amb-board__name {
  font-size: var(--text-body-s);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amb-board__tags {
  display: flex;
  gap: 6px;
  font-size: var(--text-micro);
  color: var(--text-muted);
}

.amb-board__score {
  font-size: var(--text-body-m);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.amb-board__gap {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  color: var(--xp-to);
  background: rgba(110, 231, 183, 0.06);
  border-top: 1px solid var(--stroke-secondary);
}

.amb-board__ellipsis {
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.3em;
}

/* Sticky "your rank" bar on mobile — the one number a scrolled-away user
   still needs to see. */
.amb-sticky-rank {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  background: rgba(12, 12, 14, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body-s);
  font-weight: 600;
}

@media (min-width: 860px) {
  .amb-sticky-rank {
    display: none;
  }
}

/* —— Tabs (period / metric switchers) ——————————————————————————————————— */

.amb-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  overflow-x: auto;
  scrollbar-width: none;
}

.amb-tabs::-webkit-scrollbar {
  display: none;
}

.amb-tab {
  flex: none;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.amb-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-text);
}

/* —— Competition banner ————————————————————————————————————————————————— */

.amb-competition {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(245, 200, 66, 0.3);
  background:
    radial-gradient(110% 160% at 88% 0%, rgba(245, 200, 66, 0.18), transparent 60%),
    var(--surface-panel);
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.amb-competition__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-2);
  letter-spacing: -0.02em;
}

.amb-competition__prizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.amb-competition__prize {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-caption);
  font-weight: 600;
}

/* —— Empty states ——————————————————————————————————————————————————————— */

.amb-empty {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.amb-empty__icon {
  font-size: 34px;
}

.amb-empty__title {
  margin: 0;
  font-size: var(--text-title-3);
  letter-spacing: -0.015em;
}

.amb-empty__body {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

/* —— Landing page ——————————————————————————————————————————————————————— */

.amb-landing {
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(var(--space-6), 12vh, 96px) var(--space-4) var(--space-6);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.amb-landing__gift {
  font-size: 52px;
  line-height: 1;
}

.amb-landing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.amb-landing__body {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-body);
  color: var(--text-muted);
}

.amb-landing__code {
  font-size: var(--text-caption);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* —— Onboarding / join card ————————————————————————————————————————————— */

.amb-join {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(110, 231, 183, 0.1), transparent 58%),
    var(--surface-panel);
  text-align: center;
  justify-items: center;
}

.amb-join__perks {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  width: 100%;
  text-align: left;
}

@media (min-width: 640px) {
  .amb-join__perks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.amb-join__perk {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-secondary);
  background: var(--surface-raised);
  font-size: var(--text-caption);
}

.amb-join__perk strong {
  font-size: var(--text-body-m);
}

/* —— Checkout code field ———————————————————————————————————————————————— */

.amb-checkout {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.amb-checkout__row {
  display: flex;
  gap: var(--space-2);
  /* A grid item defaults to `min-width: auto`, so this row could not shrink
     below the input's ~177px UA intrinsic width plus the button — in a narrow
     column (the cart summary on a phone) that pushed "Aplicar" out past the
     card's own border. */
  min-width: 0;
}

/* `.shop-input` had no definition anywhere in the stylesheets, so this field
   rendered as a raw UA control — white fill, black text, inset 3D border — on
   /checkout/, /checkout/ao/ and now the cart. It is only used here and on the
   admin ambassadors screen, so it is defined here, matching `.field input`. */
.shop-input {
  width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-m);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.shop-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.shop-input:hover {
  border-color: var(--stroke-secondary);
}

.shop-input:focus-visible {
  border-color: var(--text-muted);
  box-shadow: var(--focus-ring);
}

html.nav-theme-light .shop-input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
}

.amb-checkout__input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.amb-checkout__applied {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--xp-to);
}

/* --xp-to is #32d74b, which is 1.92:1 on white at 13px — this line was
   effectively unreadable in light mode wherever the field appears (checkout,
   the AOA checkout, and now the cart). --ok is the vetted light-mode green
   (5.78:1 on white). */
html.nav-theme-light .amb-checkout__applied {
  color: var(--ok);
}

/* —— Celebration ————————————————————————————————————————————————————————
   A single pulse on the element that changed, not a confetti cannon. Anything
   more competes with the numbers the page exists to show. */

@keyframes amb-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.amb-celebrate {
  animation: amb-pop 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .amb-celebrate {
    animation: none;
  }
}

/* ======== 21-cart.css ======== */
/* ---------------------------------------------------------------------------
   Cart (/carrinho/).

   The cart used to be the checkout's table rendered a second time: five columns
   on desktop, stacked label/value rows below 720px, and the total, the CTA and
   the "what happens next" line all sharing one box at the bottom of a 720px
   panel. It read as a receipt, not as a decision surface.

   This layer replaces that with two things the checkout does not have:

     1. Line *cards* at every width. The markup is still a <table> — the e2e
        suite counts `#cart-body tr`, the onboarding tour points at `#cart-table`
        — but it is `role="presentation"` and every row lays itself out as a
        card, so there is no sideways scroll and no invented breakpoint where
        the layout changes character.
     2. A summary that is its own surface and, on desktop, sticks. Price, total
        and CTA stop scrolling away from the items they describe.

   Everything here is token-only (`--text`, `--surface`, `--hairline`,
   `--elev-*`, `--accent`), so light mode comes from the `html.nav-theme-light`
   remap in 01-base.css rather than from a parallel set of overrides. The two
   exceptions are noted where they occur.
   --------------------------------------------------------------------------- */

.shop-cart-main {
  /* Wider than the 720px checkout panel: the two-column layout needs it, and
     the cart is the one commerce page with two independent columns. */
  max-width: 1140px;
}

.cart-shell {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}

/* —— Header ————————————————————————————————————————————————————————— */

.cart-head {
  margin: 0 0 var(--space-5);
}

.cart-head__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text);
}

.cart-head__count {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
  /* The count is the one line that changes as the shopper edits; a fixed
     min-height keeps the steps below it from jumping when it does. */
  min-height: 1.45em;
}

.cart-head__count strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cart-head .checkout-steps {
  margin-top: calc(var(--space-4) + var(--space-1));
  margin-bottom: 0;
}

/* —— Two-column layout ———————————————————————————————————————————————— */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* 1140px, not a rounder number: below it the items column can no longer hold
   the wide card (see the container query on .cart-lines-col), and a two-column
   cart whose items have collapsed to the stacked layout is worse than one
   column of wide cards. */
@media (min-width: 1140px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: calc(var(--space-5) + var(--space-2));
  }
}

.cart-lines-col {
  min-width: 0;
  /* The card layout answers to the width of *this column*, not the viewport —
     the column is full-bleed at 900px and 676px wide at 1200px, so a media
     query would get one of those two cases wrong. */
  container-type: inline-size;
  container-name: cart-lines;
}

.cart-lines-col__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.cart-lines-col__head .checkout-section-title {
  margin: 0;
}

.cart-lines-col__count {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* —— Line cards ————————————————————————————————————————————————————— */

/* The table is presentational (role="presentation" in the markup): these rules
   dissolve the table box model so rows can be cards at every width. */
.cart-lines {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
}

.cart-lines tbody {
  display: block;
}

/* The rhythm is a margin rather than a flex `gap` on purpose: a row leaving the
   cart animates its own height and margin to zero, and a gap owned by the
   parent would hold a 12px hole open under it for the whole transition. */
.cart-line {
  display: block;
  margin-bottom: var(--space-3);
}

.cart-line:last-child {
  margin-bottom: 0;
}

/* Narrow: image and text on the first row with the text spanning to the card
   edge — the name is the thing a shopper scans, so it gets the width — and
   quantity, subtotal and actions on a second row. Wide: one left-to-right
   read, image → name → quantity → subtotal → actions. */
.cart-line__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media info  info"
    "qty   total actions";
  align-items: center;
  gap: var(--space-3) var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
    transform 0.22s var(--ease);
}

@container cart-lines (min-width: 660px) {
  .cart-qty__btn {
    width: 34px;
    height: 34px;
  }

  .cart-line__amount {
    font-size: var(--text-title-3);
  }

  .cart-line__name {
    -webkit-line-clamp: 2;
  }

  .cart-line__cell {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "media info qty total actions";
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .cart-line__media {
    width: 92px;
    height: 92px;
  }

  .cart-line__actions {
    align-self: center;
    gap: var(--space-2);
    margin-left: var(--space-1);
  }
}

/* Without container queries the stacked card is the whole story, which is
   usable but wastes a wide screen; approximate it from the viewport instead. */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .cart-line__amount {
      font-size: var(--text-title-3);
    }

    .cart-line__name {
      -webkit-line-clamp: 2;
    }

    .cart-line__cell {
      grid-template-columns: auto minmax(0, 1fr) auto auto auto;
      grid-template-areas: "media info qty total actions";
      padding: var(--space-4);
      gap: var(--space-4);
    }

    .cart-line__media {
      width: 92px;
      height: 92px;
    }

    .cart-line__actions {
      align-self: center;
      gap: var(--space-2);
      margin-left: var(--space-1);
    }
  }
}

@media (hover: hover) {
  .cart-line__cell:hover {
    border-color: var(--stroke-secondary);
    box-shadow: var(--elev-3);
    transform: translateY(-1px);
  }
}

/* Thumbnail ---------------------------------------------------------------- */

.cart-line__media {
  grid-area: media;
  display: block;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  overflow: hidden;
  text-decoration: none;
}

.cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.42s var(--ease-settle);
}

@media (hover: hover) {
  .cart-line__cell:hover .cart-line__media img {
    transform: scale(1.045);
  }
}

.cart-line__media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Text block --------------------------------------------------------------- */

.cart-line__info {
  grid-area: info;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cart-line__name {
  /* Two lines then ellipsis: a long title must not be able to set the card's
     height against a 92px image. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--text);
  text-decoration: none;
}

.cart-line__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-line__seller {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-line__seller a {
  color: inherit;
  text-decoration: none;
}

.cart-line__seller a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-line__unit {
  margin: var(--space-1) 0 0;
  font-size: var(--text-ui);
  line-height: 1.3;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cart-line__unit strong {
  font-weight: 600;
  color: var(--text);
}

/* Stock ceiling. Muted by default — "restam 3" is information, not a warning —
   and only escalates when the line cannot be ordered as it stands. */
.cart-line__stock {
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.cart-line__stock[hidden] {
  display: none;
}

.cart-line__stock.is-danger {
  color: var(--danger);
}

/* Controls + line total ---------------------------------------------------- */

.cart-line__total {
  grid-area: total;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.cart-line__total-label {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cart-line__amount {
  font-size: var(--text-body-m);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cart-line__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  align-self: start;
}

/* Quantity stepper --------------------------------------------------------- */

.cart-qty {
  grid-area: qty;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}

.cart-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.12s var(--ease),
    opacity 0.16s var(--ease);
}

@media (hover: hover) {
  .cart-qty__btn:hover:not(:disabled) {
    background: var(--surface-hover);
  }
}

.cart-qty__btn:active:not(:disabled) {
  transform: scale(0.88);
}

.cart-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-qty__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cart-qty__value {
  /* A bare number input carries a ~20ch UA default width, which was stretching
     the whole quantity column across the card. */
  width: 3.25ch;
  min-width: 3.25ch;
  padding: 0 var(--space-1);
  text-align: center;
  font-size: var(--text-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: transparent;
  border: 0;
  /* Native spinners duplicate the −/+ buttons beside them. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-qty__value::-webkit-outer-spin-button,
.cart-qty__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-qty__value:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* Icon actions (remove, save) ---------------------------------------------- */

/* On the stacked card these icons sit on the card's own control row, where a
   bare glyph beside a pill stepper reads as decoration — so they carry an edge
   there, and lose it in the wide layout where the column makes them legible. */
.cart-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease),
    border-color 0.16s var(--ease), transform 0.12s var(--ease);
}

@container cart-lines (max-width: 659.98px) {
  .cart-icon-btn {
    border-color: var(--hairline);
  }
}

.cart-icon-btn svg {
  display: block;
  width: 17px;
  height: 17px;
}

@media (hover: hover) {
  .cart-icon-btn:hover:not(:disabled) {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--hairline);
  }

  .cart-icon-btn--danger:hover:not(:disabled) {
    color: var(--danger);
  }
}

.cart-icon-btn:active:not(:disabled) {
  transform: scale(0.9);
}

.cart-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cart-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cart-icon-btn.is-saved {
  color: var(--ok);
}

/* —— Continue shopping ————————————————————————————————————————————————— */

.cart-continue {
  margin: var(--space-4) 0 0;
  font-size: var(--text-ui);
}

.cart-continue a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.16s var(--ease);
}

.cart-continue a:hover {
  color: var(--text);
}

.cart-continue svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease-settle);
}

.cart-continue a:hover svg {
  transform: translateX(-3px);
}

/* —— Order summary ————————————————————————————————————————————————————— */

.cart-summary-col {
  min-width: 0;
}

@media (min-width: 1140px) {
  .cart-summary-col {
    position: sticky;
    /* Clear of the sticky header, with a breath of margin. */
    top: calc(var(--space-5) + 64px);
  }
}

.cart-summary {
  padding: calc(var(--space-4) + var(--space-2)) calc(var(--space-4) + var(--space-1))
    calc(var(--space-4) + var(--space-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-2), var(--sheen);
}

.cart-summary__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--text-overline-ls);
  line-height: var(--text-overline-lh);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cart-summary__rows {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-ui);
  line-height: 1.35;
}

.cart-summary__row dt {
  margin: 0;
  color: var(--text-muted);
}

.cart-summary__row dd {
  margin: 0;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cart-summary__row dd.is-muted {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: calc(var(--space-4) + var(--space-1));
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.cart-summary__total-label {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
}

.cart-summary__total-amount {
  font-size: clamp(1.4rem, 4vw, 1.68rem);
  font-weight: 650;
  letter-spacing: -0.032em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cart-summary__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-micro);
  line-height: 1.4;
  color: var(--text-muted);
}

.cart-summary__note:empty {
  display: none;
}

/* Checkout CTA ------------------------------------------------------------- */

/* Deliberately smaller than the sitewide `.btn` (15px/17px): this is the only
   primary on the card, so it does not need to shout to be found, and a shorter
   button lets the total above it stay the loudest thing in the summary.
   `min-height` holds the 44px touch target that the reduced padding gives up. */
.cart-cta {
  position: relative;
  margin-top: calc(var(--space-4) + var(--space-2));
  padding: 11px 20px;
  min-height: 44px;
  font-size: var(--text-body-m);
  gap: var(--space-2);
  box-shadow: var(--elev-2);
  transition: transform 0.18s var(--ease-settle), box-shadow 0.24s var(--ease),
    opacity 0.2s var(--ease);
}

@media (hover: hover) {
  .cart-cta:hover:not(.btn--disabled):not(.is-busy) {
    opacity: 1;
    transform: translateY(-1.5px);
    box-shadow: var(--elev-4);
  }
}

.cart-cta:active:not(.btn--disabled):not(.is-busy) {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--elev-1);
}

.cart-cta__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity 0.16s var(--ease);
}

.cart-cta__arrow {
  width: 15px;
  height: 15px;
  transition: transform 0.24s var(--ease-settle);
}

@media (hover: hover) {
  .cart-cta:hover:not(.btn--disabled):not(.is-busy) .cart-cta__arrow {
    transform: translateX(3px);
  }
}

.cart-cta__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
  color: var(--accent-text);
}

.cart-cta.is-busy {
  cursor: progress;
}

.cart-cta.is-busy .cart-cta__label {
  opacity: 0;
}

.cart-cta.is-busy .cart-cta__spinner {
  opacity: 1;
  animation: cart-spin 0.7s linear infinite;
}

@keyframes cart-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Ambassador code ----------------------------------------------------------

   The shared checkout field, sized down for the summary card: it sits between
   the price rows and the total, so it must read as one more line of the
   summary rather than as a second form competing with the CTA.
   ------------------------------------------------------------------------- */

.cart-amb {
  margin-top: var(--space-4);
}

.cart-amb[hidden] {
  display: none;
}

.cart-amb .amb-checkout {
  padding: var(--space-3);
  background: transparent;
  border-style: dashed;
}

.cart-amb .amb-checkout__input {
  padding: 8px 12px;
  min-height: 38px;
  font-size: var(--text-ui);
}

.cart-amb .amb-share__btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  min-height: 38px;
  font-size: var(--text-caption);
}

.cart-amb .status {
  margin-top: var(--space-1);
  min-height: 0;
  font-size: var(--text-caption);
}

/* Reassurance -------------------------------------------------------------- */

.cart-assurances {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: calc(var(--space-4) + var(--space-1)) 0 0;
  padding: 0;
  list-style: none;
}

.cart-assurances li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.cart-assurances svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.cart-summary .checkout-trust {
  margin-top: var(--space-3);
}

/* The trust line under the CTA also carries the reason checkout is blocked;
   in that state it is an error, not a reassurance. */
.cart-cta.btn--disabled + .checkout-trust {
  color: var(--danger);
}

/* —— Sticky mobile checkout bar ————————————————————————————————————————

   Only shown once the real CTA has scrolled out of view, and always above the
   bottom tab bar — the storefront's primary nav on phones — so it never covers
   a control the shopper needs.
   ------------------------------------------------------------------------- */

.cart-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  background: var(--surface-panel);
  box-shadow: var(--elev-5);
  /* Off by default; the page script flips .is-visible. */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.28s var(--ease-settle);
}

@media (max-width: 719px) {
  .cart-stickybar {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--space-3);
  }
}

@media (min-width: 1140px) {
  /* The desktop summary is sticky on its own. */
  .cart-stickybar {
    display: none;
  }
}

/* Between the phone and the two-column breakpoint the bar is still the right
   answer — the summary is a whole screen below — but a bar whose content runs
   to the window edge reads as a phone artifact on a laptop. Align it with the
   page gutter instead. */
@media (min-width: 760px) {
  .cart-stickybar {
    padding-inline: max(var(--space-4), calc((100vw - 1076px) / 2));
  }
}

/* `display: flex` above would otherwise defeat the attribute. */
.cart-stickybar[hidden] {
  display: none;
}

.cart-stickybar.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cart-stickybar__totals {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cart-stickybar__label {
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cart-stickybar__amount {
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: -0.026em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-stickybar .btn {
  width: auto;
  flex: 0 1 auto;
  max-width: 62%;
  margin-top: 0;
  padding: 10px 20px;
  min-height: 44px;
  font-size: var(--text-ui);
}

/* —— Empty state ——————————————————————————————————————————————————————— */

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--space-6) + var(--space-3)) var(--space-4)
    calc(var(--space-6) + var(--space-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-2), var(--sheen);
}

.cart-empty__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: calc(var(--space-4) + var(--space-2));
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.cart-empty__art svg {
  width: 40px;
  height: 40px;
}

.cart-empty__title {
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
  font-size: clamp(1.24rem, 3.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--text);
}

.cart-empty__body {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  text-wrap: pretty;
  font-size: var(--text-body-s);
  line-height: 1.5;
  color: var(--text-muted);
}

.cart-empty__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: calc(var(--space-5) + var(--space-1));
}

.cart-empty__actions .btn {
  width: auto;
  margin-top: 0;
  padding: 11px 22px;
  min-height: 44px;
  font-size: var(--text-ui);
  gap: var(--space-2);
}

.cart-empty__actions .btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.24s var(--ease-settle);
}

@media (hover: hover) {
  .cart-empty__actions .btn:hover svg {
    transform: translateX(3px);
  }
}

.cart-empty__link {
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.cart-empty__link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* —— Skeletons ————————————————————————————————————————————————————————

   Shaped like the cards they stand in for, so the first paint after load is a
   swap of content rather than a change of layout.
   ------------------------------------------------------------------------- */

.cart-sk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1140px) {
  .cart-sk {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: calc(var(--space-5) + var(--space-2));
  }
}

.cart-sk__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.cart-sk__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) calc(var(--space-4) + var(--space-1));
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 760px) {
  .cart-sk__line {
    padding: var(--space-4);
  }
}

.cart-sk__thumb {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
}

@media (min-width: 760px) {
  .cart-sk__thumb {
    width: 92px;
    height: 92px;
  }
}

.cart-sk__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cart-sk__bar {
  height: 12px;
  border-radius: var(--radius-pill);
}

.cart-sk__bar--title {
  width: min(72%, 300px);
  height: 15px;
}

.cart-sk__bar--meta {
  width: min(42%, 170px);
}

.cart-sk__bar--price {
  width: min(30%, 120px);
}

.cart-sk__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: calc(var(--space-4) + var(--space-2)) calc(var(--space-4) + var(--space-1));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cart-sk__bar--row {
  width: 100%;
}

.cart-sk__bar--total {
  width: 60%;
  height: 22px;
  margin-top: var(--space-2);
}

.cart-sk__bar--cta {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}

/* —— Motion ————————————————————————————————————————————————————————————

   Short, transform/opacity only, and every one of them is feedback for
   something the shopper just did (or for content arriving). Nothing here loops
   except the two loading indicators.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .cart-line--enter .cart-line__cell {
    animation: cart-line-in 0.34s var(--ease-settle) both;
    animation-delay: var(--cart-line-delay, 0s);
  }

  .cart-summary--enter {
    animation: cart-line-in 0.4s var(--ease-settle) both;
    animation-delay: 0.06s;
  }

  .cart-empty--enter {
    animation: cart-empty-in 0.44s var(--ease-settle) both;
  }
}

@keyframes cart-line-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cart-empty-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Leaving: the card fades and slides while the row it sits in collapses, so the
   cards below travel up rather than snapping into the gap. */
.cart-line--leaving {
  overflow: hidden;
  transition: height 0.26s var(--ease-settle), opacity 0.2s var(--ease),
    margin 0.26s var(--ease-settle);
}

.cart-line--leaving .cart-line__cell {
  transform: translateX(14px) scale(0.985);
  opacity: 0;
  transition: transform 0.24s var(--ease-settle), opacity 0.2s var(--ease);
  pointer-events: none;
}

/* Value changed: one quick lift, no colour flash — the number itself is the
   message, and a green pulse on a price reads as a discount. */
@media (prefers-reduced-motion: no-preference) {
  .cart-value--bump {
    animation: cart-value-bump 0.34s var(--ease-settle);
  }
}

@keyframes cart-value-bump {
  0% {
    transform: translateY(0);
  }
  38% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* A line whose quantity is still being written to the server. Deliberately
   almost invisible: the number has already changed, this only says the write
   is in flight. */
.cart-line.is-syncing .cart-line__amount {
  opacity: 0.62;
  transition: opacity 0.18s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .cart-line__cell,
  .cart-line__media img,
  .cart-cta,
  .cart-stickybar,
  .cart-line--leaving,
  .cart-line--leaving .cart-line__cell {
    transition-duration: 0.01ms;
  }

  .cart-cta.is-busy .cart-cta__spinner {
    animation-duration: 1.6s;
  }
}

/* —— Light theme ————————————————————————————————————————————————————————

   Base tokens already remap under `html.nav-theme-light`, so this is only the
   two places where a token is not enough: `--surface` is a near-opaque white
   there, which leaves the item cards and the page ground the same colour, and
   the sticky bar wants the page ground rather than the panel colour.
   ------------------------------------------------------------------------- */

html.nav-theme-light .cart-line__cell,
html.nav-theme-light .cart-summary,
html.nav-theme-light .cart-empty,
html.nav-theme-light .cart-sk__line,
html.nav-theme-light .cart-sk__summary {
  background: #fff;
}

html.nav-theme-light .cart-qty,
html.nav-theme-light .cart-line__media,
html.nav-theme-light .cart-empty__art {
  background: var(--bg-0);
}

html.nav-theme-light .cart-stickybar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ======== 22-account.css ======== */
/* ---------------------------------------------------------------------------
   Account hub (/account/).

   The account page used to be a profile *stub*: an avatar, four definition
   rows, a flat list of six links, and — filling the whole right column — a
   card whose entire content was "JPG, PNG ou WebP — até 2 MB." Everything a
   signed-in person actually comes here for (orders, wishlist, rewards,
   notifications, the ambassador code, the store) lived somewhere else and was
   reachable only from an icon in the top nav.

   This layer turns it into a hub with three regions:

     1. `.account-nav` — the section list. A sticky sidebar from 1000px, and a
        grid of tap targets below it. One component, one DOM node: the mobile
        "quick actions" and the desktop sidebar are the same links, so they can
        never drift apart or say different things.
     2. `.account-col--main` — identity, the one personalised next step, level
        progress, recent orders, the store (sellers), wishlist.
     3. `.account-col--rail` — ambassador, activity, help. Folds under the main
        column below 1000px, which is why nothing time-critical lives here.

   Cards are `.account-card`: one surface, one hairline, one radius, `--elev-1`.
   No gradients, no glass. The three visual accents in the whole layer are the
   XP bar fill, the level ring, and the next-step card's left edge — each marks
   a number that changes, which is the only thing worth colouring.

   Token-only, so `html.nav-theme-light` in 01-base.css themes it. The two
   exceptions are marked `LIGHT:` where they occur — both are the same problem
   the cart layer hit: `--surface` is a near-opaque white in light mode, so a
   card painted with it dissolves into a white page.
   --------------------------------------------------------------------------- */

.shop-account-main {
  width: 100%;
  max-width: 1240px;
  align-items: stretch;
}

.account-hub {
  width: 100%;
  min-width: 0;
}

/* —— Greeting ————————————————————————————————————————————————————————— */

.account-greeting {
  margin: 0 0 var(--space-5);
}

.account-greeting__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-overline);
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.account-greeting__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text);
}

.account-greeting__sub {
  /* Fixed min-height: the level and XP land one request after the name, and
     without it every card below jumps down when they arrive. */
  margin: var(--space-2) 0 0;
  min-height: 1.45em;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
}

.account-greeting__sub strong {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* —— Page grid ———————————————————————————————————————————————————————— */

/* Named areas rather than source order: between 1000px and 1240px the rail has
   to fold under the *main* column, and with plain auto-placement it would drop
   into the second row of the first column instead — i.e. underneath the 216px
   sidebar. */
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "nav"
    "main"
    "rail";
  gap: var(--space-5);
  align-items: start;
}

.account-nav {
  grid-area: nav;
}

.account-col--main {
  grid-area: main;
}

.account-col--rail {
  grid-area: rail;
}

@media (min-width: 1000px) {
  .account-grid {
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-areas:
      "nav main"
      "nav rail";
    gap: calc(var(--space-5) + var(--space-2));
  }
}

/* 1240px, not a rounder number: it is where a 330px rail can sit beside a main
   column still wide enough to hold a three-up order card. */
@media (min-width: 1240px) {
  .account-grid {
    grid-template-columns: 216px minmax(0, 1fr) 330px;
    grid-template-areas: "nav main rail";
  }
}

.account-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* —— Section nav / quick actions —————————————————————————————————————— */

.account-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

@media (min-width: 1000px) {
  .account-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    position: sticky;
    /* Clears the sticky store header (64px) plus a gutter — same offset the
       cart's sticky summary uses, so the two pages settle at the same line. */
    top: calc(var(--space-5) + 64px);
  }
}

.account-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 48px tall at the smallest text size — a comfortable thumb target, which is
     why the mobile form of this nav needs no separate styles. */
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  letter-spacing: var(--text-ui-ls);
  font-weight: 500;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

@media (min-width: 1000px) {
  .account-nav__item {
    /* On desktop the sidebar must not read as a wall of buttons: the border and
       the fill only appear on the active item and on hover. */
    border-color: transparent;
    background: transparent;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-sm);
  }
}

.account-nav__item:hover {
  background: var(--surface-hover);
  border-color: var(--hairline);
}

@media (prefers-reduced-motion: no-preference) {
  .account-nav__item:hover {
    transform: translateX(2px);
  }
}

.account-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-nav__item--active {
  background: var(--surface-hover);
  border-color: var(--hairline);
  font-weight: 600;
}

.account-nav__item--active::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin: -2px 0 -2px calc(var(--space-3) * -1 + 3px);
  border-radius: var(--radius-pill);
  background: var(--text);
}

.account-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.account-nav__item--active .account-nav__icon,
.account-nav__item:hover .account-nav__icon {
  color: var(--text);
}

.account-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (min-width: 1000px) {
  /* The sidebar column is a fixed width, so a label that does not fit truncates
     rather than reflowing the whole rail. The tile form has no fixed width and
     wraps instead. */
  .account-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.account-nav__badge {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: var(--text-micro);
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* In the tile form the badge lifts out of the row and sits on the icon — the
   same trick the mobile tab bar uses. Inline it took ~26px out of a 167px tile,
   which forced "Notificações" to break mid-word. The offsets are absolute
   because the two boxes it sits between are: `padding: var(--space-3)` (12px)
   and a 20px icon, so the icon's top-right corner is a fixed point.

   The sidebar keeps the badge inline and end-aligned, which is the conventional
   read and has the room for it. */
@media (max-width: 999px) {
  .account-nav__badge {
    position: absolute;
    top: 8px;
    left: 22px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 15px;
    /* Rings the badge in the tile's own fill so it reads as sitting above the
       icon rather than merging with it. */
    border: 1px solid var(--surface-panel);
  }
}

.account-nav__badge--quiet {
  background: var(--surface-hover);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  line-height: 16px;
}

/* —— Card shell ——————————————————————————————————————————————————————— */

.account-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: var(--space-4);
  min-width: 0;
}

@media (min-width: 720px) {
  .account-card {
    padding: var(--space-5);
  }
}

/* LIGHT: --surface is a near-opaque white, so a card painted with it vanishes
   into the page. Raised cards get real white and their wells get the page
   ground, which is the same treatment the cart layer uses. */
html.nav-theme-light .account-card {
  background: #fff;
}

.account-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}

.account-card__title {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  letter-spacing: var(--text-title-3-ls);
  font-weight: 600;
  color: var(--text);
}

.account-card__hint {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.account-card__link {
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}

.account-card__link:hover {
  color: var(--text);
}

.account-card__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* Staggered entrance. Cards arrive one API response at a time, so the stagger
   is per-card and set inline by the page script rather than by nth-child —
   whichever card resolves third should feel like the third, not like the third
   in the markup. */
@media (prefers-reduced-motion: no-preference) {
  .account-card--enter,
  .account-nav__item {
    animation: account-card-in 0.42s var(--ease-settle) both;
    animation-delay: var(--enter-delay, 0s);
  }
}

/* Content arriving in place of a skeleton. The card box is already on screen,
   so only the new content fades — animating the box again would read as a
   flash rather than as an arrival. */
@media (prefers-reduced-motion: no-preference) {
  .account-fade-in {
    animation: account-fade-in 0.3s var(--ease) both;
  }
}

@keyframes account-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes account-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Identity ————————————————————————————————————————————————————————— */

.account-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.account-identity__avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-hover);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

@media (min-width: 720px) {
  .account-identity__avatar {
    width: 88px;
    height: 88px;
    font-size: 30px;
  }
}

.account-identity__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The file input covers the avatar so the whole circle is the picker — the
   visible "Alterar foto" button below is a second, labelled route to the same
   input for anyone who cannot guess that an image is a button. */
.account-identity__file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.account-identity__avatar:hover,
.account-identity__avatar:has(.account-identity__file:focus-visible) {
  border-color: var(--text-muted);
}

.account-identity__avatar:has(.account-identity__file:focus-visible) {
  box-shadow: var(--focus-ring);
}

.account-identity__body {
  min-width: 0;
}

.account-identity__name {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  letter-spacing: var(--text-title-3-ls);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.account-identity__email {
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.account-identity__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.account-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--text-micro);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
}

.account-tag--ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.account-tag--warn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.account-identity__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.account-identity__status {
  grid-column: 1 / -1;
  margin: 0;
}

.account-identity__status:empty {
  display: none;
}

/* —— Next step ———————————————————————————————————————————————————————— */

/* The one line that answers "what should I do now?". It is a card, not a
   banner: it can be absent (a caught-up account gets nothing here rather than
   a hollow "all done" strip), and when present it is the first thing under the
   identity card. */
.account-nextstep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

html.nav-theme-light .account-nextstep {
  background: #fff;
}

.account-nextstep:hover {
  background: var(--surface-hover);
  box-shadow: var(--elev-2);
}

@media (prefers-reduced-motion: no-preference) {
  .account-nextstep:hover {
    transform: translateY(-1px);
  }
}

.account-nextstep:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-nextstep--urgent {
  border-left-color: var(--danger);
}

.account-nextstep__icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.account-nextstep__body {
  flex: 1 1 auto;
  min-width: 0;
  /* Spans, not paragraphs: the whole card is one <a>, and a block-level child
     of an inline-content anchor is legal but noisier to style than this. */
  display: block;
}

.account-nextstep__title {
  display: block;
  margin: 0;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  font-weight: 600;
  color: var(--text);
}

.account-nextstep__sub {
  display: block;
  margin: 2px 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.account-nextstep__chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .account-nextstep:hover .account-nextstep__chevron {
    transform: translateX(3px);
  }
}

/* —— Progress ————————————————————————————————————————————————————————— */

.account-progress__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.account-ring {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}

.account-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.account-ring__track {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 6;
}

.account-ring__fill {
  fill: none;
  stroke: var(--ok);
  stroke-width: 6;
  stroke-linecap: round;
}

/* The bar and the ring are the only two things on this page that animate a
   value rather than a state, so their transitions live behind the guard —
   otherwise the script's reduced-motion path (which jumps straight to the final
   number) would still sweep the fill across the card. */
@media (prefers-reduced-motion: no-preference) {
  .account-ring__fill {
    transition: stroke-dashoffset 0.9s var(--ease-settle);
  }

  .account-bar__fill {
    transition: width 0.9s var(--ease-settle);
  }
}

.account-ring__value {
  position: relative;
  font-size: var(--text-body-s);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.account-progress__level {
  min-width: 0;
}

.account-progress__level-name {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  letter-spacing: var(--text-title-3-ls);
  font-weight: 600;
  color: var(--text);
}

.account-progress__level-meta {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.account-bar {
  height: 8px;
  margin: var(--space-4) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.account-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ok);
}

.account-progress__xp {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.account-stat {
  /* Grid items default to min-width:auto, so a tile whose content cannot wrap
     pushes its own track wider than 1fr and escapes the card. Both strings here
     are unbreakable by nature — the label is a single word with 0.07em tracking,
     and pt-AO money uses non-breaking group separators — so the tile has to be
     allowed to shrink and its text allowed to wrap. */
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-align: center;
}

html.nav-theme-light .account-stat {
  background: var(--bg-0);
}

.account-stat__value {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: var(--text-title-3);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.account-stat__label {
  display: block;
  min-width: 0;
  /* `hyphens` needs the document language, which base.html sets (<html lang="pt">).
     It only ever fires for a word too long for its tile — "Referências" at 88px —
     and beats the word hanging outside the border. */
  overflow-wrap: break-word;
  hyphens: auto;
  margin-top: 3px;
  font-size: var(--text-micro);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* —— Headline figure ——————————————————————————————————————————————————— */

/* Money does not belong in a square counter tile beside single-digit stats. A
   kwanza total is fifteen characters ("3 330 137,70 Kz") and cannot break, so at
   88–137px it overflowed however the tile was tuned. It gets its own full-width
   row instead, which also puts the size on the number that matters most. */
.account-headline {
  margin: 0 0 var(--space-4);
}

.account-headline__label {
  display: block;
  margin: 0 0 2px;
  font-size: var(--text-micro);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.account-headline__value {
  display: block;
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.6rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.account-headline__note {
  display: block;
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

/* The headline already opens the card body, so the counters below it do not
   need the top margin the standalone grid carries. */
.account-headline + .account-stats {
  margin-top: 0;
}

/* —— Orders preview ——————————————————————————————————————————————————— */

.account-orders__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.account-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

html.nav-theme-light .account-order {
  background: var(--bg-0);
}

.account-order:hover {
  background: var(--surface-hover);
  border-color: var(--text-muted);
}

.account-order:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-order__ref {
  margin: 0;
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.account-order__meta {
  grid-column: 1;
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.account-order__side {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.account-order__total {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* —— Wishlist preview ————————————————————————————————————————————————— */

.account-wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-2);
}

.account-wish {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
  text-decoration: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.account-wish:hover {
  border-color: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .account-wish:hover {
    transform: translateY(-2px);
  }
}

.account-wish:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-wish__media {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  background: var(--surface-hover);
}

.account-wish__name {
  /* -webkit-box, not block: two-line clamp is the only reliable cross-browser
     way to keep a long product name from making one tile taller than its row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 6px var(--space-2) var(--space-2);
  font-size: var(--text-micro);
  line-height: 1.35;
  color: var(--text-muted);
}

/* —— Store (seller) ——————————————————————————————————————————————————— */

.account-store__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

/* —— Ambassador ——————————————————————————————————————————————————————— */

.account-code {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

html.nav-theme-light .account-code {
  background: var(--bg-0);
}

.account-code__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-body-m);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— Activity ————————————————————————————————————————————————————————— */

.account-activity__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.account-activity__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}

.account-activity__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-activity__item:first-child {
  padding-top: 0;
}

.account-activity__icon {
  font-size: 14px;
  line-height: 1.4;
}

.account-activity__label {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text);
}

.account-activity__when {
  font-size: var(--text-micro);
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
}

.account-activity__reward {
  grid-column: 2 / -1;
  margin: 0;
  font-size: var(--text-micro);
  line-height: 1.4;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* —— Empty states ————————————————————————————————————————————————————— */

.account-empty {
  padding: var(--space-4) 0 var(--space-2);
  text-align: center;
}

.account-empty__icon {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: var(--space-3);
  /* Decorative: the heading below carries the meaning, so it is hidden from
     assistive tech at the markup level and only sized here. */
  opacity: 0.85;
}

.account-empty__title {
  margin: 0;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  font-weight: 600;
  color: var(--text);
}

.account-empty__body {
  margin: var(--space-2) auto 0;
  max-width: 34ch;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.account-empty .btn {
  margin-top: var(--space-4);
}

/* —— Skeletons ———————————————————————————————————————————————————————— */

.account-skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
}

.account-skeleton--line {
  height: 12px;
  margin-bottom: var(--space-2);
}

.account-skeleton--line:last-child {
  margin-bottom: 0;
  width: 60%;
}

.account-skeleton--row {
  height: 58px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.account-skeleton--head {
  height: 88px;
  border-radius: var(--radius-md);
}

/* —— Seller upgrade promo ————————————————————————————————————————————— */

.account-promo {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  padding: var(--space-5);
}

html.nav-theme-light .account-promo {
  background: var(--bg-0);
}

.account-promo__title {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: var(--text-title-3-lh);
  letter-spacing: var(--text-title-3-ls);
  font-weight: 600;
  color: var(--text);
}

.account-promo__body {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
  max-width: 56ch;
}

/* —— Settings page ———————————————————————————————————————————————————— */

/* The settings page was one flat grid where "Aparência" sat between the account
   summary and the display name. These groups give it the same order as the
   account nav, and put the two irreversible actions behind their own heading. */
.settings-group {
  margin: 0 0 var(--space-6);
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group__head {
  margin: 0 0 var(--space-3);
}

/* .settings-grid carries its own top margin from when it was the page's only
   child; inside a group the heading already provides the gap. */
.settings-group .settings-grid {
  margin-top: 0;
}

.settings-group__title {
  margin: 0;
  font-size: var(--text-overline);
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.settings-group__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.settings-group--danger .settings-card {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--hairline));
}

.settings-group--danger .settings-group__title {
  color: var(--danger);
}

/* The destructive block stays collapsed until asked for: an account page should
   not put "eliminar conta" one mis-click from a password field. */
.settings-danger {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.settings-danger > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  font-weight: 600;
  color: var(--danger);
  border-radius: var(--radius-sm);
}

.settings-danger > summary::-webkit-details-marker {
  display: none;
}

.settings-danger > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.settings-danger > summary::after {
  content: "▾";
  font-size: 11px;
  transition: transform 0.2s var(--ease);
}

.settings-danger[open] > summary::after {
  transform: rotate(180deg);
}

/* ======== 23-seller.css ======== */
/* ---------------------------------------------------------------------------
   Seller panel (/seller/) — "sp-" layer.

   The panel used to be a fixed-height CRM card with a scroll-inside main
   column, eleven flat nav buttons and a horizontal tab strip on phones. This
   layer rebuilds it as a command center:

     1. `.sp-sidebar`  — grouped, collapsible nav from 1024px (icon rail on
                          tablet, hidden on phones).
     2. `.sp-tabbar`   — five-destination bottom nav below 768px, plus a "Mais"
                          sheet and a floating "+" that opens the create sheet.
     3. `.sp-content`  — one panel at a time; page scrolls, never a nested
                          scroller, so phones keep the address-bar collapse and
                          no touch gesture is ever trapped.
     4. `.sp-list`     — one DOM for tables and cards: a CSS-grid row on desktop,
                          a card below 760px. Nothing is rendered twice.
     5. `.sp-sheet`    — bottom sheet on phones, centered dialog on desktop,
                          sharing the `.seller-product-modal` open/close mechanics
                          the existing action sheets already use.

   Token-only, so `html.nav-theme-light` in 01-base.css themes it. The one
   exception is the same as the cart and account layers: `--surface` is a
   near-opaque white in light mode, so raised cards get real white and wells get
   the page ground. Marked `LIGHT:` where it happens.

   Semantic colour is always paired with a word or an icon — a chip never
   carries its meaning in hue alone.
   --------------------------------------------------------------------------- */

.sp-shell {
  --sp-nav-w: 252px;
  --sp-nav-w-min: 72px;
  --sp-tabbar-h: 60px;
  --sp-radius: 18px;
  --sp-radius-sm: 12px;
  /* One vertical rhythm for the whole panel: the space between cards, between
     sections and under the page header. It is deliberately larger than the
     padding inside a card — when the two match, a column of cards reads as one
     undifferentiated block instead of separate objects. */
  --sp-gap: var(--space-5);
  --sp-card-pad: var(--space-4);
  --sp-warn: #ffd60a;
  --sp-info: #64a5ff;
  --sp-ok: var(--ok);
  --sp-danger: var(--danger);
  --sp-fill-weak: rgba(255, 255, 255, 0.05);
  --sp-fill: rgba(255, 255, 255, 0.08);
  --sp-fill-strong: rgba(255, 255, 255, 0.12);
  --sp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  .sp-shell {
    --sp-gap: 1.75rem;
    --sp-card-pad: var(--space-5);
  }
}

@media (min-width: 1200px) {
  .sp-shell {
    --sp-gap: var(--space-6);
  }
}

html.nav-theme-light .sp-shell {
  --sp-warn: #9a6700;
  --sp-info: #0055b3;
  --sp-fill-weak: rgba(0, 0, 0, 0.035);
  --sp-fill: rgba(0, 0, 0, 0.06);
  --sp-fill-strong: rgba(0, 0, 0, 0.1);
}

/* The storefront's own phone tab bar (Início / Pesquisar / Carrinho …) would
   sit under ours. Hide it on this page only and size the body gutter for the
   seller bar instead. */
body.sp-body .store-mobile-tabbar {
  display: none;
}

@media (max-width: 767px) {
  body.sp-body.has-mobile-tabbar {
    padding-bottom: calc(var(--sp-tabbar-h, 60px) + env(safe-area-inset-bottom, 0px));
  }
}

.sp-shell .shell-main.shop-checkout-main {
  width: 100%;
  max-width: 1280px;
  align-items: stretch;
  padding: 0;
}

.sp-shell .sp-app,
.sp-shell #dash-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* —— Gates ———————————————————————————————————————————————————————————— */

.sp-gate {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px) 0;
}

.sp-gate__panel {
  width: min(100%, 480px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-2);
  text-align: left;
}

.sp-gate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 14px;
  background: var(--sp-fill);
  color: var(--text);
}

.sp-gate__icon svg {
  width: 22px;
  height: 22px;
}

.sp-gate__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-2);
  font-weight: 600;
  letter-spacing: var(--text-title-2-ls);
  line-height: var(--text-title-2-lh);
  color: var(--text);
}

.sp-gate__text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
}

.sp-gate__text a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sp-gate__actions .btn {
  width: auto;
  margin: 0;
  padding: 11px 18px;
  font-size: var(--text-ui);
}

/* —— App grid ————————————————————————————————————————————————————————— */

.sp-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-gap);
  align-items: start;
}

@media (min-width: 768px) {
  .sp-app {
    grid-template-columns: var(--sp-nav-w-min) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
  }
}

@media (min-width: 1024px) {
  .sp-app {
    grid-template-columns: var(--sp-nav-w) minmax(0, 1fr);
  }

  .sp-app[data-nav-collapsed="1"] {
    grid-template-columns: var(--sp-nav-w-min) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .sp-app {
    transition: grid-template-columns 0.28s var(--sp-ease-out);
  }
}

/* —— Sidebar —————————————————————————————————————————————————————————— */

.sp-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sp-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--space-4) + 3.5rem);
    min-width: 0;
    max-height: calc(100dvh - var(--space-4) - 3.5rem - var(--space-4));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .sp-sidebar::-webkit-scrollbar {
    display: none;
  }
}

.sp-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 4px 0;
}

.sp-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-nav__group.hidden {
  display: none;
}

.sp-nav__label {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-3);
  font-size: var(--text-overline);
  font-weight: 700;
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s var(--ease);
}

.sp-nav__btn {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--text-ui-ls);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.sp-nav__btn::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--text);
  transform: translateY(-50%);
  transition: height 0.22s var(--sp-ease-out);
}

.sp-nav__btn:hover {
  color: var(--text);
  background: var(--sp-fill-weak);
}

.sp-nav__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-nav__btn.is-active {
  color: var(--text);
  background: var(--sp-fill);
  font-weight: 600;
}

.sp-nav__btn.is-active::before {
  height: 18px;
}

.sp-nav__btn--sub {
  min-height: 38px;
  padding-left: 42px;
  font-size: var(--text-caption);
}

.sp-nav__btn--sub::before {
  left: 24px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.16s var(--ease), background 0.16s var(--ease);
}

.sp-nav__btn--sub.is-active::before {
  height: 4px;
  opacity: 1;
  background: var(--text);
}

/* An off-page link inside a group (Gamificação). Sized like a sub-item, but
   it carries an icon — which is why the icon rail can keep showing it while it
   hides the text-only sub-items. */
.sp-nav__btn--link {
  min-height: 38px;
  font-size: var(--text-caption);
}

.sp-nav__ext {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--text-muted);
}

.sp-nav__btn--link:hover .sp-nav__ext {
  color: var(--text);
}

.sp-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.72;
  transition: opacity 0.16s var(--ease);
}

.sp-nav__icon svg {
  width: 18px;
  height: 18px;
}

.sp-nav__btn:hover .sp-nav__icon,
.sp-nav__btn.is-active .sp-nav__icon {
  opacity: 1;
}

.sp-nav__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s var(--ease);
}

/* Notification counts — only ever rendered with a real, actionable number. */
.sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg-1);
  font-size: var(--text-micro);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sp-badge.hidden {
  display: none;
}

.sp-nav__btn .sp-badge {
  margin-left: auto;
}

.sp-sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.sp-sidebar__foot .sp-nav__btn {
  min-height: 38px;
  font-size: var(--text-caption);
}

.sp-nav-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  margin-top: var(--space-2);
  border: 0;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.sp-nav-toggle:hover {
  color: var(--text);
  background: var(--sp-fill-weak);
}

.sp-nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-nav-toggle__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-nav-toggle__icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.28s var(--sp-ease-out);
}

/* Collapsed rail: icons only, labels become tooltips (`data-tip`). Tablet is
   always the rail; desktop toggles it. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sp-app {
    --sp-nav-collapsed: 1;
  }
}

@media (min-width: 1024px) {
  .sp-app[data-nav-collapsed="1"] {
    --sp-nav-collapsed: 1;
  }

  .sp-app[data-nav-collapsed="1"] .sp-nav-toggle__icon svg {
    transform: rotate(180deg);
  }

  .sp-nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 1023px) {
  .sp-nav-toggle {
    display: none;
  }
}

@media (min-width: 768px) {
  .sp-app[style*="--sp-nav-collapsed"] .sp-nav__label,
  .sp-app[data-nav-collapsed="1"] .sp-nav__label,
  .sp-app.sp-app--rail .sp-nav__label {
    height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
  }

  .sp-app--rail .sp-nav__text,
  .sp-app--rail .sp-nav-toggle__text,
  .sp-app--rail .sp-sidebar__foot .sp-nav__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sp-app--rail .sp-nav__btn,
  .sp-app--rail .sp-nav-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .sp-app--rail .sp-nav__btn--sub {
    display: none;
  }

  /* `.sp-nav__btn--link` deliberately stays: the rewards hub is not a panel, so
     hiding it here would leave the rail — and every 768–1023px viewport, which
     is always the rail — with no way to open it. Only its trailing ↗ goes,
     since the rail shows icons alone. */
  .sp-app--rail .sp-nav__ext {
    display: none;
  }

  .sp-app--rail .sp-nav__btn .sp-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    margin: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }

  /* When the rail is showing and a sub-panel is active, the parent group
     button lights up so the seller still sees where they are. */
  .sp-app--rail .sp-nav__btn[data-dash-group-btn].is-active-group {
    color: var(--text);
    background: var(--sp-fill);
  }

  .sp-app--rail .sp-nav__btn[data-dash-group-btn].is-active-group::before {
    height: 18px;
  }

  /* Tooltip for the rail. Pure CSS: shows on hover and keyboard focus. */
  .sp-app--rail [data-tip] {
    position: relative;
  }

  .sp-app--rail [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 30;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-panel);
    border: 1px solid var(--hairline);
    box-shadow: var(--elev-3);
    color: var(--text);
    font-size: var(--text-caption);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-4px, -50%);
    pointer-events: none;
    transition: opacity 0.14s var(--ease), transform 0.18s var(--sp-ease-out);
  }

  .sp-app--rail [data-tip]:hover::after,
  .sp-app--rail [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* —— Content column + header ————————————————————————————————————————— */

.sp-content {
  min-width: 0;
  width: 100%;
}

.sp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--sp-gap);
}

.sp-head__titles {
  flex: 1 1 18rem;
  min-width: 0;
}

.sp-eyebrow {
  margin: 0 0 6px;
  font-size: var(--text-overline);
  font-weight: 600;
  line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
  color: var(--text);
}

.sp-lede {
  margin: 8px 0 0;
  max-width: 58ch;
  min-height: 1.45em;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text-muted);
}

.sp-lede:empty {
  display: none;
}

.sp-head__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.sp-head__actions {
  display: flex;
  gap: var(--space-2);
}

.sp-head__actions.hidden {
  display: none;
}

/* Buttons inside the panel are pill, compact, auto-width. */
.sp-shell .btn.sp-btn,
.sp-btn {
  width: auto;
  margin: 0;
  padding: 10px 16px;
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: var(--text-ui-ls);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.sp-btn--sm {
  padding: 7px 12px;
  font-size: var(--text-caption);
}

.sp-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sp-btn--icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Secondary buttons: `.btn--ghost` loses to `html.nav-theme-light .btn` sitewide,
   so the panel carries its own secondary style. */
.sp-shell .btn.sp-btn--ghost,
.sp-body .btn.sp-btn--ghost,
html.nav-theme-light .sp-shell .btn.sp-btn--ghost,
html.nav-theme-light .sp-body .btn.sp-btn--ghost {
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .btn.sp-btn--ghost:hover:not(:disabled),
.sp-body .btn.sp-btn--ghost:hover:not(:disabled),
html.nav-theme-light .sp-shell .btn.sp-btn--ghost:hover:not(:disabled),
html.nav-theme-light .sp-body .btn.sp-btn--ghost:hover:not(:disabled) {
  background: var(--sp-fill);
  opacity: 1;
}

.sp-shell .btn.sp-btn--danger,
.sp-body .btn.sp-btn--danger,
html.nav-theme-light .sp-shell .btn.sp-btn--danger,
html.nav-theme-light .sp-body .btn.sp-btn--danger {
  color: #fff;
  background: var(--sp-danger);
}

.sp-shell .btn.is-loading,
.sp-body .btn.is-loading {
  position: relative;
  color: transparent;
}

.sp-shell .btn.is-loading::after,
.sp-body .btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  color: var(--accent-text);
  animation: sp-spin 0.7s linear infinite;
}

.sp-shell .btn.sp-btn--ghost.is-loading::after,
.sp-body .btn.sp-btn--ghost.is-loading::after {
  color: var(--text);
}

@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* —— Search ——————————————————————————————————————————————————————————— */

.sp-search {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
}

.sp-search__input {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-ui);
  outline: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.sp-search__input::placeholder {
  color: var(--text-muted);
}

.sp-search__input:focus {
  border-color: var(--stroke-secondary);
  background: var(--sp-fill);
  box-shadow: var(--focus-ring);
}

.sp-search__input::-webkit-search-cancel-button {
  display: none;
}

.sp-search__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.sp-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.sp-search__clear:hover {
  background: var(--sp-fill);
  color: var(--text);
}

.sp-search__clear svg {
  width: 14px;
  height: 14px;
}

.sp-search-results {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  right: 0;
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(60vh, 32rem);
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface-panel);
  box-shadow: var(--elev-5);
}

.sp-search-results__group {
  padding: 8px 10px 4px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-search-results__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sp-search-results__item:hover,
.sp-search-results__item[aria-selected="true"] {
  background: var(--sp-fill);
}

.sp-search-results__item-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-search-results__item-meta {
  flex-shrink: 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-search-results__empty {
  padding: 14px 10px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* —— Sub navigation (mobile / tablet segmented control) ———————————————— */

.sp-subnav {
  display: flex;
  gap: 4px;
  margin: 0 0 var(--sp-gap);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}

.sp-subnav::-webkit-scrollbar {
  display: none;
}

.sp-subnav.hidden {
  display: none;
}

@media (min-width: 1024px) {
  .sp-app:not([data-nav-collapsed="1"]) .sp-subnav {
    display: none;
  }
}

.sp-subnav__btn {
  position: relative;
  flex: 1 0 auto;
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

/* Off-page link in the strip (Gamificação). Never "active": it leaves the page. */
.sp-subnav__btn--link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.sp-subnav__btn--link:hover {
  color: var(--text);
  background: var(--sp-fill-weak);
}

.sp-subnav__btn.is-active {
  color: var(--text);
  background: var(--surface-panel);
  box-shadow: var(--elev-1);
}

.sp-subnav__btn .sp-badge {
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

/* —— Banners ——————————————————————————————————————————————————————————— */

.sp-shell .seller-banner {
  margin: 0 0 var(--sp-gap);
  padding: 14px 16px;
  border-radius: var(--sp-radius-sm);
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .seller-banner--warn {
  color: var(--text);
  background: color-mix(in srgb, var(--sp-warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-warn) 30%, transparent);
}

.sp-shell .seller-banner--info {
  color: var(--text);
  background: color-mix(in srgb, var(--sp-info) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-info) 28%, transparent);
}

.sp-shell .seller-banner .btn {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: var(--text-caption);
  border-radius: var(--radius-pill);
}

.sp-shell .seller-banner--payment-setup .seller-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

html.nav-theme-light .sp-shell .seller-banner--payment-setup {
  background: color-mix(in srgb, var(--sp-warn) 10%, #fff);
}

/* —— Panels ——————————————————————————————————————————————————————————— */

.sp-panels {
  min-width: 0;
}

/* The stack is a flex column, never a chain of `+` margins. An adjacency rule
   stops matching the moment something that is not a card lands in the stack —
   the two-up .sp-grid on Início did exactly that, and the rhythm around it
   silently fell to zero. A gap spaces every child whatever its type, and
   `display: none` children (an off panel, a hidden banner) take no space. */
.sp-panels,
.sp-panels .seller-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
  margin: 0;
}

/* Section titles are announced to screen readers; the page header already
   shows the name visually. Cards carry their own visible titles. */
.sp-panels .seller-section > .seller-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .seller-section.sp-panel--enter {
    animation: sp-panel-in 0.26s var(--sp-ease-out) both;
  }
}

@keyframes sp-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Cards ———————————————————————————————————————————————————————————— */

.sp-card {
  min-width: 0;
  padding: var(--sp-card-pad);
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

/* LIGHT: --surface is near-opaque white; raised cards need real white and
   their wells the page ground, or they dissolve into the page. */
html.nav-theme-light .sp-card,
html.nav-theme-light .sp-search-results,
html.nav-theme-light .sp-shell .seller-pay-card {
  background: #fff;
}

.sp-card--flush {
  padding: 0;
  overflow: hidden;
}

.sp-card--well {
  background: var(--sp-fill-weak);
  box-shadow: none;
}

html.nav-theme-light .sp-card--well {
  background: var(--bg-0);
}

.sp-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.sp-card--flush .sp-card__head {
  padding: var(--space-4) var(--space-4) 0;
}

@media (min-width: 720px) {
  .sp-card--flush .sp-card__head {
    padding: var(--space-5) var(--space-5) 0;
  }
}

.sp-card__title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.sp-card__title--lg {
  font-size: var(--text-title-3);
  letter-spacing: var(--text-title-3-ls);
}

.sp-card__sub {
  margin: 4px 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.sp-card__sub a,
.sp-card__body a:not(.btn) {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-card__link {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.sp-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-card__body {
  min-width: 0;
}

.sp-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sp-muted {
  color: var(--text-muted);
}

.sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-gap);
}

@media (min-width: 900px) {
  .sp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— Overview: greeting, attention, KPIs, quick actions ————————————————— */

.sp-greeting {
  margin: 0;
}

.sp-greeting__title {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text);
}

.sp-greeting__sub {
  margin: 6px 0 0;
  min-height: 1.45em;
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.sp-attention {
  border-color: var(--hairline);
}

.sp-attention__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sp-attention__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid transparent;
}

.sp-attention__item--danger {
  background: color-mix(in srgb, var(--sp-danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--sp-danger) 22%, transparent);
}

.sp-attention__item--warn {
  background: color-mix(in srgb, var(--sp-warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--sp-warn) 24%, transparent);
}

.sp-attention__item--info {
  background: color-mix(in srgb, var(--sp-info) 10%, transparent);
  border-color: color-mix(in srgb, var(--sp-info) 22%, transparent);
}

.sp-attention__dot {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--sp-fill);
  color: var(--text);
}

.sp-attention__dot svg {
  width: 16px;
  height: 16px;
}

.sp-attention__item--danger .sp-attention__dot {
  color: var(--sp-danger);
  background: color-mix(in srgb, var(--sp-danger) 16%, transparent);
}

.sp-attention__item--warn .sp-attention__dot {
  color: var(--sp-warn);
  background: color-mix(in srgb, var(--sp-warn) 18%, transparent);
}

.sp-attention__item--info .sp-attention__dot {
  color: var(--sp-info);
  background: color-mix(in srgb, var(--sp-info) 16%, transparent);
}

.sp-attention__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-attention__text {
  display: block;
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: var(--text-ui-lh);
  color: var(--text);
}

.sp-attention__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-attention__cta {
  flex-shrink: 0;
}

.sp-attention__cta .btn {
  padding: 7px 12px;
  font-size: var(--text-caption);
}

.sp-attention__clear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.sp-attention__clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--sp-ok);
  background: color-mix(in srgb, var(--sp-ok) 16%, transparent);
}

.sp-attention__clear-icon svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-attention__clear-icon svg {
    animation: sp-pop 0.5s var(--sp-ease-out) both;
  }
}

@keyframes sp-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sp-attention__clear-title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-attention__clear-text {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

@media (max-width: 479px) {
  .sp-attention__item {
    flex-wrap: wrap;
  }

  .sp-attention__cta {
    flex-basis: 100%;
    padding-left: 42px;
  }
}

/* KPI tiles */
.sp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .sp-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sp-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

html.nav-theme-light .sp-kpi {
  background: #fff;
}

.sp-kpi__label {
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-kpi__value {
  margin-top: auto;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sp-kpi__hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-kpi__hint--ok {
  color: var(--sp-ok);
}

.sp-kpi__hint--warn {
  color: var(--sp-warn);
}

/* Quick actions */
.sp-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .sp-quick {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.sp-quick__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease), border-color 0.16s var(--ease);
}

.sp-quick__btn:hover {
  background: var(--sp-fill);
  border-color: var(--stroke-secondary);
}

.sp-quick__btn:active {
  transform: scale(0.98);
}

.sp-quick__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--sp-fill);
}

.sp-quick__icon svg {
  width: 16px;
  height: 16px;
}

.sp-quick__btn--primary {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.sp-quick__btn--primary:hover {
  background: var(--accent);
  opacity: 0.92;
}

.sp-quick__btn--primary .sp-quick__icon {
  background: rgba(127, 127, 127, 0.22);
}

/* Compact rows (recent orders / low stock / missions) */
.sp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sp-row-lite {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
}

.sp-row-lite:first-child {
  border-top: 0;
}

.sp-row-lite--link {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.14s var(--ease);
}

.sp-row-lite--link:hover {
  background: var(--sp-fill-weak);
}

.sp-row-lite__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sp-fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.sp-row-lite__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-row-lite__thumb svg {
  width: 18px;
  height: 18px;
}

.sp-row-lite__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-row-lite__title {
  display: block;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-lite__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-lite__end {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.sp-row-lite__amount {
  font-size: var(--text-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* —— Status chips ————————————————————————————————————————————————————— */

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.sp-chip::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.sp-chip--ok {
  color: var(--sp-ok);
  background: color-mix(in srgb, var(--sp-ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-ok) 26%, transparent);
}

.sp-chip--warn {
  color: var(--sp-warn);
  background: color-mix(in srgb, var(--sp-warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-warn) 28%, transparent);
}

.sp-chip--danger {
  color: var(--sp-danger);
  background: color-mix(in srgb, var(--sp-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--sp-danger) 26%, transparent);
}

.sp-chip--info {
  color: var(--sp-info);
  background: color-mix(in srgb, var(--sp-info) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-info) 28%, transparent);
}

.sp-chip--plain::before {
  display: none;
}

/* Stock indicator: text + dot; the dot's colour is reinforced by the words. */
.sp-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sp-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-ok);
  flex-shrink: 0;
}

.sp-stock--low::before {
  background: var(--sp-warn);
}

.sp-stock--low {
  color: var(--sp-warn);
}

.sp-stock--out::before {
  background: var(--sp-danger);
}

.sp-stock--out {
  color: var(--sp-danger);
}

.sp-stock__reserved {
  font-weight: 500;
  color: var(--text-muted);
}

/* —— Filter chips + toolbar ——————————————————————————————————————————— */

.sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.sp-filters {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  margin: -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sp-filters::-webkit-scrollbar {
  display: none;
}

.sp-filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.sp-filter:hover {
  color: var(--text);
  background: var(--sp-fill-weak);
}

.sp-filter:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-filter.is-active {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.sp-filter__n {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.sp-select {
  height: 36px;
  padding: 0 30px 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 11px center;
  color: var(--text);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.sp-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-count {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* —— Responsive list: grid rows on desktop, cards on phones ————————————— */

.sp-list {
  display: flex;
  flex-direction: column;
}

.sp-list.hidden {
  display: none;
}

.sp-list__head {
  display: none;
}

.sp-row {
  position: relative;
  display: grid;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
  padding: 14px var(--space-4);
  border-top: 1px solid var(--hairline);
  transition: background 0.14s var(--ease);
}

@media (min-width: 720px) {
  .sp-row {
    padding-inline: var(--space-5);
  }
}

.sp-row:first-child,
.sp-list__head + .sp-row {
  border-top: 0;
}

.sp-row:hover {
  background: var(--sp-fill-weak);
}

.sp-row--muted .sp-row__title {
  color: var(--text-muted);
}

.sp-row__media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sp-fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sp-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-row__media svg {
  width: 20px;
  height: 20px;
}

.sp-row__main {
  min-width: 0;
}

.sp-row__title {
  display: block;
  font-size: var(--text-body-s);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row__title a {
  color: inherit;
  text-decoration: none;
}

.sp-row__title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-row__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row__cell {
  min-width: 0;
  font-size: var(--text-ui);
  color: var(--text);
}

.sp-row__cell--num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sp-row__cell-label {
  display: none;
}

.sp-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sp-row__actions .btn {
  padding: 8px 14px;
  font-size: var(--text-caption);
}

/* Phone card treatment. Media sits left; stacked details; full-width action. */
@media (max-width: 759px) {
  .sp-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "media main"
      "media cells"
      "actions actions";
    gap: 8px 12px;
    padding: 14px;
  }

  .sp-row--no-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "cells"
      "actions";
  }

  .sp-row__media {
    grid-area: media;
    width: 64px;
    height: 64px;
  }

  .sp-row__main {
    grid-area: main;
  }

  .sp-row__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sp-row__cells {
    grid-area: cells;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }

  .sp-row__cell-label {
    display: inline;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
  }

  .sp-row__actions {
    grid-area: actions;
    justify-content: stretch;
    margin-top: 4px;
  }

  .sp-row__actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 16px;
    font-size: var(--text-ui);
  }
}

/* Desktop columns per list. Header row appears; cells align to the grid. */
@media (min-width: 760px) {
  .sp-list__head {
    display: grid;
    gap: 14px;
    align-items: center;
    padding: 12px var(--space-5);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--text-overline);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .sp-row__cells {
    display: contents;
  }

  .sp-list--products .sp-list__head,
  .sp-list--products .sp-row {
    grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
  }

  .sp-list--services .sp-list__head,
  .sp-list--services .sp-row {
    grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }

  .sp-list--orders .sp-list__head,
  .sp-list--orders .sp-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }

  .sp-list--requests .sp-list__head,
  .sp-list--requests .sp-row {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
  }

  .sp-list--promos .sp-list__head,
  .sp-list--promos .sp-row {
    grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  }

  .sp-list--deliveries .sp-list__head,
  .sp-list--deliveries .sp-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  }

  .sp-list__head .sp-row__actions {
    visibility: hidden;
  }
}

/* —— Messages list ————————————————————————————————————————————————————— */

.sp-msg {
  border-top: 1px solid var(--hairline);
}

.sp-msg:first-child {
  border-top: 0;
}

.sp-msg__btn {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  width: 100%;
  padding: 14px var(--space-4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

@media (min-width: 720px) {
  .sp-msg__btn {
    padding-inline: var(--space-5);
  }
}

.sp-msg__btn:hover {
  background: var(--sp-fill-weak);
}

.sp-msg__btn:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.sp-msg__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-info);
  grid-row: 1 / span 2;
  opacity: 0;
}

.sp-msg--unread .sp-msg__dot {
  opacity: 1;
}

.sp-msg__from {
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-msg--unread .sp-msg__from {
  font-weight: 700;
}

.sp-msg__time {
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sp-msg__subject {
  grid-column: 2 / span 2;
  font-size: var(--text-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-msg--unread .sp-msg__subject {
  color: var(--text);
}

.sp-msg__body {
  display: none;
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 22px);
}

@media (min-width: 720px) {
  .sp-msg__body {
    padding-inline: calc(var(--space-5) + 22px) var(--space-5);
  }
}

.sp-msg.is-open .sp-msg__body {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-msg.is-open .sp-msg__body {
    animation: sp-panel-in 0.22s var(--sp-ease-out) both;
  }
}

.sp-msg__text {
  margin: 0 0 var(--space-3);
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sp-msg__meta {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-msg__meta a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-msg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* —— Empty, error, skeleton ———————————————————————————————————————————— */

.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--space-5) var(--space-4);
}

.sp-empty.hidden {
  display: none;
}

.sp-empty--center {
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.sp-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  background: var(--sp-fill);
  color: var(--text-muted);
}

.sp-empty__icon svg {
  width: 20px;
  height: 20px;
}

.sp-empty__title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-empty__text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.sp-empty__text a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sp-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid color-mix(in srgb, var(--sp-danger) 26%, transparent);
  background: color-mix(in srgb, var(--sp-danger) 8%, transparent);
  color: var(--text);
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
}

.sp-error.hidden {
  display: none;
}

.sp-error--soft {
  border-color: var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text-muted);
}

.sp-error__msg {
  flex: 1 1 14rem;
  min-width: 0;
}

.sp-error__msg a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-error .btn {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: var(--text-caption);
}

.sp-skel {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--sp-fill-weak);
  position: relative;
  overflow: hidden;
}

.sp-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sp-fill), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .sp-skel::after {
    animation: sp-shimmer 1.4s var(--ease) infinite;
  }
}

@keyframes sp-shimmer {
  to {
    transform: translateX(100%);
  }
}

.sp-skel--line {
  height: 12px;
  margin-bottom: var(--space-2);
}

.sp-skel--line:last-child {
  margin-bottom: 0;
  width: 55%;
}

.sp-skel--row {
  height: 64px;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
}

.sp-skel--row:first-child {
  border-top: 0;
}

.sp-skel--tile {
  height: 92px;
  border-radius: var(--sp-radius);
}

.sp-skel-rows {
  display: flex;
  flex-direction: column;
}

.sp-skel-rows.hidden {
  display: none;
}

/* Content swapping in over a skeleton. */
@media (prefers-reduced-motion: no-preference) {
  .sp-fade-in {
    animation: sp-fade 0.3s var(--ease) both;
  }
}

@keyframes sp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* —— Forms inside cards ——————————————————————————————————————————————— */

.sp-card .field {
  margin-bottom: var(--space-4);
}

.sp-card .field:last-child {
  margin-bottom: 0;
}

.sp-card .field label,
.sp-card .field .field-label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-card .field input,
.sp-card .field select,
.sp-card .field textarea {
  font-size: var(--text-body-m);
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border-color: var(--hairline);
  color: var(--text);
}

.sp-card .field input:hover,
.sp-card .field select:hover,
.sp-card .field textarea:hover {
  background: var(--sp-fill);
}

.sp-card .field input:focus,
.sp-card .field select:focus,
.sp-card .field textarea:focus {
  background: var(--sp-fill);
  border-color: var(--stroke-secondary);
  box-shadow: var(--focus-ring);
}

html.nav-theme-light .sp-card .field input,
html.nav-theme-light .sp-card .field select,
html.nav-theme-light .sp-card .field textarea {
  background: var(--bg-0);
}

.sp-card .field textarea {
  min-height: 96px;
}

.sp-card .field .shop-muted {
  margin: 6px 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
}

.sp-card .seller-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-3);
}

@media (min-width: 640px) {
  .sp-card .seller-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sp-card .seller-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sp-card .seller-form-actions .btn {
  width: auto;
  margin: 0;
  padding: 11px 18px;
  font-size: var(--text-ui);
  border-radius: var(--radius-pill);
}

.sp-card .seller-form-actions .btn--ghost,
html.nav-theme-light .sp-card .seller-form-actions .btn--ghost {
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .status.seller-dash-status {
  margin-top: var(--space-3);
  min-height: 0;
  font-size: var(--text-caption);
}

.sp-shell .status.seller-dash-status:empty {
  display: none;
}

.sp-shell .feed-status.seller-dash-status {
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  font-size: var(--text-caption);
  text-align: left;
  color: var(--text-muted);
}

.sp-shell .feed-status.seller-dash-status.feed-status--error {
  color: var(--text);
  background: color-mix(in srgb, var(--sp-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-danger) 26%, transparent);
}

.sp-shell .feed-status.seller-dash-status.feed-status--ok {
  color: var(--text);
  background: color-mix(in srgb, var(--sp-ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-ok) 26%, transparent);
}

/* Toggle rows (pickup / delivery) */
.sp-toggles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .sp-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sp-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.sp-toggle:has(input:checked) {
  border-color: var(--stroke-secondary);
  background: var(--sp-fill);
}

.sp-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--text);
  flex-shrink: 0;
}

.sp-toggle__body {
  min-width: 0;
}

.sp-toggle__title {
  display: block;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
}

.sp-toggle__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Collapsible config block */
.sp-disclosure {
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

html.nav-theme-light .sp-disclosure {
  background: #fff;
}

.sp-disclosure__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-4);
  list-style: none;
  cursor: pointer;
  border-radius: var(--sp-radius);
}

@media (min-width: 720px) {
  .sp-disclosure__summary {
    padding: var(--space-4) var(--space-5);
  }
}

.sp-disclosure__summary::-webkit-details-marker {
  display: none;
}

.sp-disclosure__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-disclosure__summary-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-disclosure__title {
  display: block;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-disclosure__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-disclosure__chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.22s var(--sp-ease-out);
}

.sp-disclosure[open] .sp-disclosure__chev {
  transform: rotate(180deg);
}

.sp-disclosure__body {
  padding: 0 var(--space-4) var(--space-4);
}

@media (min-width: 720px) {
  .sp-disclosure__body {
    padding: 0 var(--space-5) var(--space-5);
  }
}

/* —— Payments ————————————————————————————————————————————————————————— */

.sp-shell .seller-pay-card {
  padding: var(--sp-card-pad);
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.sp-pay-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--space-4);
}

.sp-pay-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--sp-fill);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
}

.sp-pay-head__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-pay-head__title {
  margin: 0;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: var(--text-title-3-ls);
  line-height: var(--text-title-3-lh);
  color: var(--text);
}

.sp-pay-head__sub {
  margin: 4px 0 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
  max-width: 52ch;
}

.sp-pay-head__status {
  flex-shrink: 0;
  align-self: center;
}

.sp-shell .seller-pay-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.sp-shell .seller-pay-status__item {
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .seller-pay-status__item dt {
  margin: 0 0 2px;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-shell .seller-pay-status__item dd {
  margin: 0;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.sp-shell .seller-pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sp-shell .seller-pay-actions .btn {
  width: auto;
  margin: 0;
  padding: 10px 16px;
  font-size: var(--text-ui);
  border-radius: var(--radius-pill);
}

.sp-shell .seller-pay-actions .btn--ghost,
html.nav-theme-light .sp-shell .seller-pay-actions .btn--ghost {
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .seller-pay-callout {
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  font-size: var(--text-caption);
  color: var(--text);
  background: color-mix(in srgb, var(--sp-warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-warn) 28%, transparent);
}

.sp-shell .seller-ao-banks-form {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .seller-ao-banks-form__title,
.sp-shell .seller-ao-banks-list__title,
.sp-shell .seller-eur-banks-list__title,
.sp-shell .seller-eur-payouts__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
}

.sp-shell .seller-ao-banks-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-3);
}

@media (min-width: 640px) {
  .sp-shell .seller-ao-banks-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.sp-shell .seller-ao-banks-fields .field {
  margin-bottom: var(--space-3);
}

.sp-shell .seller-ao-banks-fields .field label,
.sp-shell .seller-ao-banks-fields .field .field-label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-shell .seller-ao-banks-fields .field input,
.sp-shell .seller-ao-banks-fields .field select {
  padding: 11px 14px;
  font-size: var(--text-body-m);
  border-radius: var(--sp-radius-sm);
  background: var(--surface);
  border-color: var(--hairline);
}

html.nav-theme-light .sp-shell .seller-ao-banks-fields .field input,
html.nav-theme-light .sp-shell .seller-ao-banks-fields .field select {
  background: #fff;
}

.sp-shell .seller-ao-banks-hint {
  margin: 6px 0 0;
  font-size: var(--text-caption);
}

.sp-shell .seller-ao-banks-hint code {
  font-family: var(--font-system);
  font-size: var(--text-caption);
  color: var(--text);
}

.sp-shell .seller-table-wrap {
  overflow-x: auto;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--hairline);
  background: transparent;
  margin: 0;
}

.sp-shell .seller-table-wrap .shop-table {
  margin: 0;
  font-size: var(--text-ui);
}

.sp-shell .seller-table-wrap .shop-table th {
  padding: 10px 12px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline);
}

.sp-shell .seller-table-wrap .shop-table td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--text);
}

.sp-shell .seller-table-wrap .shop-table tbody tr:last-child td {
  border-bottom: 0;
}

.sp-shell .seller-table-wrap .btn-text {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 600;
  cursor: pointer;
}

.sp-shell .seller-table-wrap .btn-text:hover {
  background: var(--sp-fill-weak);
}

.sp-shell .seller-eur-legacy {
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: transparent;
}

.sp-shell .seller-eur-legacy__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--space-4);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
  border-radius: var(--sp-radius);
}

.sp-shell .seller-eur-legacy__summary::-webkit-details-marker {
  display: none;
}

.sp-shell .seller-eur-legacy__meta {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--text-muted);
}

.sp-shell .seller-eur-legacy__body {
  padding: 0 var(--space-4) var(--space-4);
}

.sp-shell .seller-eur-legacy__body > * + * {
  margin-top: var(--space-4);
}

.sp-shell .seller-empty.shop-muted {
  margin: 0;
  font-size: var(--text-caption);
}

/* —— Promotions ———————————————————————————————————————————————————————— */

.sp-promo-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.sp-promo-price__old {
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-decoration: line-through;
}

/* —— Store profile ————————————————————————————————————————————————————— */

.sp-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sp-identity__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-fill);
  color: var(--text);
  font-size: var(--text-title-3);
  font-weight: 600;
}

.sp-identity__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-identity__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-identity__name {
  margin: 0;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: var(--text-title-3-ls);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-identity__meta {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-identity__meta a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-progress {
  margin-top: var(--space-4);
}

.sp-progress__label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-progress__label strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-progress__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--sp-fill);
  overflow: hidden;
}

.sp-progress__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .sp-progress__fill {
    transition: width 0.6s var(--sp-ease-out);
  }
}

.sp-progress__fill--ok {
  background: var(--sp-ok);
}

.sp-checklist {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.sp-checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-checklist__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sp-checklist__item.is-done {
  color: var(--text);
}

.sp-checklist__item.is-done svg {
  color: var(--sp-ok);
}

/* —— Reputation / gamification ——————————————————————————————————————— */

.sp-level {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sp-level__ring {
  flex-shrink: 0;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: conic-gradient(var(--text) calc(var(--sp-pct, 0) * 1%), var(--sp-fill) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sp-level__ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--surface-panel);
}

html.nav-theme-light .sp-level__ring::before {
  background: #fff;
}

.sp-level__num {
  position: relative;
  font-size: var(--text-title-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-level__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-level__name {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-level__xp {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sp-stat {
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-stat__label {
  display: block;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-stat__value {
  display: block;
  margin-top: 4px;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-missions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-mission {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}

.sp-mission:first-child {
  border-top: 0;
}

.sp-mission__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  color: transparent;
}

.sp-mission__check svg {
  width: 12px;
  height: 12px;
}

.sp-mission.is-done .sp-mission__check {
  color: var(--bg-1);
  background: var(--sp-ok);
  border-color: var(--sp-ok);
}

.sp-mission__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-mission__title {
  display: block;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
}

.sp-mission.is-done .sp-mission__title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.sp-mission__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-mission__reward {
  flex-shrink: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* —— Reviews (restyle of the mounted widgets) ————————————————————————— */

.sp-shell .srv-wrap {
  display: grid;
  gap: var(--space-4);
}

.sp-shell .srv-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .sp-shell .srv-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sp-shell .srv-tile {
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .srv-tile__label {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-shell .srv-tile__value {
  margin: 4px 0 0;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-shell .srv-tile__hint {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-shell .srv-subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-shell .srv-dist,
.sp-shell .srv-ranks,
.sp-shell .srv-recent {
  padding: var(--sp-card-pad);
  border-radius: var(--sp-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

html.nav-theme-light .sp-shell .srv-dist,
html.nav-theme-light .sp-shell .srv-ranks,
html.nav-theme-light .sp-shell .srv-recent {
  background: #fff;
}

.sp-shell .srv-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.sp-shell .srv-hero__value {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-shell .srv-hero__stars {
  color: var(--star);
  font-size: var(--text-body-m);
  letter-spacing: 0.05em;
}

.sp-shell .srv-hero__count {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-shell .srv-bars {
  display: grid;
  gap: 6px;
}

.sp-shell .srv-bar {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 10px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-shell .srv-bar__track {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--sp-fill);
  overflow: hidden;
}

.sp-shell .srv-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--star);
}

.sp-shell .srv-bar__count {
  text-align: right;
}

.sp-shell .srv-ranks {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 760px) {
  .sp-shell .srv-ranks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sp-shell .srv-rank__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-shell .srv-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-shell .srv-rank__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption);
}

.sp-shell .srv-rank__row:first-child {
  border-top: 0;
}

.sp-shell .srv-rank__name {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-shell .srv-rank__score {
  flex-shrink: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-shell .srv-rank__empty,
.sp-shell .srv-empty {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-shell .srv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-shell .srv-item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}

.sp-shell .srv-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.sp-shell .srv-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
}

.sp-shell .srv-item__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-fill);
  color: var(--text);
  font-size: var(--text-micro);
  font-weight: 700;
}

.sp-shell .srv-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-shell .srv-item__stars {
  color: var(--star);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
}

.sp-shell .srv-item__product {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.sp-shell .srv-item__meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-shell .srv-item__comment {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text);
}

.sp-shell .srv-item__reply {
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
}

.sp-shell .srv-item__reply-head {
  margin: 0 0 2px;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-shell .srv-item__reply-body {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text);
}

.sp-shell .srv-reply-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-shell .srv-reply-form__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-body-s);
  resize: vertical;
}

.sp-shell .srv-reply-form__input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-shell .srv-reply-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.sp-shell .srv-reply-form__actions .btn {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: var(--text-caption);
  border-radius: var(--radius-pill);
}

.sp-shell .srv-reply-form__actions .btn--ghost,
html.nav-theme-light .sp-shell .srv-reply-form__actions .btn--ghost {
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-shell .srv-reply-form__status {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* —— Sheets (bottom sheet on phones, dialog on desktop) ————————————————— */

.sp-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), visibility 0.22s var(--ease);
}

@media (min-width: 640px) {
  .sp-sheet {
    align-items: center;
    padding: var(--space-4);
  }
}

.sp-sheet.is-open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.sp-sheet.is-open .sp-sheet__backdrop {
  opacity: 1;
}

.sp-sheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 28rem;
  max-height: min(92dvh, 40rem);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  background: var(--surface-panel);
  box-shadow: var(--elev-6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.34s var(--sp-ease-out);
}

@media (min-width: 640px) {
  .sp-sheet__panel {
    border-radius: var(--sp-radius);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0;
    transform: translateY(14px) scale(0.98);
    opacity: 0;
    transition: transform 0.26s var(--sp-ease-out), opacity 0.2s var(--ease);
  }

  .sp-sheet.is-open .sp-sheet__panel {
    opacity: 1;
  }
}

.sp-sheet.is-open .sp-sheet__panel {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .sp-sheet,
  .sp-sheet__backdrop,
  .sp-sheet__panel {
    transition: none;
  }
}

.sp-sheet__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: var(--radius-pill);
  background: var(--sp-fill-strong);
}

@media (min-width: 640px) {
  .sp-sheet__handle {
    display: none;
  }
}

.sp-sheet__head {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

.sp-sheet__title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sp-sheet__sub {
  margin: 4px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.sp-sheet__foot {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--hairline);
}

.sp-sheet__cancel {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-body-m);
  font-weight: 600;
  cursor: pointer;
}

.sp-sheet__cancel:hover {
  background: var(--sp-fill);
}

.sp-sheet__cancel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-sheet__label {
  margin: var(--space-3) 0 4px;
  padding: 0 var(--space-3);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-sheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px var(--space-3);
  border: 0;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-body-s);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

.sp-sheet__row:hover {
  background: var(--sp-fill-weak);
}

.sp-sheet__row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-sheet__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sp-fill);
  color: var(--text);
}

.sp-sheet__row-icon svg {
  width: 18px;
  height: 18px;
}

.sp-sheet__row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-sheet__row-title {
  display: block;
  font-weight: 600;
}

.sp-sheet__row-desc {
  display: block;
  margin-top: 1px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-sheet__row .sp-badge {
  margin-left: auto;
}

.sp-sheet__row--danger {
  color: var(--sp-danger);
}

.sp-sheet__row--danger .sp-sheet__row-icon {
  color: var(--sp-danger);
  background: color-mix(in srgb, var(--sp-danger) 12%, transparent);
}

.sp-sheet__row--danger .sp-sheet__row-desc {
  color: var(--text-muted);
}

.sp-sheet__divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--hairline);
}

/* Existing lifecycle sheets (#seller-product-modal etc.) take the new skin. */
.sp-body .seller-product-modal__panel {
  max-width: 28rem;
  border-radius: 20px 20px 0 0;
  background: var(--surface-panel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.34s var(--sp-ease-out), opacity 0.22s var(--ease);
}

@media (min-width: 40rem) {
  .sp-body .seller-product-modal__panel {
    border-radius: var(--sp-radius);
    padding-bottom: 0;
  }
}

.sp-body .seller-product-modal__row {
  min-height: 52px;
}

.sp-body .seller-product-modal__row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* Inline step inside the product sheet (restock, confirm delete). */
.sp-sheet-step {
  padding: var(--space-3);
}

.sp-sheet-step__title {
  margin: 0 0 4px;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text);
}

.sp-sheet-step__text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--text-muted);
}

.sp-stepper {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.sp-stepper__btn {
  flex: 0 0 48px;
  min-height: 48px;
  border: 1px solid var(--hairline);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-title-3);
  cursor: pointer;
}

.sp-stepper__btn:hover {
  background: var(--sp-fill);
}

.sp-stepper__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-stepper__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  color: var(--text);
  font: inherit;
  font-size: var(--text-title-3);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.sp-stepper__input::-webkit-outer-spin-button,
.sp-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sp-stepper__input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-sheet-step__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.sp-sheet-step__actions .btn {
  width: 100%;
  margin: 0;
  min-height: 48px;
  padding: 12px 16px;
  font-size: var(--text-body-s);
  border-radius: var(--sp-radius-sm);
}

.sp-sheet-step__status {
  margin: var(--space-2) 0 0;
  min-height: 1.3em;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-sheet-step__status.is-error {
  color: var(--sp-danger);
}

/* —— Order sheet (the <dialog> that used to be the ship dialog) ————————— */

.sp-shell .seller-ship-dialog,
.sp-dialog {
  width: min(100vw, 32rem);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--surface-panel);
  color: var(--text);
  box-shadow: var(--elev-6);
  overflow: hidden;
}

@media (min-width: 640px) {
  .sp-shell .seller-ship-dialog,
  .sp-dialog {
    margin: auto;
    max-height: min(90dvh, 46rem);
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--sp-radius);
  }
}

.sp-shell .seller-ship-dialog::backdrop,
.sp-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .sp-shell .seller-ship-dialog[open],
  .sp-dialog[open] {
    animation: sp-sheet-up 0.32s var(--sp-ease-out) both;
  }

  @media (min-width: 640px) {
    .sp-shell .seller-ship-dialog[open],
    .sp-dialog[open] {
      animation: sp-dialog-in 0.24s var(--sp-ease-out) both;
    }
  }
}

@keyframes sp-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes sp-dialog-in {
  from {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.sp-dialog__form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  margin: 0;
}

.sp-dialog__head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

.sp-dialog__head-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-dialog__title {
  margin: 0;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: var(--text-title-3-ls);
  color: var(--text);
}

.sp-dialog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-dialog__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--sp-fill-weak);
  color: var(--text);
  cursor: pointer;
}

.sp-dialog__close:hover {
  background: var(--sp-fill);
}

.sp-dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sp-dialog__close svg {
  width: 16px;
  height: 16px;
}

.sp-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--space-5);
}

.sp-dialog__foot {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  background: var(--surface-panel);
}

.sp-dialog__foot .btn {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  min-height: 46px;
  padding: 11px 16px;
  font-size: var(--text-body-s);
  border-radius: var(--sp-radius-sm);
}

.sp-dialog__foot .btn--ghost,
html.nav-theme-light .sp-dialog__foot .btn--ghost {
  flex: 0 1 auto;
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-dialog__section {
  margin-bottom: var(--space-4);
}

.sp-dialog__section:last-child {
  margin-bottom: 0;
}

.sp-dialog__label {
  margin: 0 0 6px;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-dialog__text {
  margin: 0;
  font-size: var(--text-body-s);
  line-height: var(--text-body-s-lh);
  color: var(--text);
}

.sp-dialog__text.shop-muted,
.sp-dialog__text--muted {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.sp-dialog__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-dialog__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-ui);
}

.sp-dialog__line:first-child {
  border-top: 0;
  padding-top: 0;
}

.sp-dialog__line-name {
  min-width: 0;
  color: var(--text);
}

.sp-dialog__line-qty {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sp-dialog__line-amt {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sp-dialog__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body-s);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sp-dialog__next {
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-info) 24%, transparent);
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  color: var(--text);
}

.sp-dialog__next strong {
  display: block;
  margin-bottom: 2px;
}

.sp-dialog__next--done {
  background: color-mix(in srgb, var(--sp-ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--sp-ok) 24%, transparent);
}

.sp-dialog .field {
  margin-bottom: var(--space-3);
}

.sp-dialog .field label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-dialog .field input,
.sp-dialog .field textarea {
  padding: 11px 13px;
  font-size: var(--text-body-m);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border-color: var(--hairline);
  color: var(--text);
}

.sp-dialog .field input:focus,
.sp-dialog .field textarea:focus {
  background: var(--sp-fill);
  box-shadow: var(--focus-ring);
}

html.nav-theme-light .sp-dialog .field input,
html.nav-theme-light .sp-dialog .field textarea {
  background: var(--bg-0);
}

.sp-dialog .field textarea {
  min-height: 72px;
}

.sp-dialog .field .shop-muted {
  margin: 4px 0 0;
  font-size: var(--text-caption);
}

.sp-dialog .sp-toggle {
  margin-bottom: var(--space-2);
}

.sp-dialog .sp-toggle.hidden {
  display: none;
}

.sp-dialog .sp-toggle input:disabled + .sp-toggle__body {
  opacity: 0.6;
}

.sp-dialog .status.seller-ship-form__status {
  margin: var(--space-2) 0 0;
  min-height: 0;
  font-size: var(--text-caption);
}

.sp-dialog .status.seller-ship-form__status:empty {
  display: none;
}

.sp-dialog .fulfillment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-size: var(--text-caption);
}

.sp-dialog .fulfillment-meta__item {
  display: inline-flex;
  gap: 6px;
}

.sp-dialog .fulfillment-meta.hidden {
  display: none;
}

/* Service-request step <dialog> shares the skin. */
.sp-shell #svc-req-step-dialog .seller-ship-form {
  padding: var(--space-4) var(--space-5);
}

.sp-shell #svc-req-step-dialog .seller-ship-form__title {
  margin: 0 0 4px;
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: var(--text-title-3-ls);
  color: var(--text);
}

.sp-shell #svc-req-step-dialog .seller-ship-form__lede {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-shell #svc-req-step-dialog .field input,
.sp-shell #svc-req-step-dialog .field textarea {
  padding: 11px 13px;
  font-size: var(--text-body-m);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  color: var(--text);
}

html.nav-theme-light .sp-shell #svc-req-step-dialog .field input,
html.nav-theme-light .sp-shell #svc-req-step-dialog .field textarea {
  background: var(--bg-0);
}

.sp-shell #svc-req-step-dialog .seller-ship-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sp-shell #svc-req-step-dialog .seller-ship-form__actions .btn {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  min-height: 46px;
  border-radius: var(--sp-radius-sm);
  font-size: var(--text-body-s);
}

.sp-shell #svc-req-step-dialog .seller-ship-form__actions .btn--ghost,
html.nav-theme-light .sp-shell #svc-req-step-dialog .seller-ship-form__actions .btn--ghost {
  flex: 0 1 auto;
  color: var(--text);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

/* —— Mobile bottom navigation + FAB ——————————————————————————————————— */

.sp-tabbar {
  display: none;
}

@media (max-width: 767px) {
  .sp-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: flex;
    align-items: stretch;
    height: calc(var(--sp-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-1) 88%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  .sp-tabbar.hidden {
    display: none;
  }
}

.sp-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s var(--ease);
}

.sp-tab:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
  border-radius: 10px;
}

.sp-tab__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border-radius: 14px;
  transition: background 0.2s var(--ease);
}

.sp-tab__icon svg {
  width: 22px;
  height: 22px;
}

.sp-tab__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-tab.is-active {
  color: var(--text);
}

.sp-tab.is-active .sp-tab__icon {
  background: var(--sp-fill);
}

.sp-tab.is-active .sp-tab__label {
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-tab.is-active .sp-tab__icon svg {
    animation: sp-tab-in 0.32s var(--sp-ease-out);
  }
}

@keyframes sp-tab-in {
  from {
    transform: scale(0.88);
  }
  to {
    transform: scale(1);
  }
}

.sp-tab .sp-badge {
  position: absolute;
  top: -4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  border: 2px solid var(--bg-1);
  box-sizing: content-box;
}

.sp-fab {
  display: none;
}

@media (max-width: 767px) {
  .sp-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--sp-tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: var(--elev-4);
    cursor: pointer;
    transition: transform 0.18s var(--sp-ease-out), opacity 0.18s var(--ease);
  }

  .sp-fab.hidden {
    display: none;
  }

  .sp-fab:active {
    transform: scale(0.94);
  }

  .sp-fab:focus-visible {
    outline: none;
    box-shadow: var(--elev-4), var(--focus-ring);
  }

  .sp-fab svg {
    width: 24px;
    height: 24px;
  }
}

/* Keyboard open on phones: the fixed bar would float over the input. */
@media (max-width: 767px) {
  body.sp-keyboard-open .sp-tabbar,
  body.sp-keyboard-open .sp-fab {
    display: none;
  }
}

/* —— Count-up + success feedback ————————————————————————————————————— */

.sp-kpi__value[data-counting] {
  will-change: contents;
}

.sp-shell .btn.is-success,
.sp-body .btn.is-success {
  background: var(--sp-ok);
  color: #fff;
}

/* —— Product / service form pages —————————————————————————————————————— */

.sp-form-shell .shell-main.shop-checkout-main {
  align-items: center;
}

.sp-form-shell .seller-form-panel.panel--wide {
  max-width: min(100%, 860px);
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--sp-radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--elev-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.nav-theme-light .sp-form-shell .seller-form-panel.panel--wide {
  background: #fff;
}

.sp-form-shell .seller-form-back {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
}

.sp-form-shell .seller-form-back a {
  color: var(--text-muted);
  text-decoration: none;
}

.sp-form-shell .seller-form-back a:hover {
  color: var(--text);
}

.sp-form-shell .seller-form-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.032em;
}

.sp-form-shell .seller-form-lede {
  margin: 0 0 var(--space-5);
  max-width: 56ch;
  font-size: var(--text-body-s);
  color: var(--text-muted);
}

.sp-form-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.sp-form-steps::-webkit-scrollbar {
  display: none;
}

.sp-form-steps__item {
  flex: 0 0 auto;
}

.sp-form-steps__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.sp-form-steps__link:hover {
  color: var(--text);
  background: var(--sp-fill);
}

.sp-form-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sp-fill);
  color: var(--text);
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
}

.sp-form-section {
  scroll-margin-top: 96px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
}

.sp-form-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.sp-form-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.sp-form-section__n {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sp-fill);
  color: var(--text);
  font-size: var(--text-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-form-section__title {
  margin: 0;
  font-size: var(--text-body-m);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sp-form-section__hint {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sp-form-shell .field {
  margin-bottom: var(--space-4);
}

.sp-form-shell .field label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.sp-form-shell .field input,
.sp-form-shell .field select,
.sp-form-shell .field textarea {
  padding: 12px 14px;
  font-size: var(--text-body-m);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border-color: var(--hairline);
  color: var(--text);
}

.sp-form-shell .field input:focus,
.sp-form-shell .field select:focus,
.sp-form-shell .field textarea:focus {
  background: var(--sp-fill);
  box-shadow: var(--focus-ring);
}

html.nav-theme-light .sp-form-shell .field input,
html.nav-theme-light .sp-form-shell .field select,
html.nav-theme-light .sp-form-shell .field textarea {
  background: var(--bg-0);
}

.sp-form-shell .field input[type="file"] {
  padding: 10px;
  font-size: var(--text-caption);
}

.sp-form-shell .seller-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-3);
}

@media (min-width: 640px) {
  .sp-form-shell .seller-form-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.sp-form-shell .seller-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--hairline);
  background: var(--sp-fill-weak);
  cursor: pointer;
}

.sp-form-shell .seller-checkbox-label input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--text);
}

.sp-form-shell .seller-checkbox-label span {
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  color: var(--text);
}

/* Sticky save bar on phones — the primary action is always one thumb away. */
.sp-form-shell .seller-form-actions--save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sp-form-shell .seller-form-actions--save .btn {
  width: auto;
  margin: 0;
  padding: 12px 22px;
  font-size: var(--text-body-s);
  border-radius: var(--radius-pill);
}

@media (max-width: 719px) {
  .sp-form-shell .seller-form-actions--save {
    position: sticky;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: var(--space-4) calc(-1 * var(--space-3)) 0;
    padding: var(--space-3);
    background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--hairline);
  }

  .sp-form-shell .seller-form-actions--save .btn {
    flex: 1 1 auto;
    min-height: 48px;
  }
}

.sp-form-shell .status#form-status {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
}

.sp-form-shell .seller-lifecycle-panel {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.sp-form-shell .seller-lifecycle-panel__title {
  font-size: var(--text-body-m);
}

.sp-form-shell .seller-lifecycle-card {
  border-radius: var(--sp-radius-sm);
  background: var(--sp-fill-weak);
  border: 1px solid var(--hairline);
}

.sp-form-shell .seller-lifecycle-btn {
  border-radius: var(--radius-pill);
}

.sp-form-shell .seller-promo-on-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.sp-form-shell .seller-promo-on-form .register-title {
  display: none;
}

.sp-form-shell .seller-promo-on-form > .shop-muted {
  font-size: var(--text-caption);
}

/* —— Button resets for row-style controls ————————————————————————————— */

/* Rows and inline links that are <button>s must not inherit the UA button
   face — white ink on buttonface is invisible. */
button.sp-row-lite,
button.sp-card__link,
button.sp-quick__btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

button.sp-row-lite {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  padding-left: 4px;
  padding-right: 4px;
}

button.sp-row-lite:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button.sp-card__link {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

button.sp-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}