/* Notie alert por encima de todos los elementos */
.notie-container {
  z-index: 9999 !important;
}

:root {
  --site-max-width: 1340px;
  --red: #059669;
  --red-dark: #047857;
  --red-rgb: 5, 150, 105;
  --error: #dc2626;
  --ink: #111827;
  --ink-rgb: 17, 24, 39;
  --muted: #4b5563;
  --line: #e5e7eb;
  --page: #F9FAFB;
  --white: #ffffff;
  --rose-soft: #ecfdf5;
  --soft-bg: #d1fae5;
  --footer-bg: #111827;
  --footer-dark: #030712;
  --accent: #34D399;
  --shadow: 0 1px 8px rgba(17, 24, 39, 0.1);
  --ui-surface: #ffffff;
  --ui-surface-soft: #f3fbf7;
  --ui-border: #e3eee8;
  --ui-shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.06);
  --ui-shadow-md: 0 14px 34px rgba(17, 24, 39, 0.1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: "Josefin Sans", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: #aeb9b4;
  font-weight: 500;
  opacity: 1;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: #c5cfca;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  min-height: 68px;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.special-offer-container,
.new-products-container,
.beauty-categories-container,
.visit-stats-wrap,
.visit-stats-container {
  max-width: var(--site-max-width);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--accent), var(--red));
  border-radius: 55% 45% 55% 45%;
  clip-path: none;
  position: relative;
  transform: rotate(-18deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px 8px 7px 6px;
  background: var(--white);
  border-radius: inherit;
}

.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 1.9vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-transform: lowercase;
}

.category-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-width: 148px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 160ms ease, transform 160ms ease;
}

.category-button:hover {
  background: var(--red-dark);
}

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

.search {
  display: flex;
  align-items: center;
  flex: 1 1 520px;
  min-width: 180px;
  height: 44px;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 5px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.search input {
  flex: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 16px 0 21px;
  color: #333333;
  font-size: 15px;
}

.search input::placeholder {
  color: #b8b8b8;
}

.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration,
.search-modal-form input::-webkit-search-cancel-button,
.search-modal-form input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

.search input::-ms-clear,
.search-modal-form input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search-button {
  display: grid;
  place-items: center;
  width: 56px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #777777;
  cursor: pointer;
  transition: color 160ms ease;
}

.search-button:hover {
  color: var(--red);
}

.actions {
  display: flex;
  align-items: center;
  height: 44px;
  color: #555555;
}

.action-link,
.cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #555555;
  transition: color 160ms ease;
}

.action-link {
  gap: 12px;
  min-width: 132px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.12;
}

.action-link:first-child {
  border-left: 1px solid var(--line);
}

.cart-link {
  width: 58px;
}

.cart-icon-wrap {
  position: relative;
  display: inline-flex;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

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

.action-link:hover,
.cart-link:hover {
  color: var(--red);
}

.icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-button .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.search-button .icon {
  width: 22px;
  height: 22px;
}

.search-icon-clear {
  display: none;
}

.search.has-query .search-icon-find {
  display: none;
}

.search.has-query .search-icon-clear {
  display: block;
}

.category-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: clamp(16px, calc((100vw - 1620px) / 2 + 210px), 390px);
  display: grid;
  min-width: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.category-menu a {
  padding: 14px 18px;
  color: #333333;
  font-weight: 600;
}

.category-menu a:hover {
  background: #f6f6f6;
  color: var(--red);
}

.hero-slider {
  --slider-height: clamp(440px, 37vw, 680px);
  --slider-footer-height: clamp(22px, 2.75vw, 52px);
  --slider-dot-size: clamp(11px, 0.9vw, 17px);
  --slider-dot-gap: clamp(10px, 1vw, 18px);
  position: relative;
  overflow: hidden;
  height: var(--slider-height);
  min-height: var(--slider-height);
  background: #eef8f3;
}

.slider-track {
  position: relative;
  height: calc(var(--slider-height) - var(--slider-footer-height));
  min-height: calc(var(--slider-height) - var(--slider-footer-height));
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/*=============================================
Texto y foto, en dos columnas de una rejilla.

Antes cada uno era position:absolute anclado a un
borde opuesto: el texto a la izquierda con
max-width:430px y la foto a la derecha. Nada en el CSS
decía que tuvieran que estar cerca, así que al crecer
la pantalla se abría un vacío en el medio —276px a
1440, y subiendo—.

Ahora son vecinos de verdad: la separación la fija el
gap y no depende del ancho de pantalla. align-items
los centra entre sí, que era el otro defecto: con
top:22% y top:10% arrancaban a alturas distintas.
=============================================*/
.slide-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  /*=============================================
  El mínimo no es estético: las flechas miden 52px y
  van pegadas a los bordes del slider. Con menos de
  eso el texto arranca por debajo de la flecha y la
  foto se mete bajo la de la derecha, que es lo que
  pasaba entre 900 y 1200px de ancho.
  =============================================*/
  padding: 0 clamp(68px, 5%, 80px);
  box-sizing: border-box;
}

.slide-photo {
  z-index: 3;
  align-self: center;
  width: 100%;
  max-height: 82%;
  background: var(--white);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 24px 46px rgba(var(--ink-rgb), 0.18);
}

.slide-content {
  z-index: 2;
  color: var(--ink);
  text-align: left;
  text-transform: uppercase;
}

/*=============================================
La dirección solo decide el ORDEN de las columnas.
El texto conserva su alineación al borde exterior,
que es lo que daba el efecto de "abrirse" hacia
fuera en el diseño original.
=============================================*/
.hero-slide.slide-left .slide-content {
  order: 1;
}

.hero-slide.slide-left .slide-photo {
  order: 2;
  aspect-ratio: 4 / 3;
  transform: rotate(3deg);
}

.hero-slide.slide-right .slide-photo {
  order: 1;
  aspect-ratio: 4 / 3;
  transform: rotate(-4deg);
}

.hero-slide.slide-right .slide-content {
  order: 2;
  text-align: right;
}

.slide-title {
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.slide-subtitle {
  margin: 0 0 14px;
  color: #7a7a7a;
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
}

.slide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 146px;
  height: 45px;
  margin-top: 12px;
  padding: 0 22px;
  border-radius: 5px;
  background: var(--red);
  color: var(--white);
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 160ms ease, transform 120ms ease;
}

.slide-button:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

.slide-photo picture,
.slide-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 126px;
  border: 1px solid rgba(167, 243, 208, 0.42);
  border-radius: 0;
  background: rgba(var(--red-rgb), 0.62);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--red-rgb), 0.16);
  backdrop-filter: blur(3px);
  transform: translateY(-50%);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.slider-arrow svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-arrow-next {
  right: 0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.slider-arrow-prev {
  left: 0;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.slider-arrow:hover {
  background: rgba(var(--red-rgb), 0.82);
  border-color: rgba(209, 250, 229, 0.72);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(var(--red-rgb), 0.24);
}

.slider-footer {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--slider-footer-height);
  background: var(--soft-bg);
}

.slider-dots {
  display: flex;
  align-items: center;
  gap: var(--slider-dot-gap);
}

.slider-dot {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  padding: 0;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.36);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.slider-dot.is-active {
  border-color: var(--red);
  background: var(--red);
  transform: scale(1.2);
}

.special-offer {
  position: relative;
  min-height: clamp(190px, 16vw, 305px);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-top: 3px solid var(--accent);
}

.special-offer-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1280px;
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 6vw, 86px);
}

.special-offer-copy {
  width: min(100%, 560px);
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.65);
}

.special-offer-copy h2 {
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
}

.special-offer-copy p {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}

.special-offer-discount {
  margin-bottom: clamp(12px, 1.4vw, 20px) !important;
  font-size: clamp(28px, 2.8vw, 44px);
}

.special-offer-date {
  font-size: clamp(24px, 2.3vw, 36px);
}

.new-products {
  background: var(--white);
  padding: clamp(46px, 5vw, 72px) 0 clamp(42px, 5vw, 64px);
}

.new-products-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

.section-heading h2 {
  margin: 0;
  color: #202020;
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 2vw, 34px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.section-heading a {
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  transition: color 160ms ease;
}

.section-heading a:hover {
  color: var(--red);
}

.product-carousel {
  position: relative;
}

.product-list {
  display: grid;
  grid-auto-columns: minmax(210px, 1fr);
  grid-auto-flow: column;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 0 8px;
}

/*=============================================
El hueco de las flechas, como borde transparente
en vez de relleno.

Un contenedor con scroll recorta su contenido en el
borde EXTERIOR del relleno, no en el interior. Con
"padding: 0 56px" la sexta tarjeta se colaba por ese
hueco de 56px y se veía cortada a la derecha.

Con un borde transparente el recorte cae en el borde
interior, así que entran cinco enteras y la sexta
queda fuera del todo. El ancho reservado es el mismo
y las flechas siguen encajando, porque van absolutas
respecto a .product-carousel.

Solo de 621px hacia arriba: en móvil los bloques de
abajo vuelven a usar relleno a propósito, ahí se
quiere que asome la tarjeta siguiente.
=============================================*/
@media (min-width: 621px) {
  .product-list {
    /* 40 y no 56: las flechas miden 48px y van centradas
       sobre el borde, así que con 40 siguen entrando y
       cada tarjeta gana unos 6px de ancho */
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
  }
}

.product-list::-webkit-scrollbar {
  display: none;
}

/*=============================================
La tarjeta salía muy alargada: 237 de ancho por 423
de alto, casi 1:1.8.

El culpable era el padding-top de 38px, que reservaba
una franja vacía para los distintivos. Pero tanto
.product-badges como .favorite-button ya van en
position:absolute, así que no necesitan ese hueco:
ahora se apoyan sobre la esquina de la foto, como en
las tiendas de referencia.
=============================================*/
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /*=============================================
  Sin min-height a propósito.

  La rejilla ya iguala la altura de las tarjetas de
  una misma fila, así que fijar un mínimo solo servía
  para inflar las que tienen poco texto: en "Los más
  visto", con tarjetas más estrechas, el contenido
  medía 231px contra un mínimo de 320 y quedaban 89px
  de hueco con el precio despegado al fondo.
  =============================================*/
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  padding: 10px 10px 14px;
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;

  /*=============================================
  Alto de la foto, en una variable porque el botón
  "Añadir" va flotando sobre ella y necesita saberlo.

  Aquí la foto es cuadrada (aspect-ratio 1/1), así que
  su alto es su ancho: el de la tarjeta menos los 10px
  de relleno de cada lado. El % se calcula sobre el
  ancho del contenedor, que es justo lo que hace falta.

  En móvil deja de ser cuadrada —lleva un alto fijo
  para que la foto no se estire con la tarjeta— y ahí
  la variable se redefine con ese mismo número.
  =============================================*/
  --card-photo-height: calc(100% - 20px);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-md);
  border-color: #c8ded2;
}

.product-card[data-product-link] {
  cursor: pointer;
}

/*=============================================
La foto llena su caja de lado a lado.

Antes llevaba padding: 14px, y como la caja es
cuadrada y las fotos también, ese relleno dejaba un
marco del fondo degradado por los cuatro lados.

Se mantiene object-fit: contain en vez de cover: con
fotos cuadradas llena igual y sin recortar, y si algún
día entra una que no lo sea, se verá entera sobre el
degradado en lugar de aparecer cortada.
=============================================*/
.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  object-fit: contain;
  margin: 0 auto 10px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-surface-soft) 100%);
  transition: transform 260ms ease;
}

.product-card picture {
  display: block;
}

.product-card:hover img {
  transform: scale(1.04);
}

.product-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0 0 4px;
  overflow: hidden;
  color: #17211d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

/* El h3 de arriba ya se corta a 2 líneas; a la
   descripción le faltaba el mismo tope. Sin él, un
   texto largo estira la tarjeta y rompe la altura
   pareja de la grilla. El min-height reserva el hueco
   cuando la descripción es corta, para que las
   tarjetas de una misma fila no bailen. */
.product-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 2 líneas exactas: en em, para que siga valiendo
     cuando el móvil sube la letra a 14px. Eran 3, pero
     en una tarjeta de 237px de ancho la tercera línea
     alargaba la ficha sin aportar nada legible. */
  min-height: 2.6em;
  max-height: 2.6em;
  margin: 0 0 10px;
  overflow: hidden;
  color: #66746e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

/*=============================================
Precio, precio tachado y descuento, todo en una fila.

Antes .old-price saltaba a su propia línea encima
(order:-1 con flex-basis:100%), así que la tarjeta
gastaba un renglón entero en el precio anterior.

El orden se declara en los tres elementos y no solo en
uno: si alguno queda sin declarar, el resultado pasa a
depender del orden del HTML y se descoloca.
=============================================*/
.product-card .price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.product-card .price-row strong {
  order: 1;
}

.product-card .old-price {
  order: 2;
  flex-basis: auto;
}

.product-card .discount-pill {
  order: 3;
}

.discount-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fce7f3;
  color: #be185d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.product-card strong {
  display: block;
  color: #0f1f18;
  font-family: "Josefin Sans", sans-serif;
  /* Eran 19px: demasiado peso para una tarjeta de
     245px, el precio competía con el nombre */
  font-size: 16px;
  font-weight: 800;
}

.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 46px);
}

.product-badge {
  border-radius: 5px;
  background: var(--rose-soft);
  color: var(--red-dark);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(var(--red-dark-rgb), 0.16);
}

.badge-offer {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.16);
}

.badge-stock {
  background: #111827;
  color: var(--white);
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
}

.product-tag {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--white);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

.product-tag-dark {
  background: #111111;
}

.product-tag-pink {
  background: var(--accent);
  color: var(--ink);
}

.favorite-button,
.gift-bubble {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #222222;
  cursor: pointer;
}

.favorite-button {
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.14);
  font-size: 17px;
  line-height: 1;
  transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.favorite-button:hover {
  color: var(--red-dark);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.2);
}

.favorite-button.is-favorite {
  color: var(--red-dark);
  box-shadow: 0 6px 18px rgba(0, 128, 104, 0.22);
}

.favorite-button:disabled {
  cursor: default;
}

/*=============================================
Botón "Añadir" — se centra sobre la imagen del
producto y solo se muestra al pasar el mouse
sobre la tarjeta (ver .product-card:hover)

La posición se saca de la foto, no se supone: el 10px
es donde empieza (el relleno de la tarjeta) y el margen
la baja media foto. Antes eran dos números fijos —38px
y medio ancho de tarjeta— que solo cuadraban cuando la
tarjeta tenía una franja de 34px arriba y la foto era
cuadrada. Con el relleno actual de 10px y la foto de
alto fijo en móvil, el botón caía 37px por debajo del
centro: en el catálogo se plantaba sobre el producto,
casi tocando el borde de abajo de la imagen.
=============================================*/
.add-cart-button {
  position: absolute;
  z-index: 2;
  top: 10px;
  margin-top: calc(var(--card-photo-height) / 2);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
  padding: 10px 18px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, background 160ms ease, color 160ms ease;
}

.add-cart-button .lucide-icon {
  width: 16px;
  height: 16px;
  stroke: var(--red);
  transition: stroke 160ms ease;
}

.product-card:hover .add-cart-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateY(0);
}

/*=============================================
En pantallas táctiles no hay hover: sin esto el botón
de añadir al carrito era invisible e inalcanzable en el
catálogo, justo donde más se compra.

Pero al estar siempre visible no puede quedarse en el
centro, porque ahí tapa el producto —y en el catálogo,
donde la foto es pequeña, lo tapa entero—. Baja al pie
de la imagen: sigue dentro de ella, a 6px del borde,
donde estorba lo justo.
=============================================*/
@media (hover: none) {
  .add-cart-button {
    margin-top: calc(var(--card-photo-height) - 24px);
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) translateY(0);
  }
}

.add-cart-button:not(:disabled):hover {
  background: var(--red);
  color: var(--white);
}

.add-cart-button:not(:disabled):hover .lucide-icon,
.add-cart-button.is-loading .lucide-icon,
.add-cart-button.is-added .lucide-icon {
  stroke: var(--white);
}

.add-cart-button:disabled {
  cursor: default;
  opacity: 0.82;
}

.add-cart-button.is-loading {
  background: #111827;
  color: var(--white);
  cursor: wait;
}

.add-cart-button.is-added {
  background: #047857;
  color: var(--white);
}

.product-add-cart-button.is-loading,
.buy-now-button.is-loading {
  cursor: wait;
  opacity: 0.82;
}

.product-add-cart-button.is-added,
.buy-now-button.is-added {
  border-color: #047857;
  background: #047857;
  color: #ffffff;
}

.gift-bubble {
  left: 12px;
  top: 146px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--red);
  font-size: 32px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.product-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #222222;
  border-radius: 50%;
  background: var(--white);
  color: #222222;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.product-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(var(--red-rgb), 0.3);
}

.product-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-arrow-prev {
  left: 0;
}

.product-arrow-next {
  right: 0;
}

.product-arrow.is-hidden {
  display: none;
}

.best-sellers {
  padding-top: clamp(46px, 5vw, 72px);
}

.viral-products {
  overflow: hidden;
  background: linear-gradient(90deg, var(--rose-soft) 0%, var(--soft-bg) 100%);
  padding: clamp(42px, 5vw, 70px) 0;
}

.viral-products-container {
  display: grid;
  /*=============================================
  La columna del carrusel no es una fracción suelta:
  mide justo lo que ocupan 3 tarjetas del mismo ancho
  que las del resto de la portada.

  Con 5 visibles allá, cada tarjeta mide
  (ancho - 80 de flechas - 4 huecos de 18) / 5, o sea
  0.2 del ancho menos 30.4px. Tres de esas, más sus dos
  huecos y los 80px de las flechas, dan 60% + 24.8px.
  Por eso va en porcentaje y no en fr: una fracción
  reparte el sobrante, y aquí hace falta una medida
  exacta para que la tarjeta salga idéntica.
  =============================================*/
  grid-template-columns: minmax(0, 1fr) calc(60% + 24.8px);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.viral-copy {
  text-align: center;
}

.viral-copy h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 3.2vw, 48px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.viral-copy p {
  margin: 0;
  color: var(--red-dark);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 500;
}

.viral-see-all {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.viral-see-all:hover {
  color: var(--red);
}

.viral-carousel {
  width: 100%;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
}

.price-row strong {
  display: inline;
  order: 1;
  color: #0f1f18;
}

.old-price {
  order: -1;
  flex-basis: 100%;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1;
  text-decoration: line-through;
}

.discount-tag {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--soft-bg);
  color: var(--red-dark);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.beauty-categories {
  overflow: hidden;
  background: var(--rose-soft);
  padding: clamp(30px, 3.2vw, 46px) 0;
}

.beauty-categories-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vw, 66px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.beauty-category {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 170px;
  height: 78px;
  padding: 8px 20px 8px 10px;
  border-radius: 999px;
  background: var(--white);
  color: #000000;
  font-size: 18px;
  font-style: italic;
  line-height: 1;
  box-shadow: 0 1px 12px rgba(var(--red-rgb), 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.beauty-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--red-rgb), 0.14);
}

.beauty-category img {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.beauty-category span {
  display: block;
}

.visit-stats {
  background: linear-gradient(180deg, var(--white) 0%, var(--rose-soft) 100%);
  padding: clamp(46px, 5vw, 70px) 0 clamp(54px, 5.4vw, 78px);
}

.visit-stats-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.visit-stats-heading {
  margin-bottom: clamp(28px, 3vw, 42px);
}

.visit-stats-heading h2 {
  color: var(--ink);
}

.visit-stats-heading span {
  color: var(--red-dark);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.visit-stats-container {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 54px);
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.visit-stat {
  display: grid;
  justify-items: center;
  text-align: center;
}

.visit-stat h2 {
  margin: 0 0 28px;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0;
}

.stat-ring {
  --percent: 0;
  --ring-color: var(--red);
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(92px, 8.2vw, 126px);
  height: clamp(92px, 8.2vw, 126px);
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--percent) * 1%), var(--soft-bg) 0);
}

.stat-ring::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--white);
}

.stat-ring span {
  position: relative;
  z-index: 1;
  color: var(--ring-color);
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 700;
  line-height: 1;
}

.visit-stat p {
  margin: 26px 0 0;
  color: #000000;
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 400;
  line-height: 1.1;
}

.site-footer {
  background: var(--footer-bg);
  color: var(--white);
}

.footer-main {
  background: var(--footer-bg);
  padding: clamp(48px, 5vw, 70px) 0 clamp(56px, 5.6vw, 82px);
}

.footer-container {
  display: grid;
  grid-template-columns: minmax(410px, 1.1fr) minmax(290px, 0.85fr) minmax(360px, 1fr);
  gap: clamp(34px, 4vw, 58px);
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 20px;
  align-content: start;
}

.footer-column h2,
.footer-contact h2,
.footer-form h2 {
  margin: 0;
  color: var(--white);
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.footer-column h2 {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-column ul,
.footer-contact ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.footer-column li,
.footer-contact li {
  margin-bottom: 8px;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.footer-column a,
.footer-contact a {
  color: inherit;
}

.footer-column a:hover,
.footer-contact a:hover,
.social-links a:hover {
  color: var(--accent);
}

.footer-links .footer-column:nth-child(4) {
  grid-column: 1;
}

.footer-contact h2 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}

.footer-contact li:last-child {
  display: block;
  padding-left: 25px;
}

.footer-contact span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--white);
}

.footer-contact .lucide-icon {
  width: 18px;
  height: 18px;
}

.footer-contact img,
.footer-map {
  display: block;
  width: 100%;
  max-width: 355px;
  height: 252px;
  margin-top: 30px;
  border: 0;
  object-fit: cover;
}

.footer-form h2 {
  margin-bottom: 18px;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 600;
  font-style: italic;
}

.footer-form form {
  display: grid;
  justify-items: end;
  gap: 18px;
}

.footer-form input,
.footer-form textarea {
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: var(--white);
  color: #333333;
  outline: 0;
  padding: 0 16px;
  font-size: 20px;
}

.footer-form input {
  height: 48px;
}

.footer-form textarea {
  min-height: 166px;
  padding-top: 12px;
  resize: vertical;
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
  color: #8f979f;
}

.footer-form button {
  min-width: 86px;
  height: 45px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
}

.footer-form button:hover {
  background: var(--red-dark);
}

.footer-bottom {
  background: var(--footer-dark);
}

.footer-bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  min-height: 70px;
  margin: 0 auto;
  padding: 0;
}

.footer-bottom p {
  margin: 0;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.whatsapp-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 120;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.whatsapp-float:hover {
  color: #ffffff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.whatsapp-float svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

@media (max-width: 620px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 1400px) {
  .topbar {
    max-width: var(--site-max-width);
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .topbar {
    gap: 16px;
  }

  .brand-name {
    font-size: 29px;
  }

  .category-button {
    min-width: 124px;
    gap: 11px;
  }

  .search {
    flex-basis: 300px;
  }

  .search input {
    font-size: 13px;
  }

  .action-link {
    min-width: 100px;
    gap: 8px;
    padding: 0 12px;
    font-size: 12px;
  }

  .cart-link {
    width: 48px;
  }

  .visit-stats-container {
    gap: 22px;
  }

  .visit-stat h2 {
    font-size: 28px;
  }

  .visit-stat p {
    font-size: 18px;
  }

  .footer-container {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  }

  .footer-links {
    grid-column: 1 / -1;
  }

  .footer-contact img,
  .footer-map {
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  .site-header {
    padding-top: 0;
  }

  .topbar {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 0 14px;
  }

  .category-button {
    order: 1;
    min-width: 32px;
    width: 32px;
    height: 38px;
    padding: 0;
    gap: 0;
    border-radius: 0;
    background: transparent;
    color: #4d4d4d;
  }

  .category-button:hover {
    background: transparent;
    color: var(--red);
  }

  .category-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .category-button .icon {
    width: 25px;
    height: 25px;
    stroke-width: 2;
  }

  .brand {
    order: 2;
    margin-right: auto;
    gap: 5px;
  }

  .brand-mark {
    width: 18px;
    height: 18px;
  }

  .brand-mark::after {
    inset: 5px;
  }

  .brand-name {
    font-size: 25px;
  }

  .search {
    order: 3;
    flex: 0 0 42px;
    min-width: 42px;
    width: 42px;
    height: 38px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .search input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .search-button {
    width: 42px;
    color: #4d4d4d;
  }

  .search-button .icon {
    width: 24px;
    height: 24px;
  }

  .actions {
    order: 4;
    width: auto;
    height: 38px;
    margin: 0;
  }

  .action-link {
    display: none;
  }

  .cart-link {
    width: 42px;
  }

  .cart-link .icon {
    width: 26px;
    height: 26px;
  }

  .category-menu {
    top: calc(100% + 6px);
    left: 18px;
    right: auto;
    width: 230px;
    max-width: calc(100% - 36px);
  }

  .hero-slider {
    --slider-height: clamp(460px, 45vw, 490px);
  }

  .visit-stats-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 42px;
  }

  .visit-stat h2 {
    margin-bottom: 20px;
  }

  .visit-stat p {
    margin-top: 18px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: auto;
  }

  .footer-links .footer-column:nth-child(4) {
    grid-column: auto;
  }

  .footer-contact img,
  .footer-map {
    max-width: 520px;
  }

  .footer-form form {
    justify-items: start;
  }

  .footer-form button {
    justify-self: end;
  }
}

@media (min-width: 621px) and (max-width: 760px) {
  .hero-slider {
    --slider-footer-height: clamp(28px, 5vw, 36px);
    --slider-dot-size: clamp(10px, 1.8vw, 13px);
    --slider-dot-gap: clamp(10px, 2vw, 15px);
  }
}

@media (max-width: 768px) {
  .slider-arrow {
    width: 36px;
    height: 78px;
  }

  .slider-arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* Debajo de este ancho, el layout de dos columnas del hero (foto a
   un lado, texto al otro) queda demasiado apretado — se apila: foto
   arriba, texto centrado abajo. Ambas direcciones (slide-left/
   slide-right) comparten un único acomodo centrado. */
@media (max-width: 900px) {
  /* Una sola columna: foto arriba, texto debajo.
     Antes esto se lograba recolocando dos cajas
     absolutas; con la rejilla basta con cambiar las
     columnas por filas. */
  .slide-inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(14px, 3vw, 24px);
    padding: 0 16px;
  }

  /*=============================================
  El tope de alto es lo que sostiene el apilado.

  Con solo el ancho al 62%, en la franja de ~700-900px
  la foto salía de 357px de alto: sumada al texto
  pedía 524px dentro de un slider de 438px, así que se
  cortaba por arriba y el botón se salía por abajo.

  La foto lleva object-fit: cover, de modo que al
  toparse recorta en vez de deformarse.
  =============================================*/
  .hero-slide.slide-left .slide-photo,
  .hero-slide.slide-right .slide-photo {
    order: 1;
    justify-self: center;
    width: 62%;
    max-height: 244px;
    transform: rotate(2deg);
  }

  .hero-slide.slide-left .slide-content,
  .hero-slide.slide-right .slide-content {
    order: 2;
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .slide-title {
    margin-bottom: 6px;
    font-size: clamp(24px, 5.5vw, 32px);
    line-height: 1.08;
  }

  .slide-subtitle {
    margin-bottom: 8px;
    font-size: clamp(14px, 2.8vw, 17px);
    line-height: 1.2;
  }

  .slide-button {
    min-width: 130px;
    height: 38px;
    margin-top: 8px;
    padding: 0 18px;
    font-size: 11px;
  }
}

@media (max-width: 620px) {
  .site-header {
    padding-top: 0;
  }

  .topbar {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
  }

  .brand-name {
    font-size: clamp(21px, 5.8vw, 25px);
  }

  .page-preview {
    margin-top: 48px;
  }

  .category-menu {
    left: 30px;
    width: min(230px, calc(100% - 60px));
  }

  .hero-slider {
    --slider-height: 560px;
    --slider-footer-height: 34px;
    --slider-dot-size: clamp(10px, 3vw, 14px);
    --slider-dot-gap: clamp(10px, 3.4vw, 16px);
  }

  .slider-arrow {
    width: 28px;
    height: 88px;
    background: rgba(var(--red-rgb), 0.54);
  }

  .slider-arrow svg {
    width: 18px;
    height: 18px;
  }

  .special-offer {
    min-height: clamp(160px, 38vw, 220px);
    background-position: center;
  }

  .special-offer-container {
    justify-content: center;
    padding: clamp(22px, 6vw, 34px) 24px;
  }

  .special-offer-copy {
    max-width: 360px;
  }

  .special-offer-copy h2 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .special-offer-discount {
    font-size: clamp(22px, 6.5vw, 32px);
  }

  .special-offer-date {
    font-size: clamp(18px, 5.4vw, 26px);
  }

  .new-products {
    padding-top: 38px;
  }

  .new-products-container {
    padding: 0 14px;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .section-heading a {
    font-size: 15px;
  }

  .product-list {
    grid-template-columns: none;
    grid-auto-columns: minmax(190px, 72vw);
    gap: 14px;
    padding: 0 42px 8px;
  }


  .product-card img {
    height: 170px;
  }

  .product-arrow {
    width: 36px;
    height: 36px;
  }

  .product-arrow svg {
    width: 16px;
    height: 16px;
  }

  .viral-products-container {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .viral-copy {
    text-align: left;
  }
  .beauty-categories {
    padding: 24px 0;
  }

  .beauty-categories-container {
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding: 0 14px 4px;
    scrollbar-width: none;
  }

  .beauty-categories-container::-webkit-scrollbar {
    display: none;
  }

  .beauty-category {
    min-width: 150px;
    height: 66px;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    font-size: 16px;
  }

  .beauty-category img {
    width: 52px;
    height: 52px;
  }


  .viral-products {
    padding: 34px 0 38px;
  }

  .viral-products-container {
    padding: 0 14px;
  }

  .viral-copy {
    text-align: center;
  }


  .visit-stats {
    padding: 38px 0 44px;
  }

  .visit-stats-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    padding: 0 14px;
  }

  .visit-stat h2 {
    margin-bottom: 16px;
    font-size: clamp(22px, 8vw, 30px);
  }

  .stat-ring {
    width: clamp(78px, 26vw, 104px);
    height: clamp(78px, 26vw, 104px);
  }

  .visit-stat p {
    margin-top: 14px;
    font-size: clamp(15px, 5vw, 20px);
  }

  .footer-main {
    padding: 36px 0 42px;
  }

  .footer-container {
    padding: 0 14px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
  }

  .footer-column h2 {
    padding-bottom: 14px;
    font-size: 22px;
  }

  .footer-column ul,
  .footer-contact ul {
    margin-top: 16px;
  }

  .footer-column li {
    font-size: 16px;
  }

  .footer-contact img,
  .footer-map {
    height: 200px;
    margin-top: 22px;
  }

  .footer-form h2 {
    font-size: clamp(24px, 8vw, 30px);
  }

  .footer-form input,
  .footer-form textarea {
    font-size: 17px;
  }

  .footer-bottom-container {
    flex-direction: column;
    justify-content: center;
    min-height: 96px;
    padding: 16px 14px;
    text-align: center;
  }

  .footer-bottom p {
    font-size: 14px;
  }

}

@media (max-width: 420px) {
  .slider-arrow {
    width: 26px;
    height: 82px;
  }
}

@media (max-width: 300px) {
  .topbar {
    width: 100%;
    gap: 5px;
    padding: 0 8px;
  }

  .brand-name {
    font-size: 21px;
  }

  .brand-mark {
    width: 16px;
    height: 16px;
  }

  .category-button,
  .search,
  .search-button,
  .cart-link {
    width: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }

  .icon,
  .category-button .icon,
  .search-button .icon,
  .cart-link .icon {
    width: 22px;
    height: 22px;
  }

  .category-menu {
    left: 10px;
    width: calc(100% - 20px);
  }

  .hero-slider {
    --slider-dot-size: 10px;
    --slider-dot-gap: 9px;
  }

  .special-offer {
    min-height: 150px;
  }

  .special-offer-container {
    padding-right: 18px;
    padding-left: 18px;
  }

  .special-offer-copy h2 {
    font-size: 25px;
  }

  .special-offer-discount {
    margin-bottom: 8px !important;
    font-size: 20px;
  }

  .special-offer-date {
    font-size: 16px;
  }

  .section-heading {
    align-items: flex-end;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .product-list {
    grid-auto-columns: minmax(178px, 78vw);
    padding-right: 32px;
    padding-left: 32px;
  }

  .product-card {
    padding-top: 10px;
  }

  .product-card h3 {
    font-size: 17px;
  }

  .product-card p {
    font-size: 14px;
  }

  .product-card img {
    height: 156px;
  }

  .product-arrow {
    width: 30px;
    height: 30px;
  }

  .product-arrow svg {
    width: 14px;
    height: 14px;
  }

  .beauty-categories {
    padding: 20px 0;
  }

  .beauty-categories-container {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .beauty-category {
    min-width: 132px;
    height: 58px;
    font-size: 14px;
  }

  .beauty-category img {
    width: 46px;
    height: 46px;
  }

  .visit-stats-container {
    gap: 28px 12px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .visit-stat h2 {
    font-size: 20px;
  }

  .stat-ring {
    width: 72px;
    height: 72px;
  }

  .stat-ring span {
    font-size: 18px;
  }

  .visit-stat p {
    font-size: 14px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-column h2 {
    font-size: 20px;
  }

  .footer-column li,
  .footer-contact li {
    font-size: 14px;
  }

  .footer-contact img,
  .footer-map {
    height: 170px;
  }

  .footer-form input {
    height: 42px;
  }

  .footer-form textarea {
    min-height: 132px;
  }

}

/* Final responsive refinements */
.product-list {
  /* Cuántas tarjetas enteras caben antes de tener que
     desplazar el carrusel. El calc de abajo reparte el
     ancho entre esta cifra, así que con 4 la quinta
     quedaba cortada por la mitad en el borde derecho. */
  --visible-products: 5;
  --product-gap: 18px;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--visible-products) - 1) * var(--product-gap)) / var(--visible-products));
  gap: var(--product-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.product-card {
  scroll-snap-align: start;
}

.beauty-categories {
  position: relative;
}

.beauty-categories-container {
  justify-content: flex-start;
  width: 100%;
  max-width: var(--site-max-width);
  gap: clamp(18px, 3vw, 42px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.beauty-categories-container::-webkit-scrollbar {
  display: none;
}

.beauty-categories-container.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.beauty-category {
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .new-products-container,
  .viral-products-container,
  .special-offer-container,
  .beauty-categories-container,
  .visit-stats-container {
    width: min(100% - 32px, var(--site-max-width));
    max-width: var(--site-max-width);
  }

  .new-products-container,
.viral-products-container,
.beauty-categories-container,
.visit-stats-wrap,
.visit-stats-container {
    padding-right: 0;
    padding-left: 0;
  }
}

.footer-container {
  grid-template-columns: minmax(500px, 1.15fr) minmax(280px, 0.8fr) minmax(340px, 1fr);
}

.footer-container > * {
  min-width: 0;
}

.footer-links {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 36px 42px;
}

.social-links a {
  width: 24px;
  height: 24px;
  font-size: 0;
}

.lucide-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Íconos del selector del panel (icons.json). A
   diferencia de los lucide, son de relleno macizo,
   así que hay que anular el trazo heredado. */
.category-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
}

@media (max-width: 1320px) {
  .footer-container {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  }

  .footer-links {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }

  .footer-links .footer-column:nth-child(4) {
    grid-column: auto;
  }

  .footer-contact img,
  .footer-map {
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  .product-list {
    /* Escalón intermedio: de 5 a 3 de golpe dejaba las
       tarjetas desproporcionadamente anchas en portátil */
    --visible-products: 4;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    grid-column: auto;
  }

  .footer-links .footer-column:nth-child(4) {
    grid-column: auto;
  }
}

@media (max-width: 1023px) {
  .topbar {
    width: 100%;
    max-width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media (max-width: 900px) {
  .product-list {
    --visible-products: 3;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 32px 42px;
  }
}

@media (max-width: 620px) {
  .product-list {
    /* Dos, no una: con una sola la tarjeta se estira a
       todo el ancho y la foto queda como una franja
       apaisada con el producto flotando en el medio */
    --visible-products: 2;
    --product-gap: 14px;
    grid-auto-columns: calc((100% - var(--product-gap)) / 2);
    padding-right: 42px;
    padding-left: 42px;
  }

  .beauty-categories-container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 420px) {
  .product-list {
    --visible-products: 1;
    grid-auto-columns: 100%;
    padding-right: 38px;
    padding-left: 38px;
  }
}

/* Viral section must fill the selected horizontal area on desktop. */
.viral-products .viral-carousel {
  width: 100%;
  min-width: 0;
}

@media (min-width: 901px) {
  /*=============================================
  Esta lista vive en una columna más estrecha que el
  resto, porque el título va al lado. Lo que cambia es
  CUÁNTAS tarjetas se ven, nunca cuánto miden: el ancho
  de columna del contenedor está calculado para que la
  tarjeta salga igual que en las demás franjas.

  De ahí que el hueco sea 18px y el relleno cero, como
  en .product-list: los 54px de antes se sumaban al
  borde de 40px de las flechas y dejaban cada tarjeta
  40px más estrecha que las de "Lo más nuevo".

  Por debajo de 900 la sección se apila, la lista ocupa
  todo el ancho y hereda sin más la escalera de
  .product-list, clase que ya lleva en el HTML.
  =============================================*/
  .viral-products .viral-product-list {
    --visible-products: 3;
    --product-gap: 18px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - (var(--visible-products) - 1) * var(--product-gap)) / var(--visible-products));
    gap: var(--product-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 8px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  /*=============================================
  Aquí el resto de la portada baja a 4 tarjetas, así que
  cada una es más ancha. Caben 2 en esta franja, no 3:
  con 3 la columna se comería el sitio del título.

  El calc del contenedor sigue la misma cuenta que el de
  arriba, pero para 4 visibles: cada tarjeta mide
  0.25 del ancho menos 33.5px, y dos de ellas más su
  hueco y los 80px de las flechas dan 50% + 31px.
  =============================================*/
  .viral-products-container {
    grid-template-columns: minmax(0, 1fr) calc(50% + 31px);
  }

  .viral-products .viral-product-list {
    --visible-products: 2;
  }
}

@media (max-width: 620px) {
}
/* Responsive tuning for the viral product strip. */
@media (max-width: 900px) {
  .viral-products {
    padding: 38px 0 44px;
  }

  .viral-products-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .viral-copy {
    text-align: center;
  }

  .viral-copy h2 {
    font-size: clamp(32px, 7vw, 42px);
  }

  .viral-copy p {
    font-size: 17px;
  }


}

@media (max-width: 620px) {
  .viral-products {
    padding: 34px 0 40px;
  }

  .viral-products-container {
    grid-template-columns: 1fr;
  }


}

@media (max-width: 420px) {
  .viral-copy h2 {
    font-size: clamp(29px, 10vw, 36px);
  }

  .viral-copy p {
    font-size: 15px;
  }


}
/* Product detail page */
.product-detail-page {
  background: var(--white);
}

.product-detail-header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.product-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 32px, var(--site-max-width));
  min-height: 68px;
  margin: 0 auto;
}

.detail-back-link {
  color: var(--red);
  font-weight: 700;
}

.product-detail-main {
  width: min(100% - 32px, var(--site-max-width));
  margin: 0 auto;
  padding: 18px 0 42px;
}

.product-detail-page .topbar {
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  padding-right: 0;
  padding-left: 0;
}

.product-detail-page .footer-container,
.product-detail-page .footer-bottom-container {
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  padding-right: 0;
  padding-left: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.breadcrumb a:hover {
  color: var(--red);
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  align-items: start;
  gap: clamp(28px, 4vw, 54px);
  margin-top: 44px;
}

.product-gallery {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-self: start;
  gap: 18px;
}

.product-thumbs {
  display: grid;
  align-content: start;
  gap: 22px;
}

.product-thumb {
  display: grid;
  place-items: center;
  min-height: 104px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}

.product-thumb.is-active {
  border-color: var(--red);
}

.product-thumb img {
  width: 70px;
  height: 92px;
  object-fit: contain;
}

.product-main-image {
  position: relative;
  display: grid;
  place-items: center;
  height: 520px;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fff7ad 0%, #f9fafb 46%, #111827 100%);
}

.product-main-image-full {
  grid-column: 1 / -1;
}

.product-main-image img {
  width: min(64%, 360px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(17, 24, 39, 0.28));
}

.product-main-image figcaption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  color: var(--white);
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.product-purchase {
  position: relative;
  padding-left: clamp(0px, 2vw, 20px);
}

.product-ref {
  float: right;
  color: var(--ink);
  font-size: 16px;
}

.product-brand {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Josefin Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-purchase h1 {
  max-width: 620px;
  margin: 0 0 20px;
  color: #000000;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}

.product-detail-price {
  display: block;
  margin-bottom: 16px;
  color: #000000;
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
}

.product-actions-row {
  display: grid;
  grid-template-columns: 132px minmax(180px, 250px);
  gap: 18px;
  align-items: center;
}

.quantity-control {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  height: 38px;
  overflow: hidden;
  border: 1px solid #f472b6;
  border-radius: 999px;
  color: #111827;
}

.quantity-control button {
  height: 100%;
  border: 0;
  background: transparent;
  color: #111827;
  cursor: pointer;
  font-size: 16px;
}

.quantity-control span {
  text-align: center;
  font-size: 18px;
}

.buy-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.payment-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 16px 0 20px;
  padding: 14px 12px;
  background: var(--soft-bg);
  color: var(--ink);
  font-size: 13px;
}

.payment-strip strong {
  color: #4b5563;
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
}

.delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 20px 0 54px;
}

.delivery-options article {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 90px;
  border-radius: 18px;
  background: #f3f4f6;
  padding: 18px;
}

.delivery-options .lucide-icon {
  color: var(--red);
}

.delivery-options h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
}

.delivery-options p {
  margin: 0;
  color: #374151;
  font-size: 13px;
}

.product-accordion details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.product-accordion summary {
  display: flex;
  justify-content: space-between;
  color: #111827;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
}

.product-accordion summary::-webkit-details-marker {
  display: none;
}

.product-accordion summary::after {
  content: "+";
  color: var(--red);
}

.product-accordion details[open] summary::after {
  content: "^";
}

.product-accordion p {
  max-width: 720px;
  margin: 14px 0 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.45;
}

.detail-product-carousel {
  margin-top: clamp(54px, 6vw, 84px);
}

.detail-product-carousel + .detail-product-carousel {
  margin-top: clamp(48px, 5vw, 68px);
}

.detail-product-carousel .section-heading {
  margin-bottom: 34px;
}

.detail-product-carousel .section-heading h2 {
  color: var(--ink);
  font-size: clamp(26px, 2.5vw, 32px);
}

.detail-product-carousel .product-carousel {
  padding: 0 24px;
}

@media (max-width: 1023px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .product-gallery {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .product-main-image {
    height: 420px;
    min-height: 420px;
  }

  .detail-product-carousel .product-carousel {
    padding: 0;
  }
}

@media (max-width: 620px) {
  .product-detail-topbar,
  .product-detail-page .topbar,
  .product-detail-main {
    width: min(100% - 24px, var(--site-max-width));
  }

  .product-detail-topbar {
    min-height: 58px;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-thumbs {
    grid-template-columns: repeat(3, 1fr);
    order: 2;
  }

  .product-main-image {
    height: 320px;
    min-height: 320px;
  }

  .product-main-image img {
    width: min(72%, 260px);
  }

  .product-ref {
    float: none;
    margin-bottom: 12px;
  }

  .product-actions-row,
  .delivery-options {
    grid-template-columns: 1fr;
  }

  .buy-now-button {
    width: 100%;
  }
}

/* Checkout */
.checkout-simple-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  min-height: 60px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
}

/* Checkout profile step - Zahara adapted Coolbox style */
.checkout-simple-header {
  position: static;
  min-height: 77px;
  background: #ffffff;
  box-shadow: none;
}

.checkout-simple-header img {
  width: 178px;
}

.checkout-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  background: #ededee;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.1);
  color: #a6a9ad;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.checkout-progress-bar a,
.checkout-progress-bar span {
  color: #9ca3af;
}

.checkout-progress-bar strong {
  color: var(--red);
  font-weight: 800;
}

.checkout-page {
  min-height: calc(100vh - 122px);
  background: #f4f4f5;
  color: #34383d;
}

.checkout-main {
  width: min(100% - 64px, 1530px);
  padding: 48px 0 64px;
}

.checkout-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 502px;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}

.checkout-profile-head h1 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.checkout-profile-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.checkout-profile-head .lucide-icon {
  width: 22px;
  height: 22px;
}

.checkout-profile-layout {
  grid-template-columns: minmax(0, 1fr) 502px;
  gap: 28px;
}

.checkout-profile-panel,
.checkout-side-summary,
.checkout-state-card {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(17, 24, 39, 0.15);
}

.checkout-profile-panel {
  padding: 38px 30px 40px;
}

.checkout-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}

.checkout-field,
.checkout-terms-field {
  display: grid;
  gap: 9px;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.checkout-field-full {
  grid-column: 1 / -1;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  height: 47px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  outline: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 18px;
}

.checkout-field input:focus,
.checkout-field select:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.checkout-readonly-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkout-readonly-field input {
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #fafafa;
  color: #9ca3af;
}

.checkout-readonly-field a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: #ffffff;
  color: #2563eb;
  padding: 0 18px;
  font-size: 18px;
}

.checkout-document-field {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
}

.checkout-document-field select {
  padding: 0 12px;
  font-size: 16px;
}

.checkout-phone-field {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
}

.checkout-phone-field span {
  display: grid;
  place-items: center;
  height: 47px;
  border: 1px solid #cbd5e1;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #f1f1f2;
  color: #6b7280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}

.checkout-phone-field input {
  border-radius: 0 5px 5px 0;
}

.checkout-terms-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
  color: #34383d;
  font-size: 18px;
}

.checkout-terms-field input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #2f2f30;
}

.checkout-terms-field a {
  color: #2563eb;
}

.checkout-profile-form .checkout-continue {
  grid-column: 1 / -1;
  justify-self: end;
  width: 158px;
  height: 47px;
  margin-top: 18px;
  border-radius: 5px;
  background: #2f2f30;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.checkout-sidebar {
  display: grid;
  gap: 20px;
}

.checkout-side-summary {
  padding: 26px 30px 30px;
}

.checkout-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.checkout-summary-head h2 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.checkout-summary-head a {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  white-space: nowrap;
}

.checkout-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #d1d5db;
  padding: 0 0 20px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.checkout-summary-row strong {
  color: #111827;
  font-weight: 500;
}

.checkout-summary-row .lucide-icon {
  width: 16px;
  height: 16px;
}

.checkout-mini-list {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #d1d5db;
  padding: 10px 16px 22px;
}

.checkout-mini-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 4px;
  background: #f7f7f8;
  padding: 9px 10px;
}

.checkout-mini-product img {
  width: 44px;
  height: 42px;
  object-fit: contain;
}

.checkout-mini-product p {
  overflow: hidden;
  margin: 0 0 6px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-mini-product strong {
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.checkout-mini-product small {
  margin-left: 6px;
  color: #9ca3af;
  font-size: 13px;
  text-decoration: line-through;
}

.checkout-mini-list + .checkout-summary-row {
  padding-top: 20px;
}

.checkout-summary-total {
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 0;
  padding: 20px 0 0;
  font-size: 28px;
  font-weight: 800;
}

.checkout-summary-total strong {
  font-size: 28px;
  font-weight: 800;
}

.checkout-summary-note {
  margin: 8px 0 0;
  color: #9ca3af;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.checkout-state-card {
  display: grid;
  gap: 28px;
  padding: 30px;
}

.checkout-state-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 52px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-state-item.is-current {
  border: 1px solid #2f2f30;
  border-radius: 5px;
  padding: 16px 18px;
}

.checkout-state-item span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #2f2f30;
  color: #ffffff;
  font-weight: 800;
}

.checkout-state-item strong,
.checkout-state-item small {
  display: block;
}

.checkout-state-item strong {
  font-size: 18px;
  font-weight: 500;
}

.checkout-state-item small {
  color: #111827;
  font-size: 14px;
}

.checkout-state-item a {
  color: #2563eb;
  font-size: 18px;
}

.checkout-state-item.is-disabled {
  color: #a3a3a3;
}

.checkout-state-item.is-disabled span {
  background: #eef0f2;
  color: #6b7280;
}

.checkout-state-item.is-disabled small,
.checkout-state-item.is-disabled strong {
  color: #a3a3a3;
}

@media (max-width: 997px) {
  .cart-page-container,
  .checkout-main {
    width: min(100% - 48px, 1360px);
  }

  .checkout-main {
    padding-top: 28px;
  }

  .checkout-profile-head,
  .checkout-profile-layout {
    grid-template-columns: 1fr;
  }

  .checkout-profile-titlebar,
  .checkout-summary-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .checkout-summary {
    order: 0;
  }

  .checkout-order-success {
    width: min(100% - 28px, 1360px);
    padding-top: 28px;
  }

  .checkout-order-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 997px) {
  .cart-page-container,
  .checkout-main {
    width: min(100% - 24px, 1360px);
  }

  .checkout-simple-header {
    min-height: 64px;
  }

  .checkout-progress-bar {
    gap: 7px;
    font-size: 13px;
  }

  .checkout-profile-panel,
  .checkout-side-summary,
  .checkout-state-card {
    padding: 22px 16px;
  }

  .checkout-profile-form {
    grid-template-columns: 1fr;
  }

  .checkout-profile-titlebar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .checkout-location-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .checkout-location-row a {
    grid-column: 2;
  }

  .checkout-delivery-card > header,
  .checkout-home-delivery h3 {
    padding-inline: 16px;
  }

  .checkout-home-delivery {
    margin: 18px 16px 22px;
  }

  .checkout-delivery-options {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 16px 22px;
  }

  .checkout-delivery-option {
    min-height: auto;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding: 12px;
  }

  .checkout-delivery-option:last-child {
    border-bottom: 1px solid transparent;
    padding-bottom: 12px;
  }

  .checkout-delivery-selected {
    margin: 16px;
    padding: 18px 16px;
  }

  .checkout-confirm-delivery {
    width: 100%;
  }

  .checkout-readonly-field {
    grid-template-columns: 1fr;
  }

  .checkout-readonly-field input,
  .checkout-readonly-field a {
    border: 1px solid #cbd5e1;
    border-radius: 5px;
  }

  .checkout-readonly-field a {
    min-height: 42px;
    justify-content: flex-start;
  }

  .checkout-profile-form .checkout-continue {
    width: 100%;
  }
}

/* Checkout header/panel alignment */
.checkout-profile-head,
.checkout-profile-layout {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 30px;
  width: 100%;
}

.checkout-profile-titlebar,
.checkout-summary-top,
.checkout-profile-panel,
.checkout-sidebar {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.checkout-profile-head {
  padding: 0;
  margin-bottom: 10px;
}

.checkout-profile-head h1,
.checkout-summary-top h2 {
  padding: 0;
  margin: 0;
}

/* Final checkout panel polish */
.checkout-profile-panel,
.checkout-side-summary,
.checkout-state-card,
.checkout-delivery-card {
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(17, 24, 39, 0.14);
}

.checkout-profile-panel.is-delivery-step {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-location-row,
.checkout-home-delivery {
  border: 1px solid #d8dde3;
  border-radius: 6px;
}

/* Final checkout panel polish */
.checkout-profile-panel,
.checkout-side-summary,
.checkout-state-card,
.checkout-delivery-card {
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(17, 24, 39, 0.14);
}

.checkout-profile-panel.is-delivery-step {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-location-row,
.checkout-home-delivery {
  border: 1px solid #d8dde3;
  border-radius: 6px;
}

/* Checkout panel alignment polish */
.checkout-profile-panel,
.checkout-side-summary,
.checkout-state-card,
.checkout-delivery-card {
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
}

.checkout-profile-panel.is-delivery-step {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-location-row,
.checkout-home-delivery {
  border: 1px solid #dfe3e8;
  border-radius: 6px;
}

.checkout-side-summary {
  padding: 22px 30px 30px;
}

/* Checkout profile visual polish */
.checkout-profile-head {
  padding: 0 30px;
}

.checkout-profile-panel {
  margin-left: 0;
}

.checkout-field span {
  line-height: 1;
}

.checkout-field input::placeholder {
  color: #b6bbc2;
}

.checkout-document-field select {
  appearance: auto;
  background: #ffffff;
}

.checkout-profile-form .checkout-continue:hover {
  background: #1f2021;
}

.checkout-summary-head {
  padding: 0 0 1px;
}

.checkout-products-toggle {
  grid-template-columns: minmax(0, 1fr) auto 18px;
}

.checkout-products-toggle .lucide-icon {
  width: 16px;
  height: 16px;
  color: #34383d;
}

.checkout-side-summary {
  min-height: 330px;
}

.checkout-summary-row:not(.checkout-summary-total) strong {
  font-size: 18px;
}

.checkout-summary-total span,
.checkout-summary-total strong {
  line-height: 1;
}

.checkout-state-card {
  min-height: 320px;
}

.checkout-state-item:not(.is-current) {
  padding: 0 20px;
}

.checkout-state-item.is-current {
  min-height: 80px;
}

.checkout-state-item.is-disabled {
  align-self: start;
}

.checkout-state-item.is-disabled span {
  border-radius: 7px;
}

@media (min-width: 998px) {
  .checkout-profile-panel {
    min-height: 475px;
  }

  .checkout-state-card {
    margin-top: 0;
  }
}

.checkout-simple-header a {
  display: inline-flex;
  align-items: center;
}

.checkout-simple-header img {
  display: block;
  width: 150px;
  height: auto;
  object-fit: contain;
}

.checkout-page {
  min-height: 100vh;
  background: #f4f2f2;
  color: #050505;
}

.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 32px, 1120px);
  min-height: 76px;
  margin: 0 auto;
}

.secure-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.secure-site .lucide-icon {
  width: 24px;
  height: 24px;
}

.checkout-main {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  padding: 8px 0 0;
}

.checkout-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 860px);
  margin: 0 auto 48px;
  padding: 0;
  list-style: none;
}

.checkout-steps::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 12.5%;
  left: 12.5%;
  height: 4px;
  border-radius: 999px;
  background: #e4e4e4;
}

.checkout-steps::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 12.5%;
  z-index: 0;
  width: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
}

.checkout-steps.is-step-2::after {
  width: 25%;
}

.checkout-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #111111;
}

.checkout-steps .lucide-icon {
  width: 20px;
  height: 20px;
}

.checkout-steps span {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e4e4e4;
}

.checkout-steps .is-active span,
.checkout-steps .is-complete span {
  background: var(--red);
}

.checkout-steps .is-active .lucide-icon,
.checkout-steps .is-complete .lucide-icon {
  color: var(--red);
  stroke-width: 2.4;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  gap: 20px;
  align-items: start;
}

.checkout-products,
.checkout-summary {
  border-radius: 14px;
  background: var(--white);
}

.checkout-products {
  padding: 28px 30px 34px;
}

.checkout-table-head {
  display: grid;
  grid-template-columns: 1fr 120px 120px 34px;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 0 16px;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}

.checkout-table-head h1 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.checkout-product {
  display: grid;
  grid-template-columns: 78px 1fr 120px 120px 34px;
  gap: 18px;
  align-items: center;
  min-height: 118px;
  padding-top: 22px;
}

.checkout-product img {
  width: 70px;
  height: 90px;
  object-fit: contain;
}

.checkout-product h2 {
  max-width: 430px;
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.05;
}

.checkout-quantity {
  width: 80px;
  height: 34px;
  justify-self: center;
  border-color: var(--soft-bg);
}

.checkout-product strong {
  font-family: "Ubuntu", sans-serif;
  font-size: 17px;
}

.checkout-remove {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.checkout-summary {
  padding: 20px;
}

.coupon-panel {
  border-radius: 12px;
  background: var(--rose-soft);
  padding: 14px 12px 22px;
}

.coupon-title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #111111;
  cursor: pointer;
  padding: 0 0 14px;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
}

.coupon-form {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
}

.coupon-form input {
  min-width: 0;
  height: 52px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
}

.coupon-form button,
.checkout-finish {
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;
  font-weight: 800;
}

.checkout-benefit {
  margin: 24px 0 16px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.checkout-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.checkout-progress span {
  display: block;
  width: 29%;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}

.checkout-availability {
  display: grid;
  gap: 6px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
}

.checkout-availability li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-availability .lucide-icon {
  width: 18px;
  height: 18px;
  color: var(--red);
}

.checkout-payment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 5px;
  background: var(--soft-bg);
  padding: 14px 10px;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  text-align: center;
}

.checkout-payment strong {
  color: #4b5563;
  font-size: 16px;
}

.checkout-total-card h2 {
  margin: 18px 0;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  font-size: 17px;
}

.checkout-total-card dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.checkout-total-card div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
}

.checkout-total-card dt {
  font-weight: 700;
}

.checkout-total-card dd {
  margin: 0;
}

.points-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 44px 0 18px;
  border-radius: 10px;
  background: var(--rose-soft);
  padding: 18px 12px;
  font-family: "Ubuntu", sans-serif;
}

.points-box strong {
  color: var(--red);
  font-size: 16px;
}

.points-box span {
  max-width: 150px;
  text-align: right;
  font-size: 11px;
}

.checkout-terms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
}

.checkout-terms input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.checkout-terms a {
  color: var(--red);
}

.checkout-finish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  font-size: 16px;
  text-transform: capitalize;
}

.checkout-continue-shopping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  color: var(--ink);
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
}

.checkout-continue-shopping span {
  font-size: 26px;
  line-height: 1;
}

.checkout-payment {
  display: none;
}

.checkout-form-layout {
  grid-template-columns: minmax(0, 660px) minmax(300px, 435px);
  gap: 20px;
}

.checkout-flow {
  display: grid;
  gap: 20px;
}

.checkout-step-card {
  border-radius: 12px;
  background: var(--white);
  padding: 34px 30px;
}

.checkout-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-family: "Ubuntu", sans-serif;
}

.checkout-step-title span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
}

.checkout-step-card.is-open .checkout-step-title span {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

.checkout-step-title h1,
.checkout-step-title h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

.checkout-step-card > p {
  margin: 0 0 24px;
  color: #111111;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
}

.checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 10px;
}

.checkout-form label {
  display: grid;
  gap: 9px;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
}

.checkout-form .field-full {
  grid-column: 1 / -1;
}

.checkout-form input,
.checkout-form select {
  width: 100%;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  outline: 0;
  padding: 0 12px;
  font: inherit;
}

.checkout-form input:focus,
.checkout-form select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.14);
}

.invoice-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}

.invoice-toggle label {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 12px;
  min-width: 160px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 18px;
  color: var(--red);
  font-weight: 800;
}

.invoice-toggle label.is-selected {
  border-color: var(--red);
}

.invoice-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}

.invoice-toggle .lucide-icon {
  color: var(--ink);
}

.checkout-continue {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 330px);
  height: 42px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.newsletter-field {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
}

.newsletter-field input {
  width: 14px;
  height: 14px;
  accent-color: var(--red);
}

.checkout-step-closed {
  min-height: 100px;
  padding-top: 36px;
  padding-bottom: 36px;
}

.checkout-step-closed .checkout-step-title {
  margin-bottom: 0;
}

.checkout-side-summary {
  align-self: start;
  margin-top: 0;
  padding: 18px 20px 34px;
}

.checkout-mini-product {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 18px;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 24px 18px;
}

.checkout-mini-product h2 {
  margin: 0 0 14px;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.checkout-mini-product strong {
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
}

.checkout-mini-product img {
  width: 66px;
  height: 92px;
  object-fit: contain;
}

.checkout-interest {
  margin-top: 52px;
  padding-bottom: 70px;
}

.checkout-interest h2 {
  margin: 0 0 34px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(24px, 2.5vw, 30px);
}

.checkout-interest .product-carousel {
  padding: 0 32px;
}

.checkout-interest-card {
  min-height: 390px;
  padding-bottom: 74px;
}

.checkout-interest-card .interest-cart-button {
  position: absolute;
  right: 12px;
  bottom: 14px;
  left: 12px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-side-summary {
    order: 0;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .checkout-header,
  .checkout-main {
    width: min(100% - 24px, 1120px);
  }

  .checkout-header {
    min-height: 64px;
  }

  .checkout-steps {
    margin-bottom: 28px;
  }

  .checkout-products {
    padding: 20px 14px;
  }

  .checkout-table-head {
    display: none;
  }

  .checkout-product {
    grid-template-columns: 70px 1fr auto;
    gap: 14px;
  }

  .checkout-product h2 {
    grid-column: 2 / -1;
  }

  .checkout-quantity {
    grid-column: 2;
    justify-self: start;
  }

  .checkout-product strong {
    grid-column: 2;
  }

  .checkout-remove {
    grid-column: 3;
    grid-row: 2 / 4;
  }

  .checkout-form-layout {
    grid-template-columns: 1fr;
  }

  .checkout-form {
    grid-template-columns: 1fr;
  }

  .checkout-step-card {
    padding: 24px 16px;
  }

  .invoice-toggle label {
    width: 100%;
  }

  .checkout-interest .product-carousel {
    padding: 0;
  }
}

/* Category side modal */
body.category-modal-open {
  overflow: hidden;
}

body.cart-modal-open {
  overflow: hidden;
}

body.auth-modal-open {
  overflow: hidden;
}

body.search-modal-open {
  overflow: hidden;
}

.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(17, 24, 39, 0.58);
}

.search-panel {
  position: fixed;
  top: 68px;
  left: 50%;
  z-index: 90;
  width: min(92vw, 690px);
  overflow: hidden;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 16px 44px rgba(17, 24, 39, 0.26);
  transform: translateX(-50%);
}

.search-panel-head {
  display: none;
}

/* Una sola columna: la de sugerencias se quitó, el
   panel ahora es solo el desplegable de resultados */
.search-panel-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 20px;
}

.search-suggestions {
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.search-suggestions h2,
.search-products h2 {
  margin: 0 0 14px;
  color: #a3a3a3;
  font-size: 15px;
  font-weight: 800;
}

.search-suggestions button {
  display: block;
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #3f3f46;
  cursor: pointer;
  padding: 0 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}

.search-suggestions button:hover,
.search-suggestions button:first-of-type {
  background: #f3f4f6;
}

.search-products {
  display: grid;
  align-content: start;
  padding-left: 14px;
}

.search-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.search-product {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  min-height: 78px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 8px;
  color: #3f3f46;
}

.search-product img {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* Aquí va el nombre del producto, no su descripción.
   El tope de dos líneas evita que un nombre largo
   estire la fila y desalinee la rejilla, que es lo
   que pasaba cuando se imprimía la descripción. */
.search-product span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2.4em;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.search-product strong {
  color: var(--ink);
  font-family: "Josefin Sans", sans-serif;
  font-size: 14px;
}

.search-product em {
  color: var(--red);
  font-style: normal;
  font-weight: 800;
}

.search-view-all {
  justify-self: center;
  margin-top: 26px;
  color: #3f3f46;
  text-decoration: underline;
  font-size: 13px;
}

@media (max-width: 1023px) {
  .search-overlay {
    display: block;
  }

  .search-panel {
    inset: 58px 4px auto;
    z-index: 220;
    width: auto;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    transform: none;
  }

  .search-panel-head {
    display: block;
    padding: 0;
  }

  .search-modal-form {
    display: grid;
    grid-template-columns: 1fr 44px;
    height: 44px;
    border-bottom: 1px solid var(--line);
  }

  .search-modal-form input {
    border: 0;
    outline: 0;
    padding: 0 16px;
    color: var(--ink);
    font-size: 15px;
  }

  .search-panel-close {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .search-panel-body {
    grid-template-columns: 1fr;
    min-height: 480px;
    padding: 20px;
  }

  .search-suggestions {
    border-right: 0;
    padding-right: 0;
  }

  .search-suggestions button {
    padding-left: 0;
  }

  .search-suggestions button:hover,
  .search-suggestions button:first-of-type {
    background: transparent;
  }

  .search-products {
    padding: 24px 0 0;
  }

  .search-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-product {
    min-height: 82px;
  }
}

@media (max-width: 620px) {
  .search-panel {
    top: 52px;
  }

  .search-product-grid {
    grid-template-columns: 1fr;
  }
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 24, 39, 0.68);
  backdrop-filter: blur(1px);
}

.auth-modal {
  /* Posición, ancho y alto real los define
     body.auth-modal-open .auth-modal más abajo: el
     JS siempre agrega esa clase al mostrar el modal,
     así que estas reglas nunca se ven solas. */
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.34);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 14px 0 18px;
}

.auth-modal-header h2 {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.auth-intro-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 16px;
}

.auth-intro-row .auth-intro {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.auth-back-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.auth-back-button[hidden] {
  display: none;
}

.auth-back-button:hover {
  background: #f3f4f6;
  color: var(--red);
}

.auth-back-button svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.25;
}

.auth-close-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.auth-close-button:hover {
  background: #f3f4f6;
  color: var(--red);
}

.auth-modal-body {
  padding: 12px 18px 22px;
}

.auth-intro {
  margin: 0 0 16px;
  color: #374151;
  font-size: 14px;
  line-height: 1.25;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form[hidden] {
  display: none;
}

.auth-form label {
  font-size: 13px;
}

.auth-register a {
  color: var(--red);
  font-weight: 700;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  padding: 0 12px;
  color: var(--ink);
  font-size: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-form input:not([type="checkbox"]):hover {
  border-color: #c7ccd1;
}

/*=============================================
Floating label: la etiqueta vive dentro del campo,
del tamaño del valor, hasta que hay foco o
contenido; ahí sube y se achica. El input
necesita su propio placeholder=" " (un espacio, no
vacío) para que :placeholder-shown deje de
aplicar en cuanto haya texto real.
=============================================*/
.field-float {
  position: relative;
}

.field-float input:not([type="checkbox"]) {
  height: 52px;
  padding: 21px 12px 7px 13px;
}

.field-float-password input {
  padding-right: 44px;
}

.field-float-icon input:not([type="checkbox"]) {
  padding-left: 42px;
}

.field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  transition: color 150ms ease;
}

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

.field-float input:focus ~ .field-icon,
.field-float input:not(:placeholder-shown) ~ .field-icon {
  color: var(--red);
}

.field-float label {
  position: absolute;
  left: 13px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  transition: top 150ms ease, left 150ms ease, font-size 150ms ease, color 150ms ease, transform 150ms ease;
}

.field-float-icon label {
  left: 42px;
}

.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label {
  top: 11px;
  transform: translateY(0);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
}

.field-toggle-password {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.field-toggle-password:hover {
  background: #f3f4f6;
  color: var(--red);
}

.field-toggle-password svg {
  width: 18px;
  height: 18px;
}

.field-toggle-password .eye-closed {
  display: none;
}

.field-toggle-password[aria-pressed="true"] .eye-open {
  display: none;
}

.field-toggle-password[aria-pressed="true"] .eye-closed {
  display: block;
}

.auth-recovery-link {
  justify-self: end;
  margin-top: -4px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.auth-form input:not([type="checkbox"]):focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.14);
}

.auth-field-hint {
  margin-top: -4px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.3;
}

.auth-submit {
  height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-family: "Josefin Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(var(--red-rgb), 0.24);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.auth-submit:hover {
  background: var(--red-dark);
  box-shadow: 0 6px 16px rgba(var(--red-rgb), 0.32);
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: #9ca3af;
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: #d1d5db;
}

.auth-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-options button,
.auth-options a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  transition: background 150ms ease, transform 150ms ease;
  text-decoration: none;
}

.auth-options button:hover,
.auth-options a:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

.auth-options .lucide-icon,
.auth-social-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.auth-social-facebook {
  border-color: #1877f2;
  background: #1877f2;
  color: var(--white);
}

.auth-social-facebook:hover {
  background: #145dbf;
}

.auth-social-google:hover {
  background: #f8f9fa;
}

.auth-register {
  margin: 0 0 16px;
  color: #374151;
  text-align: left;
  font-size: 14px;
}

.field-error {
  margin-top: -4px;
  color: var(--error);
  font-size: 12px;
  line-height: 1.3;
}

.field-error[hidden] {
  display: none;
}

.field-float.is-invalid input:not([type="checkbox"]) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

@media (max-width: 420px) {
  .auth-options {
    grid-template-columns: 1fr;
  }
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(17, 24, 39, 0.62);
  opacity: 0;
  transition: opacity 320ms ease;
}

.cart-overlay.is-open {
  opacity: 1;
}

.cart-modal {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 190;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(100vw, 396px);
  background: var(--white);
  color: var(--ink);
  box-shadow: -18px 0 42px rgba(0, 0, 0, 0.22);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-modal.is-open {
  transform: translateX(0);
}

.cart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  padding: 0 18px 0 22px;
  border-bottom: 1px solid var(--line);
}

.cart-modal-header h2 {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.cart-close-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.cart-close-button:hover {
  background: #f3f4f6;
  color: var(--red);
}

.cart-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: 40px 28px;
  color: #6b7280;
  text-align: center;
}

.cart-empty h3 {
  margin: 0 0 64px;
  color: var(--red);
  font-family: "Josefin Sans", sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.cart-empty-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 36px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-empty strong {
  display: block;
  margin-bottom: 36px;
  color: #6b7280;
  font-size: 16px;
  font-weight: 800;
}

.cart-empty p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.12;
}

.cart-modal-content {
  display: grid;
  min-height: 0;
}

.cart-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cart-modal-list {
  display: grid;
  align-content: start;
  gap: 14px;
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--page);
}

.cart-modal-notice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 14px 18px 0;
  border: 1px solid rgba(4, 120, 87, 0.18);
  border-radius: 8px;
  background: #ecfdf5;
  padding: 10px 12px;
  color: #065f46;
  font-size: 13px;
  line-height: 1.25;
}

.cart-modal-notice span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #047857;
  color: #ffffff;
  font-weight: 900;
}

.cart-modal-notice strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-modal-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 14px 38px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

.cart-modal-item-remove {
  position: absolute;
  top: 12px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: color 160ms ease;
}

.cart-modal-item-remove:hover {
  color: var(--red-dark);
}

.cart-modal-item-remove:disabled {
  cursor: default;
  opacity: 0.5;
}

.cart-modal-item-remove .lucide-icon {
  width: 16px;
  height: 16px;
}

.cart-modal-item-image {
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfaf8 0%, var(--rose-soft) 100%);
}

.cart-modal-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.cart-modal-item-image picture,
.cart-product-image picture,
.checkout-mini-product picture,
.checkout-order-product-row picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-modal-item-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: start;
}

.cart-modal-item-copy a {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.cart-modal-item-copy small {
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-modal-item-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.cart-modal-item-price {
  display: grid;
  gap: 1px;
}

.cart-modal-old-price {
  color: #9ca3af;
  font-size: 12px;
  line-height: 1;
  text-decoration: line-through;
}

.cart-modal-item-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.cart-modal-item-qty {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: opacity 160ms ease;
}

.cart-modal-item-qty.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.cart-modal-qty-button {
  display: grid;
  place-items: center;
  width: 26px;
  border: 0;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background 160ms ease;
}

.cart-modal-qty-button:hover {
  background: var(--rose-soft);
}

.cart-modal-qty-value {
  display: grid;
  place-items: center;
  min-width: 22px;
  padding: 0 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.cart-modal-footer {
  border-top: 1px solid var(--line);
  padding: 18px;
  background: var(--footer-bg);
  color: var(--white);
}

.cart-modal-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}

.cart-modal-total-row + .cart-modal-total-row {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 3px;
  padding-top: 8px;
}

.cart-modal-total-row-final strong {
  font-size: 17px;
}

.cart-modal-trust {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.35;
}

.cart-modal-checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  font-family: "Josefin Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.cart-modal-checkout-button:hover {
  background: var(--red-dark);
  color: var(--white);
}

.category-button .icon-menu-close {
  display: none;
}

.category-button[aria-expanded="true"] .icon-menu-lines {
  display: none;
}

.category-button[aria-expanded="true"] .icon-menu-close {
  display: block;
}

.category-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(17, 24, 39, 0.62);
}

.category-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 150;
  display: block;
  --category-panel-width: 298px;
  width: var(--category-panel-width);
  min-width: 260px;
  max-width: 100%;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: #111827;
  color: var(--white);
  box-shadow: 18px 0 48px rgba(0, 0, 0, 0.35);
}

.category-menu-header {
  padding: 28px 22px 22px;
  border-bottom: 1px solid rgba(249, 250, 251, 0.28);
}

.category-menu-header h2 {
  margin: 0;
  color: var(--white);
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.category-menu-list {
  display: grid;
  padding: 14px 0 22px;
}

.category-menu-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 42px 0 22px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.category-menu-list a::after {
  content: "";
  position: absolute;
  right: 22px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(249, 250, 251, 0.65);
  border-right: 1px solid rgba(249, 250, 251, 0.65);
  transform: rotate(45deg);
}

.category-menu-list a:hover {
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent);
}

.category-menu-list :is(.lucide-icon, .category-icon) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.category-submenu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: auto;
  left: 298px;
  z-index: 145;
  width: min(810px, calc(100vw - 330px));
  max-width: calc(100vw - 298px);
  overflow-y: auto;
  background: var(--white);
  color: var(--ink);
  padding: 28px 40px 46px;
  box-shadow: 20px 0 48px rgba(0, 0, 0, 0.18);
}

.category-submenu-head {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.category-submenu-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.category-submenu-head a {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
  transition: color 160ms ease;
}

.category-submenu-head a:hover {
  color: var(--red-dark);
}

.category-submenu-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
}

.category-submenu-close:hover {
  background: #f3f4f6;
  color: var(--red);
}

.category-submenu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 30px 52px;
  padding-top: 26px;
}

.category-submenu-group h3 {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
}

.category-submenu-group a {
  display: block;
  margin-bottom: 8px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.25;
}

.category-submenu-group a:hover {
  color: var(--red);
}

.category-menu-list a.is-active {
  background: rgba(52, 211, 153, 0.16);
  color: var(--accent);
}

.category-mobile-account,
.category-mobile-shortcuts,
.category-mobile-featured,
.category-mobile-close,
.category-mobile-submenu {
  display: none;
}

@media (max-width: 900px) {
  .category-submenu {
    left: 298px;
    right: auto;
    width: calc(100vw - 298px);
    padding: 24px;
  }

  .category-submenu-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 24px 30px;
  }
}

@media (max-width: 620px) {
  .category-submenu {
    display: none !important;
  }

  .category-menu.is-mobile-submenu .category-mobile-account,
  .category-menu.is-mobile-submenu .category-mobile-shortcuts,
  .category-menu.is-mobile-submenu .category-mobile-featured,
  .category-menu.is-mobile-submenu .category-menu-list {
    display: none;
  }

  .category-menu.is-mobile-submenu .category-mobile-submenu {
    display: block;
  }

  .category-mobile-submenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    margin: 0 -26px;
    padding: 0 54px 0 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  }

  .category-mobile-back {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
  }

  .category-mobile-submenu-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: "Josefin Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  .category-mobile-submenu-head a {
    border-left: 1px solid #9ca3af;
    padding-left: 12px;
    color: var(--red-dark);
    font-size: 14px;
    font-weight: 500;
  }

  .category-mobile-submenu-list {
    display: grid;
    padding: 10px 0 24px;
  }

  .category-mobile-submenu-list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    padding-right: 28px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
  }

  .category-mobile-submenu-list a::after {
    content: "";
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #4b5563;
    border-right: 1px solid #4b5563;
    transform: rotate(45deg);
  }
}

@media (max-width: 1023px) {
  .category-overlay {
    display: none !important;
  }

  .category-button[aria-expanded="true"] {
    position: fixed;
    top: 16px;
    right: 18px;
    left: auto;
    z-index: 170;
    color: #4b5563;
    background: transparent;
  }

  .category-button[aria-expanded="true"]:hover {
    color: var(--red);
  }

  .category-menu {
    inset: 0;
    z-index: 160;
    width: 100vw;
    min-width: 0;
    max-width: none;
    background: var(--white);
    color: var(--ink);
    box-shadow: none;
    padding: 0 26px 28px;
  }

  .category-menu-header {
    display: none;
  }

  .category-mobile-account,
  .category-mobile-shortcuts,
  .category-mobile-featured {
    display: grid;
  }

  .category-mobile-close {
    position: absolute;
    top: 22px;
    right: 18px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
  }

  .category-mobile-close:hover {
    background: #ecfdf5;
    color: var(--red);
  }

  .category-mobile-close .lucide-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
  }

  .category-mobile-account {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    margin: 0 -26px;
    padding: 14px 54px 14px 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  }

  .category-mobile-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #d1d5db;
  }

  .category-mobile-avatar .lucide-icon {
    width: 38px;
    height: 38px;
  }

  .category-mobile-account a {
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
  }

  .category-mobile-shortcuts,
  .category-mobile-featured,
  .category-menu-list {
    border-bottom: 1px solid #d1d5db;
    padding: 14px 0;
  }

  .category-mobile-shortcuts a,
  .category-mobile-featured a,
  .category-menu-list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 28px 0 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
  }

  .category-mobile-shortcuts a::after,
  .category-menu-list a::after {
    content: "";
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #4b5563;
    border-right: 1px solid #4b5563;
    transform: rotate(45deg);
  }

  .category-mobile-shortcuts .lucide-icon,
  .category-mobile-featured .lucide-icon,
  .category-menu-list .lucide-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #4b5563;
  }

  .category-menu-list a:hover,
  .category-menu-list a.is-active,
  .category-mobile-shortcuts a:hover,
  .category-mobile-featured a:hover {
    background: transparent;
    color: var(--red);
  }

  .category-submenu {
    display: none !important;
  }

  .category-menu.is-mobile-submenu .category-mobile-account,
  .category-menu.is-mobile-submenu .category-mobile-shortcuts,
  .category-menu.is-mobile-submenu .category-mobile-featured,
  .category-menu.is-mobile-submenu .category-menu-list {
    display: none;
  }

  .category-menu.is-mobile-submenu .category-mobile-submenu {
    display: block;
  }

  .category-mobile-submenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    margin: 0 -26px;
    padding: 0 54px 0 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  }

  .category-mobile-back {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
  }

  .category-mobile-submenu-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: "Josefin Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  .category-mobile-submenu-head a {
    border-left: 1px solid #9ca3af;
    padding-left: 12px;
    color: var(--red-dark);
    font-size: 14px;
    font-weight: 500;
  }

  .category-mobile-submenu-list {
    display: grid;
    padding: 10px 0 24px;
  }

  .category-mobile-submenu-list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    padding-right: 28px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
  }

  .category-mobile-submenu-list a::after {
    content: "";
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #4b5563;
    border-right: 1px solid #4b5563;
    transform: rotate(45deg);
  }
}


@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .special-offer {
    background-attachment: scroll;
    background-position: center;
  }
}
/* Whole-template responsive polish */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.topbar,
.new-products-container,
.viral-products-container,
.beauty-categories-container,
.visit-stats-wrap,
.footer-container,
.footer-bottom-container,
.product-detail-main,
.product-detail-page .topbar,
.product-detail-page .footer-container,
.product-detail-page .footer-bottom-container,
.checkout-header,
.checkout-main {
  width: min(100% - 32px, var(--site-max-width));
}

.checkout-header,
.checkout-main {
  max-width: 1120px;
}

.product-card,
.checkout-products,
.checkout-summary,
.checkout-step-card,
.product-main-image,
.delivery-options article {
  min-width: 0;
}

@media (max-width: 1180px) {
  .topbar,
  .new-products-container,
  .viral-products-container,
  .beauty-categories-container,
  .visit-stats-wrap,
  .footer-container,
  .footer-bottom-container,
  .product-detail-main,
  .product-detail-page .topbar,
  .product-detail-page .footer-container,
  .product-detail-page .footer-bottom-container,
  .checkout-header,
  .checkout-main {
    width: min(100% - 28px, var(--site-max-width));
  }

  .product-detail-layout,
  .checkout-layout,
  .checkout-form-layout {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    max-width: 820px;
    margin: 0 auto;
  }

  .product-purchase,
  .checkout-side-summary {
    width: min(100%, 820px);
    margin: 0 auto;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}

@media (max-width: 900px) {
  .section-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .section-heading h2 {
    font-size: clamp(24px, 6vw, 32px);
  }

  .product-list {
    --visible-products: 2;
    --product-gap: 14px;
    grid-auto-columns: calc((100% - var(--product-gap)) / 2);
    gap: var(--product-gap);
  }

  .product-card {
    --card-photo-height: 158px;
  }

  .product-card img {
    height: 158px;
  }

  .beauty-categories-container {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .visit-stats-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 18px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .footer-form form,
  .checkout-form {
    grid-template-columns: 1fr;
  }

  .checkout-table-head {
    display: none;
  }

  .checkout-products,
  .checkout-summary,
  .checkout-step-card {
    padding: 22px 18px;
  }

  .checkout-product {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }

  .checkout-product img {
    grid-row: span 3;
  }

  .checkout-product h2 {
    max-width: none;
    line-height: 1.25;
  }

  .checkout-quantity {
    justify-self: start;
  }

  .checkout-remove {
    align-self: start;
  }

  .product-detail-layout {
    margin-top: 28px;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-thumbs {
    order: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .product-thumb {
    min-height: 82px;
  }

  .product-main-image {
    height: clamp(320px, 62vw, 460px);
    min-height: 0;
  }

  .product-main-image img {
    width: min(58%, 280px);
  }

  .product-actions-row {
    grid-template-columns: 128px minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .topbar,
  .new-products-container,
  .viral-products-container,
  .beauty-categories-container,
  .visit-stats-wrap,
  .footer-container,
  .footer-bottom-container,
  .product-detail-main,
  .product-detail-page .topbar,
  .product-detail-page .footer-container,
  .product-detail-page .footer-bottom-container,
  .checkout-header,
  .checkout-main {
    width: min(100% - 24px, var(--site-max-width));
  }

  .new-products,
  .best-sellers,
  .visit-stats {
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .section-heading {
    margin-bottom: 22px;
  }

  .section-heading a {
    font-size: 14px;
  }

  .product-list {
    --visible-products: 1;
    grid-auto-columns: 100%;
    padding-right: 34px;
    padding-left: 34px;
  }

  .product-card {
    /* 10 y no 34 arriba: los distintivos y el corazón
       van absolutos, no necesitan franja reservada */
    padding: 10px 10px 12px;
    --card-photo-height: 148px;
  }

  .product-card img {
    height: 148px;
  }

  .favorite-button {
    top: 12px;
  }

  .beauty-category {
    min-width: 142px;
    height: 62px;
    font-size: 15px;
  }

  .visit-stats-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-links,
  .footer-container,
  .footer-bottom-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom-container {
    gap: 14px;
    text-align: center;
  }

  .checkout-header {
    min-height: 64px;
  }

  .checkout-steps {
    margin-bottom: 30px;
  }

  .checkout-steps::before,
  .checkout-steps::after {
    top: 32px;
  }

  .checkout-layout,
  .checkout-form-layout,
  .checkout-flow {
    gap: 14px;
  }

  .checkout-product {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
  }

  .checkout-product img {
    width: 58px;
    height: 74px;
  }

  .checkout-product strong,
  .checkout-quantity {
    grid-column: 2 / -1;
  }

  .coupon-form {
    grid-template-columns: 1fr;
  }

  .checkout-finish,
  .checkout-continue,
  .buy-now-button {
    width: 100%;
  }

  .product-detail-topbar {
    gap: 14px;
  }

  .breadcrumb {
    font-size: 12px;
  }

  .product-main-image {
    height: clamp(260px, 78vw, 340px);
  }

  .product-main-image figcaption {
    right: 16px;
    bottom: 16px;
    left: 16px;
    font-size: clamp(20px, 7vw, 30px);
  }

  .product-ref {
    float: none;
    margin-bottom: 10px;
  }

  .product-actions-row {
    grid-template-columns: 1fr;
  }

  .quantity-control {
    width: 132px;
  }

  .delivery-options article {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px;
  }

  .checkout-interest .product-carousel,
  .detail-product-carousel .product-carousel {
    margin-right: -4px;
    margin-left: -4px;
  }
}

@media (max-width: 420px) {
  .topbar,
  .new-products-container,
  .viral-products-container,
  .beauty-categories-container,
  .visit-stats-wrap,
  .footer-container,
  .footer-bottom-container,
  .product-detail-main,
  .product-detail-page .topbar,
  .product-detail-page .footer-container,
  .product-detail-page .footer-bottom-container,
  .checkout-header,
  .checkout-main {
    width: min(100% - 20px, var(--site-max-width));
  }

  .section-heading {
    flex-direction: row;
  }

  .product-list {
    padding-right: 28px;
    padding-left: 28px;
  }

  .product-card h3 {
    font-size: 17px;
  }

  .product-card p {
    font-size: 14px;
  }

  .visit-stats-container {
    grid-template-columns: 1fr;
  }

  .checkout-products,
  .checkout-summary,
  .checkout-step-card {
    border-radius: 10px;
    padding: 18px 14px;
  }

  .checkout-step-title {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .checkout-step-title h1,
  .checkout-step-title h2 {
    font-size: 18px;
  }

  .checkout-product {
    grid-template-columns: 54px minmax(0, 1fr) 26px;
  }

  .checkout-product img {
    width: 50px;
    height: 66px;
  }

  .product-thumb img {
    height: 70px;
  }

  .product-main-image img {
    width: min(70%, 220px);
  }
}

/*=============================================
Escalón que faltaba entre el móvil de mano y la
tableta: dos tarjetas, no una.

La lista enseñaba una sola tarjeta a todo el ancho por
debajo de 620. A 620 eso daba una tarjeta de 500px con
la foto de 148 de alto: un rectángulo apaisado con el
producto perdido en el medio. Y a 400 seguía siendo
una tarjeta de 300 por 148, la misma forma.

De ahí que el corte esté en 400 y no en 480: lo que
estira la tarjeta no es el ancho de la pantalla, sino
la distancia entre el ancho de la tarjeta y el alto
fijo de su foto, y esa distancia ya molesta a 400.

En el catálogo el corte sí está en 480, porque allí la
tarjeta de una columna lleva la foto de 260 y no se
alarga.

Va al final de la cascada del móvil a propósito: los
bloques de 620 y 420 fijan una sola tarjeta y, por ir
más abajo en el archivo, ganarían.

Dos enteras y ninguna más: el hueco de las flechas se
reserva con borde transparente, no con relleno, igual
que de 621 en adelante. La diferencia importa porque
un contenedor con scroll recorta en el borde EXTERIOR
del relleno: con relleno, la tercera tarjeta se colaba
por ese hueco y asomaba 54px; con borde, el recorte
cae en el borde interior y queda fuera del todo.
=============================================*/
/*=============================================
Por debajo de 400 va una sola tarjeta, y el trozo de
la siguiente crece con la pantalla.

Antes la tarjeta medía el 100% del hueco visible y lo
único que asomaba del vecino era el relleno de las
flechas: 42px clavados lo mismo a 320 que a 399. La
tarjeta engordaba 70px por el camino y el trocito no
se movía, así que a 399 parecía un recorte olvidado.

Con el 85% el reparto es proporcional: la tarjeta se
queda con lo suyo y lo que sobra es el anticipo de la
siguiente, que va abriéndose conforme hay sitio hasta
que a 400 ya caben dos enteras.
=============================================*/
@media (max-width: 399px) {
  .product-list {
    grid-auto-columns: 90%;
  }
}

/*=============================================
De 400 a 479: una tarjeta y media.

Aquí ya no basta con que asome un filo del vecino,
pero tampoco caben dos enteras sin que bajen de 170px.
La solución intermedia es enseñar media: se ve un
producto completo y del siguiente lo suficiente para
saber qué es, no solo que está.

El 75% no es "tres cuartos de la pantalla": es tres
cuartos del hueco de la rejilla, al que luego se le
suman el relleno de las flechas y el hueco entre
tarjetas. Hecha la cuenta, lo que asoma queda en la
mitad justa de una tarjeta a lo largo de toda la
franja: 222 + 116 a 400px, 269 + 144 a 479.
=============================================*/
@media (min-width: 400px) and (max-width: 479px) {
  .product-list {
    grid-auto-columns: 75%;
  }
}

@media (min-width: 480px) and (max-width: 620px) {
  .product-list {
    --visible-products: 2;
    --product-gap: 14px;
    grid-auto-columns: calc((100% - var(--product-gap)) / 2);
    gap: var(--product-gap);
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    padding-right: 0;
    padding-left: 0;
  }
}

/*=============================================
De 700 a 799: dos tarjetas y un trocito de la tercera.

Aquí no caben tres sin que bajen de 170px, pero dos
enteras se quedaban en 315px a 799, demasiado. El
trocito resuelve las dos cosas: recorta algo las dos
primeras y, de paso, avisa de que la fila sigue.

El 43% es del hueco de la rejilla, no de la pantalla:
dos tarjetas más sus huecos dejan libre lo que se ve
de la tercera, que va de 34 a 49px según el sitio que
haya.
=============================================*/
@media (min-width: 700px) and (max-width: 799px) {
  .product-list {
    --product-gap: 14px;
    grid-auto-columns: 43%;
    gap: var(--product-gap);
  }
}

/*=============================================
De 800 a 900: tres tarjetas.

En esa franja la tarjeta de dos llegaba a 365px, más
grande que en un monitor de escritorio (238px a
1422). Con tres se queda entre 205 y 239, que es el
tamaño que tiene en el resto de la tienda, y el salto
al pasar a 901 —donde entran cuatro de 173— baja de
192px a 66.
=============================================*/
@media (min-width: 800px) and (max-width: 900px) {
  .product-list {
    --visible-products: 3;
    --product-gap: 14px;
    grid-auto-columns: calc((100% - 2 * var(--product-gap)) / 3);
    gap: var(--product-gap);
  }
}

/* Final fix: viral carousel mobile sizing */
@media (max-width: 900px) {
  .viral-products .viral-carousel {
    width: 100%;
    overflow: visible;
  }

}

@media (max-width: 620px) {

}

@media (max-width: 420px) {

}
/* Admin login page */
.admin-login-page {
  background: linear-gradient(180deg, #f8fffc 0%, #eef8f4 42%, #dff7ed 100%);
}

.admin-login-page .site-header {
  background: var(--white);
  box-shadow: var(--shadow);
}

.admin-page {
  position: relative;
  display: grid;
  place-items: center;
  /*=============================================
  Ocupa la pantalla completa. Antes era
  clamp(520px, 100vh - 76px, 760px) y eso dejaba
  fuera dos franjas del fondo de la página: la del
  tope de 760px en pantallas altas, y la de los
  76px que restaba por una cabecera que en /admin
  sin sesión no se llega a renderizar. Como aquí
  hay overflow:hidden, el círculo decorativo de
  ::after se cortaba en plano contra ese borde y
  la costura quedaba a la vista. Ahora el recorte
  cae siempre fuera de la pantalla
  =============================================*/
  min-height: max(520px, 100vh);
  padding: clamp(54px, 8vw, 110px) 16px;
  overflow: hidden;
}

.admin-page::before,
.admin-page::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.admin-page::before {
  width: 360px;
  height: 360px;
  top: 8%;
  left: -120px;
  background: rgba(52, 211, 153, 0.18);
}

.admin-page::after {
  width: 460px;
  height: 460px;
  right: -180px;
  bottom: -160px;
  background: rgba(var(--red-rgb), 0.13);
}

.admin-login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  overflow: hidden;
  border: 1px solid rgba(209, 213, 219, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
}

.admin-login-head {
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 24px 28px 20px;
  text-align: center;
}

.admin-login-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 36px);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}

.admin-login-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.admin-login-form {
  display: grid;
  gap: 14px;
  padding: 24px 24px 26px;
}

/*=============================================
El icono va dentro del campo, no en una columna
aparte: la caja gris de 48px con su propio borde
partía el input en dos y pesaba visualmente más
que el dato que contiene
=============================================*/
.admin-field {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-field:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.12);
}

.admin-field input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 42px 0 14px;
  color: var(--ink);
  font-size: 15px;
}

.admin-field span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #9ca3af;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.admin-field.error {
  border-color: #ef4444;
  background: #fff5f5;
}

.admin-field.error > span {
  color: #ef4444;
}

.admin-field.success {
  border-color: #10b981;
  background: #f0fdf4;
}

.admin-field.success > span {
  color: #10b981;
}

.field-msg {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.75rem;
  padding: 0 14px;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

.field-msg.error {
  max-height: 30px;
  opacity: 1;
  padding: 4px 14px;
  color: #ef4444;
}

.field-msg.success {
  max-height: 30px;
  opacity: 1;
  padding: 4px 14px;
  color: #10b981;
}

.admin-options {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.admin-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
}

.admin-options input {
  width: 15px;
  height: 15px;
  accent-color: var(--red);
}

.admin-submit {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(var(--red-rgb), 0.24);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.admin-submit:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(var(--red-rgb), 0.28);
}

.admin-error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #e53e3e;
  font-size: 14px;
  font-weight: 600;
}

/*=============================================
Alineado a la derecha, justo debajo del campo de
contraseña — que es donde se busca cuando falla
el ingreso. El formulario es grid, de ahí el
justify-self
=============================================*/
.admin-recover {
  justify-self: end;
  width: fit-content;
  margin-top: -4px;
  color: var(--red-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Modal Restablecer Contraseña ── */
.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  margin: 16px;
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.modal-close {
  background: none;
  border: none;
  font-size: 36px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-desc {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 4px;
}

.modal-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.modal-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.modal-input:focus {
  border-color: var(--red);
}

.modal-input.error {
  border-color: #ef4444;
  background: #fff5f5;
}

.modal-input.success {
  border-color: #10b981;
  background: #f0fdf4;
}

.modal-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 24px;
}

.modal-btn-primary {
  height: 46px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-btn-primary:hover {
  background: var(--red-dark);
}

.modal-btn-secondary {
  height: 46px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.modal-btn-secondary:hover {
  opacity: 0.85;
}

.admin-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .admin-page {
    align-items: start;
    min-height: auto;
    padding: 42px 12px 56px;
  }

  .admin-login-head {
    padding: 22px 18px 18px;
  }

  .admin-login-form {
    padding: 20px 16px 22px;
  }

  .admin-options {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-submit {
    width: 100%;
  }
}

/* Final category sidebar polish */
.category-menu {
  background: linear-gradient(180deg, #223034 0%, #263438 45%, #1f2b2f 100%);
  color: #dbe5e7;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 14px 0 30px rgba(17, 24, 39, 0.28);
}

.category-menu-header {
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 24, 39, 0.2);
  padding: 18px 20px;
}

.category-menu-header h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dbe5e7;
  font-size: 22px;
  font-weight: 700;
}

.category-menu-list {
  gap: 2px;
  padding: 16px 14px 22px;
}

.category-menu-list a {
  min-height: 46px;
  border-radius: 8px;
  color: #dbe5e7;
  padding: 0 38px 0 12px;
  transition: background 160ms ease, color 160ms ease;
}

.category-menu-list a::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.category-menu-list a::after {
  right: 14px;
  border-color: rgba(219, 229, 231, 0.62);
}

.category-menu-list a:hover,
.category-menu-list a.is-active {
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
}

.category-menu-list a:hover::before,
.category-menu-list a.is-active::before {
  background: var(--accent);
}

.category-menu-list a:hover::after,
.category-menu-list a.is-active::after {
  border-color: var(--accent);
}

.category-menu-list .lucide-icon {
  color: #b7c7cb;
  stroke-width: 2.2;
}

.category-menu-list a:hover .lucide-icon,
.category-menu-list a.is-active .lucide-icon {
  color: var(--accent);
}

.category-submenu {
  border-left: 1px solid rgba(var(--red-rgb), 0.12);
  box-shadow: 16px 0 40px rgba(17, 24, 39, 0.16);
}

.category-submenu-head {
  border-bottom-color: var(--soft-bg);
}

.category-submenu-head h2 {
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 600;
}

.category-submenu-group h3 {
  color: var(--red-dark);
}

@media (max-width: 1023px) {
  .category-menu {
    background: var(--white);
    color: var(--ink);
    border-right: 0;
    box-shadow: none;
  }

  .category-menu-list a {
    color: var(--ink);
    border-radius: 0;
    padding: 0 28px 0 0;
  }

  .category-menu-list a::after {
    border-color: #4b5563;
  }

  .category-menu-list a:hover,
  .category-menu-list a.is-active {
    background: transparent;
    color: var(--red-dark);
  }

  .category-menu-list a:hover::after,
  .category-menu-list a.is-active::after {
    border-color: var(--red-dark);
  }

  .category-menu-list .lucide-icon {
    color: #4b5563;
  }

  .category-menu-list a:hover .lucide-icon,
  .category-menu-list a.is-active .lucide-icon {
    color: var(--red-dark);
  }

  .category-menu-list a::before,
  .category-menu-header h2::before {
    display: none;
  }
}

/* Final frontend polish */
body {
  background: linear-gradient(180deg, #ffffff 0, #f8fbfa 520px, var(--page) 100%);
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(227, 238, 232, 0.92);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(10px);
}

.topbar {
  min-height: 72px;
}

.brand img {
  display: block;
  width: clamp(118px, 11vw, 160px);
  height: auto;
}

.category-button {
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(var(--red-rgb), 0.18);
}

.category-button:hover {
  box-shadow: 0 10px 24px rgba(var(--red-rgb), 0.22);
}

.search {
  border-color: var(--ui-border);
  border-radius: 8px;
  box-shadow: var(--ui-shadow-sm);
}

.search:focus-within {
  border-color: rgba(var(--red-rgb), 0.42);
  box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.09), var(--ui-shadow-sm);
}

.search input {
  font-size: 14px;
}

.auth-terms {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.2;
}

.auth-terms input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}

.auth-terms a {
  color: var(--red);
  font-weight: 700;
}

.action-link,
.cart-link {
  color: #3f4a45;
}

.action-link:hover,
.cart-link:hover {
  color: var(--red-dark);
}

.new-products,
.best-sellers,
.catalog {
  background: transparent;
}

.section-heading h2,
.catalog-header h1 {
  color: #17211d;
}

.section-heading a,
.catalog-count {
  color: #52635b;
}

.product-badge {
  background: var(--rose-soft);
  color: var(--red-dark);
  box-shadow: 0 2px 8px rgba(var(--red-rgb), 0.13);
}

.badge-offer {
  background: #e8fff4;
  color: #036348;
}

.badge-stock {
  background: #1f2937;
  color: #ffffff;
}

.favorite-button {
  color: #405149;
  box-shadow: var(--ui-shadow-sm);
}

.favorite-button:hover {
  color: var(--red-dark);
}

.favorite-button.is-favorite,
.favorite-button.is-favorite:hover {
  color: var(--red-dark);
  box-shadow: 0 6px 18px rgba(0, 128, 104, 0.22);
}

.catalog-container {
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  padding-right: 0;
  padding-left: 0;
}

.catalog-header {
  min-height: 64px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 28px;
}

.catalog-grid {
  gap: 22px;
}

.catalog-pagination a {
  border-color: var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-pagination a:hover,
.catalog-pagination a.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #ffffff;
}

.product-detail-page {
  background: #ffffff;
}

.product-detail-page .product-detail-main {
  width: min(100% - 32px, var(--site-max-width));
}

.product-detail-page .product-main-image,
.product-detail-page .product-thumb,
.product-detail-page .delivery-options article {
  border-radius: 8px;
}

.product-detail-page .delivery-options article {
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}

.product-detail-page .buy-now-button,
.checkout-finish,
.checkout-continue,
.modal-btn-primary {
  box-shadow: 0 10px 22px rgba(var(--red-rgb), 0.18);
}

.footer-main {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-form input,
.footer-form textarea {
  border-radius: 8px;
}

@media (max-width: 620px) {
  body {
    background: var(--page);
  }

  .site-header {
    backdrop-filter: none;
  }

  .topbar {
    min-height: 56px;
  }

  .catalog-container,
  .product-detail-page .product-detail-main {
    width: min(100% - 24px, var(--site-max-width));
  }

  .catalog-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding-bottom: 16px;
  }
}

/* Mobile header icon cleanup */
@media (max-width: 1023px) {
  .topbar .category-button,
  .topbar .search {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .topbar .category-button {
    min-width: 34px;
    width: 34px;
    height: 38px;
    color: #1f2937;
  }

  .topbar .category-button:hover,
  .topbar .category-button[aria-expanded="true"] {
    background: transparent;
    color: var(--red);
    box-shadow: none;
  }

  body.category-modal-open .topbar .category-button {
    display: none;
  }

  .topbar .category-button .icon {
    width: 28px;
    height: 28px;
    stroke-width: 2.3;
  }

  .topbar .search {
    flex: 0 0 38px;
    min-width: 38px;
    width: 38px;
    height: 38px;
  }

  .topbar .search-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    box-shadow: none;
  }

  .topbar .search-button:hover {
    background: transparent;
    color: var(--red);
  }
}

@media (max-width: 420px) {
  .topbar .category-button,
  .topbar .search,
  .topbar .search-button {
    flex-basis: 34px;
    min-width: 34px;
    width: 34px;
  }
}

/* Drawer visibility restore */
body.category-modal-open .site-header,
body.cart-modal-open .site-header {
  position: static;
  z-index: auto;
  backdrop-filter: none;
}

body.category-modal-open .category-overlay,
body.cart-modal-open .cart-overlay {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 24, 39, 0.24);
}

body.category-modal-open .category-overlay {
  z-index: 180;
}

body.category-modal-open .category-menu {
  inset: 0 auto 0 0;
  height: 100vh;
  z-index: 200;
}

body.category-modal-open .category-submenu {
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: 195;
}

body.cart-modal-open .cart-overlay {
  z-index: 210;
}

body.cart-modal-open .cart-modal {
  inset: 0 0 0 auto;
  height: 100vh;
  z-index: 220;
}

@media (max-width: 1023px) {
  body.category-modal-open .category-overlay {
    display: none !important;
  }

  body.category-modal-open .category-menu,
  body.cart-modal-open .cart-modal {
    inset: 0;
    height: 100vh;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  body.category-modal-open .category-overlay {
    display: none !important;
  }

  body.category-modal-open .category-menu {
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 0 26px 28px;
    background: var(--white);
    color: var(--ink);
    box-shadow: none;
  }

  body.category-modal-open .category-submenu {
    display: none !important;
  }

  body.category-modal-open .category-menu-header {
    display: none;
  }

  body.category-modal-open .category-mobile-account,
  body.category-modal-open .category-mobile-shortcuts,
  body.category-modal-open .category-mobile-featured {
    display: grid;
  }

  body.category-modal-open .category-mobile-close {
    position: absolute;
    top: 22px;
    right: 18px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
  }

  body.category-modal-open .category-mobile-account {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    margin: 0 -26px;
    padding: 14px 54px 14px 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  }

  body.category-modal-open .category-mobile-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #d1d5db;
  }

  body.category-modal-open .category-mobile-avatar .lucide-icon {
    width: 38px;
    height: 38px;
  }

  body.category-modal-open .category-mobile-account a {
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
  }

  body.category-modal-open .category-mobile-shortcuts,
  body.category-modal-open .category-mobile-featured,
  body.category-modal-open .category-menu-list {
    border-bottom: 1px solid #d1d5db;
    padding: 14px 0;
  }

  body.category-modal-open .category-mobile-shortcuts a,
  body.category-modal-open .category-mobile-featured a,
  body.category-modal-open .category-menu-list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 28px 0 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
  }

  body.category-modal-open .category-menu-list a::after {
    right: 0;
    border-color: #4b5563;
  }

  body.category-modal-open .category-menu.is-mobile-submenu .category-mobile-account,
  body.category-modal-open .category-menu.is-mobile-submenu .category-mobile-shortcuts,
  body.category-modal-open .category-menu.is-mobile-submenu .category-mobile-featured,
  body.category-modal-open .category-menu.is-mobile-submenu .category-menu-list {
    display: none;
  }

  body.category-modal-open .category-menu.is-mobile-submenu .category-mobile-submenu {
    display: block;
  }

  body.category-modal-open .category-mobile-submenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    margin: 0 -26px;
    padding: 0 54px 0 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  }

  body.category-modal-open .category-mobile-back {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
  }

  body.category-modal-open .category-mobile-submenu-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: "Josefin Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  body.category-modal-open .category-mobile-submenu-head a {
    border-left: 1px solid #9ca3af;
    padding-left: 12px;
    color: var(--red-dark);
    font-size: 14px;
    font-weight: 500;
  }

  body.category-modal-open .category-mobile-submenu-list {
    display: grid;
    padding: 10px 0 24px;
  }

  body.category-modal-open .category-mobile-submenu-list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    padding-right: 28px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
  }

  body.category-modal-open .category-mobile-submenu-list a::after {
    content: "";
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #4b5563;
    border-right: 1px solid #4b5563;
    transform: rotate(45deg);
  }
}

@media (min-width: 621px) and (max-width: 1023px) {
  body.cart-modal-open .cart-modal {
    inset: 0 0 0 auto;
    width: min(420px, calc(100vw - 24px));
    max-width: 420px;
    border-radius: 0;
  }
}

@media (max-width: 620px) {
  body.cart-modal-open .cart-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
}

/* Auth modal responsive restore */
body.auth-modal-open .auth-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 230;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 24, 39, 0.24);
}

body.auth-modal-open .site-header {
  position: static;
  z-index: auto;
  backdrop-filter: none;
}

body.auth-modal-open .auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 240;
  display: flex;
  flex-direction: column;
  width: min(92vw, 440px);
  max-height: min(700px, calc(100vh - 32px));
  overflow: hidden;
  border-radius: 8px;
  transform: translate(-50%, -50%);
}

body.auth-modal-open .auth-modal-header {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 62px;
  justify-content: center;
  padding: 14px 58px 14px 22px;
  border-bottom: 1px solid var(--line);
}

body.auth-modal-open .auth-modal-header h2 {
  width: 100%;
  text-align: left;
}

body.auth-modal-open .auth-close-button {
  position: absolute;
  top: 12px;
  right: 16px;
}

body.auth-modal-open .auth-modal-body {
  display: grid;
  flex: 1;
  justify-items: center;
  align-content: start;
  overflow-y: auto;
  padding: 22px 22px 26px;
}

body.auth-modal-open .auth-intro-row,
body.auth-modal-open .auth-form,
body.auth-modal-open .auth-divider,
body.auth-modal-open .auth-options,
body.auth-modal-open .auth-register {
  width: min(100%, 380px);
  margin-right: auto;
  margin-left: auto;
}

body.auth-modal-open .auth-form,
body.auth-modal-open .auth-options {
  justify-self: center;
}

body.auth-modal-open .auth-intro {
  text-align: left;
}

body.auth-modal-open .auth-options button,
body.auth-modal-open .auth-options a {
  min-width: 0;
  padding: 0 12px;
  line-height: 1.05;
}

@media (min-width: 621px) and (max-width: 1023px) {
  body.auth-modal-open .auth-modal {
    width: min(420px, calc(100vw - 32px));
  }
}

@media (max-width: 620px) {
  body.auth-modal-open .auth-modal {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    transform: none;
  }

  body.auth-modal-open .auth-modal-body {
    min-height: calc(100vh - 62px);
    align-content: start;
    padding: 20px 18px 28px;
  }

  body.auth-modal-open .auth-options {
    grid-template-columns: 1fr;
  }
}

/* Zahara preload and skeleton utilities */
.zahara-preloader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--red-dark);
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.zahara-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.zahara-preloader__mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ecfdf5;
  box-shadow: inset 0 0 0 1px #a7f3d0, 0 14px 34px rgba(var(--red-rgb), 0.16);
}

.zahara-preloader__mark span {
  width: 28px;
  height: 28px;
  border: 4px solid #a7f3d0;
  border-top-color: var(--red);
  border-radius: 50%;
  animation: zahara-spin 820ms linear infinite;
}

.zahara-preloader p {
  margin: 0;
  color: var(--red-dark);
  font-size: 14px;
  font-weight: 900;
}

.skeleton-line,
.skeleton-box,
.skeleton-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #eaf3ef;
}

.skeleton-line::after,
.skeleton-box::after,
.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-100%);
  animation: zahara-skeleton 1.35s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
}

.skeleton-box {
  min-height: 44px;
}

.skeleton-card {
  min-height: 160px;
}

@keyframes zahara-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zahara-skeleton {
  to {
    transform: translateX(100%);
  }
}

/* User account */
.account-page {
  min-height: calc(100vh - 90px);
  background: linear-gradient(180deg, #f2fbf7 0%, #ffffff 280px);
  padding: clamp(28px, 4vw, 54px) 0 64px;
}

.account-container {
  width: min(100% - 32px, var(--site-max-width));
  margin: 0 auto;
}

.account-empty,
.account-hero,
.account-panel,
.account-sidebar {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.account-empty {
  display: grid;
  justify-items: center;
  max-width: 520px;
  margin: 36px auto;
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
}

.account-empty-icon,
.account-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--red);
  box-shadow: 0 12px 28px rgba(var(--red-rgb), 0.14);
}

.account-empty-icon .lucide-icon {
  width: 34px;
  height: 34px;
}

.account-empty h1,
.account-hero h1,
.account-panel h2 {
  margin: 0;
  color: #17211d;
}

.account-empty h1 {
  margin-top: 22px;
  font-size: clamp(26px, 4vw, 34px);
}

.account-empty p,
.account-hero p,
.account-mini-panel p {
  margin: 10px 0 0;
  color: #66746e;
  line-height: 1.55;
}

.account-primary-button,
.account-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #ffffff;
  padding: 0 24px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(var(--red-rgb), 0.18);
}

.account-primary-button {
  margin-top: 24px;
}

.account-primary-button:hover,
.account-logout:hover {
  background: var(--red-dark);
  color: #ffffff;
}

.account-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
}

.account-avatar {
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-kicker,
.account-panel-head span,
.account-mini-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
}

.account-hero-copy { min-width: 0; }

.account-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}

.account-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #52635b;
  font-size: 13px;
  font-weight: 700;
}

.account-hero-meta .lucide-icon {
  width: 17px;
  height: 17px;
  color: #15956f;
}

.account-logout { gap: 8px; }

.account-logout .lucide-icon,
.account-primary-button .lucide-icon {
  width: 18px;
  height: 18px;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.account-sidebar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 7px;
}

.account-sidebar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 150px;
  min-height: 44px;
  border-radius: 7px;
  color: #52635b;
  padding: 0 18px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.account-sidebar a:hover,
.account-sidebar a.is-active {
  background: #ecfdf5;
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.14);
}

.account-sidebar a.is-active::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 6px;
  left: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--red);
}

.account-sidebar .lucide-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.account-content {
  display: grid;
  gap: 18px;
}

.account-panel {
  padding: clamp(20px, 3vw, 28px);
}

.account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.account-panel-head p {
  margin: 7px 0 0;
  color: #66746e;
  font-size: 14px;
  line-height: 1.5;
}

.account-panel h2 {
  font-size: clamp(22px, 2.4vw, 28px);
}

.account-status {
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  padding: 8px 14px;
  font-size: 12px;
}

.account-status.is-verified {
  background: #ecfdf5;
  color: var(--red-dark);
}

.account-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.account-data-grid div {
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-soft);
  padding: 14px 16px;
}

.account-data-grid dt {
  margin-bottom: 7px;
  color: #66746e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.account-data-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #17211d;
  font-size: 16px;
  font-weight: 800;
}

.account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.account-form-section {
  padding: 20px;
  border: 1px solid #e3eae6;
  border-radius: 12px;
  background: #fbfdfc;
}

.account-form-section + .account-form-section { margin-top: 16px; }

.account-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.account-form-section-head h3 {
  margin: 1px 0 3px;
  color: #17211d;
  font-size: 17px;
  font-weight: 900;
}

.account-form-section-head p {
  margin: 0;
  color: #66746e;
  font-size: 13px;
  line-height: 1.45;
}

.account-section-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #ecfdf5;
  color: var(--red);
}

.account-section-icon .lucide-icon {
  width: 20px;
  height: 20px;
}

.account-field {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.account-field-wide {
  grid-column: 1 / -1;
}

.account-field label {
  color: #66746e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-field input,
.account-field select,
.account-field textarea {
  width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  color: #17211d;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: 0;
  padding: 13px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.account-field select {
  min-height: 48px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #52635b 50%), linear-gradient(135deg, #52635b 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.account-field textarea {
  min-height: 108px;
  resize: vertical;
}

.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.1);
}

.account-field input[readonly] {
  background: var(--ui-surface-soft);
  color: #66746e;
  cursor: not-allowed;
}

.auth-form input:not([type="checkbox"])::placeholder,
.account-field input::placeholder,
.account-field textarea::placeholder,
.checkout-form input::placeholder,
.newsletter-field input::placeholder,
.modal-input::placeholder {
  color: #b7c1bc;
  font-weight: 500;
}

.account-phone-field {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.account-phone-field .account-dial-code {
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #ecfdf5;
  color: var(--red);
  padding: 0 10px;
  font-weight: 900;
}

.account-phone-field input {
  border-radius: 0 8px 8px 0;
}

.account-field .select2-container {
  width: 100% !important;
}

.account-field .select2-container--default .select2-selection--single {
  height: 48px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.account-field .select2-container--default.select2-container--focus .select2-selection--single,
.account-field .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.1);
}

.account-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #17211d;
  font-size: 15px;
  font-weight: 700;
  line-height: 48px;
  padding-left: 14px;
  padding-right: 38px;
}

.account-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #b7c1bc;
  font-weight: 500;
}

.account-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 10px;
  right: 10px;
}

.select2-dropdown {
  border-color: var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(17, 24, 39, 0.16);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  outline: 0;
  padding: 9px 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--red);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--red);
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: #ecfdf5;
  color: var(--red-dark);
}

.account-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  border-top: 1px solid var(--ui-border);
  margin-top: 20px;
  padding-top: 18px;
}

.account-form-actions p {
  margin: 24px auto 0 0;
  color: #78857f;
  font-size: 13px;
}

.account-form-actions .account-primary-button {
  gap: 9px;
  min-width: 190px;
}

.account-mini-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.account-orders-panel {
  display: grid;
}

.account-orders-list {
  display: grid;
  gap: 16px;
}

.account-order-card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
}

.account-order-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  background: #f4f7f6;
  padding: 18px 20px;
}

.account-order-card header div:last-child {
  text-align: right;
}

.account-order-card header span {
  display: block;
  margin-bottom: 5px;
  color: #52635b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-order-card header strong {
  color: #17211d;
  font-size: 14px;
  font-weight: 800;
}

.account-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}

.account-order-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--ui-border);
}

.account-order-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: #fbfffd;
}

@media (max-width: 760px) {
  .account-order-layout {
    grid-template-columns: 1fr;
  }

  .account-order-main {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
}

.account-order-products {
  display: grid;
}

.account-order-product {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  padding: 18px 20px;
}

.account-order-product:last-child {
  border-bottom: 0;
}

.account-order-product img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 7px;
  background: #f8fffb;
  padding: 6px;
}

.account-order-product strong,
.account-order-product small {
  display: block;
}

.account-order-product strong {
  margin-bottom: 7px;
  color: #17211d;
  font-size: 14px;
  font-weight: 700;
}

.account-order-product small {
  color: #52635b;
  font-size: 13px;
  line-height: 1.45;
}

.account-order-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--ui-border);
  padding: 16px 20px;
}

.account-order-card footer a {
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--red-dark);
  padding: 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.order-status-badge i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.order-status-en-preparación,
.order-status-en-preparacion {
  background: #fff7ed;
  color: #c2410c;
}

.order-status-en-camino {
  background: #eff6ff;
  color: #1d4ed8;
}

.order-status-entregado {
  background: #ecfdf5;
  color: var(--red-dark);
}

.order-status-cancelado,
.order-status-cancelada,
.order-status-anulado,
.order-status-anulada {
  background: #fef2f2;
  color: #dc2626;
}

.order-warranty-badge,
.order-question-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  max-width: 100%;
  line-height: 1.35;
  white-space: normal;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.order-warranty-badge {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.order-question-link {
  background: transparent;
  color: var(--red-dark);
  border: 1px solid var(--rose-soft);
}

.order-warranty-badge:hover,
.order-question-link:hover {
  color: inherit;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.order-warranty-badge svg,
.order-question-link svg {
  width: 15px;
  height: 15px;
  fill: #25d366;
  flex-shrink: 0;
}

.account-order-card footer strong {
  color: #17211d;
  font-size: 14px;
  font-weight: 900;
}

.account-orders-empty {
  display: grid;
  justify-items: center;
  border: 1px dashed #b8d7ca;
  border-radius: 8px;
  background: #fbfffd;
  padding: 36px 20px;
  text-align: center;
}

.account-orders-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--red);
}

.account-orders-empty .lucide-icon {
  width: 28px;
  height: 28px;
}

.account-orders-empty h3 {
  margin: 16px 0 0;
  color: #17211d;
  font-size: 18px;
}

.account-orders-empty p {
  max-width: 420px;
  margin: 9px 0 18px;
  color: #66746e;
  line-height: 1.5;
}

.account-orders-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 7px;
  background: var(--red);
  color: #ffffff;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
}

.account-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.account-section-head small {
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--red-dark);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.order-detail-page {
  padding-top: 24px;
}

.order-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: #6b7280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.order-detail-breadcrumb a {
  color: var(--red);
  font-weight: 700;
}

.order-detail-breadcrumb strong {
  color: #26313b;
  font-weight: 700;
}

.order-detail-hero,
.order-detail-card,
.order-detail-summary,
.order-detail-empty {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
  font-family: Arial, Helvetica, sans-serif;
}

.order-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 24px 28px;
}

.order-detail-hero span {
  display: block;
  margin-bottom: 7px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.order-detail-hero h1 {
  margin: 0;
  color: #17211d;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
}

.order-detail-hero p {
  margin: 7px 0 0;
  color: #66746e;
  font-size: 13px;
}

.order-detail-hero > strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 800;
}

.order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.order-detail-main {
  display: grid;
  gap: 20px;
}

.order-detail-card {
  padding: 24px 28px;
}

.order-detail-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.order-detail-card h2,
.order-detail-summary h2 {
  margin: 0 0 16px;
  color: #34383d;
  font-size: 18px;
  font-weight: 700;
}

.order-detail-card > header h2 {
  margin: 0;
}

.order-detail-card > header span {
  color: #66746e;
  font-size: 13px;
}

.order-detail-timeline-card {
  overflow: hidden;
}

.order-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.order-timeline li {
  position: relative;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  color: #7b8782;
}

.order-timeline li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 34px;
  right: 0;
  height: 2px;
  background: #dce3df;
}

.order-timeline li:last-child::before {
  display: none;
}

.order-timeline-point {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #dce3df;
  border-radius: 50%;
  background: #ffffff;
  color: #8a9690;
  font-size: 13px;
  font-weight: 900;
}

.order-timeline strong,
.order-timeline p,
.order-timeline small {
  display: block;
}

.order-timeline strong {
  margin-bottom: 5px;
  color: #4b5b54;
  font-size: 14px;
  font-weight: 800;
}

.order-timeline p {
  margin: 0;
  color: #66746e;
  font-size: 13px;
  line-height: 1.35;
}

.order-timeline small {
  margin-top: 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
}

.order-timeline li.is-complete::before,
.order-timeline li.is-complete .order-timeline-point,
.order-timeline li.is-current .order-timeline-point {
  border-color: var(--red);
}

.order-timeline li.is-complete::before {
  background: var(--red);
}

.order-timeline li.is-complete .order-timeline-point {
  background: var(--red);
  color: #ffffff;
}

.order-timeline li.is-current .order-timeline-point {
  background: #fff8f8;
  color: var(--red);
  box-shadow: 0 0 0 5px rgba(214, 63, 63, 0.1);
}

.order-timeline li.is-current strong,
.order-timeline li.is-complete strong {
  color: #17211d;
}

/* ── Variante compacta y vertical, para listas (ej. Mis pedidos) ── */
.order-timeline--compact {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
}

.order-timeline--compact li {
  grid-template-rows: none;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.order-timeline--compact li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-timeline--compact li::before {
  top: 26px;
  left: 12px;
  right: auto;
  width: 2px;
  height: calc(100% - 14px);
}

.order-timeline--compact .order-timeline-point {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.order-timeline--compact strong {
  margin-bottom: 0;
  font-size: 13px;
}

.order-timeline--compact small {
  margin-top: 0;
  white-space: nowrap;
}

.order-detail-cancelled {
  border-left: 3px solid #b91c1c;
  border-radius: 6px;
  background: #fff6f6;
  padding: 16px 18px;
}

.order-detail-cancelled strong {
  display: block;
  margin-bottom: 5px;
  color: #991b1b;
  font-size: 15px;
}

.order-detail-cancelled p {
  margin: 0;
}

.order-detail-products {
  display: grid;
}

.order-detail-product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 90px 100px 110px;
  align-items: center;
  gap: 16px;
  min-height: 94px;
  border-top: 1px solid var(--ui-border);
  padding: 18px 0;
  color: #26313b;
}

.order-detail-product:first-child {
  border-top: 0;
  padding-top: 0;
}

.order-detail-product:last-child {
  padding-bottom: 0;
}

.order-detail-product img {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  background: #f8fffb;
  object-fit: contain;
  padding: 5px;
}

.order-detail-product strong {
  color: #17211d;
  font-size: 14px;
  font-weight: 800;
}

.order-detail-product small {
  display: block;
  margin-top: 4px;
  color: #66746e;
  font-size: 12px;
  line-height: 1.35;
}

.order-detail-product > span {
  color: #52635b;
  font-size: 13px;
}

.order-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.order-detail-card p {
  margin: 0 0 10px;
  color: #52635b;
  font-size: 14px;
  line-height: 1.45;
}

.order-detail-card p:last-child {
  margin-bottom: 0;
}

.order-detail-card p strong,
.order-detail-card p span {
  color: #17211d;
  font-weight: 800;
}

.order-detail-summary {
  position: sticky;
  top: 92px;
  padding: 24px;
}

.order-detail-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--ui-border);
  padding: 14px 0;
  color: #52635b;
  font-size: 14px;
}

.order-detail-summary h2 + div {
  border-top: 0;
  padding-top: 0;
}

.order-detail-summary strong {
  color: #17211d;
}

.order-detail-summary-total strong {
  color: #111827;
  font-size: 22px;
}

.order-detail-summary a,
.order-detail-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 7px;
  background: var(--red);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.order-detail-empty {
  max-width: 620px;
  margin: 30px auto 70px;
  padding: 34px;
  text-align: center;
}

.order-detail-empty h1 {
  margin: 0 0 10px;
  color: #17211d;
  font-size: 24px;
}

.order-detail-empty p {
  margin: 0 0 18px;
  color: #66746e;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .order-detail-layout {
    grid-template-columns: 1fr;
  }

  .order-detail-summary {
    position: static;
  }
}

@media (max-width: 720px) {
  .order-detail-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .order-detail-product {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .order-detail-product > span,
  .order-detail-product > strong:last-child {
    grid-column: 2;
  }

  .order-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .order-timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .order-timeline li {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 14px;
    padding-bottom: 22px;
  }

  .order-timeline li:last-child {
    padding-bottom: 0;
  }

  .order-timeline li::before {
    top: 34px;
    bottom: 0;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
  }
}

.account-favorites-grid {
  display: grid;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.account-favorite-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  border-bottom: 1px solid var(--ui-border);
  background: #ffffff;
  padding: 20px;
  transition: background 160ms ease;
}

.account-favorite-card:last-child {
  border-bottom: 0;
}

.account-favorite-card:hover {
  background: #f8fffb;
}

.account-favorite-image {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: #f4f8f6;
  overflow: hidden;
}

.account-favorite-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.account-favorite-info {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.account-favorite-info h3 {
  margin: 0;
  color: #38534a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.account-favorite-info p {
  margin: 10px 0 0;
  color: #26342f;
  font-size: 16px;
  line-height: 1.55;
}

.account-favorite-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
  margin-top: 9px;
}

.account-favorite-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--red-dark);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-favorite-badges span.is-muted {
  background: #f3f4f6;
  color: #52635b;
}

.account-favorite-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.account-favorite-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.account-favorite-price strong {
  color: #38534a;
  font-size: 20px;
  font-weight: 900;
}

.account-favorite-price del {
  color: #9aa6a0;
  font-weight: 800;
}

.account-favorite-actions {
  display: flex;
  align-items: center;
  gap: 0;
}

.account-favorite-remove,
.account-favorite-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.account-favorite-remove {
  border-radius: 6px 0 0 6px;
  background: #f8faf9;
  color: #52635b;
}

.account-favorite-remove:hover {
  background: #ecfdf5;
  color: var(--red-dark);
}

.account-favorite-link {
  border-radius: 0 6px 6px 0;
  background: var(--red);
  color: #ffffff;
}

.account-favorite-link:hover {
  background: var(--red-dark);
  color: #ffffff;
}

.account-favorites-empty {
  display: grid;
  justify-items: center;
  padding: 28px 18px;
  text-align: center;
}

.account-favorites-empty h3 {
  margin: 16px 0 0;
  color: #17211d;
  font-size: 22px;
}

/* Cart page */
.cart-page-empty {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--ui-shadow-sm);
}

.cart-page-back,
.cart-checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 900;
  white-space: nowrap;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.cart-products-card {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
}

.cart-products-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--ui-border);
  padding: 0 22px;
  color: #17211d;
  font-size: 14px;
}

.cart-sold-by {
  color: #66746e;
}

.cart-sold-by strong {
  color: #17211d;
}

.cart-products-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #66746e;
  font-weight: 700;
}

.cart-products-count .lucide-icon {
  width: 16px;
  height: 16px;
}

.cart-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  padding: 20px 22px;
  transition: opacity 160ms ease;
}

.cart-row.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.cart-row:last-child {
  border-bottom: 0;
}

.cart-product-image {
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f4f8f6;
  overflow: hidden;
}

.cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.cart-product-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: start;
}

.cart-product-name {
  color: #17211d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.cart-product-copy small {
  color: #66746e;
  line-height: 1.4;
}

.cart-remove-link {
  justify-self: start;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--red-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.cart-remove-link:hover {
  text-decoration: underline;
}

.cart-remove-link:disabled {
  cursor: default;
  opacity: 0.5;
  text-decoration: none;
}

.cart-product-price-block {
  display: grid;
  justify-items: end;
  gap: 10px;
  border-radius: 10px;
  background: var(--page);
  padding: 14px 16px;
}

.cart-static-quantity {
  color: #66746e;
  font-size: 13px;
  font-weight: 800;
}

.cart-quantity {
  display: grid;
  grid-template-columns: 34px 44px 34px;
  min-height: 34px;
  border: 1px solid rgba(var(--red-rgb), 0.26);
  border-radius: 999px;
  overflow: hidden;
}

.cart-quantity-button,
.cart-quantity input {
  border: 0;
  background: #ffffff;
  color: #17211d;
  text-align: center;
  font-weight: 900;
  outline: 0;
}

.cart-quantity-button {
  cursor: pointer;
}

.cart-quantity-button:hover {
  background: #ecfdf5;
  color: var(--red-dark);
}

.cart-quantity input::-webkit-outer-spin-button,
.cart-quantity input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.cart-price-copy {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.cart-discount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cart-discount-tag {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}

.cart-old-price {
  color: #9ca3af;
  font-size: 12px;
  line-height: 1;
  text-decoration: line-through;
}

.cart-price {
  color: #17211d;
  font-size: 17px;
  font-weight: 800;
}

.cart-summary-card {
  position: sticky;
  top: 90px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--ui-shadow-sm);
  padding: 24px 22px;
}

.cart-summary-card h2 {
  margin: 0 0 18px;
  color: #17211d;
  font-size: 19px;
}

.cart-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-border);
  color: #52635b;
  font-weight: 700;
}

.cart-summary-row strong {
  color: #17211d;
  font-size: 16px;
}

.cart-summary-row-total {
  border-bottom: 0;
  padding-top: 16px;
}

.cart-summary-row-total strong {
  color: var(--red-dark);
  font-size: 24px;
}

.cart-summary-card .cart-checkout-button {
  width: 100%;
  margin-top: 8px;
}

.cart-checkout-button {
  border: 0;
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(var(--red-rgb), 0.18);
}

.cart-checkout-button:hover {
  background: var(--red-dark);
  color: #ffffff;
}

.cart-page-empty {
  display: grid;
  justify-items: center;
  padding: clamp(34px, 7vw, 70px) 20px;
  text-align: center;
}

.cart-page-empty-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--red-dark);
}

.cart-page-empty-icon .lucide-icon {
  width: 44px;
  height: 44px;
}

.cart-page-empty h2 {
  margin: 22px 0 0;
  color: #17211d;
  font-size: clamp(26px, 4vw, 34px);
}

.cart-page-empty p {
  max-width: 460px;
  margin: 10px 0 22px;
  color: #66746e;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .account-hero,
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-avatar {
    width: 64px;
    height: 64px;
  }

  .account-logout {
    grid-column: 1 / -1;
    width: 100%;
  }

  .account-sidebar {
    gap: 6px;
  }

  .account-sidebar a {
    flex: 1 0 132px;
    justify-content: center;
    min-width: 132px;
    min-height: 46px;
    padding: 0 10px;
    font-size: 13px;
  }

  .account-order-card header {
    grid-template-columns: 1fr;
  }

  .account-order-card header div:last-child {
    text-align: left;
  }

  .cart-page-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .cart-page-back,
  .cart-checkout-button {
    width: 100%;
  }

  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary-card {
    position: static;
  }

  .cart-row {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .cart-product-image {
    width: 82px;
  }

  .cart-product-price-block {
    grid-column: 1 / -1;
    justify-items: start;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    display: flex;
    margin-top: 4px;
  }

  .cart-price-copy {
    justify-items: end;
  }
}

/* Cart page - Zahara checkout style */
.cart-page {
  min-height: calc(100vh - 90px);
  background: #f4f4f5;
  padding: 34px 0 58px;
}

.cart-page-container {
  width: min(100% - 28px, 1296px);
  max-width: 1360px;
  margin: 0 auto;
}

.cart-mobile-titlebar {
  display: none;
}

.cart-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cart-page-titlebar,
.cart-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 28px;
}

.cart-page-hero h1 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: 0;
}

.cart-page-hero h1 span {
  display: inline;
  margin: 0;
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.cart-page-back {
  flex: 0 0 auto;
  min-height: auto;
  border: 0;
  background: transparent;
  color: #2563eb;
  padding: 0 18px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.cart-page-back:hover {
  background: transparent;
  color: var(--red-dark);
}

.checkout-summary-top {
  padding-left: 0;
  width: 100%;
  transform: none;
}

.cart-summary-top h2 {
  margin: 0;
  color: #4b4b4b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 600;
}

.cart-summary-top a {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  white-space: nowrap;
}

.cart-layout {
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 30px;
  align-items: start;
}

.cart-summary-column {
  display: grid;
  gap: 0;
  align-content: start;
}

.cart-products-card,
.cart-summary-card,
.cart-page-empty {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.1);
}

.cart-products-head {
  min-height: 48px;
  border-bottom: 1px solid #d1d5db;
  padding: 0 24px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.cart-sold-by {
  color: #34383d;
}

.cart-sold-by strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #111827;
  font-weight: 700;
}

.cart-sold-by strong span {
  width: 9px;
  height: 9px;
  border: 2px solid var(--red);
  border-radius: 3px;
  transform: rotate(45deg);
}

.cart-products-count {
  color: #6b7280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.cart-row {
  grid-template-columns: 86px minmax(230px, 1fr) minmax(250px, 330px);
  gap: 22px;
  min-height: 134px;
  border-bottom: 1px solid #d1d5db;
  padding: 18px 28px;
}

.cart-product-image {
  width: 86px;
  border-radius: 6px;
  background: #ffffff;
}

.cart-product-copy {
  gap: 8px;
}

.cart-product-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.cart-product-copy small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.25;
}

.cart-remove-link {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
}

.cart-product-price-block {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr);
  align-items: center;
  justify-items: end;
  gap: 14px;
  min-height: 96px;
  border-radius: 6px;
  background: #f7f7f8;
  padding: 14px 16px;
}

.cart-price-copy {
  min-width: 96px;
  justify-self: end;
  text-align: right;
}

.cart-discount-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cart-quantity {
  grid-template-columns: 30px 44px 30px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.cart-quantity-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #cfd3d8;
  border-radius: 4px;
  background: #ffffff;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.cart-quantity-button:hover {
  border-color: var(--red);
  background: #ffffff;
  color: var(--red);
}

.cart-quantity input {
  width: 44px;
  border: 0;
  background: transparent;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.cart-discount-tag {
  color: #16a34a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.cart-old-price {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.cart-price {
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 650;
}

.cart-summary-card {
  top: 92px;
  padding: 22px 30px 30px;
}

.cart-coupon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  margin-bottom: 18px;
}

.cart-coupon-form[hidden] {
  display: none;
}

.cart-coupon-form input {
  width: 100%;
  height: 42px;
  border: 1px solid #cfd6df;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  padding: 0 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  outline: 0;
}

.cart-coupon-form input::placeholder {
  color: #a3a3a3;
}

.cart-coupon-form button {
  height: 42px;
  border: 0;
  border-radius: 5px;
  background: #d6d6d6;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.cart-coupon-form button:not(:disabled) {
  background: var(--red);
  cursor: pointer;
}

.checkout-coupon-form {
  margin-bottom: 18px;
}

.cart-summary-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}

.cart-summary-head h2 {
  margin: 0;
  color: #4b4b4b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.cart-summary-head a {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  white-space: nowrap;
}

.cart-summary-row {
  padding: 0 0 20px;
  border-bottom: 1px solid #d1d5db;
  color: #4b4b4b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.cart-summary-row strong {
  color: #34383d;
}

.cart-summary-row-total {
  border-bottom: 0;
  padding: 18px 0 0;
  color: #4b4b4b;
  font-size: 20px;
  font-weight: 650;
}

.cart-summary-row-total strong {
  color: #34383d;
  font-size: 22px;
  font-weight: 650;
}

.cart-summary-note {
  margin: 10px 0 22px;
  color: #a3a3a3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.45;
}

.cart-checkout-button {
  min-height: 42px;
  border-radius: 5px;
  background: var(--red);
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .cart-page-hero,
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-page-titlebar,
  .cart-summary-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .cart-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .cart-product-price-block {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (min-width: 998px) and (max-width: 1180px) {
  .cart-page-container {
    width: min(100% - 24px, 1296px);
  }

  .cart-page-hero,
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 24px;
  }

  .cart-row {
    grid-template-columns: 72px minmax(220px, 1fr) minmax(236px, 292px);
    gap: 16px;
    padding: 18px 16px;
  }

  .cart-product-image {
    width: 72px;
  }

  .cart-product-price-block {
    grid-template-columns: auto minmax(86px, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }

  .cart-quantity {
    grid-template-columns: 28px 36px 28px;
    gap: 6px;
  }

  .cart-quantity input {
    width: 36px;
  }

  .cart-price-copy {
    min-width: 86px;
  }

  .cart-product-name {
    font-size: 11px;
  }
}

@media (min-width: 998px) and (max-width: 1047px) {
  .cart-page-container {
    width: min(100% - 14px, 1296px);
  }

  .cart-page-hero,
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
  }

  .cart-row {
    grid-template-columns: 64px minmax(176px, 1fr) minmax(206px, 236px);
    gap: 12px;
    min-height: 126px;
    padding: 16px 12px;
  }

  .cart-product-image {
    width: 64px;
  }

  .cart-product-name {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .cart-product-copy small,
  .cart-remove-link {
    font-size: 10.5px;
  }

  .cart-product-price-block {
    grid-template-columns: auto minmax(78px, 1fr);
    gap: 8px;
    min-height: 88px;
    padding: 12px 10px;
  }

  .cart-quantity {
    grid-template-columns: 26px 30px 26px;
    gap: 5px;
  }

  .cart-quantity-button {
    width: 26px;
    height: 26px;
  }

  .cart-quantity input {
    width: 30px;
    font-size: 12px;
  }

  .cart-price-copy {
    min-width: 78px;
  }

  .cart-discount-row {
    gap: 5px;
  }

  .cart-discount-tag,
  .cart-old-price {
    font-size: 9.5px;
  }

  .cart-price {
    font-size: 13.5px;
  }

  .cart-summary-card {
    padding: 22px 28px 30px;
  }
}

@media (max-width: 620px) {
  .checkout-simple-header {
    min-height: 56px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
  }

  .checkout-simple-header img {
    width: 142px;
  }

  .cart-page {
    min-height: calc(100vh - 56px);
    padding: 18px 0 118px;
    background: #f3f3f4;
  }

  .cart-page-container {
    width: min(100% - 20px, var(--site-max-width));
  }

  .cart-page-hero {
    display: none;
  }

  .cart-mobile-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
  }

  .cart-mobile-titlebar h1 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    margin: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
  }

  .cart-mobile-titlebar a {
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  .cart-mobile-titlebar a:first-of-type {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .cart-mobile-titlebar a:last-of-type {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .cart-mobile-coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    margin: 0 0 10px;
  }

  .cart-mobile-coupon-form[hidden] {
    display: none;
  }

  .cart-mobile-coupon-form input,
  .cart-mobile-coupon-form button {
    height: 36px;
  }

  .cart-layout {
    display: block;
  }

  .cart-products-card {
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.12);
  }

  .cart-products-head {
    min-height: 46px;
    padding: 0 18px;
    font-size: 12px;
  }

  .cart-products-count {
    font-size: 12px;
  }

  .cart-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 14px;
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .cart-product-image {
    grid-row: 1 / span 2;
    align-self: center;
    width: 72px;
    aspect-ratio: 1;
    background: transparent;
  }

  .cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cart-product-copy {
    align-self: end;
    gap: 5px;
  }

  .cart-product-name {
    -webkit-line-clamp: 1;
    font-size: 12px;
    font-weight: 750;
  }

  .cart-product-copy small {
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.25;
  }

  .cart-remove-link {
    width: fit-content;
    margin-top: 6px;
    font-size: 12px;
  }

  .cart-product-price-block {
    grid-column: 2;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 34px;
    width: 100%;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }

  .cart-quantity {
    grid-template-columns: 30px 32px 30px;
    gap: 6px;
  }

  .cart-price-copy {
    justify-self: end;
    text-align: right;
  }

  .cart-discount-row {
    justify-content: flex-end;
  }

  .cart-discount-tag {
    font-size: 10px;
  }

  .cart-old-price {
    font-size: 11px;
  }

  .cart-price {
    font-size: 14px;
    font-weight: 750;
  }

  .cart-summary-column {
    display: block;
  }

  .cart-summary-card {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 140;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #292929;
    box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.24);
    padding: 18px 24px 22px;
  }

  .cart-summary-card > .cart-coupon-form {
    margin-bottom: 14px;
  }

  .cart-summary-card > .cart-coupon-form,
  .cart-summary-card > .cart-coupon-form[hidden],
  .cart-summary-card .cart-summary-row:not(.cart-summary-row-total),
  .cart-summary-note {
    display: none;
  }

  .cart-summary-row-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    padding: 0 0 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
  }

  .cart-summary-row-total > span {
    font-size: 0;
  }

  .cart-summary-row-total > span::before {
    content: "Detalles de compra";
    font-size: 14px;
  }

  .cart-summary-row-total strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
  }

  .cart-summary-row-total strong span {
    font-size: inherit;
  }

  .cart-summary-card .cart-checkout-button {
    min-height: 38px;
    border-radius: 5px;
    font-size: 14px;
  }

  .account-page {
    padding-top: 18px;
  }

  .account-container {
    width: min(100% - 24px, var(--site-max-width));
  }

  .account-data-grid,
  .account-form-grid {
    grid-template-columns: 1fr;
  }

  .account-panel-head {
    display: grid;
  }

  .account-form-actions .account-primary-button {
    width: 100%;
  }

  .account-form-section {
    padding: 16px;
  }

  .account-form-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .account-form-actions p {
    margin: 0;
    text-align: center;
  }

  .account-section-head,
  .account-favorite-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .account-section-head small,
  .account-favorite-link {
    width: fit-content;
  }

  .account-favorite-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .account-order-product {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .account-order-product img {
    width: 60px;
    height: 60px;
  }

  .account-order-card footer {
    display: grid;
    justify-items: start;
  }

  .account-favorite-image {
    width: 92px;
  }

  .account-favorite-info p {
    font-size: 14px;
    line-height: 1.45;
  }

  .account-favorite-actions {
    align-items: flex-start;
    gap: 0;
  }
}

@media (max-width: 997px) {
  .checkout-simple-header {
    min-height: 56px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
  }

  .checkout-simple-header img {
    width: 142px;
  }

  .cart-page {
    min-height: calc(100vh - 56px);
    padding: 18px 0 118px;
    background: #f3f3f4;
  }

  .cart-page-container {
    width: min(100% - 20px, var(--site-max-width));
  }

  .cart-page-hero {
    display: none;
  }

  .cart-mobile-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
  }

  .cart-mobile-titlebar h1 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    margin: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
  }

  .cart-mobile-titlebar a {
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  .cart-mobile-titlebar a:first-of-type {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .cart-mobile-titlebar a:last-of-type {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .cart-mobile-coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    margin: 0 0 10px;
  }

  .cart-mobile-coupon-form[hidden] {
    display: none;
  }

  .cart-mobile-coupon-form input,
  .cart-mobile-coupon-form button {
    height: 36px;
  }

  .cart-layout {
    display: block;
  }

  .cart-products-card {
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.12);
  }

  .cart-products-head {
    min-height: 46px;
    padding: 0 18px;
    font-size: 12px;
  }

  .cart-products-count {
    font-size: 12px;
  }

  .cart-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 14px;
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .cart-product-image {
    grid-row: 1 / span 2;
    align-self: center;
    width: 72px;
    aspect-ratio: 1;
    background: transparent;
  }

  .cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cart-product-copy {
    align-self: end;
    gap: 5px;
  }

  .cart-product-name {
    -webkit-line-clamp: 1;
    font-size: 12px;
    font-weight: 750;
  }

  .cart-product-copy small {
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.25;
  }

  .cart-remove-link {
    width: fit-content;
    margin-top: 6px;
    font-size: 12px;
  }

  .cart-product-price-block {
    grid-column: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 34px;
    width: 100%;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }

  .cart-quantity {
    grid-template-columns: 30px 32px 30px;
    gap: 6px;
  }

  .cart-price-copy {
    justify-self: end;
    text-align: right;
  }

  .cart-discount-row {
    justify-content: flex-end;
  }

  .cart-discount-tag {
    font-size: 10px;
  }

  .cart-old-price {
    font-size: 11px;
  }

  .cart-price {
    font-size: 14px;
    font-weight: 750;
  }

  .cart-summary-column {
    display: block;
  }

  .cart-summary-card {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 140;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #292929;
    box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.24);
    padding: 18px 24px 22px;
  }

  .cart-summary-card > .cart-coupon-form {
    margin-bottom: 14px;
  }

  .cart-summary-card > .cart-coupon-form,
  .cart-summary-card > .cart-coupon-form[hidden],
  .cart-summary-card .cart-summary-row:not(.cart-summary-row-total),
  .cart-summary-note {
    display: none;
  }

  .cart-summary-row-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    padding: 0 0 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
  }

  .cart-summary-row-total > span {
    font-size: 0;
  }

  .cart-summary-row-total > span::before {
    content: "Detalles de compra";
    font-size: 14px;
  }

  .cart-summary-row-total strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
  }

  .cart-summary-row-total strong span {
    font-size: inherit;
  }

  .cart-summary-card .cart-checkout-button {
    min-height: 38px;
    border-radius: 5px;
    font-size: 14px;
  }
}

/* Checkout profile final overrides */
.checkout-simple-header {
  position: static;
  min-height: 76px;
  box-shadow: none;
}

.checkout-simple-header img {
  width: 172px;
}

.checkout-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  background: #e9e9ea;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
  color: #9ca3af;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.checkout-progress-bar a,
.checkout-progress-bar span {
  color: #9ca3af;
}

.checkout-progress-bar strong {
  color: var(--red);
  font-weight: 800;
}

.checkout-page {
  min-height: calc(100vh - 122px);
  background: #f4f4f5;
  color: #34383d;
}

.checkout-main {
  width: min(100% - 128px, 1360px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 48px 0 64px;
}

.checkout-profile-head,
.checkout-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 30px;
}

.checkout-profile-head {
  align-items: end;
  margin-bottom: 10px;
}

.cart-page-titlebar,
.cart-summary-top,
.checkout-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 28px;
}

.checkout-profile-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 28px;
  width: 100%;
}

.checkout-profile-head h1 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 650;
  transform: translateX(-36px);
}

.checkout-profile-head a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.checkout-summary-top h2 {
  margin: 0;
  color: #4b4b4b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 600;
  transform: translateX(36px);
}

.checkout-profile-layout {
  align-items: start;
}

.checkout-summary-top a {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  white-space: nowrap;
}

.checkout-profile-panel,
.checkout-side-summary,
.checkout-state-card {
  border: 1px solid #d3d8df;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.14);
}

.checkout-profile-panel {
  min-height: 476px;
  padding: 38px 30px 40px;
}

.checkout-profile-panel.is-delivery-step {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-profile-form[hidden],
.checkout-delivery-panel[hidden],
.checkout-payment-panel[hidden] {
  display: none;
}

.checkout-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}

.checkout-field,
.checkout-terms-field {
  display: grid;
  gap: 8px;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.checkout-field-full {
  grid-column: 1 / -1;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  height: 42px;
  border: 1px solid #c8d0da;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  outline: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}

.checkout-field.is-invalid input,
.checkout-field.is-invalid select {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.checkout-field.is-invalid .checkout-phone-field span,
.checkout-field.is-invalid .checkout-document-field select {
  border-color: var(--error);
}

.checkout-terms-field.is-invalid {
  color: var(--error);
}

.checkout-terms-field.is-invalid input {
  accent-color: var(--error);
}

.checkout-field-error {
  margin-top: -2px;
  color: var(--error);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.checkout-readonly-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkout-readonly-field input {
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #fafafa;
  color: #9ca3af;
}

.checkout-readonly-field a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: #ffffff;
  color: #2563eb;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 400;
}

.checkout-document-field,
.checkout-phone-field {
  display: grid;
}

.checkout-document-field {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 6px;
}

.checkout-phone-field {
  grid-template-columns: 53px minmax(0, 1fr);
}

.checkout-phone-field span {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid #c8d0da;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #f1f1f2;
  color: #6b7280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}

.checkout-phone-field input {
  border-radius: 0 5px 5px 0;
}

.checkout-terms-field {
  display: grid;
  grid-template-columns: 20px minmax(0, max-content);
  align-items: start;
  column-gap: 9px;
  row-gap: 6px;
  justify-content: start;
  margin-top: 0;
  color: #34383d;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.checkout-terms-field input {
  width: 20px;
  height: 20px;
  margin-top: 0;
  accent-color: #2f2f30;
}

.checkout-terms-field > span {
  min-width: 0;
}

.checkout-terms-field .checkout-field-error {
  grid-column: 1 / -1;
  margin-top: 0;
}

.checkout-terms-field a {
  color: #2563eb;
}

.checkout-profile-form .checkout-continue {
  grid-column: 1 / -1;
  justify-self: end;
  width: 158px;
  height: 42px;
  margin-top: 14px;
  border-radius: 5px;
  background: #2f2f30;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.checkout-delivery-panel {
  display: grid;
  gap: 20px;
}

.checkout-location-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  min-height: 66px;
  border: 1px solid #d3d8df;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(17, 24, 39, 0.08);
  padding: 0 22px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.checkout-location-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  color: #4b4b4b;
}

.checkout-location-row .lucide-icon {
  width: 22px;
  height: 22px;
}

.checkout-location-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.checkout-location-row a {
  justify-self: end;
  color: #2563eb;
  font-size: 14px;
  white-space: nowrap;
}

.checkout-delivery-card {
  overflow: hidden;
  border: 1px solid #d3d8df;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.14);
}

.checkout-delivery-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  background: #f8f8f9;
  padding: 0 30px;
}

.checkout-delivery-card h2,
.checkout-home-delivery h3 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-delivery-card h2 {
  font-size: 16px;
  font-weight: 600;
}

.checkout-delivery-card small {
  display: block;
  margin-top: 5px;
  color: #9ca3af;
  font-size: 12px;
}

.checkout-delivery-card small strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #111827;
  font-weight: 800;
}

.checkout-delivery-card small strong span {
  width: 9px;
  height: 9px;
  border: 2px solid var(--red);
  border-radius: 3px;
  transform: rotate(45deg);
}

.checkout-delivery-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkout-delivery-thumbs img,
.checkout-delivery-thumbs span {
  width: 42px;
  height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.checkout-delivery-thumbs img {
  object-fit: contain;
  padding: 4px;
}

.checkout-delivery-thumbs span {
  display: grid;
  place-items: center;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.checkout-home-delivery {
  margin: 24px 30px 30px;
  border: 1px solid #d9dee5;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.checkout-home-delivery h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  background: #f7f8f9;
  padding: 0 24px;
  color: #29323b;
  font-size: 15px;
  font-weight: 600;
}

.checkout-home-delivery h3 .lucide-icon {
  width: 18px;
  height: 18px;
}

.checkout-delivery-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
}

.checkout-delivery-options[hidden],
.checkout-delivery-selected[hidden],
.checkout-delivery-address-prompt[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .order-warranty-badge,
  .order-question-link {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    text-align: center;
  }
}

.checkout-delivery-address-prompt {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin: 18px 20px 20px;
  border: 1px dashed #c4ccd5;
  border-radius: 8px;
  background: #f8fafc;
  padding: 22px;
}

.checkout-delivery-address-prompt strong {
  color: #202830;
  font-size: 15px;
}

.checkout-delivery-address-prompt small {
  color: #687386;
  line-height: 1.45;
}

.checkout-delivery-address-prompt button {
  margin-top: 5px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: #ffffff;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-delivery-selected {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  margin: 20px;
  border: 2px solid #3b3b3b;
  border-radius: 5px;
  padding: 24px 28px 18px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-delivery-selected-radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid #34383d;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #ffffff;
  background: #34383d;
}

.checkout-delivery-selected strong,
.checkout-delivery-selected small {
  display: block;
}

.checkout-delivery-selected strong {
  margin-bottom: 5px;
  color: #34383d;
  font-size: 15px;
  font-weight: 650;
}

.checkout-delivery-selected small {
  color: #8a94a3;
  font-size: 12px;
  line-height: 1.35;
}

.checkout-delivery-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 116px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #ffffff;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  padding: 12px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.checkout-delivery-option:last-child {
  border-right: 1px solid transparent;
}

.checkout-delivery-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}

.checkout-delivery-option:has(input[type="radio"]:checked) {
  border-color: rgba(var(--red-rgb), 0.34);
  background: #f3fbf8;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

.checkout-delivery-option strong {
  display: block;
  margin-bottom: 5px;
  color: #202830;
  font-size: 14px;
  font-weight: 600;
}

.checkout-delivery-option small {
  display: block;
  margin: 0 0 4px;
  color: #8a94a3;
  font-size: 12px;
  line-height: 1.25;
}

.checkout-delivery-option select,
.checkout-delivery-option input[type="date"] {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  border: 1px solid #cfd6df;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  padding: 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  outline: 0;
}

.checkout-delivery-option select:focus,
.checkout-delivery-option input[type="date"]:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.1);
}

.checkout-confirm-delivery {
  justify-self: end;
  margin-top: 10px;
  width: auto;
  min-width: 176px;
  height: 44px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 0 22px;
  white-space: nowrap;
  cursor: pointer;
}

.checkout-payment-panel {
  display: grid;
  gap: 28px;
  padding: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-payment-section {
  display: grid;
  gap: 16px;
  border-top: 1px solid #cfd3d8;
  padding-top: 24px;
}

.checkout-payment-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.checkout-payment-section h2 {
  margin: 0;
  color: #5b6168;
  font-size: 16px;
  font-weight: 650;
}

.checkout-payment-grid,
.checkout-payment-methods {
  display: grid;
  gap: 10px;
}

.checkout-payment-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-payment-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 66px;
  border: 1px solid #cfd3d8;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 22px;
  color: #34383d;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.checkout-payment-method {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 66px;
}

.checkout-payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #34383d;
}

.checkout-payment-option:has(input[type="radio"]:checked) {
  border-color: #34383d;
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.08);
}

.checkout-payment-option > span small {
  display: block;
  margin-top: 4px;
  color: #7b8491;
  font-size: 11px;
  font-weight: 400;
}

.checkout-payment-brands {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  justify-self: end;
}

.checkout-payment-brands span,
.checkout-payment-brand-pill {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  border-radius: 4px;
  background: #eef2f7;
  color: #0f172a;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.checkout-payment-brands span:nth-child(1) {
  color: #0676bd;
}

.checkout-payment-brands span:nth-child(2) {
  background: #1f75bb;
  color: #ffffff;
}

.checkout-payment-brands span:nth-child(3) {
  background: #f6f0ec;
  color: #e94831;
}

.checkout-payment-brands span:nth-child(4) {
  color: #0b55a0;
}

.checkout-payment-wallets span:nth-child(1),
.checkout-payment-wallets span:nth-child(3) {
  background: #6d13b8;
  color: #ffffff;
}

.checkout-payment-wallets span:nth-child(2) {
  background: #13c6d8;
  color: #ffffff;
}

.checkout-payment-wallets span:nth-child(4) {
  background: #f0f1f3;
  color: #6b7280;
}

.checkout-payment-brand-yellow {
  min-width: 112px;
  background: #ffc400;
  color: #1f2937;
  font-size: 12px;
}

.checkout-payment-brand-blue {
  min-width: 118px;
  background: #063c9b;
  color: #ffffff;
  font-size: 13px;
}

.checkout-payment-brand-purple {
  min-width: 130px;
  background: transparent;
  color: #8338ec;
  font-size: 20px;
  font-style: italic;
}

.checkout-finalize-button {
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-finalize-button:disabled {
  background: #d6d6d6;
  cursor: not-allowed;
}

.checkout-finalize-button[hidden] {
  display: none;
}

.checkout-purchase-terms {
  margin: 10px 0 0;
  color: #7b8491;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.checkout-purchase-terms[hidden] {
  display: none;
}

.checkout-purchase-terms a {
  color: #2563eb;
  text-decoration: none;
}

.checkout-purchase-terms a:hover {
  text-decoration: underline;
}

.checkout-delivery-address-prompt button:focus-visible,
.checkout-confirm-delivery:focus-visible,
.checkout-finalize-button:focus-visible,
.checkout-address-primary:focus-visible,
.checkout-address-secondary:focus-visible {
  outline: 3px solid rgba(var(--red-rgb), 0.24);
  outline-offset: 2px;
}

.checkout-mobile-step-button {
  display: none;
}

.checkout-order-success[hidden] {
  display: none;
}

.checkout-order-success {
  width: min(100% - 32px, 1180px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 48px 0 70px;
  color: #26313b;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-order-hero {
  width: 100%;
  margin-bottom: 28px;
}

.checkout-order-hero p {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.checkout-order-hero h1 {
  margin: 0;
  color: #1f2933;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.checkout-order-hero h1 span {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
}

.checkout-order-hero-line {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), rgba(var(--red-rgb), 0.08));
}

.checkout-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 28px;
  align-items: start;
}

.checkout-order-main {
  display: grid;
  gap: 24px;
}

.checkout-order-products,
.checkout-order-card,
.checkout-order-summary {
  border: 1px solid #d7dde5;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.checkout-order-table-head,
.checkout-order-product-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 96px 112px 120px;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.checkout-order-table-head {
  border-bottom: 1px solid #d7dde5;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}

.checkout-order-product-row {
  min-height: 78px;
  color: #34383d;
  font-size: 13px;
}

.checkout-order-product-row + .checkout-order-product-row {
  border-top: 1px solid #edf0f3;
}

.checkout-order-product-row > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.checkout-order-product-row img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.checkout-order-product-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #26313b;
  font-size: 13px;
  font-weight: 500;
}

.checkout-order-product-row > span {
  text-align: center;
}

.checkout-order-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.checkout-order-card {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.checkout-order-card-wide {
  grid-column: 1 / -1;
}

.checkout-order-card h2,
.checkout-order-summary h2 {
  margin: 0 0 8px;
  color: #26313b;
  font-size: 15px;
  font-weight: 700;
}

.checkout-order-card p {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.45;
}

.checkout-order-card strong {
  color: #26313b;
}

.checkout-order-summary {
  display: grid;
  gap: 16px;
  border-left: 3px solid var(--red);
  padding: 24px;
}

.checkout-order-summary h2 {
  border-bottom: 1px solid rgba(var(--red-rgb), 0.35);
  padding-bottom: 14px;
}

.checkout-order-summary div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #4b5563;
  font-size: 13px;
}

.checkout-order-summary strong {
  color: #26313b;
  font-weight: 600;
}

.checkout-order-total {
  border-top: 1px solid #d7dde5;
  padding-top: 16px;
  color: #26313b !important;
  font-size: 15px !important;
  font-weight: 700;
}

.checkout-order-summary a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  margin-top: 12px;
  border-radius: 5px;
  background: var(--red);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.checkout-order-summary .checkout-order-whatsapp {
  gap: 9px;
  background: #16a34a;
}

.checkout-order-summary .checkout-order-whatsapp:hover {
  background: #15803d;
}

.checkout-order-whatsapp .checkout-whatsapp-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.checkout-delivery-option em {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  border-radius: 999px;
  background: #eef8f4;
  color: #147a5b;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.checkout-delivery-option:not(:has(input[type="radio"]:checked)) select,
.checkout-delivery-option:not(:has(input[type="radio"]:checked)) input[type="date"] {
  display: none;
}

@media (min-width: 998px) and (max-width: 1180px) {
  .checkout-order-success {
    width: min(100% - 28px, 1120px);
  }

  .checkout-order-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
  }

  .checkout-order-table-head,
  .checkout-order-product-row {
    grid-template-columns: minmax(220px, 1fr) 76px 92px 96px;
    gap: 10px;
    padding: 16px;
  }

  .checkout-order-product-row > div {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .checkout-order-product-row img {
    width: 46px;
    height: 46px;
  }

  .checkout-order-cards {
    gap: 14px;
  }

  .checkout-order-card,
  .checkout-order-summary {
    padding: 18px;
  }
}

@media (min-width: 641px) and (max-width: 997px) {
  .checkout-order-success {
    width: min(100% - 32px, 760px);
    padding: 34px 0 48px;
  }

  .checkout-order-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .checkout-order-main {
    gap: 18px;
  }

  .checkout-order-table-head {
    display: none;
  }

  .checkout-order-product-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    gap: 14px;
    padding: 16px 18px;
  }

  .checkout-order-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .checkout-order-card-wide {
    grid-column: 1 / -1;
  }

  .checkout-order-summary {
    position: static;
    width: 100%;
  }
}

.checkout-billing-modal[hidden] {
  display: none;
}

.checkout-billing-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 16px 12px;
}

.checkout-billing-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.checkout-billing-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 426px);
  overflow: hidden;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(17, 24, 39, 0.28);
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-billing-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid #e5e7eb;
  background: #f0f0f1;
  padding: 0 18px;
}

.checkout-billing-dialog h2 {
  margin: 0;
  color: #4b4b4b;
  font-size: 16px;
  font-weight: 650;
}

.checkout-billing-dialog header button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #34383d;
  cursor: pointer;
}

.checkout-billing-dialog header .lucide-icon {
  width: 22px;
  height: 22px;
}

.checkout-billing-form {
  display: grid;
  gap: 22px;
  padding: 26px 20px 30px;
}

.checkout-billing-form label {
  display: grid;
  gap: 9px;
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 600;
}

.checkout-billing-form input {
  width: 100%;
  height: 46px;
  border: 1px solid #cfd6df;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  outline: 0;
}

.checkout-billing-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.1);
}

.checkout-billing-form button {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: 5px;
  background: var(--red);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-address-modal[hidden] {
  display: none;
}

.checkout-address-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.checkout-address-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.checkout-address-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(17, 24, 39, 0.26);
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-address-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid #e5e7eb;
  background: #f5f5f6;
  padding: 0 20px;
}

.checkout-address-dialog h2 {
  margin: 0;
  color: #4b4b4b;
  font-size: 18px;
  font-weight: 650;
}

.checkout-address-dialog header button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #34383d;
  cursor: pointer;
}

.checkout-address-dialog header .lucide-icon {
  width: 22px;
  height: 22px;
}

.checkout-address-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 26px 20px 28px;
}

.checkout-address-form[hidden] {
  display: none;
}

.checkout-address-list[hidden] {
  display: none;
}

.checkout-address-list {
  display: grid;
  gap: 26px;
  padding: 28px 20px 30px;
}

.checkout-address-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.checkout-address-list-head p {
  margin: 0;
  color: #4b4b4b;
  font-size: 14px;
  line-height: 1.35;
}

.checkout-address-list-head a,
.checkout-saved-address-card a {
  color: #2563eb;
  font-size: 14px;
  text-decoration: none;
}

.checkout-saved-address-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  border: 2px solid #3f3f40;
  border-radius: 5px;
  background: #ffffff;
  padding: 18px 22px;
  color: #4b4b4b;
}

.checkout-saved-address-radio {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.checkout-saved-address-radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.checkout-saved-address-radio span {
  width: 18px;
  height: 18px;
  border: 2px solid #3b3b3b;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.checkout-saved-address-radio input:checked + span {
  background: #3b3b3b;
}

.checkout-saved-address-icon {
  width: 20px;
  height: 20px;
  color: #4b4b4b;
}

.checkout-saved-address-copy strong,
.checkout-saved-address-copy small {
  display: block;
}

.checkout-saved-address-copy strong {
  margin-bottom: 4px;
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 700;
}

.checkout-saved-address-copy small {
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.35;
}

.checkout-receiver-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-address-confirm[hidden] {
  display: none;
}

.checkout-address-confirm {
  display: grid;
  gap: 16px;
  padding-bottom: 22px;
}

.checkout-address-field {
  display: grid;
  gap: 8px;
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 600;
}

.checkout-address-field span {
  display: flex;
  justify-content: space-between;
}

.checkout-address-field small {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
}

.checkout-address-wide {
  grid-column: span 2;
}

.checkout-address-half {
  grid-column: span 1;
}

.checkout-address-field input {
  width: 100%;
  height: 46px;
  border: 1px solid #cfd6df;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  outline: 0;
}

.checkout-address-field input::placeholder {
  color: #b3b3b3;
}

.checkout-address-field input:disabled {
  background: #f4f4f5;
  color: #a3a3a3;
  cursor: not-allowed;
}

.checkout-address-select {
  position: relative;
}

.checkout-address-select .lucide-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #4b4b4b;
  transform: translateY(-50%);
}

.checkout-address-select input {
  padding-left: 44px;
}

.checkout-address-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #cfd6df;
  border-radius: 5px;
}

.checkout-address-number input {
  border: 0;
  border-radius: 0;
}

.checkout-address-number label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #4b4b4b;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.checkout-address-number label input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.checkout-receiver-document,
.checkout-receiver-phone {
  display: grid;
}

.checkout-receiver-document {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
}

.checkout-receiver-document select {
  width: 100%;
  height: 46px;
  border: 1px solid #cfd6df;
  border-radius: 5px;
  background: #ffffff;
  color: #34383d;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.checkout-receiver-phone {
  grid-template-columns: 54px minmax(0, 1fr);
}

.checkout-receiver-phone > span {
  display: grid;
  place-items: center;
  height: 46px;
  border: 1px solid #cfd6df;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #f1f1f2;
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
}

.checkout-receiver-phone input {
  border-radius: 0 5px 5px 0;
}

.checkout-receiver-self {
  grid-column: 1 / -1;
  justify-self: center;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.checkout-address-receiver {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  background: #f8f8f9;
  padding: 0 30px;
}

.checkout-address-receiver .lucide-icon {
  width: 24px;
  height: 24px;
  color: #4b4b4b;
}

.checkout-address-receiver strong,
.checkout-address-receiver span {
  display: block;
}

.checkout-address-receiver strong {
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 600;
}

.checkout-address-receiver span {
  color: #4b4b4b;
  font-size: 13px;
}

.checkout-address-receiver a {
  color: #2563eb;
  font-size: 14px;
}

.checkout-address-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.checkout-address-actions button {
  min-width: 130px;
  height: 46px;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-address-secondary {
  background: #2f2f30;
}

.checkout-address-primary {
  background: var(--red);
}

.checkout-map-preview {
  position: relative;
  height: min(46vh, 360px);
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
  background: #edf3f7;
}

.checkout-map-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.checkout-map-pin {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--red);
  box-shadow: 0 5px 12px rgba(17, 24, 39, 0.24);
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

.checkout-map-pin::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}

.checkout-confirm-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 12px;
  padding: 0 20px;
}

body.address-modal-open {
  overflow: hidden;
}

.checkout-sidebar {
  display: grid;
  align-content: start;
  gap: 20px;
}

.checkout-side-summary {
  padding: 22px 30px 30px;
}

.checkout-summary-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.checkout-summary-head h2 {
  margin: 0;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}

.checkout-summary-head a {
  color: #2563eb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  white-space: nowrap;
}

.checkout-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d1d5db;
  padding: 0 0 20px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.checkout-summary-row strong {
  color: #111827;
  font-weight: 500;
}

.checkout-mini-list {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #d1d5db;
  padding: 10px 16px 22px;
}

.checkout-mini-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 4px;
  background: #f7f7f8;
  padding: 9px 10px;
}

.checkout-mini-product img {
  width: 44px;
  height: 42px;
  object-fit: contain;
}

.checkout-mini-product p {
  overflow: hidden;
  margin: 0 0 6px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-mini-product strong {
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.checkout-mini-product small {
  margin-left: 6px;
  color: #9ca3af;
  font-size: 13px;
  text-decoration: line-through;
}

.checkout-mini-list + .checkout-summary-row {
  padding-top: 20px;
}

.checkout-summary-total {
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 0;
  padding: 20px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.checkout-summary-total strong {
  font-size: 22px;
  font-weight: 700;
}

.checkout-summary-note {
  margin: 8px 0 0;
  color: #9ca3af;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.checkout-state-card {
  display: grid;
  gap: 26px;
  padding: 30px;
}

.checkout-state-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 52px;
  color: #34383d;
  font-family: Arial, Helvetica, sans-serif;
}

.checkout-state-item.is-current {
  border: 1px solid #2f2f30;
  border-radius: 5px;
  padding: 16px 18px;
}

.checkout-state-item span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #2f2f30;
  color: #ffffff;
  font-weight: 800;
}

.checkout-state-item strong,
.checkout-state-item small {
  display: block;
}

.checkout-state-item strong {
  font-size: 14px;
  font-weight: 500;
}

.checkout-state-item small {
  color: #111827;
  font-size: 12px;
}

.checkout-state-item a {
  color: #2563eb;
  font-size: 18px;
}

.checkout-state-item.is-disabled {
  color: #a3a3a3;
}

.checkout-state-item.is-disabled span {
  background: #eef0f2;
  color: #6b7280;
}

.checkout-state-item.is-disabled small,
.checkout-state-item.is-disabled strong {
  color: #a3a3a3;
}

@media (max-width: 997px) {
  .checkout-main {
    width: min(100% - 28px, 1528px);
    padding-top: 28px;
  }

  .checkout-profile-head,
  .checkout-profile-layout {
    grid-template-columns: 1fr;
  }

  .checkout-profile-head h1,
  .checkout-summary-top h2 {
    transform: none;
  }

  .checkout-profile-head a {
    justify-self: start;
  }

  .checkout-summary {
    order: 0;
  }
}

@media (max-width: 997px) {
  .checkout-simple-header {
    min-height: 56px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
  }

  .checkout-simple-header img {
    width: 142px;
  }

  .checkout-progress-bar {
    gap: 8px;
    min-height: 36px;
    font-size: 12px;
  }

  .checkout-page {
    min-height: calc(100vh - 92px);
    padding-bottom: 158px;
  }

  .checkout-page:has(.checkout-finalize-button:not([hidden])) {
    padding-bottom: 238px;
  }

  .checkout-main {
    width: min(100% - 16px, 1528px);
    padding: 22px 0 28px;
  }

  .checkout-profile-head {
    display: block;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
  }

  .checkout-profile-titlebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    justify-content: stretch;
    min-height: 26px;
    width: 100%;
    gap: 12px;
  }

  .checkout-profile-titlebar[hidden] {
    display: none !important;
  }

  .checkout-profile-head h1 {
    justify-self: start;
    margin: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
  }

  .checkout-profile-head a {
    justify-self: end !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    white-space: nowrap;
  }

  .checkout-profile-head .lucide-icon {
    width: 18px;
    height: 18px;
  }

  .checkout-summary-top {
    display: none;
  }

  .checkout-profile-layout {
    display: block !important;
    margin-top: 0;
  }

  .checkout-profile-panel,
  .checkout-state-card {
    padding: 22px 16px;
  }

  .checkout-profile-panel {
    display: block !important;
    width: 100%;
    min-height: 0;
    margin: 0 0 14px;
    border-radius: 5px;
    box-shadow: 0 3px 12px rgba(17, 24, 39, 0.14);
    padding: 16px;
  }

  .checkout-profile-form:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .checkout-profile-form[hidden],
  .checkout-delivery-panel[hidden],
  .checkout-payment-panel[hidden] {
    display: none !important;
  }

  .checkout-delivery-panel:not([hidden]) {
    display: grid !important;
    gap: 12px;
  }

  .checkout-location-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 10px;
    min-height: 54px;
    padding: 12px 14px;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(17, 24, 39, 0.1);
  }

  .checkout-location-row > span {
    margin-right: 0;
  }

  .checkout-location-row .lucide-icon {
    width: 18px;
    height: 18px;
  }

  .checkout-location-row strong {
    min-width: 0;
    color: #1f2933;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkout-location-row a {
    grid-column: 3;
    justify-self: end;
    font-size: 12px;
    line-height: 1;
  }

  .checkout-delivery-card {
    border-radius: 5px;
    box-shadow: 0 3px 12px rgba(17, 24, 39, 0.12);
  }

  .checkout-delivery-card > header {
    min-height: 64px;
    padding: 12px 14px;
    gap: 10px;
  }

  .checkout-delivery-card h2 {
    font-size: 15px;
    font-weight: 700;
  }

  .checkout-delivery-card small {
    margin-top: 4px;
    font-size: 11px;
  }

  .checkout-delivery-thumbs {
    flex: 0 0 auto;
    gap: 4px;
  }

  .checkout-delivery-thumbs img,
  .checkout-delivery-thumbs span {
    width: 34px;
    height: 34px;
    border-radius: 6px;
  }

  .checkout-home-delivery {
    margin: 12px 14px 14px;
    border-radius: 5px;
  }

  .checkout-home-delivery h3 {
    min-height: 42px;
    gap: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
  }

  .checkout-home-delivery h3 .lucide-icon {
    width: 16px;
    height: 16px;
  }

  .checkout-delivery-options {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .checkout-delivery-option {
    min-height: 0;
    gap: 10px;
    align-items: start;
    border: 1px solid #e1e6ec;
    border-radius: 5px;
    padding: 12px;
    background: #ffffff;
  }

  .checkout-delivery-option input[type="radio"] {
    width: 17px;
    height: 17px;
    margin-top: 1px;
  }

  .checkout-delivery-option strong {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 700;
  }

  .checkout-delivery-option small {
    margin-bottom: 2px;
    font-size: 11px;
  }

  .checkout-delivery-option select,
  .checkout-delivery-option input[type="date"] {
    height: 36px;
    margin-top: 7px;
    font-size: 12px;
  }

  .checkout-delivery-selected {
    margin: 12px;
    gap: 12px;
    padding: 14px;
  }

  .checkout-delivery-selected strong {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 700;
  }

  .checkout-delivery-selected small {
    font-size: 11px;
  }

  .checkout-confirm-delivery {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    justify-self: end;
    width: auto;
    min-width: 164px;
    height: 37px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 800;
    padding: 0 18px;
    white-space: nowrap;
  }

  .checkout-field,
  .checkout-terms-field {
    gap: 7px;
    font-size: 12px;
  }

  .checkout-field input,
  .checkout-field select,
  .checkout-phone-field span {
    height: 37px;
    font-size: 13px;
  }

  .checkout-document-field {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .checkout-phone-field {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .checkout-phone-field span {
    font-size: 13px;
  }

  .checkout-readonly-field {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .checkout-readonly-field input {
    border: 1px solid #cbd5e1;
    border-right: 0;
    border-radius: 5px 0 0 5px;
  }

  .checkout-readonly-field a {
    min-height: 37px;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    font-size: 13px;
    padding: 0 8px;
  }

  .checkout-terms-field {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 6px;
    font-size: 13px;
    line-height: 1.25;
  }

  .checkout-terms-field input {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }

  .checkout-profile-form .checkout-continue {
    justify-self: stretch;
    width: 100%;
    height: 37px;
    margin-top: 0;
    border-radius: 5px;
    font-size: 14px;
  }

  .checkout-sidebar {
    display: block;
  }

  .checkout-state-card {
    display: none;
  }

  .checkout-side-summary {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 140;
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 132px !important;
    max-height: min(230px, calc(100vh - 96px)) !important;
    overflow: hidden;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: #292929;
    box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.24);
    box-sizing: border-box;
    padding: 13px 22px 16px;
  }

  .checkout-side-summary::before {
    content: "";
    display: block;
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
    margin: 0 auto 20px;
  }

  .checkout-coupon-form,
  .checkout-products-toggle,
  .checkout-mini-list,
  .checkout-side-summary .checkout-summary-row:not(.checkout-summary-total),
  .checkout-summary-note {
    display: none;
  }

  .checkout-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    margin: 0;
    padding: 0 0 15px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
  }

  .checkout-summary-total > span {
    font-size: 0;
  }

  .checkout-summary-total > span::before {
    content: "Detalles de compra";
    font-size: 14px;
  }

  .checkout-summary-total strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }

  .checkout-mobile-step-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 37px;
    border: 0;
    border-radius: 5px;
    background: var(--red);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
  }

  .checkout-mobile-step-button[hidden] {
    display: none;
  }

  .checkout-order-hero h1 {
    font-size: 22px;
  }

  .checkout-order-success {
    width: min(100% - 24px, 760px);
    padding: 28px 0 36px;
  }

  .checkout-order-hero {
    margin-bottom: 18px;
  }

  .checkout-order-hero p {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.05;
  }

  .checkout-order-hero h1 {
    display: grid;
    gap: 3px;
    font-size: 22px;
    line-height: 1.14;
  }

  .checkout-order-hero h1 span {
    display: block;
    font-size: 21px;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
  }

  .checkout-order-hero-line {
    height: 1px;
    margin-top: 16px;
  }

  .checkout-order-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .checkout-order-main {
    gap: 14px;
  }

  .checkout-order-products {
    overflow: hidden;
  }

  .checkout-order-table-head {
    display: none;
  }

  .checkout-order-product-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 14px;
    font-size: 12px;
  }

  .checkout-order-product-row div {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .checkout-order-product-row img {
    width: 48px;
    height: 48px;
  }

  .checkout-order-product-row strong {
    font-size: 12px;
    line-height: 1.25;
  }

  .checkout-order-product-row > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #4b5563;
  }

  .checkout-order-product-row > span:nth-child(2)::before {
    content: "Cantidad";
  }

  .checkout-order-product-row > span:nth-child(3)::before {
    content: "Precio";
  }

  .checkout-order-product-row > span:nth-child(4)::before {
    content: "Subtotal";
  }

  .checkout-order-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .checkout-order-card {
    min-height: 0;
    padding: 16px;
  }

  .checkout-order-card h2,
  .checkout-order-summary h2 {
    font-size: 14px;
  }

  .checkout-order-card p {
    font-size: 12px;
    line-height: 1.35;
  }

  .checkout-order-summary {
    position: static;
    order: 2;
    width: 100%;
    border-left: 0;
    border-top: 3px solid var(--red);
    padding: 18px;
  }

  .checkout-order-summary h2 {
    padding-bottom: 12px;
  }

  .checkout-order-summary div {
    font-size: 12px;
  }

  .checkout-order-total {
    font-size: 13px;
  }

  .checkout-order-summary a {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
  }

  .checkout-address-modal {
    padding: 16px 12px;
    place-items: center;
  }

  .checkout-address-form {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 16px 22px;
  }

  .checkout-payment-panel {
    gap: 22px;
  }

  .checkout-payment-grid-two,
  .checkout-payment-method {
    grid-template-columns: 1fr;
  }

  .checkout-payment-option {
    min-height: auto;
    padding: 16px;
  }

  .checkout-payment-method {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .checkout-payment-method .checkout-payment-brands,
  .checkout-payment-method .checkout-payment-brand-pill {
    grid-column: 3;
    justify-self: end;
  }

  .checkout-address-list {
    padding: 20px 16px 22px;
  }

  .checkout-address-list-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkout-saved-address-card {
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: 16px;
  }

  .checkout-saved-address-card > a {
    grid-column: 3;
  }

  .checkout-receiver-form {
    grid-template-columns: 1fr;
  }

  .checkout-address-wide {
    grid-column: auto;
  }

  .checkout-address-half {
    grid-column: auto;
  }

  .checkout-address-number {
    grid-template-columns: 1fr;
  }

  .checkout-address-number label {
    min-height: 42px;
    border-top: 1px solid #cfd6df;
  }

  .checkout-address-receiver {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
  }

  .checkout-address-receiver a {
    grid-column: 2;
  }

  .checkout-address-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-map-preview {
    height: 280px;
  }

  .checkout-confirm-fields {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

}

@media (min-width: 641px) and (max-width: 997px) {
  .checkout-order-success {
    width: min(100% - 32px, 960px);
    max-width: 960px;
  }

  .checkout-order-layout,
  .checkout-order-main,
  .checkout-order-products,
  .checkout-order-cards,
  .checkout-order-card,
  .checkout-order-summary {
    width: 100%;
  }

  .checkout-order-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .checkout-order-main {
    justify-items: stretch;
  }

  .checkout-order-product-row {
    grid-template-columns: minmax(0, 1fr) 86px 104px 108px;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
  }

  .checkout-order-product-row > div {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .checkout-order-product-row > span {
    display: block;
    text-align: right;
  }

  .checkout-order-product-row > span::before {
    content: none !important;
  }

  .checkout-order-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .checkout-order-card-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .checkout-order-success {
    width: min(100% - 32px, 760px);
    max-width: 760px;
  }

  .checkout-order-layout,
  .checkout-order-main,
  .checkout-order-products,
  .checkout-order-cards,
  .checkout-order-card,
  .checkout-order-summary {
    width: 100%;
    max-width: none;
  }

  .checkout-order-layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .checkout-order-main {
    justify-items: stretch;
  }

  .checkout-order-product-row {
    width: 100%;
  }
}


/*=============================================
Franja de beneficios

Fondo oscuro de lado a lado: es el único bloque negro
de la portada, así que corta la sucesión de franjas
blancas y rosas y se lee como un cierre antes del pie.

Los iconos van en círculo blanco, que es lo que los
hace visibles sobre el fondo oscuro sin engordar el
trazo.

Todos los colores salen de las variables de la
plantilla: el fondo es el del pie y el trazo de los
iconos toma el color principal. Si alguien cambia la
paleta desde el administrador, esta franja cambia con
ella; con un negro escrito a mano se habría quedado
descolgada.
=============================================*/
.home-benefits {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(var(--red-rgb), 0.2), transparent 36%),
    linear-gradient(145deg, var(--footer-bg) 0%, var(--footer-dark) 100%);
  padding: clamp(64px, 7vw, 104px) 0;
}

.checkout-saved-address-card[hidden] {
  display: none;
}

/* En el carrito vacío, la cabecera ocupa todo el ancho para llevar el enlace al extremo derecho. */
.cart-page-hero--simple {
  grid-template-columns: 1fr;
}

.cart-page-hero--simple .cart-page-titlebar {
  grid-column: 1 / -1;
  width: 100%;
}

.cart-page-hero--simple .cart-page-back {
  padding-right: 0;
}

/* Checkout ágil: jerarquía clara, menos ruido visual y confianza junto al pago. */
.checkout-profile-titlebar > div:first-child {
  min-width: 0;
}

.checkout-fast-note {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #d8eee5;
  border-radius: 9px;
  background: #f3fbf8;
  color: #52605a;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.45;
}

.checkout-fast-note .lucide-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #16835d;
}

.checkout-fast-note strong {
  color: #215b47;
}

.checkout-field > span small {
  display: block;
  margin-top: 3px;
  color: #9298a1;
  font-size: 10px;
  font-weight: 400;
}

.checkout-profile-form .checkout-continue,
.checkout-confirm-delivery,
.checkout-finalize-button {
  min-height: 48px;
  border-radius: 8px;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(var(--red-rgb), 0.18);
}

.checkout-profile-form .checkout-continue:hover,
.checkout-confirm-delivery:hover,
.checkout-finalize-button:hover:not(:disabled) {
  background: var(--red-dark);
}

.checkout-payment-section:first-child {
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  background: #fafbfc;
  padding: 18px;
}

.checkout-payment-grid-two .checkout-payment-option {
  min-height: 52px;
}

.checkout-summary-total {
  border-radius: 8px;
  background: #fff6f9;
  padding: 15px 12px;
}

.checkout-summary-note {
  line-height: 1.45;
}

.checkout-secure-payment {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 0;
  color: #66736e;
  font-size: 11px;
  text-align: center;
}

.checkout-finalize-button:not([hidden]) ~ .checkout-secure-payment {
  display: flex;
}

.checkout-secure-payment .lucide-icon {
  width: 14px;
  height: 14px;
  color: #16835d;
}

@media (max-width: 620px) {
  .checkout-fast-note {
    align-items: flex-start;
  }
}

@media (max-width: 997px) {
  .checkout-side-summary .checkout-summary-total {
    border-radius: 0;
    background: transparent;
    padding: 0 0 15px;
  }

  .checkout-side-summary .checkout-purchase-terms,
  .checkout-side-summary .checkout-secure-payment {
    color: #d1d5db;
  }

  .checkout-side-summary .checkout-purchase-terms a {
    color: #ffffff;
    text-decoration: underline;
  }
}

/* El pie complementa al menú principal: tres grupos cortos en vez de repetir el catálogo. */
.footer-links.footer-links--compact {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
}

.footer-links--compact .footer-column:nth-child(4) {
  grid-column: auto;
}

@media (max-width: 900px) {
  .footer-links.footer-links--compact {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 620px) {
  .footer-links.footer-links--compact {
    grid-template-columns: 1fr;
  }
}

.home-benefits-container {
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.home-section-heading {
  max-width: 720px;
  margin: 0 auto clamp(34px, 4.5vw, 58px);
  text-align: center;
}

.home-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  color: var(--red-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.home-section-eyebrow::before,
.home-section-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.home-section-heading > p {
  max-width: 610px;
  margin: 13px auto 0;
  color: var(--muted);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
}

.home-section-heading--light .home-section-eyebrow {
  color: var(--accent);
}

.home-section-heading--light > p {
  color: rgba(255, 255, 255, 0.68);
}

.home-benefits-title {
  margin: 0;
  color: var(--white);
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit {
  min-height: 238px;
  padding: clamp(25px, 2.4vw, 34px) clamp(20px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.14);
  text-align: left;
  backdrop-filter: blur(8px);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.benefit:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), 0.48);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 26px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.benefit-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.3;
}

.benefit p {
  margin: 0;
  max-width: 250px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

/*=============================================
Muro de marcas

Sin cajas: los nombres van sueltos sobre el blanco,
como en un muro de logos. Cuando las marcas tengan
imagen, cada nombre se cambia por la suya y la
maquetación no se entera.

El título va centrado y en versalitas espaciadas, no
alineado a la izquierda como el de los carruseles:
aquí no hay "Ver todos" al otro lado, y centrado
equilibra la fila de nombres que va debajo.
=============================================*/
.home-brands {
  background:
    linear-gradient(180deg, rgba(var(--red-rgb), 0.035), transparent 32%),
    var(--page);
  padding: clamp(68px, 7vw, 108px) 0;
}

.home-brands-container {
  width: min(100% - 32px, var(--site-max-width));
  max-width: var(--site-max-width);
  margin: 0 auto;
}

.home-brands-title {
  margin: 0;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: center;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  min-height: 82px;
  padding: 18px 20px;
  border: 1px solid rgba(var(--red-rgb), 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.045);
  color: var(--ink);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  transition: color 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.brand-chip svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 180ms ease, opacity 180ms ease;
}

.brand-chip:hover {
  color: var(--red);
  border-color: rgba(var(--red-rgb), 0.3);
  box-shadow: 0 16px 38px rgba(var(--red-rgb), 0.1);
  transform: translateY(-3px);
}

.brand-chip:hover svg {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .home-benefits-container,
  .home-brands-container {
    width: min(100% - 28px, var(--site-max-width));
  }

  .brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 20px;
  }

  .benefit {
    min-height: 210px;
  }

  .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-benefits-container,
  .home-brands-container {
    width: min(100% - 24px, var(--site-max-width));
  }

  .benefit p {
    font-size: 13.5px;
  }

  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .benefit {
    min-height: auto;
    padding: 24px;
  }

  .brand-chip {
    min-height: 70px;
    padding: 14px;
    font-size: 12px;
  }
}

@media (max-width: 399px) {
  .home-benefits-container,
  .home-brands-container {
    width: min(100% - 20px, var(--site-max-width));
  }
}