/* ===================================================================
   PELUDAMENTE · CAPA DE DISEÑO
   -------------------------------------------------------------------
   Tema:      Peludamente 1.0 (sobre Hummingbird 2 / Bootstrap 5.3)
   Tipografía: DM Sans
   -------------------------------------------------------------------
   PrestaShop carga este archivo automáticamente DESPUÉS de theme.css
   (FrontController::registerStylesheets, prioridad 1000).

   Hummingbird encapsula todo su CSS en @layer (vendors, bs-base,
   bs-components, bs-custom-components, ps-base, ps-components,
   ps-pages, ps-modules, utilities). Este archivo va SIN capa, por lo
   que gana siempre sin necesidad de !important ni de selectores
   inflados. Solo se usa !important donde Bootstrap escribe utilidades
   con !important propio.
   =================================================================== */


/* ===================================================================
   0 · TIPOGRAFÍA
   Si prefieres autoalojar la fuente, mira assets/fonts/LEEME-DM-SANS.txt
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,400&display=swap');


/* ===================================================================
   1 · TOKENS
   Único sitio donde tocar. Todo lo de abajo se alimenta de aquí.
   =================================================================== */

:root,
[data-bs-theme="light"] {

  /* --- Color de marca --- */
  --pel-arena:      #D8B89C;
  --pel-arena-osc:  #B9926F;
  --pel-arena-cl:   #EBD9C6;
  --pel-crema:      #F6E9DF;
  --pel-crema-cl:   #FBF4EE;
  --pel-salvia:     #C8D8C3;
  --pel-menta:      #E8F1EC;
  --pel-lavanda:    #E7D6F4;

  /* --- Neutros --- */
  --pel-tinta:      #3B3A38;
  --pel-tinta-70:   #5F5A55;
  --pel-tinta-50:   #7A736C;
  --pel-tinta-30:   #A79C93;
  --pel-linea:      #EDE6DF;
  --pel-linea-osc:  #DDD3C9;
  --pel-papel:      #FFFCF9;
  --pel-blanco:     #FFFFFF;

  /* --- Estados --- */
  --pel-ok:          #5C7A52;
  --pel-ok-fondo:    #E9F0E5;
  --pel-aviso:       #A8804A;
  --pel-aviso-fondo: #F7EDDF;
  --pel-error:       #A8544A;
  --pel-error-fondo: #F8DAD6;
  --pel-info:        #5A6E82;
  --pel-info-fondo:  #E6EDF3;

  /* --- Tipografía --- */
  --pel-fuente: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pel-txt-xs: 0.6875rem;   /* 11px  */
  --pel-txt-sm: 0.78125rem;  /* 12.5px */
  --pel-txt-md: 0.875rem;    /* 14px  */
  --pel-txt-lg: 1rem;        /* 16px  */
  --pel-txt-xl: 1.25rem;     /* 20px  */

  --pel-tit-sm: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --pel-tit-md: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  --pel-tit-lg: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --pel-tit-xl: clamp(2rem, 1.25rem + 3.2vw, 3.4rem);

  --pel-versal: 0.1em;

  /* --- Ritmo (compacto) --- */
  --pel-e1: 0.25rem;
  --pel-e2: 0.5rem;
  --pel-e3: 0.75rem;
  --pel-e4: 1rem;
  --pel-e5: 1.5rem;
  --pel-e6: 2rem;
  --pel-e7: 2.75rem;
  --pel-e8: 3.5rem;
  --pel-e9: 4.5rem;

  /* Separación vertical entre secciones. Compacta a propósito. */
  --pel-seccion:    clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --pel-seccion-sm: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);

  /* --- Formas --- */
  --pel-radio-sm: 0.5rem;
  --pel-radio:    0.75rem;
  --pel-radio-lg: 1rem;
  --pel-radio-xl: 1.25rem;
  --pel-pastilla: 62.5rem;

  /* --- Sombras cálidas. El gris ensucia la crema. --- */
  --pel-sombra-sm: 0 1px 2px rgba(120, 95, 70, 0.06);
  --pel-sombra:    0 6px 18px rgba(120, 95, 70, 0.09);
  --pel-sombra-lg: 0 20px 46px rgba(59, 58, 56, 0.15);

  /* --- Movimiento --- */
  --pel-rapido: 0.18s cubic-bezier(0.22, 0.7, 0.3, 1);
  --pel-medio:  0.28s cubic-bezier(0.22, 0.7, 0.3, 1);
  --pel-lento:  0.5s cubic-bezier(0.22, 0.7, 0.3, 1);

  /* --- Anchos --- */
  --pel-ancho: 1320px;
  --pel-ancho-texto: 68ch;

  /* ===============================================================
     Reasignación de las variables de Bootstrap que usa Hummingbird.
     Con esto, la mayor parte del tema se recolorea sola.
     =============================================================== */

  --bs-body-font-family: var(--pel-fuente);
  --bs-body-font-size: 0.9375rem;      /* 15px */
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--pel-tinta);
  --bs-body-color-rgb: 59, 58, 56;
  --bs-body-bg: var(--pel-blanco);
  --bs-body-bg-rgb: 255, 255, 255;

  --bs-emphasis-color: var(--pel-tinta);
  --bs-emphasis-color-rgb: 59, 58, 56;
  --bs-secondary-color: var(--pel-tinta-70);
  --bs-secondary-color-rgb: 95, 90, 85;
  --bs-secondary-bg: var(--pel-crema);
  --bs-secondary-bg-rgb: 246, 233, 223;
  --bs-tertiary-color: var(--pel-tinta-50);
  --bs-tertiary-color-rgb: 122, 115, 108;
  --bs-tertiary-bg: var(--pel-crema-cl);
  --bs-tertiary-bg-rgb: 251, 244, 238;

  --bs-primary: #3B3A38;
  --bs-primary-rgb: 59, 58, 56;
  --bs-primary-text-emphasis: var(--pel-tinta);
  --bs-primary-bg-subtle: var(--pel-crema);
  --bs-primary-border-subtle: var(--pel-arena);

  --bs-secondary: var(--pel-arena-osc);
  --bs-secondary-rgb: 185, 146, 111;
  --bs-secondary-text-emphasis: var(--pel-tinta-70);
  --bs-secondary-bg-subtle: var(--pel-crema-cl);
  --bs-secondary-border-subtle: var(--pel-linea-osc);

  --bs-success: var(--pel-ok);
  --bs-success-rgb: 92, 122, 82;
  --bs-success-text-emphasis: #46603E;
  --bs-success-bg-subtle: var(--pel-ok-fondo);
  --bs-success-border-subtle: #C4D6BB;

  --bs-danger: var(--pel-error);
  --bs-danger-rgb: 168, 84, 74;
  --bs-danger-text-emphasis: #8C453C;
  --bs-danger-bg-subtle: var(--pel-error-fondo);
  --bs-danger-border-subtle: #EDBFB9;

  --bs-warning: var(--pel-aviso);
  --bs-warning-rgb: 168, 128, 74;
  --bs-warning-text-emphasis: #8A6738;
  --bs-warning-bg-subtle: var(--pel-aviso-fondo);
  --bs-warning-border-subtle: #E6D2B4;

  --bs-info: var(--pel-info);
  --bs-info-rgb: 90, 110, 130;
  --bs-info-text-emphasis: #4A5C6D;
  --bs-info-bg-subtle: var(--pel-info-fondo);
  --bs-info-border-subtle: #C4D2DE;

  --bs-light: var(--pel-crema-cl);
  --bs-light-rgb: 251, 244, 238;
  --bs-dark: var(--pel-tinta);
  --bs-dark-rgb: 59, 58, 56;

  --bs-link-color: var(--pel-tinta);
  --bs-link-color-rgb: 59, 58, 56;
  --bs-link-hover-color: var(--pel-arena-osc);
  --bs-link-hover-color-rgb: 185, 146, 111;
  --bs-link-decoration: none;

  --bs-border-color: var(--pel-linea);
  --bs-border-color-translucent: rgba(120, 95, 70, 0.14);
  --bs-border-radius: var(--pel-radio);
  --bs-border-radius-sm: var(--pel-radio-sm);
  --bs-border-radius-lg: var(--pel-radio-lg);
  --bs-border-radius-xl: var(--pel-radio-xl);
  --bs-border-radius-xxl: 1.75rem;

  --bs-heading-color: var(--pel-tinta);
  --bs-highlight-bg: var(--pel-crema);
  --bs-highlight-color: var(--pel-tinta);

  --bs-box-shadow-sm: var(--pel-sombra-sm);
  --bs-box-shadow: var(--pel-sombra);
  --bs-box-shadow-md: var(--pel-sombra);
  --bs-box-shadow-lg: var(--pel-sombra-lg);
  --bs-transition-default: all var(--pel-rapido);

  --bs-gray-100: #FBF4EE;
  --bs-gray-200: #F3ECE5;
  --bs-gray-300: #EDE6DF;
  --bs-gray-400: #DDD3C9;
  --bs-gray-500: #A79C93;
  --bs-gray-600: #7A736C;
  --bs-gray-700: #5F5A55;
  --bs-gray-800: #4A4744;
  --bs-gray-900: #3B3A38;

  /* Variables propias de Hummingbird */
  --header-top-color: var(--pel-tinta-70);
  --header-top-color-hover: var(--pel-arena-osc);
}


/* ===================================================================
   2 · BASE Y TIPOGRAFÍA
   =================================================================== */

html {
  scroll-padding-top: 7rem;
}

/* Hummingbird activa scroll-behavior: smooth en toda la página. Está bien para
   los anclajes, pero mientras se escribe en el buscador convierte cualquier
   reajuste de scroll en una animación visible: la página parecía irse hacia
   arriba letra a letra. peludamente.js pone esta clase mientras el buscador
   tiene el foco, y la quita al salir. */
html.pel-buscando {
  scroll-behavior: auto;
}

body {
  font-family: var(--pel-fuente);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--pel-tinta);
  background-color: var(--pel-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Toda la tienda en DM Sans, salvo las fuentes de icono. */
body,
button,
input,
optgroup,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn,
.form-control,
.form-select,
.badge,
.alert,
.dropdown-item,
.nav-link,
.accordion-button,
.modal-title,
.page-link,
.breadcrumb,
.card,
.table,
.offcanvas,
.tooltip,
.popover {
  font-family: var(--pel-fuente);
}

/* Excepción: sin esto los iconos se convierten en palabras sueltas. */
.material-icons,
i.material-icons,
[class^="material-icons"],
[class*=" material-icons"] {
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-block-end: var(--pel-e3);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--pel-tinta);
  text-transform: none;
}

h1, .h1 { font-size: var(--pel-tit-lg); letter-spacing: -0.045em; }
h2, .h2 { font-size: var(--pel-tit-md); letter-spacing: -0.04em; }
h3, .h3 { font-size: var(--pel-tit-sm); letter-spacing: -0.03em; }
h4, .h4 { font-size: var(--pel-txt-lg); font-weight: 600; letter-spacing: -0.02em; }
h5, .h5 { font-size: var(--pel-txt-md); font-weight: 600; letter-spacing: -0.01em; }

h6, .h6 {
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-arena-osc);
  text-transform: uppercase;
}

p { margin-block-end: var(--pel-e4); }
p:last-child { margin-block-end: 0; }

/* El color de los enlaces viaja por --bs-link-color / --bs-link-hover-color.
   No se fija aquí a propósito: una regla `a { color }` sin capa ganaría
   también a los botones y a la paginación, y dejaría su texto invisible. */
a {
  text-decoration: none;
  transition: color var(--pel-rapido);
}

small, .small {
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
}

strong, b { font-weight: 600; }

hr {
  height: 1px;
  margin-block: var(--pel-e5);
  background-color: var(--pel-linea);
  border: 0;
  opacity: 1;
}

::selection {
  background: var(--pel-crema);
  color: var(--pel-tinta);
}

/* Anillo de foco único para toda la tienda */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pel-arena-osc);
  outline-offset: 3px;
  border-radius: var(--pel-radio-sm);
}

/* Números alineados en precios y totales */
.product-miniature__price,
.product__price,
.product-miniature__regular-price,
.product__regular-price,
.cart-summary__value,
.cart-summary-product__price,
.cart-summary-product__total,
.product-line__price,
.final-summary__value,
.grid-table td,
.discounts-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ===================================================================
   3 · CONTENEDORES Y RITMO VERTICAL COMPACTO
   =================================================================== */

.container,
.container-md,
.container-fluid,
.container-lg,
.container-xl {
  --bs-gutter-x: 2rem;
  max-width: var(--pel-ancho);
}

@media (max-width: 767.98px) {
  .container,
  .container-md,
  .container-fluid,
  .container-lg,
  .container-xl {
    --bs-gutter-x: 1.5rem;
  }
}

#wrapper,
.wrapper {
  padding-block-start: var(--pel-e5);
  padding-block-end: var(--pel-seccion);
}

body#index #wrapper,
body#index .wrapper {
  padding-block-start: 0;
}

/* Bloques de módulos en la home: aire justo, ni sábana ni ahogo. */
#index .page-content--home > * {
  margin-block-end: var(--pel-seccion);
}

#index .page-content--home > *:last-child {
  margin-block-end: 0;
}

.page-content,
.page-footer {
  background: none;
}

.section-title {
  margin-block-end: var(--pel-e5);
}

.section-title,
.module-products .h2,
.module-products h2 {
  font-size: var(--pel-tit-md);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.page-title-section {
  font-size: var(--pel-tit-md);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.page-header {
  margin-block-end: var(--pel-e5);
  padding: 0;
  background: none;
  border: 0;
}

/* Franja de sección crema, para alternar ritmo en la home */
.pel-seccion--crema {
  padding-block: var(--pel-seccion);
  background-color: var(--pel-crema-cl);
}

/* Textos de apoyo reutilizables */
.pel-eyebrow {
  display: inline-block;
  margin-block-end: var(--pel-e2);
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-arena-osc);
  text-transform: uppercase;
}

.pel-lead {
  max-width: var(--pel-ancho-texto);
  font-size: var(--pel-txt-lg);
  line-height: 1.65;
  color: var(--pel-tinta-70);
}


/* ===================================================================
   4 · BOTONES
   Tres niveles: sólido, contorno y texto. Mismo alto y radio.
   =================================================================== */

.btn {
  --bs-btn-font-family: var(--pel-fuente);
  --bs-btn-font-size: var(--pel-txt-md);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--pel-radio);
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;

  display: inline-flex;
  gap: var(--pel-e2);
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color var(--pel-rapido),
    border-color var(--pel-rapido),
    color var(--pel-rapido),
    transform var(--pel-rapido);
}

.btn:active { transform: translateY(1px); }

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

.btn .material-icons { font-size: 1.15rem; }

/* --- Principal: tinta sólida, hover arena --- */
.btn-primary {
  --bs-btn-color: var(--pel-blanco);
  --bs-btn-bg: var(--pel-tinta);
  --bs-btn-border-color: var(--pel-tinta);
  --bs-btn-hover-color: var(--pel-blanco);
  --bs-btn-hover-bg: var(--pel-arena-osc);
  --bs-btn-hover-border-color: var(--pel-arena-osc);
  --bs-btn-active-color: var(--pel-blanco);
  --bs-btn-active-bg: var(--pel-arena-osc);
  --bs-btn-active-border-color: var(--pel-arena-osc);
  --bs-btn-disabled-color: var(--pel-blanco);
  --bs-btn-disabled-bg: var(--pel-tinta);
  --bs-btn-disabled-border-color: var(--pel-tinta);
}

/* --- Secundario y contornos --- */
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-tertiary,
.btn-outline-tertiary,
.btn-light,
.btn-basic {
  --bs-btn-color: var(--pel-tinta);
  --bs-btn-bg: var(--pel-blanco);
  --bs-btn-border-color: var(--pel-linea-osc);
  --bs-btn-hover-color: var(--pel-tinta);
  --bs-btn-hover-bg: var(--pel-crema);
  --bs-btn-hover-border-color: var(--pel-arena);
  --bs-btn-active-color: var(--pel-tinta);
  --bs-btn-active-bg: var(--pel-crema);
  --bs-btn-active-border-color: var(--pel-arena);
  --bs-btn-disabled-color: var(--pel-tinta-30);
  --bs-btn-disabled-bg: var(--pel-blanco);
  --bs-btn-disabled-border-color: var(--pel-linea);
}

/* --- Terciario: solo texto --- */
.btn-link {
  --bs-btn-color: var(--pel-tinta);
  --bs-btn-hover-color: var(--pel-arena-osc);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;

  min-height: 0;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pel-arena);
}

.btn-link:hover { text-decoration-color: currentColor; }

.btn-success {
  --bs-btn-bg: var(--pel-ok);
  --bs-btn-border-color: var(--pel-ok);
  --bs-btn-hover-bg: #4E6946;
  --bs-btn-hover-border-color: #4E6946;
  --bs-btn-color: var(--pel-blanco);
  --bs-btn-hover-color: var(--pel-blanco);
}

.btn-danger {
  --bs-btn-bg: var(--pel-error);
  --bs-btn-border-color: var(--pel-error);
  --bs-btn-hover-bg: #91463D;
  --bs-btn-hover-border-color: #91463D;
  --bs-btn-color: var(--pel-blanco);
  --bs-btn-hover-color: var(--pel-blanco);
}

/* --- Tamaños --- */
.btn-sm {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-font-size: var(--pel-txt-sm);
  --bs-btn-border-radius: var(--pel-radio-sm);
  min-height: 2.25rem;
}

.btn-lg {
  --bs-btn-padding-y: 0.85rem;
  --bs-btn-padding-x: 1.85rem;
  --bs-btn-font-size: var(--pel-txt-lg);
  --bs-btn-border-radius: var(--pel-radio-lg);
  min-height: 3.375rem;
}

/* --- Botón cuadrado de icono (miniatura, zoom, quickview) --- */
.btn-square-icon {
  gap: 0;
  width: 2.875rem;
  min-width: 2.875rem;
  height: 2.875rem;
  min-height: 2.875rem;
  padding: 0;
  border-radius: var(--pel-pastilla);
}

.btn-square-icon.btn-sm {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
}

.buttons-wrapper { gap: var(--pel-e3); }


/* ===================================================================
   5 · FORMULARIOS
   =================================================================== */

label,
.form-label {
  display: block;
  margin-block-end: var(--pel-e1);
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--pel-tinta);
  text-transform: none;
}

.form-control,
.form-select {
  min-height: 2.875rem;
  padding: 0.6rem 0.95rem;
  font-size: var(--pel-txt-md);
  line-height: 1.5;
  color: var(--pel-tinta);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio);
  box-shadow: none;
  transition:
    border-color var(--pel-rapido),
    box-shadow var(--pel-rapido);
}

textarea.form-control {
  min-height: 7.5rem;
  resize: vertical;
}

.form-control::placeholder { color: var(--pel-tinta-30); }

.form-control:focus,
.form-select:focus {
  color: var(--pel-tinta);
  background-color: var(--pel-blanco);
  border-color: var(--pel-arena);
  box-shadow: 0 0 0 4px rgba(216, 184, 156, 0.2);
}

.form-control:disabled,
.form-control[readonly] {
  color: var(--pel-tinta-50);
  background-color: var(--pel-crema-cl);
  cursor: not-allowed;
}

.form-select {
  padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A736C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 15px;
  cursor: pointer;
}

.form-text,
.form-control-comment {
  margin-block-start: var(--pel-e1);
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--pel-error);
  background-image: none;
}

.invalid-feedback,
.text-danger {
  font-size: var(--pel-txt-sm);
  color: var(--pel-error) !important;
}

/* Casillas y radios */
.form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2rem;
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea-osc);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color var(--pel-rapido),
    border-color var(--pel-rapido);
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:checked {
  background-color: var(--pel-tinta);
  border-color: var(--pel-tinta);
}

.form-check-input:focus {
  border-color: var(--pel-arena);
  box-shadow: 0 0 0 4px rgba(216, 184, 156, 0.2);
}

.form-check-label {
  font-size: var(--pel-txt-md);
  font-weight: 400;
  color: var(--pel-tinta-70);
  cursor: pointer;
}

/* Interruptores */
.form-switch .form-check-input {
  width: 2.25rem;
  border-radius: var(--pel-pastilla);
}

.input-group-text {
  padding-inline: 0.95rem;
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
  background-color: var(--pel-crema-cl);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio);
}

/* Selector de cantidad */
.quantity-button {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio);
}

.quantity-button .btn,
.quantity-button button {
  min-height: 2.75rem;
  min-width: 2.5rem;
  padding-inline: 0.5rem;
  color: var(--pel-tinta-50);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.quantity-button .btn:hover,
.quantity-button button:hover {
  color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
}

.quantity-button input,
.quantity-button .form-control {
  min-height: 2.75rem;
  max-width: 3.25rem;
  padding-inline: 0;
  font-weight: 500;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.quantity-button input:focus,
.quantity-button .form-control:focus {
  box-shadow: none;
}


/* ===================================================================
   6 · ETIQUETAS, DISTINTIVOS Y BANDERINES DE PRODUCTO
   =================================================================== */

.badge {
  --bs-badge-border-radius: 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding-inline: 0.625rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  color: #8A6A4F;
  background-color: var(--pel-crema);
  border: 0;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Las utilidades .bg-* de Bootstrap llevan !important dentro de una capa,
   así que su fondo manda. Aquí solo se corrige el color del texto, que sí
   es una declaración normal, para que el contraste sea legible. */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-dark { color: var(--pel-blanco); }

.badge.bg-light { color: var(--pel-tinta); }

/* Banderines sobre la foto del producto */
.product-flags {
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-start: 0.625rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
  width: auto;
  max-width: calc(100% - 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-flags .badge,
.product-flags li.badge {
  height: 1.375rem;
  padding-inline: 0.5rem 0.4rem;
  font-size: 0.625rem;
  color: #8A6A4F;
  background-color: var(--pel-crema);
  border: 0;
  box-shadow: var(--pel-sombra-sm);
}

.product-flags .discount,
.product-flags .on-sale,
.product-flags .discount-percentage,
.product-flags .discount-amount {
  color: var(--pel-error);
  background-color: var(--pel-error-fondo);
}

.product-flags .new {
  color: #5A7563;
  background-color: var(--pel-menta);
}

.product-flags .pack {
  color: #4E6350;
  background-color: var(--pel-salvia);
}

.product-flags .out_of_stock {
  color: var(--pel-tinta-50);
  background-color: #EFEAE5;
}


/* ===================================================================
   7 · AVISOS
   =================================================================== */

.alert {
  --bs-alert-border-radius: var(--pel-radio);

  display: flex;
  gap: var(--pel-e3);
  align-items: flex-start;
  padding: var(--pel-e4) var(--pel-e5);
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
  background-color: var(--pel-crema-cl);
  border: 0;
  border-inline-start: 3px solid var(--pel-arena);
  border-radius: var(--pel-radio);
  box-shadow: none;
}

.alert ul { margin: 0; padding-inline-start: 1.1rem; }

.alert-success { color: #35492E; background-color: var(--pel-ok-fondo); border-inline-start-color: var(--pel-ok); }
.alert-warning { color: #6E5228; background-color: var(--pel-aviso-fondo); border-inline-start-color: var(--pel-aviso); }
.alert-danger  { color: #71352D; background-color: var(--pel-error-fondo); border-inline-start-color: var(--pel-error); }
.alert-info    { color: #3B4A57; background-color: var(--pel-info-fondo); border-inline-start-color: var(--pel-info); }

.alert .btn-close { margin-inline-start: auto; opacity: 0.45; }

#notifications { margin-block-end: var(--pel-e5); }


/* ===================================================================
   8 · MIGAS DE PAN
   =================================================================== */

.breadcrumb__wrapper,
.breadcrumb {
  margin-block-end: var(--pel-e4);
  padding: 0;
  font-size: var(--pel-txt-sm);
  background: none;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--pel-linea-osc);
  --bs-breadcrumb-item-padding-x: 0.5rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.breadcrumb-item + .breadcrumb-item { padding-inline-start: 0; }

.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline: 0.55rem;
  padding: 0;
  background-color: var(--pel-linea-osc);
  border-radius: 50%;
  vertical-align: middle;
}

.breadcrumb-item a { color: var(--pel-tinta-50); }
.breadcrumb-item a:hover { color: var(--pel-arena-osc); }

.breadcrumb-item.active,
.breadcrumb-item:last-child {
  font-weight: 500;
  color: var(--pel-tinta);
}


/* ===================================================================
   9 · PAGINACIÓN
   =================================================================== */

.pagination {
  --bs-pagination-border-radius: var(--pel-radio-sm);
  --bs-pagination-color: var(--pel-tinta);
  --bs-pagination-bg: var(--pel-blanco);
  --bs-pagination-border-color: var(--pel-linea);
  --bs-pagination-hover-color: var(--pel-tinta);
  --bs-pagination-hover-bg: var(--pel-crema);
  --bs-pagination-hover-border-color: var(--pel-arena);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--pel-blanco);
  --bs-pagination-active-bg: var(--pel-tinta);
  --bs-pagination-active-border-color: var(--pel-tinta);
  --bs-pagination-disabled-color: var(--pel-tinta-30);
  --bs-pagination-disabled-bg: var(--pel-crema-cl);
  --bs-pagination-disabled-border-color: transparent;

  gap: var(--pel-e1);
  justify-content: center;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  border-radius: var(--pel-radio-sm);
}


/* ===================================================================
   10 · PESTAÑAS, ACORDEONES Y DESPLEGABLES
   =================================================================== */

.nav-tabs {
  --bs-nav-tabs-border-color: var(--pel-linea);
  gap: var(--pel-e5);
}

.nav-tabs .nav-link {
  position: relative;
  padding: var(--pel-e3) 0;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  color: var(--pel-tinta-50);
  background: none;
  border: 0;
}

.nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background-color: var(--pel-arena-osc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pel-medio);
}

.nav-tabs .nav-link:hover { color: var(--pel-tinta); border: 0; }

.nav-tabs .nav-link.active {
  color: var(--pel-tinta);
  background: none;
  border: 0;
}

.nav-tabs .nav-link.active::after { transform: scaleX(1); }

.accordion {
  --bs-accordion-border-color: var(--pel-linea);
  --bs-accordion-border-radius: var(--pel-radio);
  --bs-accordion-btn-color: var(--pel-tinta);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--pel-tinta);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 0.875rem;
  --bs-accordion-body-padding-y: 0.875rem;
}

.accordion-button {
  font-size: var(--pel-txt-md);
  font-weight: 500;
  box-shadow: none;
}

.accordion-button:not(.collapsed) { box-shadow: none; }

.dropdown-menu {
  --bs-dropdown-border-color: var(--pel-linea);
  --bs-dropdown-border-radius: var(--pel-radio-lg);
  --bs-dropdown-link-color: var(--pel-tinta);
  --bs-dropdown-link-hover-color: var(--pel-arena-osc);
  --bs-dropdown-link-hover-bg: var(--pel-crema);
  --bs-dropdown-link-active-color: var(--pel-tinta);
  --bs-dropdown-link-active-bg: var(--pel-crema);
  --bs-dropdown-padding-x: 0.25rem;
  --bs-dropdown-padding-y: 0.25rem;
  --bs-dropdown-item-padding-y: 0.45rem;
  --bs-dropdown-item-padding-x: 0.7rem;
  --bs-dropdown-font-size: var(--pel-txt-md);

  box-shadow: var(--pel-sombra-lg);
}

.dropdown-item { border-radius: var(--pel-radio-sm); }


/* ===================================================================
   11 · TARJETAS Y TABLAS
   =================================================================== */

.card {
  --bs-card-border-color: var(--pel-linea);
  --bs-card-border-radius: var(--pel-radio-lg);
  --bs-card-inner-border-radius: var(--pel-radio);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-bg: var(--pel-blanco);

  box-shadow: none;
}

.card-header {
  font-size: var(--pel-txt-md);
  font-weight: 600;
  border-bottom: 1px solid var(--pel-linea);
}

.table {
  --bs-table-color: var(--pel-tinta);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--pel-linea);
  --bs-table-striped-bg: var(--pel-crema-cl);
  --bs-table-hover-bg: var(--pel-crema-cl);

  margin-block-end: 0;
  font-size: var(--pel-txt-md);
}

.table > thead > tr > th,
.grid-table__header {
  padding: var(--pel-e3) var(--pel-e4);
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-tinta-50);
  background: none;
  border-bottom: 1px solid var(--pel-linea-osc);
  text-transform: uppercase;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding: var(--pel-e4);
  border-bottom: 1px solid var(--pel-linea);
  vertical-align: middle;
}

.table-wrapper,
.grid-table {
  overflow: hidden;
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}


/* ===================================================================
   12 · MODALES Y PANELES LATERALES
   =================================================================== */

.modal-content {
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-xl);
  box-shadow: var(--pel-sombra-lg);
}

.modal-header {
  align-items: center;
  padding: var(--pel-e5) var(--pel-e5) var(--pel-e3);
  border: 0;
}

.modal-title {
  margin: 0;
  font-size: var(--pel-txt-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-body { padding: var(--pel-e3) var(--pel-e5) var(--pel-e5); }

.modal-footer {
  gap: var(--pel-e2);
  padding: 0 var(--pel-e5) var(--pel-e5);
  border: 0;
}

.modal-backdrop.show {
  background-color: #3B3A38;
  opacity: 0.32;
}

.btn-close {
  --bs-btn-close-focus-shadow: none;
  opacity: 0.4;
  transition: opacity var(--pel-rapido);
}

.btn-close:hover { opacity: 1; }

.offcanvas {
  --bs-offcanvas-border-color: var(--pel-linea);
  --bs-offcanvas-bg: var(--pel-blanco);
  box-shadow: var(--pel-sombra-lg);
}

.offcanvas-header { padding: var(--pel-e4) var(--pel-e5); }
.offcanvas-title { font-size: var(--pel-txt-lg); font-weight: 600; }
.offcanvas-body { padding: var(--pel-e4) var(--pel-e5); }


/* ===================================================================
   13 · CABECERA · dos filas
   -------------------------------------------------------------------
   Fila 1  .header-banner   franja de anuncio
   Fila 2  .header-bottom   logo · buscador · cuenta y carrito
   Fila 3  .header-catbar   botón de megamenú · menú · contacto

   Al bajar 120 px, el script de header.tpl añade .is-compact al #header:
   se esconde la franja y se estrecha la fila de marca.
   =================================================================== */

:root {
  /* Etiqueta del botón de categorías en móvil. Cámbiala aquí si hace falta. */
  --pel-etiqueta-categorias: "Categorías";

  /* Un único compás para la cabecera y todo lo que lleva dentro.
     Arranque suave y frenada larga: la curva anterior salía disparada en el
     primer fotograma y ese tirón era lo que se notaba raro. */
  --pel-isla-curva: cubic-bezier(0.45, 0.02, 0.22, 1);
  --pel-isla-tiempo: 0.5s;
}

.header {
  background-color: var(--pel-blanco);
  border-bottom: 1px solid var(--pel-linea);
  transition: box-shadow var(--pel-medio);
}

.header.is-compact { box-shadow: var(--pel-sombra-sm); }

/* --- Barra superior --- */
:root {
  --pel-topbar-fondo: #5B4433;   /* marrón oscuro */
  --pel-topbar-texto: #F6E9DF;
}

.header-topbar {
  overflow: hidden;
  max-height: 4rem;
  padding-block: 0.4rem;
  font-size: var(--pel-txt-sm);
  color: var(--pel-topbar-texto);
  background-color: var(--pel-topbar-fondo);
  transition:
    padding-block var(--pel-isla-tiempo) var(--pel-isla-curva),
    max-height var(--pel-isla-tiempo) var(--pel-isla-curva),
    opacity calc(var(--pel-isla-tiempo) * 0.6) var(--pel-isla-curva);
}

.header-topbar__container {
  display: flex;
  gap: var(--pel-e4);
  align-items: center;
  justify-content: space-between;
}

.header-topbar__list {
  display: flex;
  gap: var(--pel-e5);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-topbar__item,
.header-topbar__link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--pel-topbar-texto);
  white-space: nowrap;
}

.header-topbar__link:hover { color: var(--pel-blanco); }

.header-topbar .pel-icono {
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
}

/* Al hacerse isla se pliega, igual que la franja de anuncio */
.header.is-compact .header-topbar {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
}

@media (max-width: 991.98px) {
  .header-topbar__item--secundario { display: none; }
}

@media (max-width: 575.98px) {
  .header-topbar__container { justify-content: center; }
  .header-topbar__end { display: none; }
  .header-topbar__item span { font-size: var(--pel-txt-xs); }
}

/* --- Franja de anuncio --- */
.header-banner {
  overflow: hidden;
  padding-block: 0.5rem;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--pel-blanco);
  background-color: var(--pel-tinta);
  text-align: center;
  transition:
    padding-block var(--pel-isla-tiempo) var(--pel-isla-curva),
    max-height var(--pel-isla-tiempo) var(--pel-isla-curva),
    opacity calc(var(--pel-isla-tiempo) * 0.6) var(--pel-isla-curva);
  max-height: 4rem;
}

.header-banner a {
  color: var(--pel-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header.is-compact .header-banner {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
}

/* --- Fila de marca --- */
.header-bottom {
  padding-block: 0.625rem;
  border-bottom: 0;
  transition: padding-block var(--pel-isla-tiempo) var(--pel-isla-curva);
}

.header.is-compact .header-bottom { padding-block: 0.25rem; }

.header-bottom__row { flex-wrap: nowrap; }

.header-bottom .navbar-brand {
  display: block;
  padding: 0;
  margin: 0;
}

.header-bottom .navbar-brand .logo {
  max-width: 9.5rem;
  max-height: 2.5rem;
  transition: max-height var(--pel-isla-tiempo) var(--pel-isla-curva);
}

@media (min-width: 768px) {
  .header-bottom .navbar-brand .logo {
    max-width: 12rem;
    max-height: 2.875rem;
  }

  .header.is-compact .header-bottom .navbar-brand .logo { max-height: 2.375rem; }
}

/* El buscador se come el hueco libre y no se pega a los iconos */
.header-bottom #_desktop_ps_searchbar { min-width: 0; }

.header-bottom .ps-searchbar {
  width: 100%;
  min-width: 0;
  max-width: 34rem;
  margin-block: 0;
  margin-inline: auto;
}

.header-bottom__actions {
  order: 3;
  gap: 0.125rem;
  white-space: nowrap;
}

.header-bottom__actions .header-block__title { font-size: var(--pel-txt-md); font-weight: 500; }

@media (max-width: 991.98px) {
  /* Entre md y lg no cabe el texto junto al buscador: se dejan los iconos */
  .header-bottom__actions .header-block__title { display: none !important; }
}

.header-bottom__logo { order: 1; }
.header-bottom #_desktop_ps_searchbar,
.header-bottom .ps-searchbar--mobile { order: 2; }

/* --- Barra de categorías --- */
.header-catbar {
  padding-block: 5px; /* ajuste de Joseda: un poco de aire arriba y abajo */
  border-top: 1px solid var(--pel-linea);
  background-color: var(--pel-blanco);
}

.header-catbar__inner {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  min-height: 2.875rem;
}

/* Hummingbird pone order:1 al menú a partir de xl; aquí manda el orden natural */
.header-catbar .ps-mainmenu,
.header-catbar .ps-mainmenu--desktop { order: 0; }

.header-catbar__nav { display: flex; align-items: stretch; min-width: 0; }

.header-catbar__end {
  gap: 1rem;
  margin-inline-start: auto;
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
}

.header-catbar__end a { color: var(--pel-tinta-70); }
.header-catbar__end a:hover { color: var(--pel-arena-osc); }
.header-catbar__end .material-icons { font-size: 1rem; }

.header-catbar__end ul,
.header-catbar__end .ps-contactinfo {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-catbar__end .ps-contactinfo__item { margin: 0; font-size: var(--pel-txt-sm); }

/* --- Hueco del megamenú --- */
.header-catbar__megamenu {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.megamenu-toggle,
.header-catbar__megamenu > .btn,
.header-catbar__megamenu > button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.375rem;
  padding-inline: 1rem;
  font-family: var(--pel-fuente);
  font-size: var(--pel-txt-md);
  font-weight: 500;
  line-height: 1;
  color: var(--pel-tinta);
  background-color: var(--pel-crema);
  border: 1px solid transparent;
  border-radius: var(--pel-radio-sm);
  cursor: pointer;
  transition:
    background-color var(--pel-rapido),
    border-color var(--pel-rapido),
    color var(--pel-rapido);
}

.megamenu-toggle:hover,
.megamenu-toggle:focus,
.megamenu-toggle[aria-expanded="true"] {
  color: var(--pel-tinta);
  background-color: var(--pel-crema);
  border-color: var(--pel-arena);
}

.megamenu-toggle__icon { font-size: 1.15rem; }

.megamenu-toggle__caret {
  margin-inline-start: 0.1rem;
  font-size: 1.1rem;
  color: var(--pel-tinta-50);
  transition: transform var(--pel-rapido);
}

.megamenu-toggle[aria-expanded="true"] .megamenu-toggle__caret { transform: rotate(0.5turn); }

/* Panel que despliegue el módulo: se le da el mismo lenguaje que al resto */
.header-catbar__megamenu .dropdown-menu,
.header-catbar__megamenu .megamenu-panel {
  padding: var(--pel-e5);
  background-color: var(--pel-blanco);
  border: 0;
  border-top: 1px solid var(--pel-linea);
  border-radius: 0 0 var(--pel-radio-lg) var(--pel-radio-lg);
  box-shadow: var(--pel-sombra-lg);
}

/* El botón «Todas las categorías» es de momento decorativo, a la espera del
   módulo de megamenú, así que la hamburguesa de PrestaShop sigue haciendo
   falta para abrir el menú en móvil. */
.header-catbar .ps-mainmenu__mobile-toggle .menu-toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.375rem;
  padding-inline: 0.875rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  color: var(--pel-tinta);
  background-color: var(--pel-crema);
  border-radius: var(--pel-radio-sm);
  text-decoration: none;
}

.header-catbar .ps-mainmenu__mobile-toggle .menu-toggle::after {
  content: var(--pel-etiqueta-categorias);
  line-height: 1;
}

.header-catbar .ps-mainmenu__mobile-toggle .menu-toggle .material-icons { font-size: 1.15rem; }

/* --- Panel lateral de categorías --- */
.ps-mainmenu--mobile.offcanvas {
  width: min(22rem, 88vw);
  border-inline-end: 0;
}

.ps-mainmenu--mobile .menu__link,
.ps-mainmenu--mobile .menu a {
  padding-block: 0.55rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  color: var(--pel-tinta);
}

.ps-mainmenu--mobile .menu__list > li { border-bottom: 1px solid var(--pel-linea); }
.ps-mainmenu--mobile .menu__list > li:last-child { border-bottom: 0; }

.ps-mainmenu--mobile .menu__title {
  padding-block: 0.5rem;
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-arena-osc);
  text-transform: uppercase;
  border-bottom: 1px solid var(--pel-linea);
}

.ps-mainmenu--mobile .ps-mainmenu__additionnals {
  border-top: 1px solid var(--pel-linea);
  background-color: var(--pel-crema-cl);
}

/* --- Móvil --- */
@media (max-width: 767.98px) {
  .header-catbar__inner { min-height: 2.5rem; }
  .megamenu-toggle__caret { display: none; }
}

/* Iconos de cuenta / carrito */
.header-block__action-btn {
  gap: 0.375rem;
  padding: 0.5rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  color: var(--pel-tinta);
  border-radius: var(--pel-radio-sm);
  transition: background-color var(--pel-rapido), color var(--pel-rapido);
}

.header-block__action-btn[href]:hover {
  color: var(--pel-arena-osc);
  background-color: var(--pel-crema-cl);
}

.header-block__icon { font-size: 1.375rem; }

/* La burbuja del carrito se define en la sección 23, sobre el icono. */

/* Menú principal */
.ps-mainmenu--desktop .ps-mainmenu__tree { gap: 0.125rem; }

.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--pel-tinta);
}

.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover,
.ps-mainmenu--desktop .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link {
  color: var(--pel-arena-osc);
}

.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
  padding-block: 0.75rem;
  color: var(--pel-tinta);
}

.ps-mainmenu--desktop .submenu {
  background-color: var(--pel-blanco);
  border-top: 1px solid var(--pel-linea);
  box-shadow: var(--pel-sombra-lg);
}

.ps-mainmenu--desktop .submenu__left {
  padding-block: var(--pel-e4);
  border-inline-end: 1px solid var(--pel-linea);
}

.ps-mainmenu--desktop .submenu__left-item {
  padding: 0.5rem 0.875rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  border-radius: var(--pel-radio-sm);
}

.ps-mainmenu--desktop .submenu__left-item:hover,
.ps-mainmenu--desktop .submenu__left-item.active {
  background-color: var(--pel-crema);
}

.ps-mainmenu--desktop .submenu__right { padding-block: var(--pel-e4); }

.ps-mainmenu--desktop .submenu__right-items .menu-item__group--child .menu-item__group-main-item,
.ps-mainmenu--desktop .submenu__right-items .menu-item__group--nochild .menu-item__group-main-item {
  margin-block-end: 0.375rem;
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-arena-osc);
  text-transform: uppercase;
}

.ps-mainmenu--desktop .submenu__right-items .menu-item a { font-size: var(--pel-txt-md); }

.ps-mainmenu--mobile .menu__title { font-size: var(--pel-txt-lg); font-weight: 600; }
.ps-mainmenu--mobile .menu a { font-size: var(--pel-txt-md); }

/* Buscador */
.ps-searchbar__input {
  padding-block: 0.55rem;
  padding-inline: 2.5rem;
  min-height: 2.625rem;
  background-color: var(--pel-crema-cl);
  border-color: transparent;
  border-radius: var(--pel-pastilla);
}

.ps-searchbar__input:focus {
  background-color: var(--pel-blanco);
  border-color: var(--pel-arena);
}

.ps-searchbar__magnifier,
.ps-searchbar__clear { color: var(--pel-tinta-50); }

.ps-searchbar__dropdown {
  border-color: var(--pel-linea);
  border-radius: var(--pel-radio-lg);
  box-shadow: var(--pel-sombra-lg);
}

.ps-searchbar__result-link { border-radius: var(--pel-radio-sm); }
.ps-searchbar__result-link:hover { background-color: var(--pel-crema-cl); }
.ps-searchbar__result-name { font-size: var(--pel-txt-md); font-weight: 500; }


/* ===================================================================
   14 · TARJETA DE PRODUCTO (estilo Shopify)
   Sin marco, foto cuadrada, acción que aparece al pasar por encima.
   =================================================================== */

.product-miniature__inner {
  gap: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none !important;
}

.product-miniature__top {
  position: relative;
  overflow: hidden;
  background-color: var(--pel-crema-cl);
  border-radius: var(--pel-radio-lg);
  aspect-ratio: 1 / 1;
}

.product-miniature__image-container,
.product-miniature__image-link {
  display: block;
  height: 100%;
}

.product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pel-lento);
}

@media (hover: hover) {
  .product-miniature__inner:hover .product-miniature__top {
    border-end-start-radius: var(--pel-radio-lg);
    border-end-end-radius: var(--pel-radio-lg);
  }

  .product-miniature__inner:hover .product-miniature__image {
    transform: scale(1.045);
  }

  .product-miniature__inner:has(*:focus-visible) .product-miniature__top {
    border-end-start-radius: var(--pel-radio-lg);
    border-end-end-radius: var(--pel-radio-lg);
  }
}

/* Vista rápida: pastilla flotante en la esquina, no una barra */
.product-miniature__quickview-button {
  inset-block-start: auto;
  inset-block-end: 0.625rem;
  inset-inline: auto 0.625rem;
  width: auto;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  color: var(--pel-tinta);
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--pel-pastilla);
  box-shadow: var(--pel-sombra-sm);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity var(--pel-medio), transform var(--pel-medio);
}

@media (hover: hover) {
  .product-miniature__inner:hover .product-miniature__quickview-button,
  .product-miniature__inner:has(*:focus-visible) .product-miniature__quickview-button {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-miniature__quickview-touch {
  inset-block-end: 0.625rem;
  inset-inline-end: 0.625rem;
  color: var(--pel-tinta);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  box-shadow: var(--pel-sombra-sm);
}

.product-miniature__bottom {
  gap: 0.375rem;
  padding: 0.875rem 0.125rem 0;
}

.product-miniature__infos { gap: 0.3rem; }

.product-miniature__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--pel-tinta);
}

.product-miniature__title:hover { color: var(--pel-arena-osc); }

.product-miniature__prices { gap: 0.5rem; align-items: baseline; }

.product-miniature__price {
  font-size: var(--pel-txt-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pel-tinta);
}

.product-miniature__regular-price {
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-30);
  text-decoration: line-through;
}

.product-miniature__variants { gap: 0.3rem; }

.product-miniature__actions { margin-block-start: 0.625rem; }

.product-miniature__form { gap: 0.5rem; }

.product-miniature__add,
.product-miniature__details {
  flex-grow: 1;
  min-height: 2.5rem;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  border-radius: var(--pel-radio-sm);
}

/* El botón redondo de "añadir" pasa a barra ancha con texto */
.product-miniature__add.btn-square-icon {
  width: auto;
  min-width: 0;
  gap: 0.4rem;
  padding-inline: 1rem;
  border-radius: var(--pel-radio-sm);
}

.product-miniature__add-text { display: block !important; }

.product-miniature__add .material-icons { font-size: 1.05rem; }

.product-miniature .quantity-button { flex: 0 0 auto; }

.product-miniature .quantity-button input,
.product-miniature .quantity-button .form-control {
  max-width: 2.5rem;
}

.product-miniature .quantity-button .btn,
.product-miniature .quantity-button button,
.product-miniature .quantity-button input {
  min-height: 2.375rem;
}

/* Rejilla de producto: algo más apretada que la de origen */
.layout-full-width .products,
.layout-left-column .products,
.layout-right-column .products,
.layout-both-columns .products {
  gap: 1.5rem 1.25rem;
}

@media (min-width: 1200px) {
  .layout-full-width .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.products__selection { margin-block-end: var(--pel-e4); }
.products__count { font-size: var(--pel-txt-sm); color: var(--pel-tinta-50); }
.products__pagination { margin-block: var(--pel-e6) 0; }

.module-products__buttons { margin-block-start: var(--pel-e5); }


/* ===================================================================
   15 · CATEGORÍA Y FILTROS
   =================================================================== */

.category__header,
.category-header {
  margin-block-end: var(--pel-e5);
}

.category__description,
.category-header__description {
  max-width: var(--pel-ancho-texto);
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
}

.category__cover img,
.category-header__image img {
  border-radius: var(--pel-radio-lg);
}

.subcategory__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pel-e2);
  margin-block-end: var(--pel-e5);
  padding: 0;
  list-style: none;
}

.subcategory__item a,
.subcategory__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
  border: 1px solid transparent;
  border-radius: var(--pel-pastilla);
  transition: background-color var(--pel-rapido), border-color var(--pel-rapido);
}

.subcategory__item a:hover,
.subcategory__link:hover {
  background-color: var(--pel-crema);
  border-color: var(--pel-arena);
}

/* Columna de filtros */
#left-column,
#right-column {
  font-size: var(--pel-txt-md);
}

#search_filters,
.search-filters-modules,
.block-categories,
.category-tree {
  padding: var(--pel-e4);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}

#search_filters .h6,
#search_filters .facet__title,
.category-tree__title-link {
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-tinta-50);
  text-transform: uppercase;
}

.category-tree__item-link {
  padding-block: 0.3rem;
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
}

.category-tree__item-link:hover { color: var(--pel-arena-osc); }

.active-filters__list { gap: var(--pel-e2); }

.active-filters__list .badge,
.active-filters .badge {
  height: auto;
  padding: 0.35rem 0.75rem;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pel-tinta);
  background-color: var(--pel-crema);
  border-radius: var(--pel-pastilla);
  text-transform: none;
}


/* ===================================================================
   16 · FICHA DE PRODUCTO
   =================================================================== */

.page-product .product__carousel,
.page-product .product__images {
  border-radius: var(--pel-radio-lg);
}

.page-product .product__carousel {
  background-color: var(--pel-crema-cl);
}

.page-product .product__thumbnail-image {
  border-radius: var(--pel-radio-sm);
  background-color: var(--pel-crema-cl);
}

.page-product .product__thumbnail.active .product__thumbnail-image {
  outline: 2px solid var(--pel-tinta);
  outline-offset: -2px;
}

.page-product .product__thumbnails { margin-block-start: 0.75rem; }
.page-product .product__thumbnails-list { gap: 0.625rem; }

.page-product .product__manufacturer {
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-arena-osc);
  text-transform: uppercase;
}

.page-product .product__name,
.page-product h1.product__name {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.page-product .product__price {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pel-tinta);
}

.page-product .product__regular-price {
  font-size: 1.05rem;
  color: var(--pel-tinta-30);
}

.page-product .product__discount-percentage,
.page-product .product__discount-amount {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: 0.5rem;
  font-size: var(--pel-txt-sm);
  font-weight: 600;
  color: var(--pel-error);
  background-color: var(--pel-error-fondo);
  border-radius: 6px;
}

.page-product .product__tax-infos,
.page-product .product__delivery-infos,
.page-product .product__unit-price {
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
}

.page-product .product__description-short {
  max-width: var(--pel-ancho-texto);
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
}

/* Espaciados de la columna de compra: compactos */
.page-product .product__name,
.page-product .product__manufacturer,
.page-product .product__prices,
.page-product .product__description-short,
.page-product .product__actions,
.page-product .product__variants,
.page-product .product__availability,
.page-product .product__add-to-cart-container,
.page-product .product__minimal-quantity,
.page-product .product__customization,
.page-product .product__pack,
.page-product .product__discounts {
  margin-block-end: var(--pel-e4);
}

@media (min-width: 1200px) {
  .page-product .product__name,
  .page-product .product__manufacturer,
  .page-product .product__prices,
  .page-product .product__description-short,
  .page-product .product__actions,
  .page-product .product__variants,
  .page-product .product__availability,
  .page-product .product__add-to-cart-container,
  .page-product .product__minimal-quantity,
  .page-product .product__customization,
  .page-product .product__pack,
  .page-product .product__discounts {
    margin-block-end: var(--pel-e5);
  }
}

.page-product .product__actions-qty-add { gap: 0.75rem; }

.page-product .product__add-to-cart-button {
  min-height: 3.25rem;
  font-size: var(--pel-txt-lg);
  font-weight: 500;
  border-radius: var(--pel-radio);
}

.page-product .product__availability-status {
  font-size: var(--pel-txt-sm);
  font-weight: 500;
}

.page-product .product__availability-status .material-icons { font-size: 1.05rem; }

/* Variantes de color / talla */
.product-variant__list,
.product-variants { gap: 0.5rem; }

.product-variant__color,
.color-variant,
.product-variants .color {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--pel-linea-osc);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--pel-blanco);
  transition: box-shadow var(--pel-rapido), border-color var(--pel-rapido);
}

.product-variant__color:hover,
.color-variant:hover,
.product-variants .color:hover,
.product-variant__color.active,
.color-variant.active,
.product-variants .color.active {
  border-color: var(--pel-tinta);
}

/* Bloque de garantías junto al producto */
.blockreassurance--product .blockreassurance__item,
.blockreassurance--product li {
  padding-block: 0.5rem;
  font-size: var(--pel-txt-sm);
}

.blockreassurance--product {
  padding: var(--pel-e4);
  background-color: var(--pel-crema-cl);
  border: 0;
  border-radius: var(--pel-radio-lg);
}

/* La columna de compra acompaña al scroll, como en Shopify */
@media (min-width: 992px) {
  .page-product .product__container { align-items: start; }

  .page-product .product__right {
    position: sticky;
    top: 6.5rem;
  }
}

/* Acordeón de la ficha */
.page-product .product__accordion .accordion-item {
  border: 0;
  border-top: 1px solid var(--pel-linea);
}

.page-product .product__accordion .accordion-button {
  padding-inline: 0;
  font-size: var(--pel-txt-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-product .product__accordion .accordion-body { padding-inline: 0; }

/* Pestañas inferiores */
.page-product .product__bottom { margin-block-start: var(--pel-seccion-sm); }

.page-product .product__description,
.page-product .rich-text {
  max-width: var(--pel-ancho-texto);
  font-size: var(--pel-txt-md);
  line-height: 1.7;
  color: var(--pel-tinta-70);
}

.rich-text h2, .rich-text h3, .rich-text h4 { color: var(--pel-tinta); }

.product__accessories,
.page-product .product__accessories { margin-block-start: var(--pel-seccion-sm); }


/* ===================================================================
   17 · CARRITO Y CAJA
   =================================================================== */

.cart-grid__aside-wrapper,
.checkout-grid__aside-wrapper {
  padding: var(--pel-e5);
  background-color: var(--pel-crema-cl);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}

.cart-summary__line {
  display: flex;
  justify-content: space-between;
  gap: var(--pel-e3);
  padding-block: 0.35rem;
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
}

.cart-summary__line--bold,
.cart-summary__total {
  font-size: var(--pel-txt-lg);
  font-weight: 600;
  color: var(--pel-tinta);
}

.cart-summary__total {
  padding-block-start: var(--pel-e3);
  margin-block-start: var(--pel-e2);
  border-top: 1px solid var(--pel-linea-osc);
}

.cart-summary__voucher .badge,
.cart-voucher__highlight { color: var(--pel-ok); background-color: var(--pel-ok-fondo); }

.cart__item,
.product-line,
.cart-summary-product {
  padding-block: var(--pel-e4);
  border-bottom: 1px solid var(--pel-linea);
}

.cart__item:last-child,
.product-line:last-child { border-bottom: 0; }

.cart-summary-product__img,
.cart-summary-product__image img,
.product-line__image img {
  border-radius: var(--pel-radio-sm);
  background-color: var(--pel-crema-cl);
}

.cart-summary-product__attributes,
.product-line__attributes {
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-50);
}

.checkout-steps__btn,
.checkout-steps__step-title {
  font-size: var(--pel-txt-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.checkout-steps .card,
.checkout-steps__item {
  border-radius: var(--pel-radio-lg);
}

.delivery-option,
.payment-option {
  padding: var(--pel-e4);
  margin-block-end: var(--pel-e3);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio);
  transition: border-color var(--pel-rapido), background-color var(--pel-rapido);
}

.delivery-option:hover,
.payment-option:hover {
  border-color: var(--pel-arena);
  background-color: var(--pel-crema-cl);
}

.delivery-option:has(input:checked),
.payment-option:has(input:checked) {
  border-color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
}

.address-card {
  padding: var(--pel-e4);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio);
}

.address-card:has(input:checked) {
  border-color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
}

.final-summary,
.order-confirmation {
  border-radius: var(--pel-radio-lg);
}


/* ===================================================================
   18 · CUENTA DE CLIENTE
   =================================================================== */

.account-menu__link {
  display: flex;
  gap: var(--pel-e2);
  align-items: center;
  padding: 0.6rem 0.85rem;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  color: var(--pel-tinta-70);
  border-radius: var(--pel-radio-sm);
  transition: background-color var(--pel-rapido), color var(--pel-rapido);
}

.account-menu__link:hover,
.account-menu__link.active {
  color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
}

.account-menu--main .account-menu__link {
  padding: var(--pel-e5);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}

.account-menu--main .account-menu__link:hover {
  border-color: var(--pel-arena);
  background-color: var(--pel-crema-cl);
}

.login { border-radius: var(--pel-radio-lg); }

.password-requirements { font-size: var(--pel-txt-sm); }


/* ===================================================================
   19 · MÓDULOS
   =================================================================== */

/* Garantías */
.blockreassurance {
  background-color: transparent;
  border: 0;
}

.blockreassurance--horizontal,
.blockreassurance--light {
  padding-block: var(--pel-e4);
  background-color: var(--pel-crema-cl);
  border-block: 1px solid var(--pel-linea);
}

.blockreassurance .blockreassurance__item,
.blockreassurance li {
  display: flex;
  gap: var(--pel-e3);
  align-items: center;
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-70);
}

.blockreassurance .blockreassurance__title,
.blockreassurance .block-title {
  font-size: var(--pel-txt-md);
  font-weight: 600;
  color: var(--pel-tinta);
}

.blockreassurance img,
.blockreassurance svg { width: 1.5rem; height: 1.5rem; }

/* Carrusel de la portada */
.carousel-item img { border-radius: var(--pel-radio-lg); }

#index .carousel,
.ps-imageslider,
.homeslider { border-radius: var(--pel-radio-lg); overflow: hidden; }

.carousel-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.25rem;
  background-color: var(--pel-blanco);
  border: 0;
  border-radius: 50%;
  opacity: 0.5;
}

.carousel-indicators .active { opacity: 1; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(255, 255, 255, 0.9);
  background-size: 45%;
  border-radius: 50%;
  box-shadow: var(--pel-sombra-sm);
}

/* Texto libre de la portada */
#custom-text,
.custom-text {
  padding: var(--pel-seccion-sm) var(--pel-e5);
  background-color: var(--pel-crema-cl);
  border-radius: var(--pel-radio-xl);
  text-align: center;
}

#custom-text p,
.custom-text p {
  max-width: var(--pel-ancho-texto);
  margin-inline: auto;
  color: var(--pel-tinta-70);
}

/* Newsletter */
.block_newsletter,
.ps-emailsubscription {
  padding: var(--pel-e5);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}

/* Opiniones */
.comments-note,
.grade-stars,
.star-content { color: var(--pel-arena-osc); }

.product-comment-list-item {
  padding: var(--pel-e4);
  margin-block-end: var(--pel-e3);
  background-color: var(--pel-crema-cl);
  border-radius: var(--pel-radio);
}

/* Marcas y proveedores */
.brand,
.supplier {
  padding: var(--pel-e4);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
}


/* ===================================================================
   20 · PIE DE PÁGINA
   Hummingbird lo trae oscuro. Aquí pasa a crema, más de marca.
   =================================================================== */

.footer__main {
  padding-block: var(--pel-seccion) var(--pel-e5);
  margin-block-start: var(--pel-seccion);
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-70);
  background: var(--pel-crema-cl);
  border-top: 1px solid var(--pel-linea);
}

.footer__before {
  padding-block: var(--pel-e5);
  background-color: var(--pel-blanco);
}

.footer-block { margin-block-end: var(--pel-e5); }

.footer-block__title,
.footer-block__title a {
  margin-block-end: var(--pel-e3);
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-tinta);
  text-transform: uppercase;
}

.footer-block a,
.footer__main a {
  color: var(--pel-tinta-70);
}

.footer-block a:hover,
.footer__main a:hover {
  color: var(--pel-arena-osc);
}

.footer-block__list a { padding-block: 0.2rem; font-size: var(--pel-txt-md); }

.footer__main .h3,
.footer__main h3 {
  font-size: var(--pel-txt-xs);
  font-weight: 600;
  letter-spacing: var(--pel-versal);
  color: var(--pel-tinta);
  text-transform: uppercase;
}

/* Redes sociales */
.block-social ul,
.ps-socialfollow ul {
  display: flex;
  gap: var(--pel-e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-social li,
.ps-socialfollow li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  background-color: var(--pel-blanco) !important;
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-pastilla);
  transition: border-color var(--pel-rapido), transform var(--pel-rapido);
}

.block-social li:hover,
.ps-socialfollow li:hover {
  border-color: var(--pel-arena);
  transform: translateY(-2px);
}

/* Idioma y moneda: bajaron aquí desde la cabecera */
.footer__main .language-selector,
.footer__main .currency-selector,
.footer__main #_desktop_ps_languageselector,
.footer__main #_desktop_ps_currencyselector {
  margin-block-end: var(--pel-e3);
}

.footer__main .language-selector .form-select,
.footer__main .currency-selector .form-select,
.footer__main .language-selector .dropdown-toggle,
.footer__main .currency-selector .dropdown-toggle {
  width: auto;
  min-width: 9rem;
  min-height: 2.375rem;
  padding-block: 0.4rem;
  font-size: var(--pel-txt-md);
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea-osc);
  border-radius: var(--pel-radio-sm);
}

.copyright {
  padding-block-start: var(--pel-e4);
  margin-block-start: var(--pel-e5);
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-30);
  border-top: 1px solid var(--pel-linea);
}

.copyright a { color: var(--pel-tinta-50); }

/* Datos de contacto del pie */
.ps-contactinfo__item,
.block-contact li {
  display: flex;
  gap: var(--pel-e2);
  align-items: flex-start;
  margin-block-end: var(--pel-e2);
  font-size: var(--pel-txt-md);
}


/* ===================================================================
   21 · DETALLES FINALES
   =================================================================== */

.back-to-top-link {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--pel-pastilla);
  box-shadow: var(--pel-sombra);
}

.skip-link { border-radius: var(--pel-radio-sm); }

.page-loader__spinner,
.progress-ring { color: var(--pel-arena-osc); }

.toast {
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
  box-shadow: var(--pel-sombra-lg);
}

/* Imágenes: nunca deformadas */
img { max-width: 100%; height: auto; }

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================================
   22 · CABECERA ISLA
   Al bajar, la cabecera se despega de los bordes y se redondea. Vuelve a
   su sitio al llegar arriba. La clase la pone assets/js/peludamente.js.
   =================================================================== */

.header {
  --pel-isla-margen: 0px;
  --pel-isla-radio: 0px;

  --pel-isla-fondo: 0px;

  position: sticky;
  inset-block-start: 0;
  /* Hummingbird le pone width:100%. Con ancho fijo los márgenes no encogen la
     caja y la isla se salía por la derecha. */
  width: auto;
  margin-inline: var(--pel-isla-margen);
  padding-block: var(--pel-isla-fondo);
  border-radius: var(--pel-isla-radio);
  transition:
    margin-inline var(--pel-isla-tiempo) var(--pel-isla-curva),
    padding-block var(--pel-isla-tiempo) var(--pel-isla-curva),
    border-radius var(--pel-isla-tiempo) var(--pel-isla-curva),
    box-shadow var(--pel-isla-tiempo) var(--pel-isla-curva),
    inset-block-start var(--pel-isla-tiempo) var(--pel-isla-curva),
    background-color var(--pel-isla-tiempo) var(--pel-isla-curva);
}

.header.is-compact {
  /* El margen de la isla es exactamente el hueco que ya deja el contenedor,
     así el borde de la isla cae sobre el borde del contenido y no se mueve
     nada de sitio. En pantallas donde el contenedor no llega a su ancho
     máximo se usa un margen pequeño y se le descuenta al gutter, más abajo. */
  --pel-isla-margen: max(0.75rem, calc((100vw - var(--pel-ancho)) / 2));
  --pel-isla-radio: 1.35rem;
  --pel-isla-fondo: 10px;

  inset-block-start: 0.5rem;
  border-bottom-color: transparent;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 12px 38px rgba(120, 95, 70, 0.17), 0 1px 0 rgba(237, 230, 223, 0.9) inset;
}

@media (min-width: 992px) {
  .header.is-compact {
    --pel-isla-radio: 1.65rem;
  }
}

/* Mientras el contenedor no toca su ancho máximo, el margen de la isla sí
   estrecharía el contenido. Se compensa quitándole al gutter lo mismo que
   se le ha dado al margen, y el contenido acaba exactamente donde estaba. */
@media (max-width: 1343.98px) {
  .header.is-compact .header-banner__container,
  .header.is-compact .header-bottom__container,
  .header.is-compact .header-catbar__container,
  .header.is-compact .header-topbar__container {
    --bs-gutter-x: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .header.is-compact .header-banner__container,
  .header.is-compact .header-bottom__container,
  .header.is-compact .header-catbar__container,
  .header.is-compact .header-topbar__container {
    --bs-gutter-x: 0;
  }
}

/* En isla, la barra de categorías se queda sin fondo ni filete: su blanco
   sólido pintaba por encima de las esquinas redondeadas de abajo. */
.header.is-compact .header-catbar {
  background-color: transparent;
  border-top-color: transparent;
}

/* El submenú del menú principal se recoge dentro de la isla */
.header.is-compact .submenu {
  inset-inline: 0;
  border-top: 1px solid var(--pel-linea);
  border-end-start-radius: var(--pel-isla-radio);
  border-end-end-radius: var(--pel-isla-radio);
  overflow: hidden;
}

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


/* ===================================================================
   23 · CARRITO
   =================================================================== */

/* --- La burbuja, centrada sobre el icono --- */
.header-block__icon-wrap {
  position: relative;
  margin-inline-end: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.header-block__badge,
.header-block__icon-wrap .header-block__badge {
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-end: -0.55rem;
  inset-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ojo con box-sizing: en content-box el min-width no contaba relleno ni
     borde, y la burbuja acababa siendo más grande que el propio icono. */
  box-sizing: border-box;
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding-inline: 0.2rem;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pel-blanco);
  background-color: var(--pel-arena-osc);
  border: 2px solid var(--pel-blanco);
  border-radius: var(--pel-pastilla);
  pointer-events: none;
}

@media (min-width: 768px) {
  .header-block__icon-wrap .header-block__badge {
    position: absolute;
    box-sizing: border-box;
    min-width: 1.0625rem;
    height: 1.0625rem;
    font-size: 0.5625rem;
    color: var(--pel-blanco);
    background-color: var(--pel-arena-osc);
  }
}

/* --- Iconos de línea (templates/components/pel-icon.tpl) --- */
.pel-icono {
  display: block;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
}

.header-block__action-btn .pel-icono { width: 1.3125rem; height: 1.3125rem; }
.pel-minicart__close .pel-icono { width: 1rem; height: 1rem; }
.ps-searchbar__magnifier .pel-icono { width: 1.125rem; height: 1.125rem; }

.ps-searchbar__magnifier {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
}

/* Latido al añadir un producto */
@keyframes pel-latido {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.header-block__badge.pel-late { animation: pel-latido 0.5s cubic-bezier(0.22, 0.7, 0.3, 1); }

/* --- La foto que vuela hasta el carrito --- */
.pel-vuelo {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  border-radius: 16px;
  box-shadow: var(--pel-sombra);
  will-change: transform, opacity;
}

/* --- El modal central de Hummingbird ya no se usa ---
   Se esconde solo si peludamente.js está funcionando (pone .pel-js en el
   <html>). Sin JS, el modal de siempre sigue siendo el respaldo. */
.pel-js #blockcart-modal { display: none !important; }


/* ===================================================================
   24 · MINICARRITO
   Panel colgado del icono del carrito. Sustituye al modal de media
   pantalla, tanto al añadir un producto como al pinchar en el icono.
   =================================================================== */

.pel-minicart {
  /* Las tres medidas las calcula peludamente.js con la posición real del icono
     del carrito, así que el panel cuelga siempre de él: con la cabecera normal
     y con la cabecera convertida en isla. */
  --pel-panel-derecha: 1.5rem;
  --pel-panel-arriba: 7rem;
  --pel-flecha-derecha: 1.35rem;

  position: fixed;
  inset-block-start: var(--pel-panel-arriba);
  inset-inline-end: var(--pel-panel-derecha);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100vh - var(--pel-panel-arriba) - 1.5rem));
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-xl);
  box-shadow: var(--pel-sombra-lg);
  opacity: 0;
  transform: translateY(-0.5rem) scale(0.98);
  transform-origin: top right;
  transition:
    opacity var(--pel-rapido),
    transform var(--pel-medio);
}

.pel-minicart.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pel-minicart[hidden] { display: none; }

.pel-minicart__arrow {
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-end: var(--pel-flecha-derecha);
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--pel-blanco);
  border-inline-start: 1px solid var(--pel-linea);
  border-block-start: 1px solid var(--pel-linea);
  border-start-start-radius: 3px;
  transform: rotate(45deg);
}

.pel-minicart__head {
  display: flex;
  gap: var(--pel-e3);
  align-items: center;
  justify-content: space-between;
  padding: var(--pel-e4) var(--pel-e4) var(--pel-e3);
  border-bottom: 1px solid var(--pel-linea);
}

.pel-minicart__title {
  font-size: var(--pel-txt-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pel-tinta);
}

.pel-minicart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--pel-tinta-50);
  background: transparent;
  border: 0;
  border-radius: var(--pel-pastilla);
  cursor: pointer;
  transition: background-color var(--pel-rapido), color var(--pel-rapido);
}

.pel-minicart__close:hover {
  color: var(--pel-tinta);
  background-color: var(--pel-crema-cl);
}

.pel-minicart__close .material-icons { font-size: 1.1rem; }

.pel-minicart__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--pel-e2) var(--pel-e4);
  overscroll-behavior: contain;
}

.pel-minicart__line {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--pel-e3);
  align-items: center;
  padding-block: var(--pel-e3);
  border-bottom: 1px solid var(--pel-linea);
}

.pel-minicart__line:last-child { border-bottom: 0; }

.pel-minicart__thumb {
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  background-color: var(--pel-crema-cl);
  border-radius: var(--pel-radio-sm);
}

.pel-minicart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pel-minicart__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pel-minicart__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--pel-txt-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--pel-tinta);
}

.pel-minicart__variant,
.pel-minicart__qty {
  font-size: var(--pel-txt-xs);
  color: var(--pel-tinta-50);
}

.pel-minicart__price {
  font-size: var(--pel-txt-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--pel-tinta);
  font-variant-numeric: tabular-nums;
}

.pel-minicart__empty {
  padding-block: var(--pel-e6);
  font-size: var(--pel-txt-md);
  color: var(--pel-tinta-50);
  text-align: center;
}

.pel-minicart__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--pel-e7);
}

.pel-minicart__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--pel-linea-osc);
  border-top-color: var(--pel-arena-osc);
  border-radius: 50%;
  animation: pel-giro 0.7s linear infinite;
}

@keyframes pel-giro { to { transform: rotate(1turn); } }

.pel-minicart__foot {
  flex: 0 0 auto;
  padding: var(--pel-e3) var(--pel-e4) var(--pel-e4);
  background-color: var(--pel-crema-cl);
  border-top: 1px solid var(--pel-linea);
  border-end-start-radius: var(--pel-radio-xl);
  border-end-end-radius: var(--pel-radio-xl);
}

.pel-minicart__total-line {
  display: flex;
  gap: var(--pel-e3);
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.15rem;
  font-size: var(--pel-txt-sm);
  color: var(--pel-tinta-70);
}

.pel-minicart__total-line--bold {
  padding-block-start: var(--pel-e2);
  margin-block-start: var(--pel-e2);
  font-size: var(--pel-txt-md);
  font-weight: 600;
  color: var(--pel-tinta);
  border-top: 1px solid var(--pel-linea-osc);
}

.pel-minicart__total-line span:last-child { font-variant-numeric: tabular-nums; }

.pel-minicart__actions {
  display: grid;
  gap: var(--pel-e2);
  margin-block-start: var(--pel-e3);
}

.pel-minicart__actions .btn {
  width: 100%;
  min-height: 2.625rem;
  font-size: var(--pel-txt-md);
}

.pel-minicart.is-empty .pel-minicart__actions .btn-primary { display: none; }

@media (max-width: 575.98px) {
  .pel-minicart {
    inset-inline: 0.75rem;
    width: auto;
  }

  .pel-minicart__arrow { display: none; }
}


/* ===================================================================
   25 · DESPLEGABLE DEL BUSCADOR
   Ficha en pequeño: foto, nombre, resumen y precio.
   =================================================================== */

.ps-searchbar__dropdown {
  /* Mismo ancho que la barra: se estira de borde a borde de .ps-searchbar */
  inset-block-start: calc(100% + 0.5rem);
  inset-inline: 0;
  width: auto;
  max-width: none;
  overflow: hidden;
  background-color: var(--pel-blanco);
  border: 1px solid var(--pel-linea);
  border-radius: var(--pel-radio-lg);
  box-shadow: var(--pel-sombra-lg);
}

.ps-searchbar__results {
  gap: 0.125rem;
  max-height: min(26rem, 60vh);
  padding: 0.375rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Rejilla de dos columnas y dos filas: la foto ocupa las dos filas, y el
   nombre y la ficha (resumen + precio) se colocan en la segunda columna.
   Sin esto, el bloque que añade el JS caía debajo de la foto. */
.ps-searchbar__result-link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: var(--pel-e3);
  row-gap: 0;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--pel-radio);
  transition: background-color var(--pel-rapido);
}

.ps-searchbar__result-link .ps-searchbar__result-image { grid-area: 1 / 1 / -1 / 2; align-self: center; }
.ps-searchbar__result-link .ps-searchbar__result-name { grid-column: 2; }
.ps-searchbar__result-link .ps-searchbar__result-meta { grid-column: 2; }

.ps-searchbar__result-link:hover,
.ps-searchbar__result-link:focus,
.ps-searchbar__result-link[aria-selected="true"] {
  background-color: var(--pel-crema-cl);
}

.ps-searchbar__result-image {
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--pel-crema-cl);
  border-radius: var(--pel-radio-sm);
}

.ps-searchbar__result-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: var(--pel-txt-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--pel-tinta);
}

.ps-searchbar__result-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  margin-block-start: 0.15rem;
}

.ps-searchbar__result-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--pel-txt-sm);
  line-height: 1.35;
  color: var(--pel-tinta-50);
}

.ps-searchbar__result-prices {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  white-space: nowrap;
}

.ps-searchbar__result-price {
  font-size: var(--pel-txt-sm);
  font-weight: 600;
  color: var(--pel-tinta);
  font-variant-numeric: tabular-nums;
}

.ps-searchbar__result-regular {
  font-size: var(--pel-txt-xs);
  color: var(--pel-tinta-30);
  text-decoration: line-through;
}