/* ==========================================================================
   Radical Nutrition — Tienda pública nativa
   Lenguaje visual alineado con frontend-radical-nutrition (app Angular):
   Poppins + JetBrains Mono + Material Symbols, superficies cálidas,
   esquinas redondeadas, gradiente Radical y acentos dorado/rojo.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca */
  --rn-primary: #bb352e;
  --rn-primary-container: #a02720;
  --rn-primary-dark: #8c1d17;
  --rn-primary-bright: #d4433b;
  --rn-gold: #ddb15c;
  --rn-gradient: linear-gradient(#bb352e 0%, #a02720 60%, #8c1d17 100%);
  --rn-gradient-hover: linear-gradient(#c93d36 0%, #b32f28 60%, #9c251e 100%);

  /* Superficies cálidas */
  --rn-background: #ffffff;
  --rn-surface: #ffffff;
  --rn-surface-dim: #f0ebe5;
  --rn-surface-low: #fff8f0;
  --rn-surface-container: #fff0de;
  --rn-surface-high: #f0dcc8;
  --rn-surface-highest: #e8d0b8;
  --rn-surface-variant: #f5e6d3;
  --rn-card: #ffffff;
  --rn-card-variant: #faebd3;

  /* Texto y bordes */
  --rn-on-surface: #1a1a1a;
  --rn-on-surface-variant: #5f5a55;
  --rn-outline: #8a8178;
  --rn-outline-variant: #e3d8cc;
  --rn-inverse-surface: #1a1a1a;
  --rn-inverse-on-surface: #ffffff;

  /* Estados */
  --rn-selection: #22c55e;
  --rn-selection-strong: #15803d;
  --rn-selection-soft: rgb(34 197 94 / .12);
  --rn-selection-ring: rgb(34 197 94 / .28);
  --rn-error: #d32f2f;
  --rn-error-soft: rgb(211 47 47 / .1);

  /* Tipografía */
  --rn-font: 'Poppins', system-ui, sans-serif;
  --rn-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radios */
  --rn-radius-sm: .75rem;
  --rn-radius: 1rem;
  --rn-radius-lg: 1.5rem;
  --rn-radius-xl: 1.75rem;
  --rn-radius-full: 9999px;

  /* Sombra */
  --rn-shadow-sm: 0 1px 2px rgb(23 23 23 / .06);
  --rn-shadow-card: 0 10px 30px rgb(140 29 23 / .07);
  --rn-shadow-lg: 0 24px 60px rgb(23 23 23 / .12);
}

/* Mismos tokens oscuros de frontend-radical-nutrition. */
html.dark {
  color-scheme: dark;

  --rn-primary: #d4433b;
  --rn-primary-container: #bb352e;
  --rn-primary-dark: #a02720;
  --rn-primary-bright: #d4433b;
  --rn-gradient: linear-gradient(#d4433b 0%, #bb352e 60%, #a02720 100%);
  --rn-gradient-hover: linear-gradient(#e04a42 0%, #c93d36 60%, #ad2b24 100%);

  --rn-background: #0f0f0f;
  --rn-surface: #1a1a1a;
  --rn-surface-dim: #121212;
  --rn-surface-low: #1e1e1e;
  --rn-surface-container: #2a2a2a;
  --rn-surface-high: #333333;
  --rn-surface-highest: #3d3d3d;
  --rn-surface-variant: #2a2420;
  --rn-card: #1a1a1a;
  --rn-card-variant: #2a2420;

  --rn-on-surface: #e8e0d8;
  --rn-on-surface-variant: #e0d6cd;
  --rn-outline: #c2b7ae;
  --rn-outline-variant: #404040;
  --rn-inverse-surface: #e8e0d8;
  --rn-inverse-on-surface: #1a1a1a;

  --rn-selection-strong: #4ade80;
  --rn-selection-soft: rgb(74 222 128 / .13);
  --rn-selection-ring: rgb(74 222 128 / .28);
  --rn-error: #ff6b6b;
  --rn-error-soft: rgb(255 107 107 / .12);

  --rn-shadow-sm: 0 1px 2px rgb(0 0 0 / .24);
  --rn-shadow-card: 0 12px 34px rgb(0 0 0 / .28);
  --rn-shadow-lg: 0 24px 60px rgb(0 0 0 / .5);
}

/* ─── Material Symbols ─── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* Inline SVG icons used by JS-rendered fragments (cart drawer, toast, checkout). */
.store-ico { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.store-ico circle { fill: currentColor; stroke: none; }
.store-stepper-mini .store-ico { width: 1.05rem; height: 1.05rem; }
.store-remove .store-ico { width: .95rem; height: .95rem; }
.store-cart-empty .store-ico, .store-cart-error .store-ico { width: 2.5rem; height: 2.5rem; stroke-width: 1.6; color: var(--rn-outline); }
.store-toast .store-ico { width: 1.2rem; height: 1.2rem; color: var(--rn-selection); }

/* ─── Reset / base ─── */
*, *::before, *::after { box-sizing: border-box; }
/* El fondo del documento es el tono oscuro del footer: si el contenido no
   llena el viewport, el espacio sobrante bajo el pie se funde con él en vez
   de mostrar una franja crema. */
html { min-height: 100%; color: var(--rn-on-surface); background: #171412; -webkit-text-size-adjust: 100%; }
body:not(.landing-page) {
  margin: 0;
  min-height: 100dvh;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: var(--rn-font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--rn-on-surface);
  background: var(--rn-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: color .2s ease, background-color .2s ease;
}
body:not(.landing-page) > #contenido { flex: 1 0 auto; }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--rn-primary); outline-offset: 2px; border-radius: 4px; }

.store-shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.store-money { font-family: var(--rn-font-mono); font-weight: 700; font-feature-settings: 'tnum' 1; }

.store-skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  transform: translateY(-160%);
  padding: 10px 18px; border-radius: var(--rn-radius-full);
  color: var(--rn-inverse-on-surface); background: var(--rn-inverse-surface); font-weight: 700;
}
.store-skip-link:focus { transform: none; }

/* ─── Eyebrow ─── */
.store-eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rn-primary);
}

/* ─── Buttons ─── */
.store-button {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; border-radius: var(--rn-radius-full);
  padding: 0 1.6rem;
  font-family: var(--rn-font); font-weight: 700; font-size: .95rem;
  cursor: pointer; text-align: center;
  transition: filter .2s, background-color .2s, border-color .2s, color .2s, transform .1s, box-shadow .2s;
}
.store-button:active { transform: scale(.98); }
.store-button .material-symbols-outlined { font-size: 1.25rem; }
.store-button-primary { color: #fff; background: var(--rn-gradient); box-shadow: 0 12px 26px rgb(187 53 46 / .28); }
.store-button-primary:hover { filter: brightness(1.08); box-shadow: 0 16px 34px rgb(187 53 46 / .34); }
.store-button-tonal { color: var(--rn-on-surface); background: var(--rn-surface-high); border-color: var(--rn-outline-variant); box-shadow: var(--rn-shadow-sm); }
.store-button-tonal:hover { filter: brightness(1.04); border-color: var(--rn-outline); }
.store-button-ghost { color: var(--rn-on-surface); background: var(--rn-surface); border-color: var(--rn-outline-variant); }
.store-button-ghost:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.store-button:disabled { cursor: not-allowed; opacity: .42; filter: none; box-shadow: none; pointer-events: none; }

.store-icon-button {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 0; border-radius: var(--rn-radius-full);
  color: var(--rn-on-surface-variant); background: transparent; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.store-icon-button:hover { color: var(--rn-primary); background: var(--rn-surface-container); }

/* ─── Header ─── */
.store-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--rn-outline-variant);
  background: color-mix(in srgb, var(--rn-background) 82%, transparent);
  backdrop-filter: blur(20px);
}
.store-header-inner { min-height: 68px; display: flex; align-items: center; gap: 1rem; }
.store-brand { display: inline-flex; align-items: center; margin-right: auto; }
.store-brand img { height: 34px; width: auto; }
.store-nav { display: none; align-items: center; gap: 1.75rem; font-weight: 600; font-size: .95rem; }
.store-nav a { color: var(--rn-on-surface-variant); transition: color .2s; }
.store-nav a:hover { color: var(--rn-primary); }
.store-nav a.is-active { color: var(--rn-primary); }
body.store-catalog .store-nav a[href="/comprar-100-whey-protein"],
body.store-product .store-nav a[href="/comprar-100-whey-protein"] { color: var(--rn-primary); }
.store-header-actions { display: flex; align-items: center; gap: .25rem; }
.store-account-link { text-decoration: none; }
body.store-account .store-account-link { color: var(--rn-primary); background: var(--rn-surface-container); }
.store-cart-trigger { position: relative; }
body.landing-page .landing-cart-trigger {
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--rn-radius-full);
  color: #fff; background: transparent; cursor: pointer;
  transition: color .2s, background-color .2s;
}
body.landing-page .landing-cart-trigger:hover {
  color: var(--rn-gold);
  background: rgb(255 255 255 / .1);
}
body.landing-page .landing-cart-trigger:focus-visible {
  outline: 2px solid var(--rn-gold);
  outline-offset: 2px;
}
body.landing-page .landing-cart-trigger > svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.store-cart-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--rn-radius-full);
  color: #fff; background: var(--rn-primary);
  font-family: var(--rn-font-mono); font-size: .65rem; font-weight: 700; line-height: 1;
}
.store-cart-count[hidden] { display: none; }
.store-cart-count.is-bump { animation: cart-bump .4s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ─── Catalog hero ─── */
.store-hero { position: relative; overflow: hidden; background:
    radial-gradient(120% 120% at 100% 0%, var(--rn-surface-container) 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, var(--rn-surface-variant) 0%, transparent 60%),
    var(--rn-surface-low);
  border-bottom: 1px solid var(--rn-outline-variant);
}
.store-hero-content { max-width: 640px; padding-block: 2rem 2.5rem; }
.store-hero h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 7vw, 3.9rem); font-weight: 800; line-height: 1.02; }
.store-hero h1 .accent { color: var(--rn-primary); }
.store-hero p { margin: 0; max-width: 44ch; color: var(--rn-on-surface-variant); font-size: 1.05rem; }
.store-hero-trust { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.store-hero-trust li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--rn-radius-full);
  background: color-mix(in srgb, var(--rn-surface) 80%, transparent);
  border: 1px solid var(--rn-outline-variant);
  font-size: .82rem; font-weight: 600; color: var(--rn-on-surface-variant);
}
.store-hero-trust .material-symbols-outlined { font-size: 1.05rem; color: var(--rn-primary); }

/* ─── Catalog toolbar ─── */
.store-catalog-section { padding-block: 2.25rem 3.5rem; }
.store-catalog-toolbar { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.store-catalog-toolbar h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.store-catalog-toolbar .store-eyebrow { color: var(--rn-on-surface-variant); }

/* ─── Product grid + cards ─── */
.store-product-grid { display: grid; gap: 1.25rem; }
.store-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-xl);
  background: var(--rn-card);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.store-card:hover { border-color: var(--rn-primary); box-shadow: var(--rn-shadow-card); transform: translateY(-3px); }
.store-card-media {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--rn-card-variant);
}
.store-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .5s ease; }
.store-card:hover .store-card-media img { transform: scale(1.05); }
.store-card-badge { position: absolute; top: .75rem; left: .75rem; z-index: 2; }
.store-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: var(--rn-radius-full);
  background: color-mix(in srgb, var(--rn-surface) 88%, transparent); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--rn-outline-variant) 75%, transparent); box-shadow: 0 4px 12px rgb(0 0 0 / .06);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-on-surface);
}
.store-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-dot, var(--rn-primary)); }
.store-card-soldout {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: color-mix(in srgb, var(--rn-background) 70%, transparent);
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--rn-on-surface);
}
.store-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.15rem 1.25rem; }
.store-card-cat { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rn-outline); }
.store-card-name { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.store-card-name a:hover { color: var(--rn-primary); }
.store-card-desc {
  display: -webkit-box; overflow: hidden; margin: .5rem 0 0;
  color: var(--rn-on-surface-variant); font-size: .88rem; line-height: 1.45;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.store-card-foot { margin-top: auto; padding-top: 1rem; }
.store-card-presentation { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-on-surface-variant); }
.store-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.store-price-now { font-family: var(--rn-font-mono); font-size: 1.4rem; font-weight: 700; color: var(--rn-primary); }
.store-price-old { font-family: var(--rn-font-mono); font-size: .85rem; color: var(--rn-outline); text-decoration: line-through; }
.store-price-unit { font-size: .78rem; font-weight: 600; color: var(--rn-on-surface-variant); }
.store-card-add { width: 100%; margin-top: 1rem; min-height: 48px; font-size: .9rem; }

/* ─── Pagination ─── */
.store-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; }
.store-pagination a {
  display: grid; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-full);
  background: var(--rn-surface); font-weight: 600; font-family: var(--rn-font-mono);
  transition: border-color .2s, color .2s, background-color .2s;
}
.store-pagination a:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.store-pagination a[aria-current='page'] { color: #fff; background: var(--rn-gradient); border-color: transparent; }

/* ─── Product detail ─── */
.store-product-page { padding-block: 1.5rem 5rem; }
.store-breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; color: var(--rn-outline); font-size: .82rem; }
.store-breadcrumbs a:hover { color: var(--rn-primary); }
.store-breadcrumbs span[aria-current] { color: var(--rn-on-surface); font-weight: 600; }
.store-product-layout { display: grid; gap: 2rem; }

.store-gallery { position: relative; min-width: 0; }
.store-gallery-main {
  width: 100%; aspect-ratio: 1; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg);
  background: var(--rn-card-variant);
}
.store-gallery-main:focus-visible { outline-offset: 3px; }
.store-gallery-main .swiper-wrapper { height: 100%; }
.store-gallery-slide {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2rem); background: var(--rn-card-variant);
}
.store-gallery-main-img {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; pointer-events: none; -webkit-user-drag: none;
}
.store-gallery-zoom-hint {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: var(--rn-radius-full);
  color: #fff; background: rgb(23 20 18 / .52); backdrop-filter: blur(8px);
  font-family: var(--rn-font-mono); font-size: .62rem; font-weight: 700;
  opacity: .72; pointer-events: none; transition: opacity .2s;
}
.store-gallery-zoom-hint .material-symbols-outlined { font-size: .95rem; }
.store-gallery-main:hover .store-gallery-zoom-hint { opacity: 1; }
.store-gallery-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 8;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: var(--rn-radius-full);
  color: #1a1a1a; background: var(--rn-gold); box-shadow: var(--rn-shadow-sm);
  font-family: var(--rn-font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}
.store-gallery-badge .material-symbols-outlined { font-size: .9rem; }
.store-gallery-thumbs { width: 100%; margin-top: .65rem; padding: 2px; overflow: hidden; }
.store-gallery-thumbs .swiper-wrapper { justify-content: center; }
.store-gallery-thumb {
  width: 72px !important; height: 72px; flex: 0 0 auto;
  padding: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--rn-outline-variant); border-radius: var(--rn-radius-sm);
  background: var(--rn-card-variant); opacity: .58;
  transition: border-color .2s, opacity .2s, transform .2s;
}
.store-gallery-thumb:hover { border-color: var(--rn-primary); opacity: .9; transform: translateY(-1px); }
.store-gallery-thumb.swiper-slide-thumb-active { border-color: var(--rn-primary); opacity: 1; }
.store-gallery-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; pointer-events: none; -webkit-user-drag: none;
}

/* Full-screen product image viewer (Swiper Zoom). */
.store-gallery-modal {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: #fff; background: transparent;
}
.store-gallery-modal::backdrop { background: rgb(0 0 0 / .92); backdrop-filter: blur(8px); }
.store-gallery-modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .92); }
.store-gallery-modal-slider { position: absolute; inset: 0; width: 100%; height: 100%; }
.store-gallery-modal-slider .swiper-wrapper { height: 100%; }
.store-gallery-modal-slide {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 5rem); background: transparent;
}
.store-gallery-modal .swiper-zoom-container {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}
.store-gallery-modal .swiper-slide-zoomed .swiper-zoom-container { cursor: grab; }
.store-gallery-modal .swiper-slide-zoomed .swiper-zoom-container:active { cursor: grabbing; }
.store-gallery-modal-img {
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; user-select: none; pointer-events: none; -webkit-user-drag: none;
  transition: opacity .3s;
}
.store-gallery-modal-slide.is-loaded .store-gallery-modal-img { opacity: 1; }
.store-gallery-loader {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  color: rgb(255 255 255 / .7); font-family: var(--rn-font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.store-gallery-loader span {
  width: 42px; height: 42px; border: 3px solid rgb(255 255 255 / .2);
  border-top-color: var(--rn-primary-bright); border-radius: 50%; animation: store-spin .7s linear infinite;
}
.store-gallery-modal-slide.is-loaded .store-gallery-loader { display: none; }
.store-gallery-close, .store-gallery-nav {
  position: absolute; z-index: 12; display: grid; place-items: center;
  width: 46px; height: 46px; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%;
  color: #fff; background: rgb(0 0 0 / .42); backdrop-filter: blur(10px);
  cursor: pointer; transition: background-color .2s, opacity .2s, transform .2s;
}
.store-gallery-close { top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); }
.store-gallery-nav { top: 50%; transform: translateY(-50%); }
.store-gallery-nav:hover { background: rgb(0 0 0 / .75); transform: translateY(-50%) scale(1.05); }
.store-gallery-close:hover { background: rgb(255 255 255 / .2); transform: scale(1.05); }
.store-gallery-nav:disabled { opacity: .28; cursor: default; transform: translateY(-50%); }
.store-gallery-nav--prev { left: max(.65rem, env(safe-area-inset-left)); }
.store-gallery-nav--next { right: max(.65rem, env(safe-area-inset-right)); }
.store-gallery-close .material-symbols-outlined, .store-gallery-nav .material-symbols-outlined { font-size: 1.8rem; }
.store-gallery-counter {
  position: absolute; top: max(1.45rem, env(safe-area-inset-top)); left: 50%; z-index: 12;
  margin: 0; transform: translateX(-50%);
  color: rgb(255 255 255 / .75); font-family: var(--rn-font-mono); font-size: .72rem; font-weight: 700;
}
.store-gallery-modal-hint {
  position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; z-index: 12;
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0; transform: translateX(-50%); white-space: nowrap;
  color: rgb(255 255 255 / .5); font-family: var(--rn-font-mono); font-size: .65rem;
  pointer-events: none;
}
.store-gallery-modal-hint .material-symbols-outlined { font-size: 1rem; }

.store-product-info { display: flex; flex-direction: column; }
.store-product-eyebrow { margin: 0 0 .35rem; font-family: var(--rn-font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-outline); }
.store-product-info h1 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.08; }
.store-product-lead { margin: 0 0 1.25rem; font-size: 1.02rem; }

.store-buy-box { padding: 1.35rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg); background: var(--rn-card); }
.store-buy-box + .store-buy-box { margin-top: 1rem; }
.store-buy-label { margin: 0 0 .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rn-on-surface-variant); }
.store-buy-price { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.store-buy-price .store-price-now { font-size: clamp(2rem, 6vw, 2.6rem); }
.store-buy-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius); background: var(--rn-card-variant); }
.store-buy-meta span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rn-on-surface-variant); }
.store-buy-meta span:last-child { color: var(--rn-on-surface); }
.store-qty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.15rem; }
.store-qty .store-field-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-on-surface-variant); }

.store-stock { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: var(--rn-radius-full); font-size: .78rem; font-weight: 700; }
.store-stock .material-symbols-outlined { font-size: 1rem; }
.store-stock.is-available { color: var(--rn-selection-strong); background: var(--rn-selection-soft); }
.store-stock.is-out { color: var(--rn-primary-dark); background: var(--rn-error-soft); }

.store-buy-actions { display: grid; gap: .75rem; margin-top: 1.25rem; }
.store-stepper {
  display: inline-grid; grid-template-columns: 46px minmax(46px, 1fr) 46px; align-items: center;
  min-height: 50px; padding: 4px; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-full); background: var(--rn-surface);
}
.store-stepper button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: var(--rn-radius-full); background: var(--rn-surface-container); color: var(--rn-on-surface); cursor: pointer; transition: background-color .2s; }
.store-stepper button:hover { background: var(--rn-surface-high); }
.store-stepper input { min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--rn-font-mono); font-weight: 700; font-size: 1.05rem; text-align: center; -moz-appearance: textfield; }
.store-stepper input::-webkit-inner-spin-button, .store-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.store-product-details {
  margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rn-outline-variant);
}
.store-product-details-header { max-width: 680px; margin-bottom: 1.75rem; }
.store-product-details-header h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; }
.store-product-details-grid { display: grid; gap: 1rem; }
.store-product-detail {
  position: relative; overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg);
  background: color-mix(in srgb, var(--rn-surface) 92%, var(--rn-surface-container));
  box-shadow: var(--rn-shadow-sm);
}
.store-product-detail::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--rn-gradient);
}
.store-product-detail-eyebrow {
  margin: 0 0 .35rem;
  color: var(--rn-primary); font-family: var(--rn-font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.store-product-detail h3 { margin: 0 0 1rem; font-size: clamp(1.2rem, 3vw, 1.55rem); }
.store-rich-text { color: var(--rn-on-surface-variant); line-height: 1.7; }
.store-rich-text > :first-child { margin-top: 0; }
.store-rich-text > :last-child { margin-bottom: 0; }
.store-rich-text p { margin: 0 0 .85rem; }
.store-rich-text strong, .store-rich-text b { color: var(--rn-on-surface); font-weight: 700; }
.store-rich-text a { color: var(--rn-primary); text-decoration: underline; text-underline-offset: .18em; }
.store-rich-text ul, .store-rich-text ol { margin: .6rem 0 1rem; padding-left: 1.3rem; }
.store-rich-text li { margin-bottom: .45rem; }
.store-rich-text img { max-height: 680px; border-radius: var(--rn-radius); margin: 1rem auto 0; object-fit: contain; }
/* Match the app's check/warning lists */
.store-rich-text .check-item, .store-rich-text .warning-item, .store-rich-text .list-group { margin: .85rem 0; padding: 0; list-style: none; }
.store-rich-text .list-group-item { position: relative; margin-bottom: .6rem; padding: 0 0 0 1.85rem; border: 0; }
.store-rich-text .check-item .list-group-item::before,
.store-rich-text .warning-item .list-group-item::before {
  position: absolute; left: 0; top: .05rem;
  font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 1;
  font-size: 1.15rem; color: var(--rn-primary);
}
.store-rich-text .check-item .list-group-item::before { content: 'check_circle'; color: var(--rn-selection-strong); }
.store-rich-text .warning-item .list-group-item::before { content: 'warning'; color: var(--rn-gold); }
.store-nutrition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 360px)); gap: 1rem; }
.store-nutrition-grid img {
  width: 100%; border-radius: var(--rn-radius);
  border: 1px solid var(--rn-outline-variant); background: var(--rn-surface);
}

/* Sticky mobile buy bar */
.store-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem;
  border-top: 1px solid var(--rn-outline-variant);
  background: color-mix(in srgb, var(--rn-background) 92%, transparent); backdrop-filter: blur(16px);
  transform: translateY(120%); transition: transform .3s ease;
}
.store-buybar.is-visible { transform: translateY(0); }
.store-buybar-price { display: flex; flex-direction: column; line-height: 1.1; }
.store-buybar-price small { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rn-on-surface-variant); }
.store-buybar-price strong { font-family: var(--rn-font-mono); font-size: 1.25rem; color: var(--rn-primary); }
.store-buybar .store-button { flex: 1; }

/* ─── Checkout ─── */
.store-checkout-page { padding-block: 2rem 5rem; }
.store-page-heading { max-width: 640px; margin-bottom: 2rem; }
.store-page-heading h1 { margin: 0 0 .5rem; font-size: clamp(1.9rem, 5vw, 3rem); }
.store-page-heading p { margin: 0; color: var(--rn-on-surface-variant); }
.store-checkout-layout { display: grid; gap: 1.5rem; }
.store-checkout-form { display: grid; gap: 1.25rem; }
.store-section { padding: 1.5rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg); background: var(--rn-surface); }
.store-section-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.store-section-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--rn-radius-full); color: var(--rn-primary); background: rgb(187 53 46 / .1); }
.store-section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.store-section-head p { margin: .15rem 0 0; font-size: .85rem; color: var(--rn-on-surface-variant); }
.store-field-grid { display: grid; gap: 1rem; }
.store-field { display: grid; gap: .4rem; }
.store-field label, .store-field-label { font-size: .82rem; font-weight: 600; color: var(--rn-on-surface-variant); }
.store-field input, .store-field textarea, .store-coupon input {
  width: 100%; min-height: 50px; padding: .75rem 1rem;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius); background: var(--rn-surface-low);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.store-field input:focus, .store-field textarea:focus {
  border-color: var(--rn-primary); background: var(--rn-surface); box-shadow: 0 0 0 4px rgb(187 53 46 / .1); outline: none;
}
.store-field input[aria-invalid='true'], .store-field textarea[aria-invalid='true'] {
  border-color: var(--rn-error);
  box-shadow: 0 0 0 3px var(--rn-error-soft);
}
.store-field textarea { min-height: 90px; resize: vertical; }
.store-field-wide { grid-column: 1 / -1; }
.store-field-error { margin: 0; padding-inline: .85rem; color: var(--rn-error); font-size: .75rem; font-weight: 600; line-height: 1.4; }
.store-field-error[hidden] { display: none; }
.store-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* City picker — native counterpart of the Angular mobile bottom sheet. */
.store-city-trigger {
  width: 100%; min-height: 50px; padding: .72rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius);
  color: color-mix(in srgb, var(--rn-outline) 75%, transparent); background: var(--rn-surface-low);
  text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.store-city-trigger:hover { border-color: color-mix(in srgb, var(--rn-primary) 45%, var(--rn-outline-variant)); }
.store-city-trigger.has-value { border-color: var(--rn-primary); color: var(--rn-on-surface); }
.store-city-trigger:focus-visible {
  border-color: var(--rn-primary); background: var(--rn-surface);
  box-shadow: 0 0 0 4px rgb(187 53 46 / .1); outline: none;
}
.store-city-trigger.has-error { border-color: var(--rn-error); }
.store-city-trigger-icon { flex: 0 0 auto; color: var(--rn-outline); font-size: 1.25rem; }

.store-city-selection {
  width: 100%; min-height: 50px; padding: .55rem .7rem .55rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border: 1px solid var(--rn-primary); border-radius: var(--rn-radius); background: var(--rn-surface-low);
}
.store-city-selection[hidden] { display: none; }
.store-city-trigger-copy { min-width: 0; display: grid; line-height: 1.25; }
.store-city-selected-name, .store-city-selected-department {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-city-selected-name { color: var(--rn-on-surface); font-size: .88rem; font-weight: 600; }
.store-city-selected-department { margin-top: .12rem; color: var(--rn-outline); font-size: .72rem; }
.store-city-selection button {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; color: var(--rn-outline); background: transparent; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.store-city-selection button:hover { color: var(--rn-primary); background: rgb(187 53 46 / .08); }

.store-city-dialog {
  inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--rn-on-surface); background: transparent;
}
.store-city-dialog:not([open]) { display: none; }
.store-city-dialog[open] { display: flex; align-items: flex-end; justify-content: center; }
.store-city-dialog[open]::backdrop {
  background: rgb(23 20 18 / .58); backdrop-filter: blur(5px);
  animation: store-city-backdrop-in .34s ease-out both;
}
.store-city-sheet {
  width: min(100%, 32rem); max-height: min(78dvh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--rn-radius-lg) var(--rn-radius-lg) 0 0;
  background: var(--rn-surface); box-shadow: var(--rn-shadow-lg);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform-origin: bottom center;
  animation: store-sheet-up .46s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes store-sheet-up {
  from { opacity: .45; transform: translateY(38%) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes store-city-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.store-city-handle { display: flex; justify-content: center; padding: .75rem 0 .2rem; }
.store-city-handle span { width: 40px; height: 4px; border-radius: var(--rn-radius-full); background: var(--rn-outline-variant); }
.store-city-sheet-head { padding: .35rem 1.5rem 1rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-city-sheet-head h2 { margin: 0 0 .9rem; font-size: 1.05rem; text-align: center; }
.store-city-search { position: relative; display: block; }
.store-city-search > .material-symbols-outlined {
  position: absolute; left: .95rem; top: 50%; z-index: 1; pointer-events: none;
  color: var(--rn-outline); font-size: 1.2rem; transform: translateY(-50%);
}
.store-city-search input {
  width: 100%; height: 48px; padding: .65rem 1rem .65rem 2.75rem;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-full);
  color: var(--rn-on-surface); background: var(--rn-surface-low);
  font-size: .88rem; outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.store-city-search input:focus {
  border-color: var(--rn-primary); background: var(--rn-surface);
  box-shadow: 0 0 0 3px rgb(187 53 46 / .12);
}
.store-city-search input::-webkit-search-cancel-button { cursor: pointer; }
.store-city-results {
  min-height: 12rem; max-height: min(45dvh, 18rem); padding: .75rem 1rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.store-city-state {
  min-height: 10.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; padding: 1.5rem; color: var(--rn-on-surface-variant); text-align: center;
}
.store-city-state > .material-symbols-outlined { color: var(--rn-outline); font-size: 2rem; }
.store-city-state p { margin: 0; font-size: .82rem; }
.store-city-state button {
  margin-top: .25rem; padding: .4rem .85rem; border: 0; border-radius: var(--rn-radius-full);
  color: var(--rn-primary); background: rgb(187 53 46 / .08); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.store-city-spinner {
  width: 24px; height: 24px; border: 3px solid var(--rn-outline-variant);
  border-top-color: var(--rn-primary); border-radius: 50%; animation: store-spin .7s linear infinite;
}
.store-city-option {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .75rem; padding: .65rem .8rem;
  border: 0; border-radius: var(--rn-radius); color: var(--rn-on-surface); background: transparent;
  text-align: left; cursor: pointer; transition: background-color .18s, transform .18s;
}
.store-city-option:hover { background: var(--rn-surface-container); }
.store-city-option:active { transform: scale(.985); }
.store-city-option + .store-city-option { margin-top: .2rem; }
.store-city-option-marker, .store-city-option-chevron { color: var(--rn-outline); }
.store-city-option-marker { font-size: 1.3rem; }
.store-city-option-chevron { font-size: 1.05rem; }
.store-city-option-copy { min-width: 0; display: grid; line-height: 1.3; }
.store-city-option-copy strong, .store-city-option-copy small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-city-option-copy strong { font-size: .86rem; font-weight: 600; }
.store-city-option-copy small { color: var(--rn-outline); font-size: .72rem; }

.store-document-type-sheet { max-height: min(62dvh, 480px); }
.store-document-type-results { min-height: 10rem; max-height: min(42dvh, 18rem); }
.store-document-type-option.is-selected { color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 10%, transparent); }
.store-document-type-option .store-city-option-copy strong { font-size: .9rem; }
.store-document-type-option .store-document-type-check { color: var(--rn-primary); }

.store-payment-options { display: grid; gap: .75rem; }
.store-payment-option {
  display: flex; align-items: center; gap: .85rem; padding: 1rem;
  border: 2px solid var(--rn-outline-variant); border-radius: var(--rn-radius); background: var(--rn-surface-low);
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.store-payment-option:hover { border-color: var(--rn-selection); }
.store-payment-option:has(input:checked) { border-color: var(--rn-selection); background: var(--rn-selection-soft); }
.store-payment-option input { position: absolute; opacity: 0; pointer-events: none; }
.store-payment-radio { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--rn-outline); transition: border-color .2s; }
.store-payment-radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--rn-selection); transform: scale(0); transition: transform .2s; }
.store-payment-option:has(input:checked) .store-payment-radio { border-color: var(--rn-selection); }
.store-payment-option:has(input:checked) .store-payment-radio::after { transform: scale(1); }
.store-payment-copy { display: grid; }
.store-payment-copy strong { font-weight: 700; }
.store-payment-copy small { color: var(--rn-on-surface-variant); font-size: .82rem; }

.store-consent { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; font-size: .88rem; color: var(--rn-on-surface-variant); line-height: 1.55; }
.store-consent input { width: 20px; height: 20px; margin: .08rem 0 0; flex: 0 0 auto; accent-color: var(--rn-primary); cursor: pointer; }
.store-consent label { cursor: pointer; }
.store-consent a { color: #1266e8; font-weight: 500; text-decoration: none; text-underline-offset: .16em; }
.store-consent a:hover { text-decoration: underline; }
html.dark .store-consent a { color: #7da9ff; }
.store-consent.is-invalid input { outline: 2px solid var(--rn-error); outline-offset: 2px; }
.store-consent-error { margin-top: .35rem; padding-left: 1.9rem; }

/* Order summary */
.store-summary { padding: 1.5rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg); background: var(--rn-surface); box-shadow: var(--rn-shadow-card); }
.store-summary h2 { margin: 0 0 1.25rem; font-size: 1.3rem; }
.store-summary-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding-block: .75rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-summary-line img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--rn-radius-sm); background: var(--rn-card-variant); }
.store-summary-line .info { min-width: 0; display: grid; }
.store-summary-line strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.store-summary-line small { color: var(--rn-on-surface-variant); font-size: .8rem; }
.store-summary-line b { font-family: var(--rn-font-mono); font-size: .92rem; white-space: nowrap; }
.store-coupon { display: grid; gap: .4rem; margin-block: 1.25rem; padding-block: 1.25rem; border-block: 1px solid var(--rn-outline-variant); }
.store-coupon-row { display: flex; gap: .5rem; }
.store-coupon input { min-height: 46px; }
.store-coupon input:disabled { opacity: .6; cursor: not-allowed; }
.store-coupon button { min-height: 46px; padding-inline: 1.1rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius); background: var(--rn-surface-container); font-weight: 700; cursor: not-allowed; opacity: .6; }
.store-totals { display: grid; gap: .6rem; }
.store-totals p { display: flex; align-items: center; justify-content: space-between; margin: 0; color: var(--rn-on-surface-variant); }
.store-totals p span:first-child { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.store-total { margin-top: .4rem;margin-bottom: .4rem; padding: 1rem 1.15rem; border-radius: var(--rn-radius); background: var(--rn-surface-container); }
.store-total small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-on-surface-variant); }
.store-total strong { font-family: var(--rn-font-mono); font-size: 1.9rem; letter-spacing: -.02em; }
.store-summary > .store-button { width: 100%; margin-top: 1.25rem; }
.store-summary > .store-button.is-loading { cursor: wait; opacity: .72; pointer-events: none; }
.store-checkout-clear {
  width: 100%; min-height: 42px; margin-top: .65rem; display: flex; align-items: center;
  justify-content: center; gap: .4rem; border: 0; color: var(--rn-primary);
  background: transparent; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.store-checkout-clear[hidden] { display: none; }
.store-checkout-clear:hover { text-decoration: underline; text-underline-offset: .18em; }
.store-checkout-clear .material-symbols-outlined { font-size: 1.1rem; }
.store-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem; color: var(--rn-outline); font-size: .78rem; font-weight: 600; }
.store-secure .material-symbols-outlined { font-size: 1rem; }
.store-checkout-notice { margin: .75rem 0 0; color: var(--rn-on-surface-variant); font-size: .82rem; text-align: center; }
.store-checkout-notice.is-error { color: var(--rn-error); font-weight: 600; }
.store-checkout-notice.is-success { color: var(--rn-selection-strong); font-weight: 600; }

.store-swal-summary { display: grid; gap: .65rem; color: var(--rn-on-surface); text-align: left; }
.store-swal-summary > p, .store-swal-totals p {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0;
}
.store-swal-summary > p span { color: var(--rn-on-surface-variant); text-align: right; }
.store-swal-summary table {
  width: 100%; margin-block: .35rem; border-collapse: collapse; font-size: .85rem;
}
.store-swal-summary td { padding-block: .5rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-swal-summary td:last-child { font-family: var(--rn-font-mono); text-align: right; white-space: nowrap; }
.store-swal-totals { display: grid; gap: .45rem; padding: .85rem 1rem; border-radius: var(--rn-radius-sm); background: var(--rn-surface-container); }
.store-swal-totals .total { padding-top: .55rem; border-top: 1px solid var(--rn-outline-variant); color: var(--rn-primary); font-size: 1.1rem; }
.swal2-popup { color: var(--rn-on-surface); background: var(--rn-surface); }
.swal2-title { color: var(--rn-on-surface); }
.swal2-html-container { color: var(--rn-on-surface-variant); }

/* ─── Cuenta minorista ─── */
.store-account-page { min-height: 70vh; padding-block: clamp(2rem, 6vw, 4rem) 5rem; }
.store-account-page [hidden] { display: none !important; }
.store-account-loading {
  min-height: 52vh; display: grid; place-content: center; justify-items: center; gap: .75rem;
  color: var(--rn-on-surface-variant);
}
.store-account-loading p, .store-account-list-state p { margin: 0; }
.store-account-spinner {
  width: 24px; height: 24px; display: inline-block; flex: 0 0 auto;
  border: 3px solid var(--rn-outline-variant); border-top-color: var(--rn-primary);
  border-radius: 50%; animation: store-spin .7s linear infinite;
}
.store-account-auth {
  width: min(980px, 100%); min-height: 580px; margin-inline: auto; display: grid;
  overflow: hidden; border: 1px solid var(--rn-outline-variant);
  border-radius: var(--rn-radius-xl); background: var(--rn-surface); box-shadow: var(--rn-shadow-lg);
}
.store-account-welcome {
  padding: clamp(2rem, 6vw, 4rem); display: flex; flex-direction: column; justify-content: center;
  color: #fff; background:
    radial-gradient(circle at 85% 15%, rgb(221 177 92 / .3), transparent 30%),
    linear-gradient(145deg, #2b1715, #8c1d17 56%, #bb352e);
}
.store-account-welcome h1 {
  max-width: 560px; margin: .35rem 0 1rem; font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.05;
}
.store-account-welcome > p:not(.store-eyebrow) { max-width: 560px; margin: 0; color: rgb(255 255 255 / .82); }
.store-account-welcome .store-eyebrow { color: #ffdba0; }
.store-account-welcome ul { margin: 2rem 0 0; padding: 0; display: grid; gap: .85rem; list-style: none; }
.store-account-welcome li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; font-weight: 600; }
.store-account-welcome li .material-symbols-outlined { color: #ffdba0; }
.store-account-auth-card { padding: clamp(1.5rem, 5vw, 3rem); display: grid; align-items: center; }
.store-account-form { display: grid; gap: 1rem; }
.store-account-form > header { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .35rem; }
.store-account-form > header h2 { margin: 0; font-size: 1.35rem; }
.store-account-form > header p { margin: .2rem 0 0; color: var(--rn-on-surface-variant); font-size: .84rem; }
.store-account-form > .store-button { width: 100%; }
.store-account-form input[readonly], .store-account-profile input[readonly] {
  color: var(--rn-on-surface-variant); background: var(--rn-surface-dim); cursor: default;
}
.store-password-input { position: relative; }
.store-password-input input { padding-right: 3.25rem; }
.store-password-input button {
  position: absolute; top: 50%; right: .4rem; width: 42px; height: 42px;
  padding: 0; display: grid; place-items: center; transform: translateY(-50%);
  border: 0; border-radius: 50%; color: var(--rn-on-surface-variant);
  background: transparent; cursor: pointer;
}
.store-password-input button:hover,
.store-password-input button:focus-visible {
  color: var(--rn-primary); background: var(--rn-surface-container); outline: none;
}
.store-password-input button .material-symbols-outlined { font-size: 1.2rem; }
.store-account-code {
  font-family: var(--rn-font-mono); font-size: 1.35rem; font-weight: 700;
  letter-spacing: .5em; text-align: center;
}
.store-account-text-button {
  justify-self: center; padding: .45rem .7rem; border: 0; color: var(--rn-primary);
  background: transparent; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.store-account-text-button:hover { text-decoration: underline; text-underline-offset: .18em; }
.store-account-notice {
  margin: 0; padding: .75rem .9rem; border-radius: var(--rn-radius-sm);
  color: var(--rn-on-surface-variant); background: var(--rn-surface-container); font-size: .8rem;
}
.store-account-notice.is-error { color: var(--rn-error); background: var(--rn-error-soft); }
.store-account-notice.is-success { color: var(--rn-selection-strong); background: var(--rn-selection-soft); }
.store-account-form .store-button.is-loading,
.store-account-profile .store-button.is-loading { cursor: wait; opacity: .75; }
.store-account-form .store-button .store-account-spinner,
.store-account-profile .store-button .store-account-spinner { width: 19px; height: 19px; border-width: 2px; border-top-color: currentColor; }

.store-account-dashboard { display: grid; gap: 1.5rem; }
.store-account-dashboard-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
}
.store-account-dashboard-head h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; }
.store-account-dashboard-head p:last-child { margin: .5rem 0 0; color: var(--rn-on-surface-variant); }
.store-account-dashboard-head .store-button { min-width: max-content; }
.store-account-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.store-account-summary article {
  min-width: 0; padding: 1.15rem; display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius);
  background: var(--rn-surface);
}
.store-account-summary article > .material-symbols-outlined {
  width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 10%, transparent);
}
.store-account-summary article div { min-width: 0; display: grid; }
.store-account-summary strong { font-family: var(--rn-font-mono); font-size: 1.35rem; }
.store-account-summary small { color: var(--rn-on-surface-variant); }
.store-account-grid { display: grid; gap: 1.25rem; align-items: start; }
.store-account-side { display: grid; gap: 1.25rem; }
.store-account-panel {
  min-width: 0; padding: clamp(1.15rem, 3vw, 1.5rem);
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg);
  background: var(--rn-surface); box-shadow: var(--rn-shadow-card);
}
.store-account-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem;
}
.store-account-panel-head h2 { margin: 0; font-size: 1.25rem; }
.store-account-panel-head .store-eyebrow { margin-bottom: .2rem; }
.store-account-verified {
  display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .6rem;
  border-radius: var(--rn-radius-full); color: var(--rn-selection-strong);
  background: var(--rn-selection-soft); font-size: .7rem; font-weight: 700;
}
.store-account-verified .material-symbols-outlined { font-size: 1rem; }
.store-account-orders-actions { display: flex; align-items: center; gap: .1rem; }
.store-account-orders-count {
  min-width: 28px; padding: .25rem .55rem; border: 1px solid var(--rn-outline-variant);
  border-radius: var(--rn-radius-full); color: var(--rn-on-surface-variant);
  background: var(--rn-surface-container); font-size: .72rem; font-weight: 700; text-align: center;
}
.store-account-order-filters {
  margin: 0 calc(clamp(1.15rem, 3vw, 1.5rem) * -1) 0;
  padding: 1rem clamp(1.15rem, 3vw, 1.5rem); display: grid; gap: .75rem;
  border-block: 1px solid var(--rn-outline-variant); background: var(--rn-surface-low);
}
.store-account-order-filters .store-field { align-content: end; }
.store-account-order-filters input,
.store-account-order-filters select {
  width: 100%; min-height: 44px; padding: .65rem .75rem;
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-sm);
  color: var(--rn-on-surface); background: var(--rn-surface); font: inherit;
}
.store-account-order-filters input:focus,
.store-account-order-filters select:focus {
  border-color: var(--rn-primary); box-shadow: 0 0 0 3px rgb(187 53 46 / .1); outline: none;
}
.store-account-filter-buttons { display: flex; align-items: end; gap: .5rem; }
.store-account-filter-buttons .store-button { min-height: 44px; padding-inline: .9rem; font-size: .75rem; }
.store-account-orders-table-wrap {
  margin-inline: calc(clamp(1.15rem, 3vw, 1.5rem) * -1);
  overflow-x: auto; overscroll-behavior-inline: contain;
}
.store-account-orders-table {
  width: 100%; min-width: 720px; border-collapse: collapse; text-align: left;
}
.store-account-orders-table th {
  padding: .8rem 1rem; color: var(--rn-on-surface-variant); background: var(--rn-surface-container);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.store-account-orders-table th:first-child,
.store-account-orders-table td:first-child { padding-left: clamp(1.15rem, 3vw, 1.5rem); }
.store-account-orders-table th:last-child,
.store-account-orders-table td:last-child { padding-right: clamp(1.15rem, 3vw, 1.5rem); }
.store-account-orders-table th button {
  padding: 0; display: inline-flex; align-items: center; gap: .25rem;
  border: 0; color: inherit; background: transparent; font: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.store-account-orders-table th button:hover,
.store-account-orders-table th button.is-active { color: var(--rn-primary); }
.store-account-orders-table th .material-symbols-outlined { width: 14px; font-size: .78rem; }
.store-account-orders-table td {
  padding: 1rem; border-bottom: 1px solid var(--rn-outline-variant);
  color: var(--rn-on-surface-variant); font-size: .78rem; vertical-align: middle;
}
.store-account-orders-table tbody tr:last-child td { border-bottom: 0; }
.store-account-orders-table tbody tr:not(.store-account-table-state):hover { background: var(--rn-surface-low); }
.store-account-orders-table .is-action { text-align: right; }
.store-account-order-id { color: var(--rn-on-surface); font-family: var(--rn-font-mono); }
.store-account-order-link {
  min-height: 34px; padding: .4rem .65rem; display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid transparent; border-radius: var(--rn-radius-full);
  color: var(--rn-on-surface-variant); background: transparent; font: inherit; font-weight: 700; cursor: pointer;
}
.store-account-order-link:hover {
  border-color: var(--rn-outline-variant); color: var(--rn-primary); background: var(--rn-surface-container);
}
.store-account-order-link .material-symbols-outlined { font-size: .95rem; }
.store-account-table-state td {
  height: 220px; padding: 2rem !important; text-align: center !important;
}
.store-account-table-state td > * { margin-inline: auto; }
.store-account-table-state td > .material-symbols-outlined { display: block; color: var(--rn-outline); font-size: 2.5rem; }
.store-account-table-state td > .store-account-spinner { display: block; }
.store-account-table-state h3 { margin: .65rem 0 .25rem; color: var(--rn-on-surface); }
.store-account-table-state p { margin: .4rem 0 0; }
.store-account-table-state.is-error { color: var(--rn-error); }
.store-account-pagination {
  margin: 0 calc(clamp(1.15rem, 3vw, 1.5rem) * -1) calc(clamp(1.15rem, 3vw, 1.5rem) * -1);
  padding: .8rem clamp(1.15rem, 3vw, 1.5rem); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rn-outline-variant);
}
.store-account-pagination p { margin: 0; color: var(--rn-on-surface-variant); font-size: .72rem; }
.store-account-pagination > div,
.store-account-pagination label { display: flex; align-items: center; gap: .45rem; }
.store-account-pagination label { color: var(--rn-on-surface-variant); font-size: .72rem; white-space: nowrap; }
.store-account-pagination select {
  min-height: 32px; padding: .3rem .45rem; border: 1px solid var(--rn-outline-variant);
  border-radius: var(--rn-radius-sm); color: var(--rn-on-surface); background: var(--rn-surface-low);
}
.store-account-pagination .store-icon-button { width: 34px; height: 34px; border: 1px solid var(--rn-outline-variant); }
.store-account-pagination .store-icon-button:disabled { opacity: .3; pointer-events: none; }
.store-account-status {
  display: inline-flex; padding: .35rem .65rem; border-radius: var(--rn-radius-full);
  font-size: .7rem; font-weight: 800; text-align: center;
}
.store-account-status.is-success { color: #166534; background: #dcfce7; }
.store-account-status.is-pending { color: #92400e; background: #fef3c7; }
.store-account-status.is-error { color: #991b1b; background: #fee2e2; }
.store-account-tracking {
  padding: .7rem .8rem; display: flex; align-items: center; gap: .65rem;
  border-radius: var(--rn-radius-sm); color: var(--rn-selection-strong); background: var(--rn-selection-soft);
}
.store-account-tracking > .material-symbols-outlined { font-size: 1.2rem; }
.store-account-tracking > span { min-width: 0; display: grid; }
.store-account-tracking small { font-size: .68rem; }
.store-account-tracking strong { overflow-wrap: anywhere; font-family: var(--rn-font-mono); font-size: .8rem; }
.store-account-list-state {
  min-height: 220px; padding: 2rem; display: grid; place-content: center; justify-items: center;
  gap: .6rem; color: var(--rn-on-surface-variant); text-align: center;
}
.store-account-list-state > .material-symbols-outlined { color: var(--rn-outline); font-size: 2.5rem; }
.store-account-list-state h3 { margin: .3rem 0 0; color: var(--rn-on-surface); }
.store-account-list-state .store-button { min-height: 44px; margin-top: .5rem; }
.store-account-list-state.is-error { color: var(--rn-error); }
.store-account-profile { display: grid; gap: .9rem; }
.store-account-profile > .store-button { width: 100%; min-height: 46px; margin-top: .25rem; }
.store-account-addresses { display: grid; gap: .65rem; }
.store-account-addresses article {
  padding: .85rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .65rem;
  border-radius: var(--rn-radius); background: var(--rn-surface-low);
}
.store-account-addresses article > .material-symbols-outlined { margin-top: .1rem; color: var(--rn-primary); }
.store-account-addresses article div { min-width: 0; }
.store-account-addresses strong { font-size: .82rem; }
.store-account-addresses p { margin: .15rem 0; overflow-wrap: anywhere; font-size: .78rem; }
.store-account-addresses small { color: var(--rn-on-surface-variant); font-size: .7rem; }
.store-account-main-address {
  padding: .25rem .45rem; border-radius: var(--rn-radius-full);
  color: var(--rn-selection-strong); background: var(--rn-selection-soft); font-size: .62rem; font-weight: 700;
}
.store-account-empty-copy { margin: 0; color: var(--rn-on-surface-variant); font-size: .82rem; }

.store-account-order-dialog {
  inset: 0; width: min(680px, calc(100% - 24px)); max-width: none; max-height: min(88dvh, 850px);
  margin: auto; padding: 0; border: 0; border-radius: var(--rn-radius-lg);
  color: var(--rn-on-surface); background: var(--rn-surface); box-shadow: var(--rn-shadow-lg);
}
.store-account-order-dialog:not([open]) { display: none; }
.store-account-order-dialog::backdrop { background: rgb(23 20 18 / .62); backdrop-filter: blur(6px); }
.store-account-order-dialog > article { max-height: inherit; display: flex; flex-direction: column; }
.store-account-order-dialog > article > header {
  padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; border-bottom: 1px solid var(--rn-outline-variant);
}
.store-account-order-dialog h2 { margin: 0; font-size: 1.2rem; }
.store-account-order-detail { padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.store-account-detail-state {
  margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.store-account-detail-state > div { display: grid; justify-items: start; gap: .35rem; }
.store-account-detail-state p { margin: 0; color: var(--rn-on-surface-variant); font-size: .75rem; }
.store-account-detail-state > strong { font-family: var(--rn-font-mono); font-size: 1.2rem; color: var(--rn-primary); }
.store-account-timeline { margin: 0 0 1rem; padding: 1rem; display: grid; gap: 0; list-style: none; border-radius: var(--rn-radius); background: var(--rn-surface-low); }
.store-account-timeline li {
  position: relative; min-height: 64px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .7rem;
  color: var(--rn-outline);
}
.store-account-timeline li:not(:last-child)::after {
  content: ''; position: absolute; top: 31px; bottom: 0; left: 16px; width: 2px; background: var(--rn-outline-variant);
}
.store-account-timeline li.is-done:not(:last-child)::after { background: var(--rn-selection); }
.store-account-timeline li > .material-symbols-outlined {
  position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--rn-outline-variant); border-radius: 50%; background: var(--rn-surface); font-size: 1rem;
}
.store-account-timeline li.is-done > .material-symbols-outlined { color: var(--rn-selection-strong); border-color: var(--rn-selection); }
.store-account-timeline li.is-current > .material-symbols-outlined { color: var(--rn-primary); border-color: var(--rn-primary); }
.store-account-timeline li div { display: grid; align-content: start; padding-top: .15rem; }
.store-account-timeline strong { color: var(--rn-on-surface); font-size: .82rem; }
.store-account-timeline small { color: var(--rn-on-surface-variant); font-size: .7rem; }
.store-account-detail-block { margin-top: .8rem; padding: 1rem; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius); }
.store-account-detail-block h3 { margin: 0 0 .75rem; font-size: .9rem; }
.store-account-detail-block > p,
.store-account-detail-products > div,
.store-account-detail-totals p {
  margin: 0; padding-block: .55rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rn-outline-variant); font-size: .78rem;
}
.store-account-detail-block > p:last-child,
.store-account-detail-products > div:last-child { border-bottom: 0; }
.store-account-detail-block p span, .store-account-detail-totals span { color: var(--rn-on-surface-variant); }
.store-account-detail-block p strong { max-width: 65%; overflow-wrap: anywhere; text-align: right; }
.store-account-detail-products span { display: grid; }
.store-account-detail-products small { color: var(--rn-on-surface-variant); }
.store-account-detail-products b { font-family: var(--rn-font-mono); white-space: nowrap; }
.store-account-detail-totals { margin-top: 1rem; padding: .6rem 1rem; border-radius: var(--rn-radius); background: var(--rn-surface-container); }
.store-account-detail-totals p:last-child { border-bottom: 0; }
.store-account-detail-totals strong { font-family: var(--rn-font-mono); }
.store-account-detail-totals .total { font-size: 1rem; }
.store-account-detail-totals .total strong { color: var(--rn-primary); }

@media (min-width: 760px) {
  .store-account-auth { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); }
}

@media (min-width: 980px) {
  .store-account-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .65fr); }
  .store-account-order-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

@media (max-width: 640px) {
  .store-account-page { width: min(100% - 24px, 1240px); padding-top: 1.25rem; }
  .store-account-auth { min-height: 0; }
  .store-account-welcome { padding: 1.5rem; }
  .store-account-welcome h1 { font-size: 2rem; }
  .store-account-welcome ul { display: none; }
  .store-account-auth-card { padding: 1.5rem; }
  .store-account-dashboard-head { align-items: stretch; flex-direction: column; }
  .store-account-dashboard-head .store-button { width: 100%; }
  .store-account-summary { grid-template-columns: 1fr; }
  .store-account-summary article { padding: .85rem 1rem; }
  .store-account-panel.store-account-orders-panel { padding-bottom: 0; overflow: hidden; }
  .store-account-orders-table-wrap { margin-inline: 0; overflow: visible; }
  .store-account-orders-table { min-width: 0; }
  .store-account-orders-table thead { display: none; }
  .store-account-orders-table,
  .store-account-orders-table tbody,
  .store-account-orders-table tr,
  .store-account-orders-table td { display: block; width: 100%; }
  .store-account-orders-table tbody { display: grid; gap: .75rem; padding-bottom: 1rem; }
  .store-account-orders-table tr:not(.store-account-table-state) {
    padding: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1rem;
    border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius);
    background: var(--rn-surface-low);
  }
  .store-account-orders-table td,
  .store-account-orders-table td:first-child,
  .store-account-orders-table td:last-child {
    padding: 0; display: grid; gap: .2rem; border: 0; text-align: left;
  }
  .store-account-orders-table td::before {
    content: attr(data-label); color: var(--rn-on-surface-variant);
    font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  }
  .store-account-orders-table td:nth-child(2),
  .store-account-orders-table td:nth-child(4) { text-align: right; justify-items: end; }
  .store-account-orders-table td:nth-child(5) { align-content: center; }
  .store-account-orders-table td.is-action { align-content: end; text-align: right; justify-items: end; }
  .store-account-order-link { border-color: var(--rn-outline-variant); background: var(--rn-surface); }
  .store-account-table-state td { height: 200px; }
  .store-account-table-state td::before { content: none; }
  .store-account-pagination {
    margin-inline: 0; margin-bottom: 0; padding-inline: 0; align-items: flex-start; flex-direction: column;
  }
  .store-account-pagination > div { width: 100%; justify-content: flex-end; }
  .store-account-pagination label span { display: none; }
  .store-account-order-dialog {
    inset: auto 0 0; width: 100%; max-height: 92dvh; margin: auto 0 0;
    border-radius: var(--rn-radius-lg) var(--rn-radius-lg) 0 0;
  }
}

/* ─── Respuesta de pago minorista ─── */
.store-payment-response-page { min-height: 68vh; display: grid; place-items: center; padding-block: 3rem 5rem; }
.store-payment-response-card {
  width: min(680px, 100%); padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg);
  background: var(--rn-surface); box-shadow: var(--rn-shadow-card); text-align: center;
}
.store-payment-response-icon {
  width: 72px; height: 72px; margin: 0 auto 1.25rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 12%, transparent);
}
.store-payment-response-card[data-payment-state="approved"] .store-payment-response-icon,
.store-payment-response-card[data-payment-state="processed"] .store-payment-response-icon {
  color: #166534; background: #dcfce7;
}
.store-payment-response-card[data-payment-state="pending"] .store-payment-response-icon {
  color: #92400e; background: #fef3c7;
}
.store-payment-response-card[data-payment-state="rejected"] .store-payment-response-icon,
.store-payment-response-card[data-payment-state="error"] .store-payment-response-icon {
  color: #991b1b; background: #fee2e2;
}
.store-payment-response-icon .material-symbols-outlined { font-size: 2.25rem; }
.store-payment-response-card h1 { margin: .3rem 0 .8rem; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.store-payment-response-card > p { color: var(--rn-on-surface-variant); }
.store-payment-state {
  margin: 1.5rem 0 1rem; padding: .8rem 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; border-radius: var(--rn-radius);
  background: var(--rn-surface-container); text-align: left;
}
.store-payment-state > span {
  color: var(--rn-on-surface-variant); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.store-payment-badge {
  padding: .35rem .7rem; border-radius: 999px; font-size: .78rem;
  font-weight: 800; overflow-wrap: anywhere;
}
.store-payment-badge.is-approved,
.store-payment-badge.is-processed { color: #166534; background: #dcfce7; }
.store-payment-badge.is-pending { color: #92400e; background: #fef3c7; }
.store-payment-badge.is-rejected,
.store-payment-badge.is-error { color: #991b1b; background: #fee2e2; }
.store-payment-details {
  margin: 0; display: grid; border: 1px solid var(--rn-outline-variant);
  border-radius: var(--rn-radius); overflow: hidden; text-align: left;
}
.store-payment-details > div {
  min-width: 0; padding: .8rem 1rem; display: grid; grid-template-columns: minmax(110px, .75fr) minmax(0, 1.25fr);
  gap: 1rem; border-bottom: 1px solid var(--rn-outline-variant);
}
.store-payment-details > div:last-child { border-bottom: 0; }
.store-payment-details dt { color: var(--rn-on-surface-variant); font-size: .78rem; font-weight: 700; }
.store-payment-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; text-align: right; }
.store-payment-details [data-payment-detail="reference"] { font-family: var(--rn-font-mono); }
.store-payment-response-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
.store-payment-response-note { margin: 1.4rem 0 0; font-size: .78rem; }

@media (max-width: 480px) {
  .store-payment-details > div { grid-template-columns: 1fr; gap: .25rem; }
  .store-payment-details dd { text-align: left; }
}

/* ─── Legal pages ─── */
.store-legal-page { padding-block: 2.5rem 5rem; }
.store-legal-card {
  width: min(860px, 100%); margin-inline: auto; padding: clamp(1.35rem, 4vw, 3rem);
  border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-lg);
  background: var(--rn-surface); box-shadow: var(--rn-shadow-card);
}
.store-legal-heading { padding-bottom: 1.5rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-legal-heading h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.7rem); line-height: 1.15; }
.store-legal-heading p { margin: .65rem 0 0; color: var(--rn-on-surface-variant); }
.store-legal-content { padding-top: .5rem; color: var(--rn-on-surface-variant); }
.store-legal-content section { padding-top: 1.4rem; scroll-margin-top: 6rem; }
.store-legal-content h2 { margin: 0 0 .6rem; color: var(--rn-on-surface); font-size: 1.05rem; }
.store-legal-content p { margin: 0 0 .85rem; }
.store-legal-content ul { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.store-legal-content li { margin-bottom: .4rem; }
.store-legal-content a { color: var(--rn-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; }

/* ─── Footer ─── */
.store-footer { color: #f4ede6; background: #171412; }
.store-footer-inner { display: grid; gap: 1.5rem; padding-block: 3rem; }
.store-footer-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.store-footer-brand p { margin: .75rem 0 0; max-width: 34ch; color: #c8bdb4; font-size: .92rem; }
.store-footer-cols { display: grid; gap: 1.5rem; }
.store-footer-col h3 { margin: 0 0 .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rn-gold); }
.store-footer-col a, .store-footer-col p { display: block; margin: 0 0 .5rem; color: #c8bdb4; font-size: .9rem; }
.store-footer-col a:hover { color: #fff; }
.store-footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; padding: 1.5rem 0 2.75rem; border-top: 1px solid rgb(255 255 255 / .1); color: #9a9089; font-size: .8rem; }

/* ─── Cart drawer ─── */
.store-cart-dialog {
  width: min(100%, 440px); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0;
  border: 0; color: var(--rn-on-surface); background: var(--rn-background);
  font-family: var(--rn-font); font-size: 1rem; line-height: 1.55;
}
.store-cart-dialog:not([open]) { display: none; }
.store-cart-dialog::backdrop { background: rgb(23 20 18 / .5); backdrop-filter: blur(4px); }
.store-cart-dialog[open] { animation: cart-slide .3s cubic-bezier(.32, .72, 0, 1); }
@keyframes cart-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.store-cart-panel { display: flex; flex-direction: column; height: 100%; }
.store-cart-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-cart-panel h2 { margin: 0; font-size: 1.4rem; }
.store-cart-lines { flex: 1; overflow-y: auto; padding: .5rem 1.35rem; }
.store-cart-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rn-outline-variant); }
.store-cart-line-media { width: 76px; height: 76px; overflow: hidden; border-radius: var(--rn-radius-sm); background: var(--rn-card-variant); }
.store-cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.store-cart-line-info { min-width: 0; display: flex; flex-direction: column; }
.store-cart-line-name { overflow: hidden; font-weight: 700; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.store-cart-line-info small { color: var(--rn-on-surface-variant); font-size: .8rem; }
.store-cart-line-total { margin-top: .1rem; font-family: var(--rn-font-mono); font-weight: 700; color: var(--rn-primary); }
.store-line-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.store-stepper-mini { display: inline-flex; align-items: center; gap: .25rem; padding: 3px; border: 1px solid var(--rn-outline-variant); border-radius: var(--rn-radius-full); background: var(--rn-surface); }
.store-stepper-mini button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--rn-surface-container); color: var(--rn-on-surface); cursor: pointer; }
.store-stepper-mini button:hover { background: var(--rn-surface-high); }
.store-stepper-mini .material-symbols-outlined { font-size: 1.05rem; }
.store-stepper-mini span { min-width: 26px; font-family: var(--rn-font-mono); font-weight: 700; text-align: center; }
.store-remove { display: inline-flex; align-items: center; gap: .25rem; border: 0; padding: 0; color: var(--rn-on-surface-variant); background: transparent; cursor: pointer; font-size: .82rem; font-weight: 600; transition: color .2s; }
.store-remove:hover { color: var(--rn-error); }
.store-remove .material-symbols-outlined { font-size: 1rem; }

.store-cart-summary { position: sticky; bottom: 0; padding: 1.15rem 1.35rem 1.35rem; border-top: 1px solid var(--rn-outline-variant); background: var(--rn-surface); }
.store-cart-summary[hidden] { display: none; }
.store-cart-summary .store-totals { margin-bottom: .9rem; }
.store-cart-summary .store-button { width: 100%; }
.store-cart-total-row { margin-top: .2rem; padding-top: .6rem; border-top: 1px solid var(--rn-outline-variant); }
.store-cart-total-row span { color: var(--rn-on-surface); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.store-cart-total-row strong { font-size: 1.15rem; color: var(--rn-on-surface); }

.store-cart-empty, .store-cart-loading, .store-cart-error, .store-empty {
  display: grid; place-items: center; gap: .75rem; padding: 3rem 1.5rem; text-align: center; color: var(--rn-on-surface-variant);
}
.store-cart-empty .material-symbols-outlined, .store-empty .material-symbols-outlined { font-size: 2.75rem; color: var(--rn-outline); }
.store-cart-empty a, .store-empty a { color: var(--rn-primary); font-weight: 700; }
.store-cart-loading { color: var(--rn-on-surface-variant); }
.store-spin { width: 26px; height: 26px; border: 3px solid var(--rn-outline-variant); border-top-color: var(--rn-primary); border-radius: 50%; animation: store-spin .7s linear infinite; }
@keyframes store-spin { to { transform: rotate(360deg); } }

/* ─── Toast ─── */
.store-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  max-width: min(420px, calc(100% - 32px));
  padding: .8rem .9rem .8rem 1.1rem; border-radius: var(--rn-radius-full);
  color: var(--rn-inverse-on-surface); background: var(--rn-inverse-surface); box-shadow: var(--rn-shadow-lg);
  transform: translate(-50%, 180%); opacity: 0; transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .3s;
}
.store-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.store-toast .material-symbols-outlined { font-size: 1.25rem; color: var(--rn-selection); }
.store-toast-text { font-weight: 600; font-size: .9rem; }
.store-toast button { margin-left: auto; border: 0; padding: .35rem .9rem; border-radius: var(--rn-radius-full); background: rgb(255 255 255 / .16); color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; }
.store-toast button:hover { background: rgb(255 255 255 / .26); }

/* ─── Empty / state pages ─── */
.store-state { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 1rem; width: min(560px, calc(100% - 40px)); margin: auto; padding-block: 4rem; text-align: center; }
.store-state .material-symbols-outlined { font-size: 3.5rem; color: var(--rn-outline); }
.store-state h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.4rem); }
.store-state p { margin: 0; color: var(--rn-on-surface-variant); }

/* ─── Responsive ─── */
@media (min-width: 560px) {
  .store-product-grid { grid-template-columns: repeat(2, 1fr); }
  .store-field-grid { grid-template-columns: repeat(2, 1fr); }
  .store-footer-cols { grid-template-columns: repeat(3, 1fr); }
  .store-buy-actions { grid-template-columns: 1fr 1fr; }
  .store-city-sheet { margin-bottom: 1.5rem; border-radius: var(--rn-radius-lg); }
}

@media (min-width: 768px) {
  .store-shell { width: min(1240px, calc(100% - 64px)); }
  .store-nav { display: flex; }
  .store-product-layout { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .store-product-details-grid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); }
  .store-product-detail--wide { grid-column: 1 / -1; }
  .store-footer-inner { grid-template-columns: 1.2fr 2fr; }
  .store-buybar { display: none; }
}

@media (min-width: 1024px) {
  .store-product-grid { grid-template-columns: repeat(3, 1fr); }
  .store-checkout-layout { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); align-items: start; }
  .store-summary { position: sticky; top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}