/* Public-facing shop styles — TropicalCitrus. */

/* ── Tipografía ─────────────────────────────────────────────────────── */

/* Reservar el ancho del scrollbar siempre para que el layout no salte
 * entre páginas con/sin scroll (la home tiene scroll, las categorías
 * cortas no — el logo se desplazaba al cambiar). */
html {
  scrollbar-gutter: stable;
  /* Anchor jumps (ej. el CTA de hero → #products) usan animación suave
   * en vez del salto instantáneo. Usuarios con `prefers-reduced-motion`
   * lo verán instantáneo (el user-agent respeta esa media query aunque
   * digamos `smooth`). */
  scroll-behavior: smooth;
}

/* Cuando un ancla lleva a `<section id="products">` — o cualquier otra
 * sección — el header sticky (~72px) taparía el arranque. Con
 * scroll-margin-top el target queda por debajo del header, y le damos
 * bastante aire (~72px) para que la primera fila de cards se vea
 * completa, no pegada al borde del header. */
:target,
#products {
  scroll-margin-top: 144px;
}

.public-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-default);
}

.public-shell h1,
.public-shell h2,
.public-shell h3,
.public-shell .hero-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ── Header (blanco sólido sobre hero) ──────────────────────────────── */

/* El fondo se aplica vía pseudo-elemento por si en el futuro volvemos
 * a un glass effect con backdrop-filter — poniéndolo en `.public-header`
 * directamente crea un containing block que confina el menú mobile
 * (position: fixed; inset: 0). Manteniendo el pseudo, evitamos ese bug. */
.public-header {
  /* Sticky (no fixed): el header toma espacio en el flujo del layout,
   * así el hero de abajo NO queda parcialmente tapado (con `fixed` los
   * primeros ~85px del hero desaparecían detrás del header y recortaban
   * las cabezas de los modelos). Al hacer scroll, sticky lo mantiene
   * pegado al top igual que fixed. */
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border-default);
}

.public-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
}

.public-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* No focus/hover cambia el tamaño — evita CLS al interactuar. */
  line-height: 0;
}

.public-brand-logo {
  display: block;
  height: 44px;
  width: auto;
  /* PNG con símbolo + texto ya combinados — no necesita más. */
}

.public-nav {
  display: flex;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.public-nav a {
  color: var(--text-strong);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.public-nav a:hover,
.public-nav a.is-active {
  color: var(--brand-1);
  border-bottom-color: var(--brand-1);
}

/* Burger toggle (CSS-only). El input es el estado oculto; el label actúa
 * de botón y al click cambia :checked, que cascadea al nav. */
.mobile-menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-strong);
  transition: background-color 0.15s ease;
}

.mobile-menu-btn:hover {
  background: var(--surface-muted);
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.mobile-menu-btn-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn-icon-open {
  display: inline-flex;
}

.mobile-menu-backdrop {
  display: none;
}

/* El logo dentro del nav solo se renderiza en mobile; en desktop el
 * brand del header ya está visible. */
.public-nav-brand {
  display: none;
}

@media (max-width: 768px) {
  /* Logo un poco más chico en mobile para que quede espacio para el burger. */
  .public-brand-logo {
    height: 36px;
  }

  .mobile-menu-btn {
    display: inline-flex;
    position: relative;
    z-index: 30;
  }

  /* Cuando el menú está abierto: X en vez de burger. */
  .mobile-menu-toggle:checked ~ .public-header .mobile-menu-btn-icon-open {
    display: none;
  }
  .mobile-menu-toggle:checked ~ .public-header .mobile-menu-btn-icon-close {
    display: inline-flex;
  }

  /* Nav: overlay fullscreen con el mismo glass effect del header.
   * Texto oscuro porque sobre glass blanco el blanco no se lee. */
  .public-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-8) var(--space-12);
    font-size: 1.75rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
    z-index: 20;
    visibility: hidden;
  }

  /* Logo dentro del overlay — visible solo en mobile cuando el menú
   * está abierto. Funciona como link a home. */
  .public-nav-brand {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-decoration: none;
    margin-bottom: var(--space-8);
    width: 100%;
  }

  .public-nav a {
    color: var(--text-strong);
    border-bottom: none;
    padding-bottom: 0;
    width: max-content;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    /* En el overlay mobile el fondo es glass blanco → no necesita halo
     * (sería visible y feo sobre texto oscuro). */
    text-shadow: none;
  }

  .public-nav a.public-nav-brand {
    color: var(--brand-1);
    width: 100%;
  }

  .public-nav a:hover,
  .public-nav a.is-active {
    color: var(--brand-1);
    border-bottom-color: transparent;
  }

  .mobile-menu-toggle:checked ~ .public-header .public-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Cuando el menú está abierto: header se vuelve más opaco (matchea
   * el bg del nav overlay) y el burger pasa a oscuro para ser legible. */
  .mobile-menu-toggle:checked ~ .public-header::before {
    background: rgba(255, 255, 255, 0.85);
  }
  .mobile-menu-toggle:checked ~ .public-header .mobile-menu-btn {
    color: var(--text-strong);
  }

}

.public-main {
  flex: 1;
  width: 100%;
}

.public-footer {
  position: relative;
  margin-top: var(--space-12);
  padding: var(--space-16) 0 var(--space-8);
  color: var(--neutral-0);
  background:
    radial-gradient(
      ellipse at 75% 70%,
      #C8DFE9 0%,
      #61BBD3 35%,
      #0099BF 80%
    ),
    #0099BF;
}

.public-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

.public-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.public-footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.public-footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.public-footer-brand-logo {
  display: block;
  height: 64px;
  width: auto;
}

.public-footer-description {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 30ch;
}

.public-footer-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 var(--space-5);
}

.public-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.public-footer-list a {
  color: var(--neutral-0);
  text-decoration: none;
  transition: color 0.15s ease;
}

.public-footer-list a:hover {
  color: var(--brand-1);
}

.public-footer-address {
  color: var(--neutral-0);
  line-height: 1.5;
}

.public-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--font-size-sm);
}

.public-footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.public-footer-social {
  display: flex;
  gap: var(--space-3);
}

.public-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--neutral-0);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.public-footer-social a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--neutral-0);
}

.public-footer-social svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .public-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .public-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* ── Hero reusable ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* `--hero-bg` viene inyectado por el componente Hero como custom
   * property (evita `background-image` inline, que impide overrides
   * responsivos). `--hero-bg-mobile` es opcional; el fallback al
   * desktop asegura que si no se pasa, se usa la misma imagen. */
  background-image: var(--hero-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--neutral-700);
  color: var(--neutral-0);
  overflow: hidden;
}

.hero-home,
.hero-category {
  /* Altura calculada explícitamente en vez de con `aspect-ratio` +
   * `max-height` (esa combo hace que el browser encoja el ancho para
   * mantener la proporción, dejando white-space a los lados).
   *
   * `48.4vw` = 100 / 2.066 → replica el aspect-ratio de las fotos
   * (5760×2788) mientras el hero puede crecer. En viewports desde ~1610px
   * el `min()` corta ese cálculo en 780px, y el `background-size: cover`
   * recorta un poco vertical (aceptable — hay aire alrededor del sujeto
   * en las fotos). En laptops chicas, `min-height: 480px` evita un hero
   * enano. Ancho siempre 100%. */
  height: min(48.4vw, 780px);
  min-height: 480px;
  display: flex;
  align-items: center;
}

/* Mobile: se anula el aspect-ratio desktop y se usa la altura del
 * viewport, porque el asset mobile es portrait (aspect ~0.52:1) y
 * funciona mejor con `cover` sobre un contenedor casi-fullscreen.
 * `--hero-bg-mobile` reemplaza al desktop si el Hero component la pasó. */
@media (max-width: 768px) {
  .hero-home,
  .hero-category {
    aspect-ratio: auto;
    min-height: 90vh;
    height: auto;
    /* Contenido arriba + centrado horizontal (Figma mobile: título y CTA
     * quedan sobre la zona oscura del banner, arriba de la cara del
     * modelo, en vez de vertical-center-left del desktop). */
    align-items: flex-start;
    justify-content: center;
  }
  .hero-home .hero-title {
    font-size: clamp(2rem, 9vw, 3.25rem);
  }
  .hero {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    /* Mobile: la foto portrait (0.525:1) se sirve del asset -mobile y
     * rellena TODO el ancho — cover recorta ~50-80px verticales, la foto
     * tiene aire para sobrar. En desktop mantenemos `contain` para el
     * efecto seamless con backgroundColor. */
    background-size: cover;
  }
  /* Solo el hero de las páginas de categoría — el del home mantiene
   * el layout original. Especificidad `.hero.hero-category .hero-content`
   * (0,3,0) — necesaria porque hay UN `.hero-category .hero-content
   * { padding: ... }` (0,2,0) más abajo en el archivo cuyo `padding`
   * shorthand pisa el `padding-top` de un match menos específico. */
  .hero.hero-category .hero-content {
    padding-top: clamp(80px, 16vh, 220px);
    text-align: center;
  }
  /* Para el home mantenemos el centrado horizontal del mobile pero
   * conservamos el padding-top base (el diseño del Figma home NO
   * necesita empujar el texto hacia abajo — la modelo tiene aire
   * arriba). */
  .hero-home .hero-content {
    text-align: center;
  }
  .hero-title,
  .hero-subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%),
    linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.hero-content {
  position: relative;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-12);
}

.hero-title {
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  margin: 0 0 var(--space-5);
  max-width: 18ch;
  color: var(--neutral-0);
}

.hero-accent-word {
  color: var(--brand-1);
}

.hero-accent-light {
  font-weight: 300;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: 1.4;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-6);
}

/* CTA outlined pill del hero — border amarillo, texto blanco, flecha
 * amarilla. Hover invierte (bg amarillo + texto dark). */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 22px;
  border: 2px solid var(--brand-1);
  border-radius: 999px;
  color: var(--neutral-0);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
  width: max-content;
}

.hero-cta:hover {
  background: var(--brand-1);
  color: var(--neutral-900, #1a1a1a);
}

.hero-cta:active {
  transform: translateY(1px);
}

.hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-1);
  transition: color 0.15s ease;
}

.hero-cta:hover .hero-cta-icon {
  color: var(--neutral-900, #1a1a1a);
}

.hero-accents {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.9);
}

.hero-accent-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-accent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-1);
}

.hero-accent-icon svg {
  width: 18px;
  height: 18px;
}

/* Hero de categoría: título más pequeño, sin max-width agresivo. */
.hero-category .hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: none;
}
.hero-category .hero-content {
  padding: var(--space-12) var(--space-6) var(--space-10);
}

/* ── Section ────────────────────────────────────────────────────────── */

.public-section {
  max-width: 1280px;
  margin: var(--space-12) auto;
  padding: 0 var(--space-6);
}

.public-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-6);
}

.public-section-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin: 0;
}

/* ── Product grid + card ────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-strong);
}

/* Galería con scroll-snap horizontal — CSS-only, sin JS.
 *
 * Cómo funciona:
 *  - El track .product-card-slides es scrollable horizontalmente con
 *    scroll-snap-type: x mandatory → cada imagen es un "snap point".
 *  - Swipe en mobile / scroll horizontal en desktop = navega entre
 *    imágenes sin disparar clicks (el browser distingue gesture vs tap).
 *  - Click/tap sobre una imagen = navega al detalle (cada slide es <a>).
 *  - Los dots son anchors hash que apuntan al ID de cada slide; click
 *    scrollea el contenedor a esa posición.
 *  - El scrollbar nativo se oculta para que se vea limpio. */
.product-card-gallery {
  position: relative;
}

.product-card-media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-muted);
}

/* Imagen directa dentro del media — antes vivía dentro de .product-card-slide
 * (swiper), ahora que es única va como child directo. */
.product-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botón "info" — flota arriba a la derecha del card, sobre la foto.
 * Solo aparece si el producto tiene 2da imagen (ficha). Click abre el
 * modal global definido en layout.tsx. */
.product-card-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.12s ease, background 0.12s ease;
  z-index: 2;
}

.product-card-info-btn:hover {
  background: #ffffff;
  transform: scale(1.06);
}

.product-card-info-btn:active {
  transform: scale(0.96);
}

/* Modal global "ficha del perfume" — imagen grande centrada. */
.product-details-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  width: auto;
  overflow: visible;
  margin: auto;
  inset: 0;
}

.product-details-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

.product-details-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-140%);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.5rem);
  letter-spacing: -0.01em;
  text-align: left;
  margin: 0;
  padding: 0 48px 0 4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.product-details-image {
  display: block;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  height: auto;
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  background: #ffffff;
}

.product-details-close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.12s ease;
  z-index: 3;
}

.product-details-close:hover {
  background: var(--surface-muted);
}

@media (max-width: 640px) {
  .product-details-title {
    font-size: 1rem;
    padding-right: 40px;
  }
  .product-details-close {
    width: 36px;
    height: 36px;
    transform: translate(30%, -30%);
  }
}

.product-card-slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.product-card-slides.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.product-card-slides.is-dragging img {
  pointer-events: none;
}

.product-card-slides::-webkit-scrollbar {
  display: none;
}

.product-card-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

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

.product-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 2.5rem;
}

/* Dots — slot siempre presente con altura fija para que todos los
 * cards (con o sin segunda imagen) midan lo mismo y se alineen en grid. */
.product-card-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  min-height: 6px;
}

.product-card-dots a {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-300);
  transition: background-color 0.15s ease;
}

.product-card-dots a:hover {
  background: var(--neutral-500);
}

/* Dot activo: la clase `.is-active` la sincroniza product-slider.js
 * según el scroll position del contenedor (no usamos :target porque
 * no se actualiza con scroll programático). */
.product-card-dots a.is-active {
  background: var(--text-strong);
}

/* Badge "LAST CALL · X LEFT" en la esquina superior izquierda. */
.product-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-1);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}

.product-card-brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-1);
  margin: 0;
}

.product-card-name {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
  text-decoration: none;
}

.product-card-size {
  font-weight: 400;
  color: var(--text-muted);
}

.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.product-card-price {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.product-card-buy {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: #0F0F12;
  color: var(--neutral-0);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.product-card-buy:hover {
  background: #2A2A30;
}

.product-card-buy:active {
  transform: translateY(1px);
}

/* ── Product detail ─────────────────────────────────────────────────── */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.product-detail-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-surface);
}

.product-detail-image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-size: 3rem;
}

.product-detail-info h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.product-detail-price {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.product-detail-description {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  white-space: pre-wrap;
}

.product-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.product-detail-buy {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--font-size-lg);
}

.product-detail-back {
  display: inline-block;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Pagination ─────────────────────────────────────────────────────── */

.public-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
  .public-hero h1 {
    font-size: 1.75rem;
  }
}

/* ─── Product detail extras (brand, category, gallery, attributes) ─── */

.product-detail-gallery {
  display: grid;
  gap: var(--space-3);
}

.product-detail-image-secondary {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

.product-detail-brand {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.product-detail-category {
  margin: var(--space-2) 0 var(--space-3);
}

.product-detail-attributes {
  margin: var(--space-4) 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
}

.product-detail-attributes dt {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.product-detail-attributes dd {
  color: var(--text-default);
  margin: 0;
}

/* ── Category showcase (home) ───────────────────────────────────────── */

.category-showcase {
  max-width: 1280px;
  margin: var(--space-16) auto;
  padding: 0 var(--space-6);
}

.category-showcase-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.category-showcase-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.category-showcase-accent {
  color: var(--brand-1);
}

.category-showcase-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.category-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1023px) {
  .category-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .category-showcase-grid {
    grid-template-columns: 1fr;
  }
}

.category-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--neutral-700);
  text-decoration: none;
  color: var(--neutral-0);
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow-md);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Gradient cálido (amarillo→naranja) aplicado uniformemente a toda la
 * imagen — sin transparencia intermedia para evitar la "línea de corte"
 * que se ve cuando el gradient termina. Opacidad baja + multiply para
 * que la imagen siga visible con tinte cálido. El vignette oscuro
 * inferior (siguiente regla) se encarga del contraste del texto. */
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--card-tint-from, #FFC700) 0%,
    var(--card-tint-to, #FF5E00) 100%
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

/* Vignette oscuro en la parte inferior para legibilidad del texto.
 * Color exacto especificado en Figma: #0A0510 con 40% → 0%. */
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 5, 16, 0.85) 0%,
    rgba(10, 5, 16, 0.55) 30%,
    rgba(10, 5, 16, 0.15) 60%,
    rgba(10, 5, 16, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.category-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 3;
}

.category-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--neutral-0);
}

.category-card-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* En layout de 2 columnas (tablet) cada card es ~500px ancho — con
 * aspect 3:5 quedaba enorme. Más cuadrado para que respire. */
@media (max-width: 1023px) {
  .category-card {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 540px) {
  .category-card {
    aspect-ratio: 5 / 4;
  }
}

/* ── Seller profile (home) ──────────────────────────────────────────── */

.seller-profile {
  position: relative;
  isolation: isolate;
  max-width: 1100px;
  margin: var(--space-16) auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

/* "Limón" detrás de la sección — dos círculos blureados que crean un
 * blob amarillo/verde. Posicionados para asomar por la esquina inferior
 * de la foto. */
.seller-profile::before,
.seller-profile::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

/* Círculo verde (pequeño) — detrás del amarillo, lado inferior derecha
 * del blob. Va como ::before para que el amarillo lo pinte encima. */
.seller-profile::before {
  width: 140px;
  height: 140px;
  background: #2A844C;
  left: 28%;
  bottom: -90px;
}

/* Círculo amarillo (grande) — encima del verde. */
.seller-profile::after {
  width: 220px;
  height: 220px;
  background: #FFC700;
  left: 20%;
  bottom: -70px;
}

.seller-profile-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-muted);
  aspect-ratio: 4 / 5;
}

.seller-profile-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.seller-profile-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.seller-profile-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}

.seller-profile-accent {
  color: var(--brand-1);
}

/* ── Lifestyle banner ─────────────────────────────────────────────────
 * Sección editorial: título+subtítulo centrados sobre fondo blanco,
 * imagen wide full-viewport-width abajo. Sin overlay, sin CTA.
 */

.lifestyle-banner {
  background: #ffffff;
}

.lifestyle-banner-heading {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-6);
  text-align: center;
}

.lifestyle-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}

.lifestyle-banner-accent {
  color: var(--brand-1);
}

.lifestyle-banner-subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-muted);
  font-weight: 500;
}

.lifestyle-banner-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .lifestyle-banner-heading {
    padding: var(--space-8) var(--space-4) var(--space-5);
  }
}

.seller-profile-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--text-default);
}

.seller-profile-text p {
  margin: 0;
}

.seller-profile-text strong {
  color: var(--text-strong);
  font-weight: 600;
}

@media (max-width: 768px) {
  .seller-profile {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin: var(--space-12) auto;
  }

  .seller-profile-photo {
    max-width: none;
    width: 100%;
    aspect-ratio: 4 / 5;
  }
}

/* ── Stock CTA banner (presente en todas las páginas) ───────────────── */

.stock-cta-wrap {
  /* Width:100% explícito porque el padre (.public-shell) es flex column
   * y por default los items se encogen al contenido en vez de tomar
   * todo el ancho. Sin esto, el max-width nunca se aplica. */
  width: 100%;
  max-width: 1280px;
  margin: var(--space-16) auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

/* Caja con fondo verde + patrón de limones tileado vía SVG inline data URI.
 * El patrón es un círculo de limón estilizado (~80×80) que se repite. */
.stock-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background-color: #C8DDC2;
  background-image: url('/branding/lemons-pattern.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Mobile: usa la versión square del pattern (mejor densidad para
 * contenedores angostos y altos — el 3:1 desktop dejaba franja vacía). */
@media (max-width: 768px) {
  .stock-cta {
    background-image: url('/branding/lemons-pattern-mobile.png');
  }
}

/* Heading: blanco + verde como accent para "perfume favorito?". */
.stock-cta-heading {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  color: var(--neutral-0);
}

.stock-cta-accent {
  color: #1F7A3D;
}

.stock-cta-body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--text-default);
  margin: 0 0 var(--space-6);
}

/* Botón verde pildora con icono. */
.stock-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: #2A9D4C;
  color: var(--neutral-0);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.stock-cta-button:hover {
  background: #1F7A3D;
}

.stock-cta-button:active {
  transform: translateY(1px);
}

.stock-cta-button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 540px) {
  .stock-cta {
    padding: var(--space-10) var(--space-5);
    /* No override de background-size — heredamos `cover` del base para
     * que el pattern mobile (square 385×385) llene todo el card. */
  }
}

/* ── Trust badges (3 cards de confianza, todas las páginas) ─────────── */

.trust-badges {
  width: 100%;
  max-width: 1280px;
  margin: var(--space-12) auto var(--space-16);
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.trust-badge-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
}

.trust-badge-icon[data-tone="mint"] {
  background: #D4F5E9;
  color: #1FA98A;
}

.trust-badge-icon[data-tone="yellow"] {
  background: #FFF3C4;
  color: #D9A700;
}

.trust-badge-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.trust-badge-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.trust-badge-title {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.3;
}

.trust-badge-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .trust-badges-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ── Checkout modals (feature 19) ───────────────────────────────────── */

.checkout-modal {
  max-width: 60rem;
  width: calc(100% - var(--space-6));
}

/* Nuevo shell del modal — reemplaza .modal-body base para tener
 * padding y layout propios sin depender del shorthand global. */
.checkout-modal-body {
  position: relative;
  padding: var(--space-8) var(--space-10);
  background: #ffffff;
  border-radius: var(--radius-xl);
}

.checkout-header {
  text-align: center;
  margin: 0 0 var(--space-6);
  padding: 0 var(--space-8);
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  align-items: start;
}

.checkout-form-col {
  min-width: 0;
}

.checkout-image-col {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
}

.checkout-image-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #ffffff;
}

.checkout-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.checkout-close:hover {
  background: var(--surface-muted);
  color: var(--text-strong);
}

.checkout-close svg {
  width: 20px;
  height: 20px;
}

.checkout-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}

.checkout-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  margin: 0 0 var(--space-5);
  line-height: 1.45;
}

/* Summary del producto en la columna izquierda del modal — no card
 * compacta, tipografía prominente estilo Figma. */
.checkout-product-summary {
  margin-bottom: var(--space-5);
}

.checkout-product-brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-1);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.checkout-product-headline {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.checkout-product-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 900;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.checkout-product-price {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 900;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

/* Campos del form — label uppercase + input con border. */
.checkout-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.checkout-field label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.checkout-field input,
.checkout-field select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-field input:focus,
.checkout-field select:focus {
  outline: none;
  border-color: var(--state-success);
  box-shadow: 0 0 0 3px rgba(42, 157, 76, 0.15);
}

.checkout-error {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--state-danger);
  background: var(--state-danger-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.checkout-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-width: 220px;
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-1);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  margin: var(--space-2) auto 0;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.checkout-submit:hover {
  filter: brightness(0.95);
}

.checkout-submit:active {
  transform: translateY(1px);
}

.checkout-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkout-footer-note {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* ── Modal Zelle ────────────────────────────────────────────────────── */

.checkout-zelle-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-5) 0;
}

.checkout-zelle-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.checkout-zelle-account {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.checkout-zelle-owner {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.checkout-zelle-owner strong {
  color: var(--text-strong);
  font-weight: 700;
}

.checkout-zelle-note {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  margin: 0;
  line-height: 1.5;
}

.checkout-zelle-reservation {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--state-warning);
  border: 1px solid var(--state-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.checkout-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-width: 260px;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  background: #25D366;
  color: var(--neutral-0);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  margin: 0 auto;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.checkout-whatsapp:hover {
  background: #1FB957;
}

.checkout-whatsapp:active {
  transform: translateY(1px);
}

.checkout-whatsapp svg {
  width: 20px;
  height: 20px;
}

.checkout-zelle-cancel {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
  cursor: pointer;
}

.checkout-zelle-cancel:hover {
  color: var(--text-strong);
}

/* Responsive — sobre desktop chico bajamos a 1 columna cómodamente;
 * en mobile el modal es full-screen con scroll interno. */
@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .checkout-image-col {
    order: -1;             /* imagen arriba en stack vertical */
    max-height: 240px;
    aspect-ratio: auto;
  }
  .checkout-image-col img {
    max-height: 240px;
    width: auto;
  }
}

@media (max-width: 540px) {
  .checkout-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
  .checkout-modal-body {
    padding: var(--space-6) var(--space-5);
    border-radius: 0;
  }
  .checkout-header {
    padding: 0 var(--space-6);
    margin-bottom: var(--space-4);
  }
  .checkout-title {
    font-size: 1.5rem;
  }
}

/* ── Checkout success page (feature 19) ─────────────────────────────── */

.checkout-success {
  max-width: 560px;
  margin: var(--space-16) auto;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.checkout-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--state-success-soft);
  color: var(--state-success);
  font-size: 2.5rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-6);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--state-success-soft) 50%, transparent);
}

.checkout-success-icon-pending {
  background: var(--state-warning-soft);
  color: var(--state-warning);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--state-warning-soft) 50%, transparent);
}

.checkout-success-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}

.checkout-success-lead {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--text-default);
  margin: 0 0 var(--space-8);
}

.checkout-success-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-8);
  text-align: left;
}

.checkout-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.checkout-success-label {
  color: var(--text-muted);
  font-weight: 500;
}

.checkout-success-value {
  color: var(--text-strong);
  font-weight: 700;
}

.checkout-success-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--brand-1);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.checkout-success-button:hover {
  filter: brightness(0.95);
}

.checkout-success-button:active {
  transform: translateY(1px);
}