/* ============================================================
   JABÓN DE MALLORCA — THEME CSS
   BEM methodology · CSS custom properties
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Brand colors */
  --color-primary: #4d6147;
  --color-primary-container: #657a5f;
  --color-primary-fixed: #d2e9c8;
  --color-primary-fixed-dim: #b6cdad;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #f8fff0;
  --color-on-primary-fixed: #0e200b;
  --color-on-primary-fixed-variant: #394c34;

  --color-secondary: #51634e;
  --color-secondary-container: #d1e5cb;
  --color-secondary-fixed: #d4e8ce;
  --color-secondary-fixed-dim: #b8ccb2;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #566752;
  --color-on-secondary-fixed: #101f0f;
  --color-on-secondary-fixed-variant: #3a4b38;

  --color-tertiary: #75525f;
  --color-tertiary-container: #8f6a77;
  --color-tertiary-fixed: #ffd9e4;
  --color-tertiary-fixed-dim: #e7bbc9;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #fffbff;
  --color-on-tertiary-fixed: #2d131e;
  --color-on-tertiary-fixed-variant: #5e3e49;

  --color-background: #f9f9f9;
  --color-on-background: #1a1c1c;

  --color-surface: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-bright: #f9f9f9;
  --color-surface-variant: #e2e2e2;
  --color-surface-tint: #50644a;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f3;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #444841;

  --color-outline: #747870;
  --color-outline-variant: #c4c8be;

  --color-inverse-surface: #2f3131;
  --color-inverse-on-surface: #f1f1f1;
  --color-inverse-primary: #b6cdad;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  /* Border radius */
  --radius: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* Typography */
  --font-family: 'Manrope', sans-serif;

  /* Layout */
  --container-max-width: 80rem;
  --container-padding: 2rem;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL'0, 'wght'300, 'GRAD'0, 'opsz'24;
}


/* --- Search widget --- */
.site-header__search {
  flex-grow: 1;
  margin: 0 2rem;
  max-width: 450px;
}

.site-header__search .search-widgets {
  position: relative;
}

.site-header__search .search-widgets form {
  display: flex;
  align-items: center;
}

.site-header__search .search-widgets .search-icon {
  position: absolute;
  left: 0.8rem;
  font-size: 1.4rem;
  color: var(--gray-500);
  pointer-events: none;
}

.site-header__search .search-widgets input[type="text"] {
  width: 100%;
  padding: 0.75rem 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-lg);
  background-color: var(--gray-100);
  transition: all 0.2s ease-in-out;
}

.site-header__search .search-widgets input[type="text"]:focus {
  background-color: #fff;
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 3px hsla(var(--brand-primary-hsl), 0.2);
}

.site-header__search .search-widgets .clear-icon {
  position: absolute;
  right: 0.8rem;
  font-size: 1.4rem;
  color: var(--gray-500);
  cursor: pointer;
  display: none;
  /* Initially hidden */
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .site-header__search {
    order: 3;
    /* Move search below brand and menu on mobile */
    width: 100%;
    margin: 1rem 0 0;
    max-width: none;
  }
}

/* ── Container ─────────────────────────────────────────────── */
.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ══════════════════════════════════════════════════════════════
   UTILITY BAR
   ══════════════════════════════════════════════════════════════ */
.utility-bar {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-block: 0.5rem;
}

.utility-bar__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.utility-bar__group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.utility-bar__group--right {
  gap: 0;
  position: relative;
}

.utility-bar__links {
  display: flex;
  gap: 1rem;
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.utility-bar__icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.utility-bar__link {
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s, opacity 0.2s;
}

.utility-bar__link:hover {
  color: #fff;
  opacity: 1;
}

.utility-bar__icon {
  font-size: 1.125rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s;
}

.utility-bar__icon:hover {
  color: #fff;
}

.utility-bar__cart {
  position: relative;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s;
}

.utility-bar__cart:hover {
  color: #fff;
}

.utility-bar__cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background-color: #fff;
  color: var(--color-primary);
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  line-height: 1;
}

/* Iconos nav (cuenta, idioma, moneda, carrito) dentro de utility-bar */
.utility-bar .site-header__icons {
  color: rgba(255, 255, 255, 0.88);
}

.utility-bar .site-header__icon {
  color: inherit;
}

.utility-bar .site-header__icon:hover {
  opacity: 1;
  color: #fff;
}

/* Badge del carrito invertido sobre fondo verde */
.utility-bar .nav-icon__badge {
  background-color: #fff;
  color: var(--color-primary);
}

/* Etiqueta de idioma/moneda */
.utility-bar .nav-icon__label {
  color: rgba(255, 255, 255, 0.88);
}

.utility-bar .nav-icon__label--sign {
  opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header {
  background-color: rgba(249, 249, 249, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(26, 28, 28, 0.06);
  transition: box-shadow 0.3s;
}

@media (min-width: 1024px) {
  .site-header {
    position: sticky;
    top: 0;
    margin-bottom: 3rem;
  }

  #index .site-header {
    margin-bottom: 0;
  }

  .site-header.is-sticky .site-header__inner {
    padding-block: 0.5rem;
  }

  .site-header.is-sticky .site-header__brand img {
    height: 3rem;
    margin-bottom: 0% !important;
  }
}

.site-header__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

h1.site-header__brand {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.site-header__brand,
.site-header__brand a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.site-header__brand img {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .site-header__brand img {
    height: 7.5rem;
    margin-bottom: -66%;
  }
}

.site-header__nav {
  display: none;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
  }
}

.site-header__nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-surface);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.site-header__nav-link:hover {
  color: var(--color-primary);
}

.site-header__nav-link--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.site-header__icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-primary-container);
}

.site-header__icon {
  cursor: pointer;
  font-size: 1.5rem;
  transition: opacity 0.2s;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}

.site-header__icon:hover {
  opacity: 0.7;
}

/* ── Nav icons (account, lang, currency, cart) ──────────────── */
.nav-icon {
  position: relative;
}

/* Badge de carrito */
.nav-icon__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.125rem;
  border-radius: 1rem;
  text-align: center;
}

.nav-icon__trigger {
  position: relative;
}

/* Etiqueta de texto pequeña (ISO idioma / código moneda) */
.nav-icon__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.nav-icon__label--sign {
  font-weight: 400;
  opacity: 0.7;
}

/* Dropdown genérico */
.nav-icon__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 180px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(26, 28, 28, 0.12);
  z-index: 200;
  overflow: hidden;
  padding: 0.5rem 0;
}

.nav-icon.open .nav-icon__dropdown {
  display: block;
}

/* Nombre del cliente */
.nav-icon__dropdown-name {
  display: block;
  padding: 0.625rem 1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: 0.25rem;
}

/* Links del dropdown */
.nav-icon__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.nav-icon__dropdown-link:hover {
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
}

.nav-icon__dropdown-link .material-symbols-outlined {
  font-size: 1rem;
}

.nav-icon__dropdown-link--current {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-icon__dropdown-link--danger {
  color: var(--color-error);
}

.nav-icon__dropdown-link--danger:hover {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

/* Moneda: código + signo en la misma fila */
.nav-icon__currency-code {
  font-weight: 600;
  min-width: 2.5rem;
}

.nav-icon__currency-sign {
  color: var(--color-on-surface-variant);
}

/* Carrito mini */
/* ── Cart drawer ──────────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

.cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Fondo oscuro */
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.cart-drawer.is-open .cart-drawer__backdrop {
  opacity: 1;
}

/* Panel lateral */
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100%;
  background: var(--color-surface-container-lowest);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

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

/* Cabecera */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface);
}

.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: color 0.15s;
  padding: 0;
}

.cart-drawer__close:hover {
  color: var(--color-on-surface);
}

.cart-drawer__close .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Lista de productos — scroll */
.cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  overflow-y: auto;
  flex: 1;
}

.cart-drawer__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem;
}

.cart-drawer__item+.cart-drawer__item {
  border-top: 1px solid var(--color-outline-variant);
}

.cart-drawer__thumb {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.cart-drawer__info {
  flex: 1;
  min-width: 0;
}

.cart-drawer__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.cart-drawer__qty-price {
  display: block;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
}

.cart-drawer__remove {
  display: flex;
  align-items: center;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s;
  padding: 0.25rem;
}

.cart-drawer__remove:hover {
  color: var(--color-error, #b91c1c);
}

.cart-drawer__remove .material-symbols-outlined {
  font-size: 1.1rem;
}

/* Carrito vacío */
.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--color-on-surface-variant);
}

.cart-drawer__empty-icon {
  font-size: 3rem;
  opacity: 0.3;
}

.cart-drawer__empty p {
  font-size: 0.9rem;
  margin: 0;
}

/* Footer del drawer */
.cart-drawer__footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.cart-drawer__total-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.cart-drawer__total-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.2s;
}

.cart-drawer__checkout:hover {
  background: var(--color-primary-container);
  color: #fff;
}

.cart-drawer__checkout .material-symbols-outlined {
  font-size: 1rem;
}

.cart-drawer__view-cart {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}

.cart-drawer__view-cart:hover {
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   MAIN NAV (ps_mainmenu override)
   ══════════════════════════════════════════════════════════════ */

/* Hamburguesa — solo visible en móvil */
.main-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary-container);
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 1023px) {
  .main-nav__hamburger {
    display: flex;
    align-items: center;
  }
}

/* ── Desktop nav ────────────────────────────────────────────── */
@media (min-width: 1024px) {

  .main-nav__overlay,
  .main-nav__panel-head {
    display: none;
  }

  .main-nav {
    position: static;
    background: none;
  }

  .main-nav__panel {
    display: contents;
  }

  /* Nivel 0 — fila horizontal */
  .main-nav__list[data-depth="0"] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .main-nav__item {
    position: relative;
  }

  .main-nav__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-container);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    border-radius: var(--radius);
  }

  .main-nav__link:hover, .main-nav__item--current>.main-nav__link {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    background-color: var(--color-primary-container);
  }

  /* Flecha en items con hijos */
  .main-nav__item--has-children>.main-nav__link::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s;
  }

  .main-nav__item--has-children:hover>.main-nav__link::after {
    transform: rotate(180deg);
  }

  /* Toggle oculto en desktop */
  .main-nav__toggle {
    display: none;
  }

  /* Dropdown de nivel 1 */
  .main-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-surface);
    /* border: 1px solid var(--color-outline-variant); */
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(26, 28, 28, 0.12);
    z-index: 100;
    padding: 0.5rem 0;
    /* padding-top: 1rem; */
    list-style: none;
    margin: 0;
  }

  .main-nav__item--has-children:hover>.main-nav__dropdown {
    display: block;
  }

  .main-nav__sublink {
    display: block;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-on-surface);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
  }

  .main-nav__sublink:hover {
    background-color: var(--color-surface-container-lowest);
    color: var(--color-primary);
  }

  .main-nav__item--current>.main-nav__sublink {
    color: var(--color-primary);
    font-weight: 600;
  }
}

/* ── Mobile nav ─────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Overlay oscuro */
  .main-nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 199;
  }

  .main-nav.is-open .main-nav__overlay {
    display: block;
  }

  /* Panel deslizante */
  .main-nav {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
  }

  .main-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background-color: var(--color-surface);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
  }

  .main-nav.is-open .main-nav__panel {
    transform: translateX(0);
  }

  .main-nav.is-open {
    pointer-events: auto;
  }

  /* Cabecera del panel */
  .main-nav__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--color-outline-variant);
    flex-shrink: 0;
  }

  .main-nav__panel-logo {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .main-nav__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface-variant);
    display: flex;
    align-items: center;
    padding: 0;
    transition: color 0.15s;
  }

  .main-nav__close:hover {
    color: var(--color-on-surface);
  }

  /* Lista principal */
  .main-nav__list[data-depth="0"] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
  }

  .main-nav__toggle {
    display: none;
  }

  /* se gestiona con la flecha dentro del link */

  .main-nav__item {
    border-bottom: 1px solid var(--color-outline-variant);
  }

  .main-nav__item:last-child {
    border-bottom: none;
  }

  .main-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .main-nav__item--current>.main-nav__link {
    color: var(--color-primary);
  }

  /* Toggle para abrir subnivel */
  .main-nav__toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface-variant);
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .main-nav__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
  }

  /* Subnivel */
  .main-nav__dropdown {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-surface-container-lowest);
  }

  .main-nav__dropdown.is-open {
    display: block;
  }

  .main-nav__sublink {
    display: block;
    padding: 0.75rem 1.25rem 0.75rem 2rem;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    border-top: 1px solid var(--color-outline-variant);
    transition: color 0.15s;
  }

  .main-nav__sublink:hover {
    color: var(--color-primary);
  }

  .main-nav__link-img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 921px;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-surface-container-high);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #fff;
  max-width: 32rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

.hero__description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  font-weight: 300;
  max-width: 28rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero__cta {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-container));
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-block;
  transition: opacity 0.2s, transform 0.2s;
}

.hero__cta:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════════
   INTRO
   ══════════════════════════════════════════════════════════════ */
.intro {
  padding-block: 6rem;
  padding-inline: var(--container-padding);
  background-color: var(--color-surface);
}

.intro__inner {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.intro__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.intro__divider {
  width: 3rem;
  height: 1px;
  background-color: var(--color-outline-variant);
  margin-inline: auto;
  margin-bottom: 2rem;
}

.intro__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--color-on-surface);
  line-height: 1.35;
  margin-bottom: 2.5rem;
}

.intro__headline em {
  color: var(--color-primary);
  font-weight: 500;
  font-style: italic;
}

.intro__body {
  color: var(--color-on-surface-variant);
  line-height: 1.75;
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.125rem;
  font-weight: 300;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTS SECTION
   ══════════════════════════════════════════════════════════════ */
.products-section {
  padding-block: 6rem;
  background-color: var(--color-surface-container-low);
}

.products-section__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.products-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
}

.products-section__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.products-section__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.products-section__title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-on-surface);
}

.products-section__all-link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 0.25rem;
  transition: color 0.2s, border-color 0.2s;
}

.products-section__all-link:hover {
  color: var(--color-primary-container);
  border-color: var(--color-primary-container);
}

/* Clase generada por PS/classic theme — aplicar el mismo contenedor */
.featured-products {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-bottom: 5rem;
  margin-top: 3rem;
}

/* Cabecera de sección: eyebrow + título */
.featured-products__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

.featured-products__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.featured-products__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-on-surface);
  line-height: 1.15;
  margin: 0;
}

/* Separador decorativo bajo el título */
.featured-products__header::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-primary);
  margin-inline: auto;
  margin-top: 0.75rem;
}

/* Variante en ficha (crossselling): alineado a la izquierda + separador top */
.featured-products--crossselling {
  padding-top: 3rem;
  border-top: 1px solid var(--color-outline-variant);
}

.featured-products--crossselling .featured-products__header {
  text-align: left;
}

.featured-products--crossselling .featured-products__header::after {
  margin-inline: 0;
}

/* Grid del crossselling (usa .products.row de PS) */
.featured-products--crossselling .products.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  .featured-products--crossselling .products.row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .featured-products--crossselling .products.row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Enlace "ver todos" */
.featured-products .all-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 0.25rem;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  float: none !important;
}

/* Centrado cuando no es crossselling */
.featured-products:not(.featured-products--crossselling) .all-product-link {
  display: table;
  margin-inline: auto;
}

.featured-products .all-product-link:hover {
  color: var(--color-primary-container);
  border-color: var(--color-primary-container);
}

.featured-products .all-product-link .material-symbols-outlined {
  font-size: 1.1rem;
  vertical-align: middle;
  line-height: 1;
}

.products-section__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem 3rem;
}

@media (min-width: 640px) {
  .products-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .products-section__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 5rem;
  }
}

@media (min-width: 1280px) {
  .products-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Product Card */
.product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.product-card__image-wrap {
  display: block;
  /* <a> es inline por defecto — necesario para aspect-ratio */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-container-low);
  margin-bottom: 1.25rem;
  position: relative;
  flex-shrink: 0;
}

/* picture debe llenar el contenedor para que la imagen ocupe el 100% */
.product-card__image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.product-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 0.125rem;
}

.product-card__name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface);
  line-height: 1.4;
}

.product-card__name a {
  color: inherit;
  text-decoration: none;
}

.product-card__name a:hover {
  color: var(--color-primary);
}

.product-card__price {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════════════════════════ */
.newsletter {
  background-color: #fff;
  padding: 3rem 0;
}

.newsletter__inner {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.newsletter__form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.newsletter__input {
  flex: 1;
  min-width: 200px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-outline);
  padding: 0.5rem;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.2s;
  background-color: #fff;
}

.newsletter__input::placeholder {
  color: var(--color-on-surface-variant);
}

.newsletter__input:focus {
  border-bottom-color: var(--color-primary);
}

.newsletter__submit {
  background: none;
  border: none;
  padding: 0.5rem;
  font-family: var(--font-family);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  background-color: var(--color-inverse-primary);
}

.newsletter__submit:hover {
  opacity: 0.7;
}

.newsletter__message {
  font-size: 0.8125rem;
  color: var(--color-primary-container);
  margin-top: 0.5rem;
  text-align: center;
  padding: 10px 0 0 0;
  font-weight: bold;
}

.newsletter__title {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   QUICK ACCESS
   ══════════════════════════════════════════════════════════════ */
.quick-access {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .quick-access {
    grid-template-columns: 1fr 1fr;
  }
}

.quick-access__item {
  cursor: pointer;
  transition: background-color 0.3s;
}

.quick-access__item--primary {
  background-color: var(--color-primary);
}

.quick-access__item--primary:hover {
  background-color: var(--color-primary-container);
}

.quick-access__item--secondary {
  background-color: var(--color-secondary-container);
}

.quick-access__item--secondary:hover {
  background-color: var(--color-secondary);
}

.quick-access__inner {
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}

.quick-access__icon {
  font-size: 3rem;
  transition: transform 0.3s;
}

.quick-access__item--primary .quick-access__icon {
  color: #fff;
}

.quick-access__item--secondary .quick-access__icon {
  color: var(--color-on-secondary-container);
}

.quick-access__item:hover .quick-access__icon {
  transform: scale(1.1);
}

.quick-access__item--secondary:hover .quick-access__icon {
  color: #fff;
}

.quick-access__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.quick-access__item--primary .quick-access__title {
  color: #fff;
}

.quick-access__item--secondary .quick-access__title {
  color: var(--color-on-secondary-container);
}

.quick-access__item--secondary:hover .quick-access__title {
  color: #fff;
}

.quick-access__line {
  width: 2.5rem;
  height: 1px;
  transition: width 0.5s, background-color 0.3s;
}

.quick-access__item--primary .quick-access__line {
  background-color: rgba(255, 255, 255, 0.3);
}

.quick-access__item--secondary .quick-access__line {
  background-color: rgba(86, 103, 82, 0.3);
}

.quick-access__item:hover .quick-access__line {
  width: 5rem;
}

.quick-access__item--secondary:hover .quick-access__line {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   COLLABORATORS
   ══════════════════════════════════════════════════════════════ */
.collaborators {
  padding-block: 4rem;
  background-color: #fff;
}

.collaborators__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.collaborators__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-outline);
  margin-bottom: 2.5rem;
}

/* ── Slider: flecha · viewport · flecha ── */
.collaborators__slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.collaborators__viewport {
  flex: 1;
  overflow: hidden;
}

.collaborators__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  opacity: 0.6;
  filter: grayscale(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s, filter 0.4s;
}

.collaborators__track:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* ── Item individual ── */
.collaborators__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-on-surface);
  text-decoration: none;
}

.collaborators__logo-img {
  height: 72px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* ── Flechas de navegación ── */
.collaborators__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: 50%;
  background: #fff;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.collaborators__arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.collaborators__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════
   LOCATION MAP
   ══════════════════════════════════════════════════════════════ */
.location-map {
  width: 100%;
  height: 450px;
  position: relative;
  background-color: var(--color-surface-container-high);
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 1s, opacity 1s;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.location-map:hover {
  filter: grayscale(0);
  opacity: 1;
}

.location-map__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-map__marker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-map__marker-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px -15px rgba(26, 28, 28, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.location-map__marker-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  font-variation-settings: 'FILL'1;
}

.location-map__marker-text {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-surface);
}

/* ══════════════════════════════════════════════════════════════
   SITE FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background-color: #efefef;
  color: #333;
}

/* Grid principal: col brand + columnas de módulos + logo */
.site-footer__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 4rem var(--container-padding) 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
  }
}

/* Columna genérica (módulos) */
.site-footer__col {
  display: flex;
  flex-direction: column;
}

/* Columna brand */
.site-footer__col--brand {
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .site-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .site-footer__col--brand {
    grid-column: auto;
  }
}

/* Columna logo */
.site-footer__col--logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 640px) {
  .site-footer__col--logo {
    justify-content: flex-start;
  }
}

.site-footer__logo-img {
  max-width: 140px;
  height: auto;
  display: block;
  border: 3px solid #5a7a3a;
}

/* Título de columna (info, ps_linklist, ps_socialfollow) */
.site-footer__col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4a6628;
  margin-bottom: 1.25rem;
}

.site-footer__col-title-link {
  color: inherit;
  text-decoration: none;
}

/* Nombre de la tienda */
.site-footer__store-name {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.25rem;
}

/* Datos de contacto */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__contact-item {
  color: #555;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.site-footer__contact-item--address {
  margin-bottom: 0.5rem;
}

.site-footer__contact-item a {
  color: #555;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__contact-item a:hover {
  color: #4a6628;
}

.site-footer__contact-item strong {
  color: #333;
}

/* Lista de links */
.site-footer__col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.site-footer__col-link {
  color: #666;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.15s;
}

.site-footer__col-link:hover {
  color: #4a6628;
}

/* Barra inferior */
.site-footer__bottom {
  background-color: #5a7a3a;
  border-top: none;
}

.site-footer__bottom-inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 1.25rem var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer__copyright {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* Redes sociales (ps_socialfollow) */
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #444;
  border: 2px solid #444;
  background-color: transparent;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.social-links__link:hover {
  color: #4a6628;
  border-color: #4a6628;
  background-color: rgba(74, 102, 40, 0.08);
}

.social-links__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  flex-shrink: 0;
}

/* Links legales en la barra inferior (ps_linklist via displayFooterBefore) */
.site-footer__bottom .site-footer__col-link,
.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: none;
  transition: color 0.15s;
}

.site-footer__bottom .site-footer__col-link:hover,
.site-footer__bottom a:hover {
  color: #fff;
}

/* Links legales con separador / */
.site-footer__bottom .site-footer__col-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.site-footer__bottom .site-footer__col-list li {
  display: flex;
  align-items: center;
}

.site-footer__bottom .site-footer__col-list li+li::before {
  content: '/';
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0.6rem;
}

/* Ocultar título de bloque en la barra inferior */
.site-footer__bottom .site-footer__col-title {
  display: none;
}

/* Ocultar divs invisibles de blockwishlist dentro del footer grid */
.site-footer__inner>.wishlist-add-to,
.site-footer__inner>.wishlist-delete,
.site-footer__inner>.wishlist-create,
.site-footer__inner>.wishlist-login,
.site-footer__inner>.wishlist-toast {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   LISTING — PÁGINA DE CATEGORÍA / BÚSQUEDA
   ══════════════════════════════════════════════════════════════ */

/* Página completa */
.listing-page {
  background-color: var(--color-background);
}

/* ── Barra de subcategorías ─────────────────────────────────── */
.subcategory-nav {
  border-bottom: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-container-lowest);
}

.subcategory-nav__inner {
  padding-block: 2rem;
}

.subcategory-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.subcategory-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.subcategory-nav__link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-fixed);
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.subcategory-nav__link:hover .subcategory-nav__img-wrap {
  box-shadow: 0 0 0 2px var(--color-primary-fixed), 0 0 0 3px var(--color-primary);
}

/* Contenedor imagen / icono */
.subcategory-nav__img-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}

.subcategory-nav__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icono fallback cuando no hay imagen */
.subcategory-nav__icon {
  font-size: 1.125rem;
  color: var(--color-primary);
  opacity: 0.5;
  font-variation-settings: 'FILL'0, 'wght'200;
}

.subcategory-nav__label {
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Inner: sidebar + main en grid */
.listing-page__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 3rem 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .listing-page__inner {
    grid-template-columns: 16rem 1fr;
  }
}

/* ── Category header ────────────────────────────────────────── */
.category-header__cover {
  position: relative;
  height: 320px;
  overflow: hidden;
  background-color: var(--color-surface-container-high);
}

@media (min-width: 768px) {
  .category-header__cover {
    height: 420px;
  }
}

.category-header__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-header__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1));
}

.category-header__cover-content {
  position: absolute;
  inset: 0;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3rem;
}

.category-header__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.category-header__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1.1;
}

/* Sin imagen */
.category-header__text-only {
  padding: 3rem var(--container-padding);
  max-width: var(--container-max-width);
  margin-inline: auto;
  border-bottom: 1px solid var(--color-outline-variant);
}

.category-header__text-only .category-header__eyebrow {
  color: var(--color-primary);
}

.category-header__text-only .category-header__title {
  color: var(--color-on-surface);
}

.category-header__description {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 1.5rem var(--container-padding) 0;
  color: var(--color-on-surface-variant);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

/* ── Toolbar (ordenar + filtrar) ────────────────────────────── */
.listing-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.listing-toolbar__count {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
  letter-spacing: 0.02em;
}

.listing-toolbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Sort dropdown */
.listing-sort {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.listing-sort__dropdown {
  position: relative;
}

.listing-sort__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.listing-sort__trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.listing-sort__trigger:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listing-sort__trigger .material-symbols-outlined {
  font-size: 1.125rem;
}

.listing-sort__menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  min-width: 14rem;
  box-shadow: 0 8px 24px rgba(26, 28, 28, 0.08);
  z-index: 200;
  overflow: hidden;
  padding-top: 0.375rem;
  /* espacio visual dentro del área hover */
}

/* Abierto por JS */
.listing-sort__dropdown.open .listing-sort__menu {
  display: block;
}

/* Fallback CSS: abierto cuando el foco está dentro del dropdown */
.listing-sort__dropdown:focus-within .listing-sort__menu {
  display: block;
}

.listing-sort__option {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.listing-sort__option:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-primary);
}

.listing-sort__option--current {
  color: var(--color-primary);
  font-weight: 600;
  background-color: var(--color-primary-fixed);
}

/* Filter button */
.listing-toolbar__filter-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.listing-toolbar__filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listing-toolbar__filter-btn .material-symbols-outlined {
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .listing-toolbar__filter-btn {
    display: none;
  }
}

/* ── Sidebar de facetas ─────────────────────────────────────── */
.listing-sidebar {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: sticky;
  top: 6rem;
}

.listing-sidebar__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}

.listing-sidebar__header .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-primary);
}

/* Estilos para los bloques de facetas que genera ps_facetedsearch */
.listing-sidebar .facet {
  padding: 1.25rem 1.25rem 0;
}

.listing-sidebar .facet:last-child {
  padding-bottom: 1.25rem;
}

.listing-sidebar .facet__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-surface);
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.listing-sidebar .facet__title .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-on-surface-variant);
  transition: transform 0.2s;
}

.listing-sidebar .facet.is-open .facet__title .material-symbols-outlined {
  transform: rotate(180deg);
}

.listing-sidebar .facet-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: color 0.2s;
}

.listing-sidebar .facet-label:hover {
  color: var(--color-primary);
}

.listing-sidebar .custom-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-outline);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background-color 0.2s;
}

.listing-sidebar input:checked+.custom-checkbox,
.listing-sidebar .facet-label.active .custom-checkbox {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Filtros activos */
.listing-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.listing-active-filters .active-filter-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
  align-self: center;
  margin-right: 0.25rem;
}

.listing-active-filters .filter-block {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.listing-active-filters .filter-block .js-search-link {
  color: inherit;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  margin-left: 0.25rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.listing-active-filters .filter-block .js-search-link:hover {
  opacity: 1;
}

/* ── Grid de productos en listing ───────────────────────────── */
.listing-main {
  min-width: 0;
}

.listing-main--full {
  width: 100%;
  grid-column: 1 / -1;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .product-grid {
    gap: 3rem 2rem;
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .featured-products .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .listing-main--full .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Flags de producto ──────────────────────────────────────── */
.product-card .product-flags {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  z-index: 1;
  pointer-events: none;
  max-width: calc(100% - 1.5rem);
  /* no se desborda si hay flags largos */
}

.product-flag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  line-height: 1.2;
  white-space: nowrap;
  /* color por defecto para flags no contemplados */
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

.product-flag.new {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.product-flag.on-sale,
.product-flag.discount {
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
}

.product-flag.pack {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.product-flag.out_of_stock {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

/* Precio con descuento */
.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-card__price--old {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
}

.product-card__discount {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-tertiary);
  background-color: var(--color-tertiary-fixed);
  border-radius: var(--radius-full);
  padding: 0.125rem 0.5rem;
}

/* ── Paginación ─────────────────────────────────────────────── */
.pagination {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Texto "Mostrando X-Y de Z artículo(s)" */
.pagination .col-md-4 {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
  padding: 0;
}

/* Contenedor de la lista */
.pagination .col-md-6 {
  padding: 0;
  margin: 0;
}

/* Lista de páginas */
.pagination .page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* Cada enlace de página */
.pagination .page-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
  background-color: var(--color-surface-container-lowest);
}

.pagination .page-list li a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-fixed);
}

/* Página activa */
.pagination .page-list li.current a,
.pagination .page-list li a.disabled {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  pointer-events: none;
  cursor: default;
}

/* Botones Anterior / Siguiente */
.pagination .page-list li a.next,
.pagination .page-list li a.previous {
  padding-inline: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pagination .page-list li a.next .material-icons,
.pagination .page-list li a.previous .material-icons {
  font-size: 1rem;
  line-height: 1;
}

/* ── Sidebar móvil (se muestra con JS al pulsar "Filtrar") ──── */
@media (max-width: 1023px) {
  .listing-sidebar {
    display: none;
  }

  .listing-sidebar--open {
    display: block;
  }
}

/* ── Estado vacío ───────────────────────────────────────────── */
.listing-empty {
  padding: 5rem 2rem;
  text-align: center;
}

.listing-empty__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 0.75rem;
}

.listing-empty__text {
  color: var(--color-on-surface-variant);
  font-weight: 300;
}

/* ══════════════════════════════════════════════════════════════
   PS NOTIFICATIONS (overrides classic)
   ══════════════════════════════════════════════════════════════ */
.notifications-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 1rem;
}

.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.alert-danger {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

.alert-success {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.alert-info {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

/* ── ps-alert-* (PrestaShop 8 — estructura ul > li.item > i + p) ── */
[class^="ps-alert-"],
[class*=" ps-alert-"] {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

[class^="ps-alert-"] .item,
[class*=" ps-alert-"] .item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid transparent;
}

[class^="ps-alert-"] .item i,
[class*=" ps-alert-"] .item i {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

[class^="ps-alert-"] .item i svg,
[class*=" ps-alert-"] .item i svg {
  width: 0.875rem;
  height: 0.875rem;
}

[class^="ps-alert-"] .item p,
[class*=" ps-alert-"] .item p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Success */
.ps-alert-success .item {
  background-color: var(--color-secondary-container);
  border-left-color: var(--color-secondary);
  color: var(--color-on-secondary-container);
}

.ps-alert-success .item i {
  background: var(--color-secondary);
}

/* Error */
.ps-alert-error .item {
  background-color: var(--color-error-container);
  border-left-color: var(--color-error);
  color: var(--color-on-error-container);
}

.ps-alert-error .item i {
  background: var(--color-error);
}

/* Warning */
.ps-alert-warning .item {
  background-color: #fef9c3;
  border-left-color: #ca8a04;
  color: #713f12;
}

.ps-alert-warning .item i {
  background: #ca8a04;
}

/* Info */
.ps-alert-info .item {
  background-color: var(--color-primary-fixed);
  border-left-color: var(--color-primary);
  color: var(--color-on-primary-fixed);
}

.ps-alert-info .item i {
  background: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDER (ps_imageslider)
   ══════════════════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-container);
  line-height: 0;
}

.hero-slider__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.hero-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  line-height: 1;
  overflow: hidden;
}

/* Sin JS: el primer slide muestra el caption sin animación */
.hero-slider__slide:first-child .hero-slider__caption {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-slider__link {
  display: block;
  width: 100%;
  position: relative;
}

/* ── Imagen — alturas por breakpoint ──────────────────────── */
.hero-slider__img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 6s ease;
}

/* Ken Burns suave en el slide activo */
.hero-slider__slide--active .hero-slider__img {
  transform: scale(1.04);
}

/* ── Caption overlay ──────────────────────────────────────── */
.hero-slider__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.25rem 1.5rem;
  background:
    linear-gradient(to top,
      rgba(8, 12, 8, 0.88) 0%,
      rgba(8, 12, 8, 0.5) 40%,
      rgba(8, 12, 8, 0.12) 65%,
      transparent 100%),
    linear-gradient(to right,
      rgba(8, 12, 8, 0.55) 0%,
      rgba(8, 12, 8, 0.15) 45%,
      transparent 70%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease 0.25s, transform 0.55s ease 0.25s;
}

.hero-slider__slide--active .hero-slider__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Línea decorativa verde antes del título */
.hero-slider__caption::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 3px;
  background: var(--color-primary-fixed);
  border-radius: 2px;
  margin-bottom: 0.625rem;
  flex-shrink: 0;
}

/* ── Tipografía ───────────────────────────────────────────── */
.hero-slider__title {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  max-width: 22ch;
  text-transform: uppercase;
}

.hero-slider__desc,
.hero-slider__caption>p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  max-width: 42ch;
}

.hero-slider__caption>p:empty {
  display: none;
}

/* ── Flechas ──────────────────────────────────────────────── */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.34);
}

.hero-slider__arrow--prev {
  left: 0.75rem;
}

.hero-slider__arrow--next {
  right: 0.75rem;
}

.hero-slider__arrow .material-symbols-outlined {
  font-size: 1.1rem;
}

/* ── Dots ─────────────────────────────────────────────────── */
.hero-slider__dots {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 10;
}

.hero-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s;
  flex-shrink: 0;
}

.hero-slider__dot--active {
  background: #fff;
  width: 20px;
}

.hero-slider__dot:not(.hero-slider__dot--active):hover {
  background: rgba(255, 255, 255, 0.75);
}

.hero-slider[data-pause="true"]:hover .hero-slider__arrow {
  opacity: 1;
}

/* ── 480px — móvil grande ─────────────────────────────────── */
@media (min-width: 480px) {
  .hero-slider__img {
    height: 320px;
  }

  .hero-slider__caption {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .hero-slider__title {
    font-size: 1.65rem;
  }

  .hero-slider__desc,
  .hero-slider__caption>p {
    font-size: 0.9rem;
  }
}

/* ── 640px — tablet pequeña / landscape móvil ────────────── */
@media (min-width: 640px) {
  .hero-slider__img {
    height: 400px;
  }

  .hero-slider__caption {
    padding: 1.75rem 2rem 2rem;
  }

  .hero-slider__caption::before {
    width: 2.25rem;
    margin-bottom: 0.75rem;
  }

  .hero-slider__title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .hero-slider__desc,
  .hero-slider__caption>p {
    font-size: 0.975rem;
  }

  .hero-slider__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hero-slider__arrow--prev {
    left: 1rem;
  }

  .hero-slider__arrow--next {
    right: 1rem;
  }

  .hero-slider__arrow .material-symbols-outlined {
    font-size: 1.2rem;
  }

  .hero-slider__dots {
    left: 2rem;
    bottom: 1.25rem;
    gap: 0.5rem;
  }

  .hero-slider__dot {
    width: 7px;
    height: 7px;
  }

  .hero-slider__dot--active {
    width: 22px;
  }
}

/* ── 768px — tablet ───────────────────────────────────────── */
@media (min-width: 768px) {
  .hero-slider__img {
    height: 480px;
  }

  .hero-slider__caption {
    padding: 2.25rem 2.75rem 2.5rem;
  }

  .hero-slider__caption::before {
    width: 2.75rem;
    margin-bottom: 0.875rem;
  }

  .hero-slider__title {
    font-size: 2.5rem;
    margin-bottom: 0.55rem;
    max-width: 20ch;
  }

  .hero-slider__desc,
  .hero-slider__caption>p {
    font-size: 1.025rem;
    max-width: 44ch;
  }

  .hero-slider__arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hero-slider__arrow--prev {
    left: 1.25rem;
  }

  .hero-slider__arrow--next {
    right: 1.25rem;
  }

  .hero-slider__dots {
    left: 2.75rem;
    bottom: 1.5rem;
  }

  .hero-slider__dot {
    width: 8px;
    height: 8px;
  }

  .hero-slider__dot--active {
    width: 24px;
  }
}

/* ── 1024px — escritorio ──────────────────────────────────── */
@media (min-width: 1024px) {
  .hero-slider__img {
    height: 580px;
  }

  .hero-slider__caption {
    padding: 3rem 3.5rem 3.25rem;
    transform: translateY(16px);
  }

  .hero-slider__caption::before {
    width: 3rem;
    height: 4px;
    margin-bottom: 1rem;
  }

  .hero-slider__title {
    font-size: 3.25rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.625rem;
    max-width: 18ch;
  }

  .hero-slider__desc,
  .hero-slider__caption>p {
    font-size: 1.15rem;
    max-width: 46ch;
  }

  .hero-slider__arrow {
    width: 3rem;
    height: 3rem;
  }

  .hero-slider__arrow .material-symbols-outlined {
    font-size: 1.375rem;
  }

  .hero-slider__dots {
    left: 3.5rem;
    bottom: 1.75rem;
  }
}

/* ── 1280px — escritorio grande ──────────────────────────── */
@media (min-width: 1280px) {
  .hero-slider__img {
    height: 680px;
  }

  .hero-slider__caption {
    padding: 3.5rem 4.5rem 3.75rem;
  }

  .hero-slider__caption::before {
    width: 3.5rem;
    margin-bottom: 1.125rem;
  }

  .hero-slider__title {
    font-size: 4rem;
    margin-bottom: 0.75rem;
  }

  .hero-slider__desc,
  .hero-slider__caption>p {
    font-size: 1.25rem;
    max-width: 50ch;
  }

  .hero-slider__dots {
    left: 4.5rem;
    bottom: 2rem;
  }

  .hero-slider__dot--active {
    width: 28px;
  }
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM TEXT BLOCK (#custom-text / ps_customtext)
   ══════════════════════════════════════════════════════════════ */
#custom-text {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 4rem;
  text-align: center;
  color: var(--color-on-surface);
}

#custom-text h2,
#custom-text h3,
#custom-text h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-on-surface);
  margin-bottom: 1rem;
}

#custom-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

#custom-text h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

#custom-text h4 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

#custom-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  margin-bottom: 1rem;
}

#custom-text p:last-child {
  margin-bottom: 0;
}

#custom-text strong,
#custom-text b {
  font-weight: 700;
  color: var(--color-on-surface);
}

#custom-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

#custom-text a:hover {
  color: var(--color-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   BANNER (ps_banner)
   ══════════════════════════════════════════════════════════════ */
.banner-wrap {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 4rem;
  text-align: center;
}

.banner {
  display: inline-block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s, transform 0.25s;
  max-width: 100%;
}

.banner:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.banner__img {
  display: block;
  width: 100%;
  height: auto;
}

.banner__desc {
  display: block;
  padding: 2rem 3rem;
  font-size: 1.125rem;
  color: var(--color-on-surface);
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE — FICHA DE PRODUCTO
   ══════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ───────────────────────────────────── */
#main {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 2.5rem 5rem;
}

/* Resetear grid Bootstrap dentro del product container */
.product-container.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  .product-container.row {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Columnas Bootstrap — anular sus defaults */
.product-container .col-md-6 {
  padding: 0;
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* ── Galería de imágenes ─────────────────────────────────────── */
.images-container {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-cover {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-surface-container-low);
  aspect-ratio: 1 / 1;
}

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

.product-cover:hover img {
  transform: scale(1.03);
}

/* Capa zoom */
.product-cover .layer {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 28, 0.12);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
  cursor: zoom-in;
  border-radius: var(--radius-xl);
}

.product-cover:hover .layer {
  opacity: 1;
}

.product-cover .layer .material-symbols-outlined {
  color: #fff;
  font-size: 2.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Flechas slider sobre la imagen cover */
.cover-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  color: var(--color-on-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cover-arrow--prev {
  left: 0.625rem;
}

.cover-arrow--next {
  right: 0.625rem;
}

.product-cover:hover .cover-arrow {
  opacity: 1;
}

.cover-arrow:hover {
  background: #fff;
}

/* Thumbnails */
.js-qv-mask.mask {
  overflow: hidden;
  position: relative;
}

.product-images {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.thumb-container {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  background-color: var(--color-surface-container-low);
}

.thumb-container:hover {
  border-color: var(--color-outline-variant);
}

.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.thumb.selected,
.thumb.js-thumb-selected {
  border-color: var(--color-primary);
}

.thumb-container:has(.selected),
.thumb-container:has(.js-thumb-selected) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.scroll-box-arrows {
  display: none;
}

/* ── Información del producto ───────────────────────────────── */

/* Flags en la ficha (fuera de card) */
#content .product-flags {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
  pointer-events: none;
}

/* Título */
.js-product-container h1.h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-on-surface);
  line-height: 1.2;
  margin: 0 0 1.25rem;
  text-align: left;
}

/* ── Precios ────────────────────────────────────────────────── */
.product-prices {
  margin-bottom: 1.5rem;
}

.product-discount {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.regular-price {
  font-size: 1rem;
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
}

.product-price.h5 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.current-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.current-price-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.discount {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-tertiary-fixed);
  color: var(--color-on-tertiary-fixed-variant);
  line-height: 1.4;
}

.tax-shipping-delivery-label {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  margin-top: 0.375rem;
  line-height: 1.5;
}

.delivery-information {
  display: block;
  margin-top: 0.125rem;
}

.product-unit-price.sub {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  font-weight: 400;
}

.product-without-taxes,
.product-pack-price,
.price-ecotax {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
  margin-top: 0.25rem;
}

/* ── Descripción corta ──────────────────────────────────────── */
.product-information {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-information>.product-description {
  font-size: 0.9375rem;
  color: var(--color-on-surface-variant);
  line-height: 1.75;
  font-weight: 300;
}

.product-information>.product-description p {
  margin-bottom: 0.75rem;
}

.product-information>.product-description p:last-child {
  margin-bottom: 0;
}

/* ── Acciones (variantes + qty + añadir al carrito) ─────────── */
.product-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Variantes */
.product-variants-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-variants-item .control-label,
.product-add-to-cart>.control-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-surface-variant);
  display: block;
}

/* Select de variante */
.product-variants-item .form-control-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23747870' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  width: 100%;
  max-width: 16rem;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-family: var(--font-family);
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: border-color 0.2s;
  outline: none;
}

.product-variants-item .form-control-select:focus {
  border-color: var(--color-primary);
}

/* Variante radio / color */
.product-variants-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-variants-item .input-container {
  float: none;
}

.product-variants-item .input-color {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.product-variants-item .color {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.product-variants-item input:checked+.color,
.product-variants-item input:checked+span.color {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

.product-variants-item .radio-label {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.product-variants-item input:checked+.radio-label {
  border-color: var(--color-primary);
  background-color: var(--color-primary-fixed);
  color: var(--color-primary);
  font-weight: 600;
}

/* ── Cantidad + Botón ───────────────────────────────────────── */
.product-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-quantity.clearfix {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Anular clearfix de Bootstrap */
.product-quantity.clearfix::after,
.product-quantity.clearfix::before {
  content: none;
}

/* Input de cantidad — touchspin */
.product-quantity .qty {
  flex-shrink: 0;
}

/* Contenedor del touchspin (el div.input-group) */
.product-quantity .qty div.input-group {
  display: flex;
  align-items: stretch;
  width: auto;
  height: 3rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.2s;
}

.product-quantity .qty div.input-group:focus-within {
  border-color: var(--color-primary);
}

/* El input en sí: sin borde propio */
.product-quantity .qty input#quantity_wanted {
  width: 3.5rem;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-surface);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  box-shadow: none;
}

.product-quantity .qty input::-webkit-inner-spin-button,
.product-quantity .qty input::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Prefijos/postfijos ocultos del touchspin */
.product-quantity .qty .bootstrap-touchspin-prefix,
.product-quantity .qty .bootstrap-touchspin-postfix {
  display: none !important;
}

/* Columna de botones +/- */
.product-quantity .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-outline-variant);
}

.product-quantity .qty .btn-touchspin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  flex: 1;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background-color 0.15s, color 0.15s;
  line-height: 1;
}

.product-quantity .qty .btn-touchspin:hover {
  background-color: var(--color-surface-container);
  color: var(--color-primary);
}

.product-quantity .qty .bootstrap-touchspin-up+.bootstrap-touchspin-down {
  border-top: 1px solid var(--color-outline-variant);
}

/* Iconos +/- via CSS (Material Icons no está cargado en este tema) */
.product-quantity .qty .material-icons.touchspin-up,
.product-quantity .qty .material-icons.touchspin-down {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
}

.product-quantity .qty .material-icons.touchspin-up::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

.product-quantity .qty .material-icons.touchspin-down::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(225deg) translate(1px, 1px);
}

/* Botón añadir al carrito */
.product-quantity .add {
  flex: 1;
  min-width: 0;
}

.product-quantity .add .btn.add-to-cart,
.product-quantity .add .add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;
  padding-inline: 1.5rem;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.product-quantity .add .btn.add-to-cart:hover {
  background-color: var(--color-primary-container);
}

.product-quantity .add .btn.add-to-cart:active {
  transform: scale(0.98);
}

.product-quantity .add .btn.add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-quantity .add .btn.add-to-cart .material-symbols-outlined {
  font-size: 1.125rem;
  vertical-align: middle;
  line-height: 1;
}

/* Disponibilidad */
#product-availability {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

#product-availability .material-symbols-outlined.product-available {
  color: var(--color-primary);
  font-size: 1rem;
}

#product-availability .material-symbols-outlined.product-last-items {
  color: #b45309;
  font-size: 1rem;
}

#product-availability .material-symbols-outlined.product-unavailable {
  color: var(--color-error);
  font-size: 1rem;
}

/* ── Lightbox ──────────────────────────────────────────────── */
#product-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#product-lightbox.is-open {
  display: flex;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(4px);
}

.lb-image-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 800px);
  max-height: 85vh;
}

.lb-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-xl);
  display: block;
  transition: opacity 0.15s ease;
}

.lb-img--fade {
  opacity: 0;
}

.lb-close,
.lb-prev,
.lb-next {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}

.lb-prev {
  margin-right: 1rem;
}

.lb-next {
  margin-left: 1rem;
}

/* Cantidad mínima */
.product-minimal-quantity {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  min-height: 0;
}

/* ── Info adicional (peso, dimensiones…) ────────────────────── */
.product-additional-info {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ── Sección de descuentos ──────────────────────────────────── */
.product-discounts {
  margin-block: 0.5rem;
}

.product-discounts .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.product-discounts .table th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-outline-variant);
  text-align: left;
}

.product-discounts .table td {
  padding: 0.5rem 0.75rem;
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}

/* ── Tabs de descripción / detalles ─────────────────────────── */

.tabs .nav-tabs {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: 1px solid var(--color-outline-variant);
}

.tabs .nav-tabs .nav-item {
  margin-bottom: -1px;
}

.tabs .nav-tabs .nav-link {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.tabs .nav-tabs .nav-link:hover {
  color: var(--color-primary);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Contenido de los tabs */
.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active,
.tab-content .tab-pane.in.active {
  display: block;
}

/* Descripción larga (en el tab) */
.tab-pane .product-description {
  font-size: 0.9375rem;
  color: var(--color-on-surface-variant);
  line-height: 1.8;
  font-weight: 300;
}

.tab-pane .product-description p {
  margin-bottom: 1rem;
}

.tab-pane .product-description p:last-child {
  margin-bottom: 0;
}

.tab-pane .product-description ul,
.tab-pane .product-description ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.tab-pane .product-description li {
  margin-bottom: 0.375rem;
}

.tab-pane .product-description h2,
.tab-pane .product-description h3,
.tab-pane .product-description h4 {
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  line-height: 1.3;
}

/* Detalles del producto (ficha técnica) */
.product-manufacturer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.product-manufacturer .manufacturer-logo {
  height: 2.5rem;
  width: auto;
  max-width: 7rem;
  object-fit: contain;
}

.product-reference,
.product-quantities,
.product-condition,
.product-availability-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.product-reference .label,
.product-quantities .label,
.product-condition .label,
.product-availability-date label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
  min-width: 7rem;
}

.product-reference span,
.product-quantities span,
.product-condition span,
.product-availability-date span {
  font-weight: 500;
  color: var(--color-on-surface);
}

/* Ficha técnica (features) */
.product-features {
  margin-top: 1.25rem;
}

.product-features .h6 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-on-surface-variant);
  margin-bottom: 1rem;
}

.data-sheet {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0;
}

.data-sheet .name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-on-surface-variant);
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--color-outline-variant);
  letter-spacing: 0.02em;
}

.data-sheet .value {
  font-size: 0.875rem;
  color: var(--color-on-surface);
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Adjuntos */
.product-attachments .attachment {
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.product-attachments .attachment h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--color-primary);
}

.product-attachments .attachment p {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.5rem;
}

.product-attachments .attachment a {
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Reaasurance hook ────────────────────────────────────────── */
.product-information .block-reassurance {
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

/* ── Accesorios / productos relacionados ────────────────────── */
.product-accessories {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-outline-variant);
}

.product-accessories .h5 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.product-accessories .products.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  .product-accessories .products.row {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .product-accessories .products.row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Modal de imagen ampliada ───────────────────────────────── */
#product-modal .modal-dialog {
  max-width: 900px;
}

#product-modal .js-modal-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--color-surface);
}

#product-modal .product-cover-modal {
  flex: 1;
}

#product-modal .product-cover-modal img {
  width: 100%;
  height: auto;
  display: block;
}

#product-modal .arrows-modal {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
}

#product-modal .js-modal-mask {
  overflow: hidden;
}

#product-modal .product-images-modal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 5rem;
  flex-shrink: 0;
  max-height: 70vh;
  overflow-y: auto;
}

#product-modal .product-images-modal .thumb-container {
  width: 100%;
  height: 5rem;
}

/* ══════════════════════════════════════════════════════════════
   SOCIAL SHARING (ps_sharebuttons)
   ══════════════════════════════════════════════════════════════ */
.social-sharing {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  padding-block: 1rem;
  border-top: 1px solid var(--color-outline-variant);
  margin-top: 0.5rem;
}

.social-sharing__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
}

.social-sharing__list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.social-sharing__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-outline-variant);
  background: transparent;
  color: var(--color-on-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.social-sharing__btn svg {
  flex-shrink: 0;
}

.social-sharing__btn:hover {
  transform: translateY(-1px);
}

.social-sharing__btn--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.social-sharing__btn--twitter:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.social-sharing__btn--pinterest:hover {
  background: #e60023;
  border-color: #e60023;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   CMS — HISTORIA (jabon-history-section)
   ══════════════════════════════════════════════════════════════ */
.jabon-history-section {
  max-width: 48rem;
  /* columna de lectura cómoda */
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 5rem 6rem;
}

/* Título principal H1 */
.jabon-history-main-title {
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-on-surface);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Línea decorativa bajo el título */
.jabon-history-main-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: 1.25rem;
}

/* Párrafos de cuerpo */
.jabon-history-text {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-on-surface-variant);
  font-weight: 300;
  margin-top: 1.25rem;
}

.jabon-history-text:first-of-type {
  margin-top: 2rem;
}

/* Itálicas internas */
.jabon-history-italic {
  font-style: italic;
  color: var(--color-on-surface);
}

/* Firma */
.jabon-history-signature {
  display: block;
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}

/* Subtítulo H2 (separador entre resumen e historia completa) */
.jabon-history-subheader {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-on-surface);
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--color-outline-variant);
  position: relative;
}

/* Acento de color izquierdo en el subheader */
.jabon-history-subheader::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background-color: var(--color-primary);
}

/* Imagen */
.jabon-history-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  margin-top: 3rem;
  object-fit: cover;
}

/* Pie de foto */
.jabon-history-caption {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-outline);
  text-align: right;
  margin-top: 0.625rem;
}

/* Responsive: más padding en escritorio */
@media (min-width: 1024px) {
  .jabon-history-section {
    padding-block: 7rem 8rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   CMS — DISTRIBUIDORES (distribuidores-c)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor principal */
.distribuidores-c {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 5rem 6rem;
}

/* Título H1 */
.distribuidores-c h1 {
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-on-surface);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.distribuidores-c h1 strong {
  font-weight: 700;
}

/* Línea decorativa bajo el H1 */
.distribuidores-c h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: 1.25rem;
  margin-bottom: 3rem;
}

/* Neutralizar el .container de Bootstrap si no está cargado */
.distribuidores-c .container {
  width: 100%;
  padding: 0;
}

/* ── Mapa ── */
.distribuidores-c>.container>.row:first-child {
  margin-bottom: 3.5rem;
}

.distribuidores-c iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 16px rgba(26, 28, 28, 0.08);
}

/* ── Grid de .row + .column ── */

/* Fila de distribuidores */
.distribuidores-c .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .distribuidores-c .row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Primera fila (mapa + listado): volver a layout de columna única */
.distribuidores-c>.container>.row:first-child {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Columna de contenido completo (debajo del mapa) */
.distribuidores-c>.container>.row:first-child>.column:last-child {
  margin-top: 3rem;
}

/* Cada tarjeta de distribuidor */
.distribuidores-c .column {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.distribuidores-c>.container>.row>.column:first-child {
  padding: 0;
}

.distribuidores-c .column:hover {
  box-shadow: 0 4px 20px rgba(26, 28, 28, 0.07);
  border-color: var(--color-primary-fixed-dim);
}

/* Nombre de ciudad (h4) — etiqueta de categoría */
.distribuidores-c .column>h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-primary-fixed);
}

/* Área del logo: altura fija, imagen centrada */
.distribuidores-c .column>p:has(img),
.distribuidores-c .column>p:has(> a > img) {
  display: flex;
  align-items: center;
  min-height: 4rem;
  margin: 0.25rem 0;
}

.distribuidores-c .column img {
  max-width: 120px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Nombre del comercio */
.distribuidores-c .column p>strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-on-surface);
  display: block;
  line-height: 1.3;
}

/* Dirección y texto descriptivo */
.distribuidores-c .column>p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-on-surface-variant);
  font-weight: 400;
  margin: 0;
}

/* Links dentro de las tarjetas */
.distribuidores-c .column a {
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s;
}

.distribuidores-c .column a:hover {
  color: var(--color-primary-container);
  text-decoration: underline;
}

/* Link que envuelve sólo la imagen: no romper el layout */
.distribuidores-c .column a:has(> img) {
  display: inline-block;
}

@media (min-width: 1024px) {
  .distribuidores-c {
    padding-block: 7rem 8rem;
  }

  .distribuidores-c iframe {
    height: 500px;
  }
}

/* ══════════════════════════════════════════════════════════════
   CART MODAL (confirmación añadir al carrito)
   ══════════════════════════════════════════════════════════════ */

/* Badge: oculto cuando está vacío */
.nav-icon--cart .nav-icon__badge.is-hidden {
  display: none;
}

#cart-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#cart-confirm-modal.is-open {
  display: flex;
}

/* Backdrop */
.cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 28, 0.45);
  backdrop-filter: blur(2px);
  animation: cart-modal-fade-in 0.2s ease;
}

/* Panel */
.cart-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(26, 28, 28, 0.18);
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  animation: cart-modal-slide-in 0.25s ease;
}

@keyframes cart-modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cart-modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cabecera */
.cart-modal__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cart-modal__check {
  font-size: 1.375rem;
  flex-shrink: 0;
}

.cart-modal__title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  color: inherit;
}

.cart-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.cart-modal__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.cart-modal__close .material-symbols-outlined {
  font-size: 1.125rem;
}

/* Producto añadido */
.cart-modal__product {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.cart-modal__img-wrap {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
}

.cart-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-modal__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cart-modal__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.35;
  margin: 0;
  /* truncar si es muy largo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-modal__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

/* Resumen del carrito */
.cart-modal__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.25rem;
  background: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-outline-variant);
}

.cart-modal__count {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.cart-modal__total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

/* Botones */
.cart-modal__actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}

.cart-modal__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.cart-modal__btn--secondary {
  background: transparent;
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface-variant);
}

.cart-modal__btn--secondary:hover {
  border-color: var(--color-on-surface);
  color: var(--color-on-surface);
}

.cart-modal__btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cart-modal__btn--primary:hover {
  background: var(--color-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   PÁGINA DE CARRITO
   ══════════════════════════════════════════════════════════════ */

/* Layout: grid 2 columnas */
.cart-grid.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: 2.5rem 5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .cart-grid.row {
    grid-template-columns: 1fr 22rem;
    gap: 2rem;
  }
}

/* Anular float de Bootstrap */
.cart-grid-body,
.cart-grid-right {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* ── Tarjetas base ── */
.cart-container,
.cart-summary {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Cabecera del carrito */
.cart-container .card-block:first-child {
  padding: 1.5rem 1.75rem 1.25rem;
}

.cart-container h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-on-surface);
  margin: 0;
}

.cart-container hr.separator {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 0;
}

/* ── Lista de productos ── */
.cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-item {
  border-bottom: 1px solid var(--color-outline-variant);
}

.cart-item:last-child {
  border-bottom: none;
}

/* Grid de una línea de producto */
.product-line-grid {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem 1.75rem;
}

/* Columna izquierda: imagen */
.product-line-grid-left {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}

.product-line-grid-left .product-image {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
  flex-shrink: 0;
}

.product-line-grid-left .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Columna central: info */
.product-line-grid-body {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.product-line-grid-body .product-line-info.label a,
.product-line-grid-body .label a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-on-surface);
  text-decoration: none;
  line-height: 1.35;
  display: block;
  transition: color 0.15s;
}

.product-line-grid-body .label a:hover {
  color: var(--color-primary);
}

.product-line-grid-body .product-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-line-grid-body .product-price h5,
.product-line-grid-body .h5 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.product-line-grid-body .current-price .price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Columna derecha: cantidad + precio total + eliminar */
.product-line-grid-right {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Neutralizar grid de Bootstrap dentro */
.product-line-grid-right .row,
.product-line-grid-right .col-md-10,
.product-line-grid-right .col-xs-6,
.product-line-grid-right .col-md-6,
.product-line-grid-right .col-md-2,
.product-line-grid-right .col-xs-2,
.product-line-grid-right .col-xs-4 {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}

.product-line-grid-right .hidden-md-up {
  display: none !important;
}

.product-line-grid-right .row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* Touchspin en carrito — reusar estilos de ficha */
.product-line-grid-right .qty div.input-group {
  display: flex;
  align-items: stretch;
  width: auto;
  height: 2.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.2s;
}

.product-line-grid-right .qty div.input-group:focus-within {
  border-color: var(--color-primary);
}

.product-line-grid-right .qty input.js-cart-line-product-quantity {
  width: 3rem;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-on-surface);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  box-shadow: none;
}

.product-line-grid-right .qty input::-webkit-inner-spin-button,
.product-line-grid-right .qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-line-grid-right .qty .bootstrap-touchspin-prefix,
.product-line-grid-right .qty .bootstrap-touchspin-postfix {
  display: none !important;
}

.product-line-grid-right .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-outline-variant);
}

.product-line-grid-right .qty .btn-touchspin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  flex: 1;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background-color 0.15s, color 0.15s;
}

.product-line-grid-right .qty .btn-touchspin:hover {
  background-color: var(--color-surface-container);
  color: var(--color-primary);
}

.product-line-grid-right .qty .bootstrap-touchspin-up+.bootstrap-touchspin-down {
  border-top: 1px solid var(--color-outline-variant);
}

.product-line-grid-right .qty .material-icons.touchspin-up,
.product-line-grid-right .qty .material-icons.touchspin-down {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  position: relative;
}

.product-line-grid-right .qty .material-icons.touchspin-up::after {
  content: '';
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

.product-line-grid-right .qty .material-icons.touchspin-down::after {
  content: '';
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(225deg) translate(1px, 1px);
}

/* Precio total de la línea */
.product-line-grid-right .price .product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
}

/* Botón eliminar */
.cart-line-product-actions {
  display: flex;
  align-items: center;
}

.remove-from-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.remove-from-cart:hover {
  background: var(--color-error-container);
  color: var(--color-error);
}

/* Icono delete (Material Icons no cargado — CSS puro) */
.remove-from-cart .material-icons {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
}

.remove-from-cart .material-icons::before,
.remove-from-cart .material-icons::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

.remove-from-cart .material-icons::before {
  transform: rotate(45deg);
}

.remove-from-cart .material-icons::after {
  transform: rotate(-45deg);
}

/* Clearfix del producto */
.product-line-grid .clearfix {
  display: none;
}

/* ── Enlace "Continuar comprando" ── */
.cart-grid-body>a.label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}

.cart-grid-body>a.label:hover {
  color: var(--color-primary);
}

/* Icono chevron_left en "Continuar comprando" */
.cart-grid-body>a.label .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Resumen del carrito (columna derecha) ── */
.cart-summary {
  position: sticky;
  top: 5.5rem;
  /* debajo del site-header sticky */
}

.cart-summary .cart-detailed-totals {
  padding: 0;
}

.cart-detailed-subtotals {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.cart-summary-line .label {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  font-weight: 400;
}

.cart-summary-line .value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-surface);
  text-align: right;
}

/* Envío gratis */
#cart-subtotal-shipping .value {
  color: var(--color-primary);
}

/* Total */
.cart-summary-totals {
  padding: 1.25rem 1.5rem;
}

.cart-summary-line.cart-total .label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.cart-summary-line.cart-total .value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

/* Botón finalizar compra */
.cart-detailed-actions.card-block {
  padding: 1.25rem 1.5rem;
}

.cart-detailed-actions .text-sm-center {
  text-align: left;
}

.cart-detailed-actions .btn.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cart-detailed-actions .btn.btn-primary:hover {
  background: var(--color-primary-container);
}

/* ── Responsive móvil ── */
@media (max-width: 767px) {
  .product-line-grid {
    grid-template-columns: 5rem 1fr;
    grid-template-rows: auto auto;
    padding: 1rem;
    gap: 0.875rem;
  }

  .product-line-grid-right {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .product-line-grid-right .row {
    width: 100%;
    justify-content: space-between;
  }
}

/* Utilidades globales */
.hide {
  display: none !important;
}

/* ── Aviso de disponibilidad (ps_emailalerts) ── */
.js-mailalert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem;
  margin-top: 1rem;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.625rem;
}

.js-mailalert::before {
  content: 'Avísame cuando esté disponible';
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.js-mailalert .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.js-mailalert .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

.js-mailalert .form-control::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}

.js-mailalert .btn-primary {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0;
}

.js-mailalert .btn-primary:hover {
  background: var(--color-primary-container);
}

/* Mensajes de confirmación/error */
.js-mailalert-alerts {
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

.js-mailalert-alerts .alert-success {
  padding: 0.5rem 0.75rem;
  background: var(--color-primary-fixed);
  border: 1px solid var(--color-primary-fixed-dim);
  border-radius: 0.375rem;
  color: var(--color-primary);
  font-weight: 600;
}

.js-mailalert-alerts .alert-danger {
  padding: 0.5rem 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  color: #991b1b;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero {
    height: 600px;
  }

  .quick-access__inner {
    padding: 3rem 2rem;
  }

  .site-footer__inner {
    padding-block: 3rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Header
   ══════════════════════════════════════════════════════════════ */
.checkout-header {
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 0;
  margin-bottom: 3rem;
}

.checkout-header .logo {
  max-width: 60px;
  height: auto;
}

.checkout-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkout-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.checkout-header__logo img {
  max-height: 3rem;
  width: auto;
}

.checkout-header__secure {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
}

.checkout-header__secure .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Layout principal
   ══════════════════════════════════════════════════════════════ */
body#checkout #wrapper {
  background: var(--color-surface-container-low);
  padding-block: 2rem;
}

body#checkout #content {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1rem;
}

/* Solo el row principal del checkout (contiene cart-grid-body + cart-grid-right) */
body#checkout #content>.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
}

@media (min-width: 992px) {
  body#checkout #content>.row {
    grid-template-columns: 1fr 22rem;
    align-items: start;
  }
}

body#checkout .cart-grid-body,
body#checkout .cart-grid-right {
  width: 100%;
  padding: 0;
  float: none;
}

body#checkout .cart-grid-right {
  align-self: start;
  /* necesario para que position:sticky funcione dentro del grid */
}

@media (min-width: 1200px) {
  body#checkout .cart-grid-right {
    position: sticky;
    top: 25px;
  }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Pasos (checkout-step)
   ══════════════════════════════════════════════════════════════ */
.checkout-step {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.checkout-step .step-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.5rem;
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  cursor: default;
}

.checkout-step.-current .step-title,
.checkout-step.-complete .step-title {
  color: var(--color-on-surface);
}

/* Número de paso */
.checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.checkout-step.-current .step-number {
  background: var(--color-primary);
  color: #fff;
}

.checkout-step.-complete .step-number {
  background: var(--color-primary);
  color: #fff;
}

/* Icono "done" (paso completado) — ocultar el char de material-icons */
.checkout-step .step-title .material-icons.done {
  font-size: 0;
  display: none;
  /* usamos el número con fondo verde como indicador */
}

/* Icono "edit" — botón de editar paso */
.checkout-step .step-edit {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  cursor: pointer;
  text-transform: uppercase;
  display: none;
  /* solo visible en pasos completados */
}

.checkout-step.-complete .step-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.checkout-step .step-edit .material-icons {
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  vertical-align: middle;
}

/* Contenido del paso */
.checkout-step .content {
  padding: 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}

.checkout-step:not(.-current) .content {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Formularios
   ══════════════════════════════════════════════════════════════ */
.checkout-step .form-group,
.js-address-form .form-group {
  margin-bottom: 1rem;
}

/* ── Bloque informativo del formulario ── */
.form-informations {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.form-informations-title {
  display: block;
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.125rem;
}

.form-informations-option {
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  color: var(--color-on-surface-variant);
}

.form-informations-subtitle {
  display: block;
  font-size: 0.825rem;
  color: var(--color-on-surface-variant);
  font-style: normal;
}

/* ── Campo contraseña con toggle mostrar/ocultar ── */
.input-group.js-parent-focus {
  display: flex;
  align-items: stretch;
}

.input-group.js-parent-focus .form-control {
  flex: 1;
  min-width: 0;
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
}

.input-group.js-parent-focus .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
  z-index: 1;
}

.input-group-btn {
  display: flex;
  align-items: stretch;
}

.input-group-btn .btn[data-action="show-password"] {
  padding: 0 1rem;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.input-group-btn .btn[data-action="show-password"]:hover {
  background: var(--color-surface-container);
  color: var(--color-primary);
}

/* Cuando el input tiene foco, el borde del botón también cambia */
.input-group.js-parent-focus:focus-within .form-control {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

.input-group.js-parent-focus:focus-within .input-group-btn .btn {
  border-color: var(--color-primary);
}

.form-control-comment {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  line-height: 1.4;
}

.checkout-step label:not(.radio-block):not(.custom-checkbox):not(.custom-radio),
.js-address-form label:not(.radio-block) {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.375rem;
}

.checkout-step .form-control,
.js-address-form .form-control,
.checkout-step input[type="text"],
.checkout-step input[type="email"],
.checkout-step input[type="tel"],
.checkout-step input[type="password"],
.checkout-step textarea,
.checkout-step select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.checkout-step .form-control:focus,
.js-address-form .form-control:focus,
.checkout-step input:focus,
.checkout-step textarea:focus,
.checkout-step select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

.checkout-step select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23747870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.checkout-step textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Inline form fields */
.checkout-step .form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

.checkout-step .form-fields .form-group.full-width,
.checkout-step .form-fields .form-group:only-child {
  grid-column: 1 / -1;
}


.delivery-options-list .form-fields {}

.delivery-options-list .clearfix {
  display: block !important;
}

/* Filas .form-group.row: flex row respetando columnas Bootstrap */
.checkout-step .form-group.row,
.js-address-form .form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-left: 0;
  margin-right: 0;
  gap: 0;
}

/* Columnas Bootstrap → anchos proporcionales sobre 12 partes */
.checkout-step .form-group.row [class*="col-"],
.js-address-form .form-group.row [class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

.checkout-step .form-group.row .col-md-2,
.js-address-form .form-group.row .col-md-2 {
  width: 16.6667%;
}

.checkout-step .form-group.row .col-md-3,
.js-address-form .form-group.row .col-md-3 {
  width: 25%;
}

.checkout-step .form-group.row .col-md-4,
.js-address-form .form-group.row .col-md-4 {
  width: 33.3333%;
}

.checkout-step .form-group.row .col-md-6,
.js-address-form .form-group.row .col-md-6 {
  width: 50%;
}

.checkout-step .form-group.row .col-md-8,
.js-address-form .form-group.row .col-md-8 {
  width: 66.6667%;
}

.checkout-step .form-group.row .col-md-9,
.js-address-form .form-group.row .col-md-9 {
  width: 75%;
}

.checkout-step .form-group.row .col-md-12,
.js-address-form .form-group.row .col-md-12 {
  width: 100%;
}

/* En móvil todo ocupa el ancho completo */
@media (max-width: 767px) {

  .checkout-step .form-group.row [class*="col-"],
  .js-address-form .form-group.row [class*="col-"] {
    width: 100%;
    padding-right: 0;
  }
}

/* Label de la fila: alinear verticalmente al centro */
.checkout-step .form-group.row .form-control-label,
.js-address-form .form-group.row .form-control-label {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding-right: 0.75rem;
}

/* Columna de comentario */
.checkout-step .form-group.row .form-control-comment,
.js-address-form .form-group.row .form-control-comment {
  align-self: center;
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
  padding-right: 0;
}

/* Error messages */
.checkout-step .form-group .alert,
.checkout-step .js-address-error {
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 0.375rem;
}

/* Custom radio */
.custom-radio {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-radio span:last-of-type {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid var(--color-outline);
  background: var(--color-surface-container-lowest);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.custom-radio input[type="radio"]:checked+span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-surface-container-lowest);
}

/* Custom checkbox */
.custom-checkbox {
  display: block;
  cursor: pointer;
}

/* El label interno actúa como fila flex: caja + texto */
.custom-checkbox label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Caja visual del checkbox — span hermano del input dentro del label */
.custom-checkbox label>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border-radius: 0.25rem;
  border: 2px solid var(--color-outline);
  background: var(--color-surface-container-lowest);
  margin-top: 0.1rem;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.custom-checkbox input[type="checkbox"]:checked+span {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* Checkmark CSS dentro del span */
.custom-checkbox .material-icons.checkbox-checked {
  font-size: 0;
  width: 0;
  height: 0;
}

.custom-checkbox input[type="checkbox"]:checked+span::after {
  content: '';
  position: absolute;
  display: block;
  width: 0.35rem;
  height: 0.6rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
}

/* Texto del checkbox (puede incluir <em> con nota) */
.custom-checkbox label em {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--color-on-surface-variant);
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Selector de dirección
   ══════════════════════════════════════════════════════════════ */
.address-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .address-selector {
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem;
  }
}

.address-item {
  border: 2px solid var(--color-outline-variant);
  border-radius: 0.625rem;
  padding: 1rem;
  background: var(--color-surface-container-lowest);
  transition: border-color 0.15s;
  cursor: pointer;
}

.address-item.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
}

.address-item .radio-block {
  display: flex;
  align-items: flex-start;
  gap: 0rem;
  cursor: pointer;
  flex-direction: column;
}

.address-item .radio-block .custom-radio {
  display: none;
}

.address-item .address-alias {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-surface);
  display: block;
  margin-bottom: 0.375rem;
}

.address-item .address {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.address-item hr {
  margin: 0.75rem 0;
  border: none;
  border-top: 1px solid var(--color-outline-variant);
}

.address-footer {
  display: flex;
  gap: 1rem;
}

.address-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}

.address-footer a:hover {
  color: var(--color-primary);
}

/* Iconos de editar/borrar dirección */
.address-footer .material-icons {
  font-size: 0;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
}

/* Añadir nueva dirección */
.add-address a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.add-address a:hover {
  opacity: 0.75;
}

.add-address .material-icons {
  font-size: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-address .material-icons::after {
  content: '+';
  font-size: 1.125rem;
  line-height: 1;
  font-style: normal;
  color: currentColor;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Opciones de envío
   ══════════════════════════════════════════════════════════════ */
.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.delivery-options label {
  margin: 0 !important;
}

.delivery-options label .row {
  width: 100%;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 2px solid var(--color-outline-variant);
  border-radius: 0.625rem;
  background: var(--color-surface-container-lowest);
  cursor: pointer;
  transition: border-color 0.15s;
}

.delivery-option:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
}

.delivery-option .col-sm-1 {
  padding: 0;
  flex-shrink: 0;
}

.delivery-option-2 {
  padding: 0;
  cursor: pointer;
}

.delivery-option .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  grid-template-columns: unset;
}

.carrier-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.carrier-delay {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
}

.carrier-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-left: auto;
}

.carrier-logo img {
  max-height: 2rem;
  width: auto;
}

/* Mensaje de entrega / regalo */
.order-options {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.order-options label {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
}

.order-options textarea {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 4rem;
  background: var(--color-surface-container-lowest);
}

.order-options textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Opciones de pago
   ══════════════════════════════════════════════════════════════ */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.payment-options label {
  margin: 0 !important;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 2px solid var(--color-outline-variant);
  border-radius: 0.625rem;
  background: var(--color-surface-container-lowest);
  cursor: pointer;
  transition: border-color 0.15s;
}

.payment-option:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
}

.payment-option .custom-radio {
  flex-shrink: 0;
}

.payment-option label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.payment-option label img {
  max-height: 1.75rem;
  width: auto;
  margin-left: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Footer
   ══════════════════════════════════════════════════════════════ */

body#checkout .text-sm-center {
  text-align: center;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--color-outline-variant);
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

body#checkout .text-sm-center .js-terms a {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

body#checkout .text-sm-center .js-terms a:hover {
  color: var(--color-primary);
}

body#checkout .text-sm-center>*:not(.js-terms) {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Información adicional del método de pago
   ══════════════════════════════════════════════════════════════ */

.additional-information {
  margin-top: 0.625rem;
  padding: 1rem 1.125rem;
  background: var(--color-surface-variant);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

.additional-information p {
  margin: 0 0 0.5rem;
}

.additional-information p:last-child {
  margin-bottom: 0;
}

/* Lista de detalles (dl/dt/dd) dentro de la información adicional */
.additional-information dl {
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}

.additional-information dt {
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.additional-information dd {
  margin: 0;
  color: var(--color-on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Términos y condiciones
   ══════════════════════════════════════════════════════════════ */

/*
 * El TPL de pago usa una estructura diferente al custom-checkbox estándar:
 * el span visual NO está dentro de un label sino como hermano directo del input.
 * Además el layout original usa float-xs-left, que se sobreescribe con flex.
 */
.js-conditions-to-approve {
  margin-top: 1rem;
}

.js-conditions-to-approve ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.js-conditions-to-approve li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.js-conditions-to-approve li .js-terms {
  margin: 0 !important;
}

.js-conditions-to-approve .float-xs-left {
  float: none;
  flex-shrink: 0;
}

/* Caja visual: aquí el span es hijo directo de .custom-checkbox, no de label */
.js-conditions-to-approve .custom-checkbox>span {
  /* display: inline-flex; */
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border-radius: 0.25rem;
  border: 2px solid var(--color-outline);
  background: var(--color-surface-container-lowest);
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  display: flex;
}

.js-conditions-to-approve .custom-checkbox input[type="checkbox"]:checked+span {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.js-conditions-to-approve .custom-checkbox input[type="checkbox"]:checked+span::after {
  content: '';
  position: absolute;
  display: block;
  width: 0.35rem;
  height: 0.6rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
}

.js-conditions-to-approve .condition-label {
  flex: 1;
}

.js-conditions-to-approve .condition-label label {
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.js-conditions-to-approve .condition-label label a {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Identidad del cliente
   ══════════════════════════════════════════════════════════════ */
.checkout-step .identity {
  font-size: 0.9rem;
  color: var(--color-on-surface);
  margin-bottom: 0.5rem;
}

.checkout-step .identity a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

/* Tabs de "Pedir como invitado / Iniciar sesión" */
.checkout-step .nav-inline {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  gap: 0;
  border-bottom: 2px solid var(--color-outline-variant);
}

.checkout-step .nav-inline .nav-item {
  display: flex;
  align-items: center;
}

.checkout-step .nav-inline .nav-separator {
  color: var(--color-outline-variant);
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

.checkout-step .nav-inline .nav-link {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.checkout-step .nav-inline .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Botones
   ══════════════════════════════════════════════════════════════ */
body#checkout .btn-primary,
body#checkout .btn.btn-primary,
body#checkout button.continue,
body#checkout a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  margin-top: 1rem;
}

body#checkout .btn-primary:hover,
body#checkout .btn.btn-primary:hover,
body#checkout button.continue:hover {
  background: var(--color-primary-container);
  color: #fff;
}

body#checkout .btn-primary.disabled,
body#checkout .btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#payment-confirmation .btn-primary {
  width: 100%;
  margin-top: 3rem;
}

body#checkout .cancel-address,
body#checkout .js-cancel-address {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: transparent;
  color: var(--color-on-surface-variant);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--color-outline);
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

body#checkout .cancel-address:hover,
body#checkout .js-cancel-address:hover {
  background: var(--color-surface-variant);
  border-color: var(--color-on-surface-variant);
  color: var(--color-on-surface);
}

.float-xs-right {
  float: none;
}

/* Enlace "La dirección de facturación difiere de la dirección de entrega" */
body#checkout a[data-link-action="different-invoice-address"] {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-primary);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

body#checkout a[data-link-action="different-invoice-address"]:hover {
  color: var(--color-primary-container);
}

/* Checkbox "Usar la misma dirección para facturas" */
body#checkout .checkout-same-address-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  margin: 0;
}

body#checkout .checkout-same-address-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin: 0;
}

.clearfix.checkout-step .content>.clearfix,
.checkout-step .content .clearfix {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
  gap: 1rem;
}

.checkout-step .content .payment-option.clearfix {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Resumen del carrito (columna derecha)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor principal */
#js-checkout-summary {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
  position: sticky;
  top: 1.5rem;
}

/* Restaurar padding dentro del summary (el reset global lo quita) */
#js-checkout-summary .card-block {
  padding: 1.25rem 1.5rem;
}

/* ── Cabecera del resumen: "X productos" + "ver detalles" ── */
.cart-summary-products {
  padding: 0;
  margin: 0;
}

.cart-summary-products>p:first-child {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 0.5rem;
}

/* Enlace "ver detalles" */
.cart-summary-products .js-show-details {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.cart-summary-products .js-show-details:hover {
  opacity: 0.75;
}

/* Icono expand_more → chevron CSS */
.cart-summary-products .js-show-details .material-icons {
  font-size: 0;
  width: 0.875rem;
  height: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-summary-products .js-show-details .material-icons::after {
  content: '';
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Lista desplegable de productos */
#cart-summary-product-list {
  margin-top: 1rem;
}

#cart-summary-product-list.collapse {
  display: none;
}

#cart-summary-product-list.collapse.in,
#cart-summary-product-list.collapsing {
  display: block;
}

.media-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cada producto del resumen */
.media-list .media {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.media-list .media-left {
  flex-shrink: 0;
}

.media-list .media-left a {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
}

.media-list .media-object {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-list .media-body {
  flex: 1;
  min-width: 0;
}

.media-list .product-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.35;
  margin-bottom: 0.25rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-list .product-name a {
  color: inherit;
  text-decoration: none;
}

.media-list .product-name a:hover {
  color: var(--color-primary);
}

.media-list .product-quantity {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  margin-right: 0.5rem;
}

.media-list .product-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  float: none;
}

.media-list .product-line-info-secondary {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  margin-top: 0.125rem;
}

.media-list .product-line-info-secondary .label {
  font-weight: 600;
}

/* ── Subtotales ── */
.cart-summary-subtotals-container {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cart-summary-subtotals-container .cart-summary-line,
.cart-summary-totals .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

/* ── Total ── */

.cart-summary-totals .cart-summary-line.cart-total {
  padding: 0.5rem 0 0;
}

.cart-summary-totals .cart-summary-line.cart-total .label,
.cart-summary-totals .cart-summary-line.cart-total .value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

/* ── Cupones / Voucher ── */
.block-promo {
  border-top: 1px solid var(--color-outline-variant);
}

.cart-voucher {
  padding: 1.25rem 1.5rem;
}

/* Cupones ya aplicados */
.promo-name {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.promo-name .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.375rem 0.75rem;
  background: var(--color-primary-fixed);
  border-radius: 0.375rem;
  color: var(--color-on-surface);
}

.promo-name .cart-summary-line a {
  color: var(--color-on-surface-variant);
  line-height: 1;
}

.promo-name .cart-summary-line .material-icons {
  font-size: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.promo-name .cart-summary-line .material-icons::before,
.promo-name .cart-summary-line .material-icons::after {
  content: '';
  position: absolute;
  width: 0.7rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

.promo-name .cart-summary-line .material-icons::before {
  transform: rotate(45deg);
}

.promo-name .cart-summary-line .material-icons::after {
  transform: rotate(-45deg);
}

/* Enlace "¿Tienes un código promocional?" */
.promo-code-button {
  margin: 0 0 0.75rem;
}

.promo-code-button a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.promo-code-button a:hover {
  opacity: 0.75;
}

/* Panel colapsado del código */
#promo-code.collapse {
  display: none;
}

#promo-code.collapse.in,
#promo-code.collapsing {
  display: block;
}

.promo-code form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.promo-code .promo-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--color-surface-container-lowest);
  transition: border-color 0.15s;
}

.promo-code .promo-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

.promo-code .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* Enlace cerrar */
.promo-code .cancel-promo {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  cursor: pointer;
}

/* Error del cupón */
.promo-code .alert-danger {
  display: none;
}

.promo-code .alert-danger.js-error:not(:empty) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.promo-code .alert-danger .material-icons {
  font-size: 0;
}

/* Descuentos disponibles */
.promo-discounts {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.promo-discounts .cart-summary-line {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  padding: 0.2rem 0;
}

.promo-highlighted {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0.75rem 0 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Footer
   ══════════════════════════════════════════════════════════════ */
body#checkout footer .text-sm-center {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Cards heredadas del classic (reset)
   ══════════════════════════════════════════════════════════════ */
body#checkout .card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body#checkout .card-block {
  padding: 0;
}

body#checkout .separator,
body#checkout hr.separator {
  display: none;
}

body#checkout .h1 {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin: 0 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Alerta/error global
   ══════════════════════════════════════════════════════════════ */
body#checkout .alert-danger {
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #991b1b;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

body#checkout .alert-warning {
  padding: 0.75rem 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  color: #92400e;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN / AUTENTICACIÓN
   ══════════════════════════════════════════════════════════════ */

/* Título de página (h1.h1) en páginas de cuenta */
h1.h1,
.h1.h1 {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  text-align: center;
  margin: 0 0 1.75rem;
}

.login-form {
  max-width: 480px;
  margin: 0 auto;
}

.login-form form {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Campos en columna única */
.login-form .form-group.row {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem 1.5rem 0;
}

.login-form .form-group.row:first-of-type {
  padding-top: 1.5rem;
}

.login-form .form-control-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.375rem;
  width: 100%;
}

.login-form .js-input-column,
.login-form [class*="col-"] {
  width: 100%;
  padding: 0;
  float: none;
}

.login-form .form-control-comment {
  display: none;
}

/* Inputs */
.login-form .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.login-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

/* "¿Olvidó su contraseña?" */
.login-form .forgot-password {
  padding: 0.625rem 1.5rem 1.25rem;
  text-align: right;
}

.login-form .forgot-password a {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}

.login-form .forgot-password a:hover {
  color: var(--color-primary);
}

/* Footer: botón */
.login-form .form-footer {
  display: flex;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}

.login-form .form-footer .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

.login-form .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

/* Separador y enlace "¿No tienes cuenta?" */
body#authentication hr {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 1.5rem auto;
  max-width: 480px;
}

.no-account {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.no-account a {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.no-account a:hover {
  opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════
   RECUPERAR CONTRASEÑA
   ══════════════════════════════════════════════════════════════ */
form.forgotten-password {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

form.forgotten-password header {
  padding: 1.5rem 1.5rem 0;
}

form.forgotten-password .send-renew-password-link {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin: 0;
  line-height: 1.5;
}

form.forgotten-password .form-group.center-email-fields {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem 1.5rem 0;
}

form.forgotten-password .form-control-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.375rem;
  width: 100%;
  float: none;
}

form.forgotten-password .email {
  width: 100%;
  padding: 0;
  float: none;
}

form.forgotten-password .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

form.forgotten-password .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

form.forgotten-password .form-control-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 0.8rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

form.forgotten-password .form-control-submit:hover {
  background: var(--color-primary-container);
}

form.forgotten-password .form-control-submit#send-reset-link {
  display: none !important;
}

form.forgotten-password .form-fields {
  padding-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   REGISTRO
   ══════════════════════════════════════════════════════════════ */
.register-form {
  max-width: 640px;
  margin: 0 auto;
}

/* Enlace "¿Ya tiene cuenta?" encima del formulario */
.register-form>p {
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

.register-form>p a {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.register-form>p a:hover {
  opacity: 0.75;
}

/* Tarjeta formulario */
.register-form form {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Wrapper interior de campos */
.register-form form>div {
  padding: 1.5rem 1.5rem 0.5rem;
}

/* Filas .form-group.row — flex con cols Bootstrap */
.register-form .form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 1rem;
}

.register-form .form-group.row [class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

.register-form .form-group.row .col-md-3 {
  width: 25%;
}

.register-form .form-group.row .col-md-6 {
  width: 50%;
}

.register-form .form-group.row .col-md-9 {
  width: 75%;
}

.register-form .form-group.row .col-md-12 {
  width: 100%;
}

@media (max-width: 767px) {
  .register-form .form-group.row [class*="col-"] {
    width: 100%;
    padding-right: 0;
  }
}

/* Labels de columna */
.register-form .form-control-label {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding-right: 0.75rem;
}

/* Comentario lateral */
.register-form .col-md-3.form-control-comment {
  align-self: center;
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
  padding-right: 0;
}

/* Inputs */
.register-form .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.register-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

/* Comentario inline bajo el input */
.register-form .js-input-column .form-control-comment {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
  line-height: 1.4;
}

/* Radio buttons (Tratamiento) */
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
}

/* Checkboxes: <p> dentro del label */
.register-form .custom-checkbox label>p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  line-height: 1.5;
}

.register-form .custom-checkbox label>p em {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--color-on-surface-variant);
  line-height: 1.45;
}

/* Separador visual antes de los checkboxes */
.register-form .form-group.row:has(.custom-checkbox):first-of-type {
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-outline-variant);
  margin-top: 0.5rem;
}

/* Footer: botón guardar */
.register-form .form-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}

.register-form .form-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  float: none;
  transition: background 0.2s;
}

.register-form .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   CMS — Páginas de contenido genéricas
   ══════════════════════════════════════════════════════════════ */
.page-cms#content {
  max-width: 800px;
  margin: 0 auto;
  padding-block: 1rem;
}

.page-cms#content h1 {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.page-cms#content h2 {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin: 2rem 0 0.875rem;
}

.page-cms#content h2:first-child {
  margin-top: 0;
}

.page-cms#content h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 1.5rem 0 0.625rem;
}

.page-cms#content h4 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 1.25rem 0 0.5rem;
}

.page-cms#content p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  margin: 0 0 1rem;
}

.page-cms#content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.page-cms#content a:hover {
  opacity: 0.75;
}

.page-cms#content ul,
.page-cms#content ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.page-cms#content ul li,
.page-cms#content ol li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}

.page-cms#content ul {
  list-style: none;
  padding-left: 0;
}

.page-cms#content ul li::before {
  content: '—';
  margin-right: 0.5rem;
  color: var(--color-primary);
  font-weight: 700;
}

.page-cms#content strong,
.page-cms#content b {
  font-weight: 700;
  color: var(--color-on-surface);
}

.page-cms#content em,
.page-cms#content i {
  font-style: italic;
}

.page-cms#content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-fixed);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.95rem;
  color: var(--color-on-surface);
  font-style: italic;
}

.page-cms#content hr {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 2rem 0;
}

.page-cms#content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.page-cms#content table th {
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container);
  font-weight: 700;
  text-align: left;
  color: var(--color-on-surface);
  border-bottom: 2px solid var(--color-outline-variant);
}

.page-cms#content table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
}

.page-cms#content table tr:last-child td {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════
   404 — Página no encontrada
   ══════════════════════════════════════════════════════════════ */
.page-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 560px;
  margin: 0 auto;
}

.page-not-found::before {
  content: '404';
  display: block;
  font-family: var(--font-heading, inherit);
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-outline-variant);
  margin-bottom: 1.5rem;
}

.page-not-found h4 {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin: 0 0 0.75rem;
}

.page-not-found p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  margin: 0 0 2rem;
}

/* Buscador en la 404 */
.page-not-found .search-widgets {
  width: 100%;
  max-width: 420px;
}

.page-not-found .search-widgets form {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  padding: 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body #search_widget form input {
  background: var(--color-surface-container-lowest);
  padding: 10px;
}

.page-not-found .search-widgets form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

/* Icono de búsqueda */
.page-not-found .search-widgets .search-icon {
  font-size: 1.25rem;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  line-height: 1;
}

/* Input */
.page-not-found .search-widgets input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
}

.page-not-found .search-widgets input[type="text"]::placeholder {
  color: var(--color-on-surface-variant);
}

/* Icono clear */
.page-not-found .search-widgets .clear-icon {
  font-size: 1.1rem;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.page-not-found .search-widgets .clear-icon:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   SEARCH BAR (site-header)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor wrapper en el header */
.site-header__search {
  flex: 1;
  max-width: 22rem;
  margin-inline: 1.5rem;
  display: none;
}

@media (min-width: 1024px) {
  .site-header__search {
    display: block;
  }
}

/* Reset de estilos genéricos del módulo dentro del header */
.site-header__search #search_widget {
  margin-bottom: 0;
  overflow: visible;
}

.site-header__search #search_widget form {
  display: flex;
  align-items: center;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 0 0.625rem 0 2rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-header__search #search_widget form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
  background: var(--color-surface-container-lowest);
}

.site-header__search #search_widget .search-icon {
  font-size: 1.125rem;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  line-height: 1;
  pointer-events: none;
}

.site-header__search #search_widget input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.625rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  font-family: inherit;
  min-width: 0;
}

.site-header__search #search_widget input[type="text"]::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}

.site-header__search #search_widget .clear-icon {
  font-size: 1rem;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.site-header__search #search_widget .clear-icon:hover {
  opacity: 1;
}

/* Buscador en el panel móvil */
.main-nav__search {
  padding: 1rem 1.25rem 0.5rem;
  display: block;
}

@media (min-width: 1024px) {
  .main-nav__search {
    display: none;
  }
}

.main-nav__search #search_widget form {
  display: flex;
  align-items: center;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 0 0.625rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.main-nav__search #search_widget form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
  background: var(--color-surface-container-lowest);
}

.main-nav__search #search_widget .search-icon {
  font-size: 1.125rem;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  line-height: 1;
  pointer-events: none;
}

.main-nav__search #search_widget input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.625rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  font-family: inherit;
  min-width: 0;
}

.main-nav__search #search_widget input[type="text"]::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}

.main-nav__search #search_widget .clear-icon {
  font-size: 1rem;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.main-nav__search #search_widget .clear-icon:hover {
  opacity: 1;
}

/* Autocomplete dropdown */
.ui-autocomplete.searchbar-autocomplete {
  border: 1px solid var(--color-outline-variant) !important;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(26, 28, 28, 0.1);
  background: var(--color-surface-container-lowest);
  overflow: hidden;
  font-family: var(--font-family);
}

.ui-autocomplete.searchbar-autocomplete li a,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  background: none;
  border: none;
  border-radius: 0;
}

.ui-autocomplete.searchbar-autocomplete li a:hover,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  background-color: var(--color-surface-container-low) !important;
  color: var(--color-primary);
}

.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
  width: 40px;
  height: auto;
  border-radius: var(--radius);
  margin-right: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   MAPA DEL SITIO
   ══════════════════════════════════════════════════════════════ */
.row.sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .row.sitemap {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 479px) {
  .row.sitemap {
    grid-template-columns: 1fr;
  }
}

.row.sitemap [class*="col-"] {
  float: none;
  padding: 0;
  width: 100%;
}

/* Título de sección */
.row.sitemap h2 {
  font-family: var(--font-heading, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Lista principal */
.row.sitemap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Enlace principal */
.row.sitemap ul>li>a {
  display: block;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}

.row.sitemap ul>li>a:hover {
  color: var(--color-primary);
}

/* Lista anidada */
.row.sitemap ul.nested {
  margin: 0.25rem 0 0.5rem 0.875rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--color-outline-variant);
  gap: 0;
}

.row.sitemap ul.nested li a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}

.row.sitemap ul.nested li a:hover {
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════════ */
.contact-form {
  max-width: 720px;
  margin: 0 auto;
}

.contact-form form {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* ── Cabecera del formulario ── */
.contact-form .form-group.row:first-child {
  padding: 1.75rem 1.75rem 0;
}

.contact-form .form-group.row:first-child h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* ── Sección de campos ── */
.contact-form .form-fields {
  padding: 1.25rem 1.75rem 0.5rem;
}

/* ── Filas .form-group.row: mismo sistema de columnas que checkout ── */
.contact-form .form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 1rem;
  gap: 0;
}

.contact-form .form-group.row [class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

.contact-form .form-group.row .col-md-3 {
  width: 25%;
}

.contact-form .form-group.row .col-md-6 {
  width: 50%;
}

.contact-form .form-group.row .col-md-9 {
  width: 75%;
}

.contact-form .form-group.row .col-md-12 {
  width: 100%;
}

/* Offset Bootstrap → margin-left proporcional */
.contact-form .form-group.row .col-md-offset-3 {
  margin-left: 25%;
}

.contact-form .form-group.row .offset-md-3 {
  margin-left: 25%;
}

@media (max-width: 767px) {

  .contact-form .form-group.row [class*="col-"],
  .contact-form .form-group.row [class*="offset-"] {
    width: 100%;
    margin-left: 0;
    padding-right: 0;
  }
}

/* ── Labels ── */
.contact-form .form-control-label {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding-right: 0.75rem;
}

/* ── Inputs, select, textarea ── */
.contact-form .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.contact-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

.contact-form .form-control-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23747870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

.contact-form textarea.form-control {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
}

/* ── Comentario "opcional" ── */
.contact-form .form-control-comment {
  align-self: center;
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
  padding-right: 0;
}

/* ── File upload (bootstrap-filestyle) ── */
.contact-form .bootstrap-filestyle.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.contact-form .bootstrap-filestyle .form-control {
  flex: 1;
  min-width: 0;
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container-low);
  cursor: default;
}

.contact-form .group-span-filestyle.input-group-btn {
  display: flex;
}

.contact-form .group-span-filestyle label.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 1rem;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin: 0;
}

.contact-form .group-span-filestyle label.btn:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
}

/* Ocultar el icono glyphicon (no cargado) */
.contact-form .glyphicon-folder-open {
  display: none;
}

/* ── Footer del formulario (botón enviar) ── */
.contact-form .form-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
  margin-top: 0.5rem;
}

.contact-form .form-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-form .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

/* ════════════════════════════════════════════════════
   SEGUIMIENTO DE PEDIDO (guest order tracking)
   ════════════════════════════════════════════════════ */

#guest-tracking #wrapper {
  padding: 2rem 0 4rem;
}

#guestOrderTrackingForm {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

#guestOrderTrackingForm header {
  padding: 1.5rem 1.75rem 0;
}

#guestOrderTrackingForm header p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant, #666);
  line-height: 1.5;
}

#guestOrderTrackingForm .form-fields {
  padding: 1.25rem 1.75rem 0.5rem;
}

/* Filas de campo */
#guestOrderTrackingForm .form-group.row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  gap: 0.25rem;
}

#guestOrderTrackingForm .form-control-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant, #555);
  padding: 0;
}

#guestOrderTrackingForm .col-md-6,
#guestOrderTrackingForm .col-md-9 {
  width: 100%;
  padding: 0;
}

#guestOrderTrackingForm .form-control {
  width: 100%;
  padding: 0.65rem 0.875rem;
  font-size: 0.9rem;
  background: var(--color-surface-container-low, #fafafa);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  color: var(--color-on-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#guestOrderTrackingForm .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

#guestOrderTrackingForm .form-control-comment {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-on-surface-variant, #888);
}

/* Footer — botón enviar */
#guestOrderTrackingForm .form-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.75rem 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
  margin-top: 0.75rem;
}

#guestOrderTrackingForm .form-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

#guestOrderTrackingForm .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   CONFIRMACIÓN DE PEDIDO
   ══════════════════════════════════════════════════════════════ */

/* Layout general: las cards se apilan con separación */
body#order-confirmation #content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 2rem;
}

body#order-confirmation .card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

body#order-confirmation .card-block {
  padding: 1.5rem;
}

/* ── Cabecera de confirmación ─────────────────────────── */
#content-hook_order_confirmation .card-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 0.75rem;
}

/* Icono "done" de material-icons → se reemplaza con símbolo CSS */
#content-hook_order_confirmation .material-icons.done {
  font-size: 0;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#content-hook_order_confirmation .material-icons.done::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.85rem;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
}

#content-hook_order_confirmation p {
  font-size: 0.9rem;
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* ── Tabla de artículos y detalles ────────────────────── */
.page-order-confirmation .card-title.h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Cabeceras de columna (precio, cantidad, total) solo en escritorio */
.page-order-confirmation ._desktop-title {
  display: none;
}

@media (min-width: 768px) {
  .page-order-confirmation ._desktop-title {
    display: block;
  }
}

/* Cada línea de pedido */
/* Fila de producto — flex explícito (el grid Bootstrap no está cargado) */
.order-confirmation-table .order-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.875rem 0;
}

/* Imagen: col-xs-3 (25%) → col-sm-2 (~16%) */
.order-confirmation-table .order-line .col-xs-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

@media (min-width: 576px) {
  .order-confirmation-table .order-line .col-xs-3 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

/* Nombre: col-xs-9 (75%) → col-sm-4 (33%) */
.order-confirmation-table .order-line .details {
  flex: 0 0 75%;
  max-width: 75%;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
}

@media (min-width: 576px) {
  .order-confirmation-table .order-line .details {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

.order-confirmation-table .order-line .details span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.4;
}

/* Qty: col-xs-12 (100%) → col-sm-6 (50%) */
.order-confirmation-table .order-line .qty {
  flex: 0 0 100%;
  max-width: 100%;
  padding-top: 0.5rem;
}

@media (min-width: 576px) {
  .order-confirmation-table .order-line .qty {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 0;
  }
}

/* Las 3 sub-columnas internas (precio / cantidad / total) */
.order-confirmation-table .order-line .qty .row {
  display: flex;
  width: 100%;
}

.order-confirmation-table .order-line .qty .row>div {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  text-align: center;
}

.order-confirmation-table .order-line .qty .row>div:first-child {
  text-align: left;
}

.order-confirmation-table .order-line .qty .row>div:last-child {
  text-align: right;
}

.order-confirmation-table .order-line .qty .bold {
  font-weight: 700;
  color: var(--color-on-surface);
}

/* Imagen */
.order-confirmation-table .order-line .image img {
  width: 100%;
  max-width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.375rem;
  display: block;
}

/* Separador */
.order-confirmation-table hr {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 0.25rem 0 1rem;
}

/* Tabla de totales */
.order-confirmation-table table {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  border-collapse: collapse;
}

.order-confirmation-table table td {
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  background: none;
  border: none;
}

.order-confirmation-table table td:last-child {
  text-align: right;
}

/* Fila de total */
.order-confirmation-table table .total-value td {
  padding-top: 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  border: none;
  background: none;
}

.order-confirmation-table table .total-value td span {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ── Detalles del pedido (referencia, pago, envío) ───── */
#order-details .card-title.h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

#order-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#order-details ul li {
  font-size: 0.875rem;
  color: var(--color-on-surface);
  line-height: 1.5;
}

#order-details ul li em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
}

/* Layout: row como flex, artículos 2/3 + detalles 1/3 */
.page-order-confirmation .card-block>.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* Móvil: columnas apiladas */
#order-items,
#order-details {
  width: 100%;
  flex: 0 0 100%;
}

/* Escritorio: artículos ~66% | detalles ~33% */
@media (min-width: 768px) {
  #order-items {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
    padding-right: 2rem;
    border-right: 1px solid var(--color-outline-variant);
  }

  #order-details {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-left: 2rem;
  }
}

/* ── Módulo de pago (transferencia bancaria, etc.) ───── */
#content-hook_payment_return p {
  font-size: 0.9rem;
  color: var(--color-on-surface);
  line-height: 1.6;
  margin: 0 0 1rem;
}

#content-hook_payment_return strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.75rem;
}

#content-hook_payment_return a {
  color: var(--color-primary);
  text-decoration: none;
}

#content-hook_payment_return a:hover {
  text-decoration: underline;
}

/* Definition list: datos de la transferencia */
#content-hook_payment_return dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface-container-low);
  border-radius: 0.5rem;
  border: 1px solid var(--color-outline-variant);
}

#content-hook_payment_return dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  align-self: center;
}

#content-hook_payment_return dd {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-on-surface);
  margin: 0;
  align-self: center;
}

/* ── Formulario crear cuenta (guest → customer) ───── */
body#order-confirmation .card:has(form) h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 0.5rem;
}

body#order-confirmation .card:has(form) ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

body#order-confirmation .card:has(form) ul li {
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
}

body#order-confirmation .card:has(form) .form-control-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  display: block;
  margin-bottom: 0.375rem;
}

body#order-confirmation .card:has(form) .form-control {
  width: 100%;
  max-width: 360px;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

body#order-confirmation .card:has(form) .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

body#order-confirmation .card:has(form) .form-footer {
  margin-top: 1rem;
}

body#order-confirmation .card:has(form) .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

body#order-confirmation .card:has(form) .btn-primary:hover {
  background: var(--color-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   MI CUENTA — página principal (body#my-account)
   ══════════════════════════════════════════════════════════════ */

body#my-account #content {
  padding-block: 2rem;
}

/* Grid de tarjetas */
body#my-account .links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

/* Cada enlace ocupa toda la celda */
body#my-account .links>a {
  display: flex;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

/* Tarjeta */
body#my-account .links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 2rem 1.5rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-on-surface);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
  cursor: pointer;
  line-height: 1.4;
}

/* Icono (propio: material-symbols-outlined; módulos terceros: material-icons) */
body#my-account .links .link-item .material-symbols-outlined,
body#my-account .links .link-item .material-icons {
  font-size: 2rem;
  color: var(--color-primary);
  transition: color 0.2s;
  line-height: 1;
}

/* Hover */
body#my-account .links>a:hover .link-item {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(77, 97, 71, 0.12);
  color: var(--color-on-primary-fixed-variant);
}

body#my-account .links>a:hover .link-item .material-symbols-outlined,
body#my-account .links>a:hover .link-item .material-icons {
  color: var(--color-primary);
}

/* Pie de página — cerrar sesión */
body#my-account .page-footer {
  margin-top: 2rem;
  text-align: center;
}

body#my-account .page-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-outline);
  text-decoration: none;
  transition: color 0.2s;
}

body#my-account .page-footer a:hover {
  color: var(--color-error);
}

/* Responsive: en móvil las tarjetas ocupan toda la fila */
@media (max-width: 575px) {
  body#my-account .links {
    gap: 0.75rem;
  }

  body#my-account .links .link-item {
    padding: 1.5rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   DATOS PERSONALES — body#identity
   ══════════════════════════════════════════════════════════════ */

/* Wrapper con card */
body#identity #content {
  padding-block: 2rem;
}

body#identity .js-customer-form {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 52rem;
  margin-inline: auto;
}

/* ── Filas .form-group.row ─────────────────────────────────── */
body#identity .form-group {
  margin-bottom: 1.125rem;
}

body#identity .form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-left: 0;
  margin-right: 0;
}

body#identity .form-group.row [class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

body#identity .form-group.row .col-md-3 {
  width: 25%;
}

body#identity .form-group.row .col-md-6 {
  width: 50%;
}

body#identity .form-group.row .col-md-9 {
  width: 75%;
}

/* ── Etiquetas ─────────────────────────────────────────────── */
body#identity .form-control-label {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding-right: 0.75rem;
}

body#identity .form-control-label.required::after {
  content: ' *';
  color: var(--color-primary);
}

/* ── Inputs ────────────────────────────────────────────────── */
body#identity .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-on-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

body#identity .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

/* ── Contraseña con toggle mostrar/ocultar ─────────────────── */
body#identity .input-group.js-parent-focus .form-control:focus,
body#identity .input-group.js-parent-focus:focus-within .form-control {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(77, 97, 71, 0.12);
}

body#identity .input-group.js-parent-focus:focus-within .input-group-btn .btn {
  border-color: var(--color-primary);
}

/* ── Radio tratamiento ─────────────────────────────────────── */
body#identity .form-control-valign {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.25rem;
}

body#identity .radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  cursor: pointer;
  margin: 0;
}

/* ── Comentarios de campo ──────────────────────────────────── */
body#identity .js-input-column .form-control-comment {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
  line-height: 1.4;
}

body#identity .form-group.row>.col-md-3.form-control-comment {
  align-self: center;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-on-surface-variant);
  padding-right: 0;
}

/* ── Separador entre campos de contraseña y checkboxes ─────── */
body#identity .field-password-policy+.form-group,
body#identity .field-password-policy {
  margin-bottom: 1.125rem;
}

/* Línea divisoria antes de los checkboxes */
body#identity .form-group.row:has(.custom-checkbox):first-of-type {
  border-top: 1px solid var(--color-outline-variant);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

/* ── Checkboxes ────────────────────────────────────────────── */
body#identity .custom-checkbox label p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  line-height: 1.5;
}

body#identity .custom-checkbox label em {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--color-on-surface-variant);
  line-height: 1.45;
}

/* ── Botón guardar ─────────────────────────────────────────── */
body#identity .form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-outline-variant);
}

body#identity .form-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

body#identity .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  body#identity .js-customer-form {
    padding: 1.25rem;
  }

  body#identity .form-group.row [class*="col-"] {
    width: 100%;
    padding-right: 0;
  }

  body#identity .form-control-label {
    margin-bottom: 0.375rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   DIRECCIONES — body#addresses (listado)
   ══════════════════════════════════════════════════════════════ */

body#addresses #content {
  padding-block: 2rem;
}

/* Grid de tarjetas */
body#addresses .addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Tarjeta de dirección */
body#addresses .address {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

body#addresses .address:hover {
  border-color: var(--color-primary-fixed-dim);
  box-shadow: 0 4px 16px rgba(77, 97, 71, 0.1);
}

/* Cuerpo */
body#addresses .address-body {
  flex: 1;
  padding: 1.25rem 1.25rem 1rem;
}

body#addresses .address-body h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.625rem;
}

body#addresses .address-body address {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

/* Footer con acciones */
body#addresses .address-footer {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--color-outline-variant);
}

body#addresses .address-footer a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

body#addresses .address-footer a:first-child {
  border-right: 1px solid var(--color-outline-variant);
}

body#addresses .address-footer a:hover {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
}

body#addresses .address-footer a[data-link-action="delete-address"]:hover {
  color: var(--color-error);
  background: var(--color-error-container);
}

body#addresses .address-footer .material-symbols-outlined {
  font-size: 1rem;
}

/* Enlace "Crear nueva dirección" */
body#addresses .addresses-footer {
  margin-top: 0.5rem;
}

body#addresses .addresses-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-xl);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

body#addresses .addresses-footer a:hover {
  background: var(--color-primary-fixed);
}

body#addresses .addresses-footer .material-symbols-outlined {
  font-size: 1.125rem;
}

/* ══════════════════════════════════════════════════════════════
   DIRECCIÓN — body#address (formulario crear/editar)
   ══════════════════════════════════════════════════════════════ */

body#address #content {
  padding-block: 2rem;
}

body#address .address-form {
  max-width: 52rem;
  margin-inline: auto;
}

body#address .js-address-form {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

body#address .form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-outline-variant);
}

body#address .form-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

body#address .form-footer .btn-primary:hover {
  background: var(--color-primary-container);
}

@media (max-width: 767px) {
  body#address .js-address-form {
    padding: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   HISTORIAL DE PEDIDOS — body#history
   ══════════════════════════════════════════════════════════════ */

body#history #content {
  padding-block: 2rem;
}

body#history #content>h6 {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 1.5rem;
}

/* ── Tabla (escritorio) ────────────────────────────────────── */
body#history .table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant) !important;
  border-radius: var(--radius-xl);
  /* overflow: hidden; */
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

body#history .table thead th {
  padding: 0.75rem 1rem;
  background: var(--color-surface-container-low);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  border-bottom: 1px solid var(--color-outline-variant);
  white-space: nowrap;
}

body#history .table tbody tr {
  border-bottom: 1px solid var(--color-surface-container);
  transition: background 0.15s;
}

body#history .table tbody tr:last-child {
  border-bottom: none;
}

body#history .table tbody tr:hover {
  background: var(--color-surface-container-low);
}

body#history .table tbody td,
body#history .table tbody th {
  padding: 0.875rem 1rem;
  color: var(--color-on-surface);
  vertical-align: middle;
}

/* Badge de estado */
body#history .label-pill {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
}

/* Acciones (Datos / Pedir de nuevo) */
body#history .order-actions {
  white-space: nowrap;
}

body#history .order-actions a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

body#history .order-actions .view-order-details-link {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
  margin-right: 0.375rem;
}

body#history .order-actions .view-order-details-link:hover {
  background: var(--color-primary);
  color: #fff;
}

body#history .order-actions .reorder-link {
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
}

body#history .order-actions .reorder-link:hover {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

/* ── Vista móvil (cards) ───────────────────────────────────── */
body#history .orders {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body#history .orders .order {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
}

body#history .orders .order .row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

body#history .orders .order .col-xs-10 {
  flex: 1;
  min-width: 0;
  padding: 0;
}

body#history .orders .order .col-xs-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0;
}

body#history .orders .order h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.25rem;
}

body#history .orders .order h3 a {
  color: inherit;
  text-decoration: none;
}

body#history .orders .order .date {
  font-size: 0.775rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.125rem;
}

body#history .orders .order .total {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 0.375rem;
}

body#history .orders .order .status .label-pill {
  font-size: 0.675rem;
}

/* Iconos móvil — reemplazamos material-icons vacíos con pseudo-elementos */
body#history .orders .order .col-xs-2 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

body#history .orders .order .col-xs-2 a:hover {
  background: var(--color-primary);
  color: #fff;
}

body#history .orders .order .col-xs-2 a .material-icons {
  font-size: 0;
  width: 0;
  height: 0;
}

body#history .orders .order .col-xs-2 a[data-link-action="view-order-details"]::before {
  content: 'visibility';
  font-family: 'Material Symbols Outlined';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

body#history .orders .order .col-xs-2 a[title="Pedir de nuevo"]::before {
  content: 'replay';
  font-family: 'Material Symbols Outlined';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

@media (max-width: 767px) {
  body#history .table {
    font-size: 0.8rem;
  }

  body#history .table thead th,
  body#history .table tbody td,
  body#history .table tbody th {
    padding: 0.625rem 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   FACTURAS DE ABONO — body#order-slip
   ══════════════════════════════════════════════════════════════ */

body#order-slip #content {
  padding-block: 2rem;
}

body#order-slip #content>h6 {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 1.5rem;
}

/* Tabla escritorio — comparte estilos con historial */
body#order-slip .table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
  font-size: 0.875rem;
}

body#order-slip .table thead th {
  padding: 0.75rem 1rem;
  background: var(--color-surface-container-low);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  border-bottom: 1px solid var(--color-outline-variant);
  white-space: nowrap;
}

body#order-slip .table tbody tr {
  border-bottom: 1px solid var(--color-surface-container);
  transition: background 0.15s;
}

body#order-slip .table tbody tr:last-child {
  border-bottom: none;
}

body#order-slip .table tbody tr:hover {
  background: var(--color-surface-container-low);
}

body#order-slip .table tbody td,
body#order-slip .table tbody th {
  padding: 0.875rem 1rem;
  color: var(--color-on-surface);
  vertical-align: middle;
}

body#order-slip .table tbody td a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s;
}

body#order-slip .table tbody td a:hover {
  opacity: 0.75;
}

/* Icono ver factura (material-icons vacío → pseudo-elemento) */
body#order-slip .table .material-icons {
  font-size: 0;
  width: 0;
  height: 0;
}

body#order-slip .table a:has(.material-icons) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  transition: background 0.15s, color 0.15s;
}

body#order-slip .table a:has(.material-icons):hover {
  background: var(--color-primary);
  color: #fff;
}

body#order-slip .table a:has(.material-icons)::before {
  content: 'picture_as_pdf';
  font-family: 'Material Symbols Outlined';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* Vista móvil (lista de facturas) */
body#order-slip .credit-slips {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body#order-slip .credit-slip {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
}

body#order-slip .credit-slip ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body#order-slip .credit-slip li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  gap: 0.5rem;
}

body#order-slip .credit-slip li strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

body#order-slip .credit-slip li a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   GDPR — body#module-psgdpr-gdpr
   ══════════════════════════════════════════════════════════════ */

body#module-psgdpr-gdpr .page_content,
body#module-psgdpr-gdpr #content {
  padding-block: 2rem;
}

/* Bloques de información */
body#module-psgdpr-gdpr .psgdprinfo17 {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  max-width: 52rem;
}

body#module-psgdpr-gdpr .psgdprinfo17 h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

body#module-psgdpr-gdpr .psgdprinfo17 p {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
  margin: 0 0 1.125rem;
}

body#module-psgdpr-gdpr .psgdprinfo17 p:last-child {
  margin-bottom: 0;
}

body#module-psgdpr-gdpr .psgdprinfo17 a:not(.psgdprgetdatabtn17) {
  color: var(--color-primary);
  text-decoration: underline;
  transition: opacity 0.15s;
}

body#module-psgdpr-gdpr .psgdprinfo17 a:not(.psgdprgetdatabtn17):hover {
  opacity: 0.75;
}

/* Botones descargar datos */
body#module-psgdpr-gdpr .psgdprgetdatabtn17 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  font-family: inherit;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
  float: none;
}

body#module-psgdpr-gdpr .psgdprgetdatabtn17:hover {
  background: var(--color-primary-container);
  color: #fff;
}

body#module-psgdpr-gdpr #exportDataToCsv::before {
  content: 'table_view';
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
}

body#module-psgdpr-gdpr #exportDataToPdf::before {
  content: 'picture_as_pdf';
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
}

@media (max-width: 767px) {
  body#module-psgdpr-gdpr .psgdprinfo17 {
    padding: 1.25rem;
  }

  body#module-psgdpr-gdpr .psgdprgetdatabtn17 {
    display: flex;
    margin-right: 0;
    margin-bottom: 0.5rem;
    justify-content: center;
  }
}

/* --- Checkout Modal (Terms & Conditions) --- */
.modal.js-checkout-modal {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  inset: 0;
}

.modal.js-checkout-modal .modal-dialog {
  max-width: 800px;
  margin: 5rem auto;
}

@media (max-width: 991px) {
  .modal.js-checkout-modal .modal-dialog {
    margin: 2rem 1rem;
  }
}

.modal.js-checkout-modal .modal-content {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: var(--box-shadow-lg);
  padding: 0 3rem 0 0;
  position: relative;
}

@media (max-width: 767px) {
  .modal.js-checkout-modal .modal-content {
    padding: 1.5rem;
  }
}

.modal.js-checkout-modal .close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 4rem;
  font-weight: normal;
  color: var(--gray-500);
  opacity: 0.8;
  text-shadow: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.modal.js-checkout-modal .close:hover {
  color: var(--gray-800);
  opacity: 1;
  transform: rotate(90deg);
}

.modal.js-checkout-modal .js-modal-content {
  max-height: 85vh;
  overflow-y: auto;
  padding-right: 1rem;
  /* Space for scrollbar */
}

.modal.js-checkout-modal .js-modal-content .page-heading {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 1rem;
}

.modal.js-checkout-modal .js-modal-content .page-subheading {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.modal.js-checkout-modal .js-modal-content p {
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 1rem;
}


.twa_posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
}