/**
 * Mia Secret — tema hijo de Hummingbird.
 * Tokens globales (fuente Roboto, rosa #e68699, texto #472528, contenedor 1400px) van compilados en theme.css
 * desde ~/.claude/projects/miasecret/theme-build/hummingbird-src. Aquí solo estilos de componentes.
 */

:root {
  --ms-pink: #e68699;
  --ms-text: #472528;
}

/* ==========================================================================
   Bloque 1 — Barra superior rosa (prod: .block_top_banner)
   Alto 32px · texto blanco 13px/500 · enlace subrayado · iconos 16px
   ========================================================================== */
.header-top.ms-topbar {
  padding: 2px 0;
  background: var(--ms-pink);
  border-bottom: 0;
  color: #fff;
}

/* prod: la barra es más ancha que el contenedor general (1400px de contenido vs 1370px) */
@media (min-width: 1400px) {
  .ms-topbar > .container-md {
    max-width: 1424px;
  }
}

.ms-topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ms-topbar__left,
.ms-topbar__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ms-topbar__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.3125rem;
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-topbar__icon.material-icons {
  font-size: 16px;
  line-height: 1;
  color: #fff;
}

.header-top.ms-topbar a:not(.dropdown-item),
.header-top.ms-topbar a:not(.dropdown-item):hover,
.header-top.ms-topbar a:not(.dropdown-item):focus {
  color: #fff;
}

.ms-topbar__phone {
  text-decoration: none;
}

.ms-topbar__contact-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-topbar__phone:hover,
.ms-topbar__contact-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.ms-topbar a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Móvil: solo teléfono + contacto, centrado (prod oculta el envío gratis) */
@media (max-width: 767.98px) {
  .ms-topbar__row {
    justify-content: center;
  }

  .ms-topbar__left {
    justify-content: center;
    width: 100%;
  }

  .ms-topbar__text {
    justify-content: center;
    font-size: 12px;
  }
}

/* ==========================================================================
   Bloque 2 — Cabecera: logo izq. + lupa / cuenta / bolsa a la derecha
   Prod: logo 250x67, padding-top 20px, iconos de línea negros, badge rosa.
   Orden visual por CSS (displayTop pinta menú, buscador, cuenta y carrito en la misma fila).
   ========================================================================== */
:root {
  --ms-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E");
  --ms-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.8' r='4.3'/%3E%3Cpath d='M3.8 21.2c0-4.6 3.7-7.6 8.2-7.6s8.2 3 8.2 7.6z'/%3E%3C/svg%3E");
  --ms-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.8h14.4l-1 13.4H5.8z'/%3E%3Cpath d='M8.6 10.2V6.6a3.4 3.4 0 0 1 6.8 0v3.6'/%3E%3C/svg%3E");
}

.header-bottom {
  padding: 20px 0 0;
  border-bottom: 0;
}

.header-bottom__row {
  flex-wrap: wrap;
  align-items: center !important;
  row-gap: 0;
}

/* Orden: [☰ menú <xl] logo · lupa · cuenta · bolsa · [menú ≥xl en fila propia] */
.header-bottom__row > .ps-mainmenu--desktop { order: 0; }
.header-bottom__logo { order: 1; margin-right: auto !important; }
.header-bottom__row > .ms-search-toggle { order: 2; }
.header-bottom__row > #_desktop_ps_customersignin,
.header-bottom__row > #_mobile_ps_customersignin { order: 3; }
.header-bottom__row > #_desktop_ps_shoppingcart,
.header-bottom__row > #_mobile_ps_shoppingcart { order: 4; }

/* Bootstrap .row > * fuerza width:100%: los envoltorios de los módulos de displayTop deben ser "auto" */
.header-bottom__row > #_desktop_ps_customersignin,
.header-bottom__row > #_desktop_ps_shoppingcart,
.header-bottom__row > #_mobile_ps_customersignin,
.header-bottom__row > #_mobile_ps_shoppingcart,
.header-bottom__row > .ms-search-toggle {
  width: auto;
  flex: 0 0 auto;
  padding-right: 0;
  padding-left: 0;
}

/* Prod: centros lupa/cuenta/bolsa ≈ 1331 / 1373 / 1414 (bolsa a ~26px del borde del contenedor) */
@media (min-width: 768px) {
  .header-bottom__row > #_desktop_ps_shoppingcart {
    padding-right: 24px;
  }
}

.header-bottom__row > #_desktop_ps_customersignin:empty,
.header-bottom__row > #_desktop_ps_shoppingcart:empty {
  display: none;
}

.header-bottom__logo .logo,
.header-bottom__logo img,
.header-bottom .navbar-brand .logo {
  display: block;
  width: 250px;
  max-width: 100%;
  max-height: none;
  height: auto;
}

/* Iconos: sin textos visibles ("Iniciar sesión", "Carrito"), trazo fino negro.
   Las utilidades d-md-* llevan !important dentro de @layer (ganan a !important sin capa),
   así que se ocultan con la técnica visually-hidden: siguen disponibles para lectores de pantalla. */
.header-bottom .header-block__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Empuja los iconos a la derecha (me-md-0 del logo es una utilidad !important en capa) */
.header-bottom__row > .ms-search-toggle {
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .header-bottom__row > .ms-search-toggle {
    margin-left: 0;
  }
}

.header-bottom__row > .ms-search-toggle,
.header-bottom__row > #_desktop_ps_customersignin,
.header-bottom__row > #_desktop_ps_shoppingcart,
.header-bottom__row > #_mobile_ps_customersignin,
.header-bottom__row > #_mobile_ps_shoppingcart {
  display: flex;
  align-items: center;
  align-self: center;
}

.header-bottom .ps-customersignin,
.header-bottom .ps-shoppingcart,
.header-bottom .header-block {
  display: flex;
  align-items: center;
}

.header-bottom .header-block__action-btn {
  padding: 8px;
  color: #000;
}

.header-bottom .header-block__action-btn:hover,
.header-bottom .header-block__action-btn:focus-visible,
.header-bottom .header-block--active .header-block__icon {
  color: #000;
}

.header-bottom .header-block__icon.material-icons {
  width: 26px;
  height: 26px;
  font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--ms-icon-user) center / contain no-repeat;
  mask: var(--ms-icon-user) center / contain no-repeat;
}

.header-bottom .ms-search-toggle .header-block__icon.material-icons {
  width: 22px;
  height: 22px;
  -webkit-mask-image: var(--ms-icon-search);
  mask-image: var(--ms-icon-search);
}

.header-bottom .ps-shoppingcart .header-block__icon.material-icons,
.header-bottom #_mobile_ps_shoppingcart .header-block__icon.material-icons {
  -webkit-mask-image: var(--ms-icon-bag);
  mask-image: var(--ms-icon-bag);
}

.header-bottom .header-block__action-btn:hover .header-block__icon {
  opacity: 0.7;
}

/* Badge del carrito: círculo rosa, número blanco; oculto con carrito vacío (como prod) */
.header-bottom .header-block__badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 50rem;
  background: var(--ms-pink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.header-bottom .blockcart.inactive .header-block__badge {
  display: none;
}

/* Botón menú móvil: "☰ Menú" */
.ps-mainmenu__mobile-toggle .menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  text-decoration: none;
}

.ms-menu-toggle__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

/* Buscador desplegable (offcanvas superior): resultados a todo el ancho del campo */
.ps-searchbar__offcanvas .offcanvas-header {
  gap: 1rem;
  padding-block: 1.25rem;
}

.ps-searchbar__offcanvas .ps-searchbar {
  position: relative;
}

.ps-searchbar__offcanvas .ps-searchbar__dropdown {
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ≥xl: el menú pasa a su propia fila, a todo el ancho (estilo del menú: bloque 3) */
@media (min-width: 1200px) {
  .header-bottom__row > .ps-mainmenu--desktop {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* <md: fila única  ☰ Menú · logo · lupa · cuenta · bolsa  (prod: 55px de alto, logo 119px) */
@media (max-width: 767.98px) {
  .header-bottom {
    padding: 5px 0;
  }

  .header-bottom__row {
    flex-wrap: nowrap;
    --bs-gutter-x: 0.25rem;
  }

  .header-bottom__logo {
    margin-right: auto !important;
  }

  .header-bottom__logo .logo,
  .header-bottom__logo img,
  .header-bottom .navbar-brand .logo {
    width: 119px;
  }

  .header-bottom .header-block__action-btn {
    padding: 4px;
  }

  .header-bottom .header-block__icon.material-icons {
    width: 26px;
    height: 26px;
  }

  .header-bottom .ms-search-toggle .header-block__icon.material-icons {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   Bloque 3 — Menú principal (ps_mainmenu). Se conserva el JS de Hummingbird
   (hover, teclado, panel de subcategorías); solo cambia el aspecto, como prod:
   fila centrada, MAYÚSCULAS 14px/400 #472528, alto 50px, chevron pequeño;
   desplegable bajo la pestaña, 340px, borde superior rosa 3px, items con línea rosa.
   ========================================================================== */
@media (min-width: 1200px) {
  .ps-mainmenu--desktop .ps-mainmenu__desktop {
    width: 100%;
  }

  .ps-mainmenu--desktop .ps-mainmenu__tree {
    justify-content: center;
    gap: 0;
  }

  .ps-mainmenu--desktop .ps-mainmenu__tree > li {
    position: relative;
  }

  .ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
    padding: 0 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 50px;
    color: var(--ms-text);
    text-transform: uppercase;
  }

  .ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link:has(+ .ps-mainmenu__tree-dropdown-toggle),
  .ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper:has(.ps-mainmenu__tree-dropdown-toggle) .ps-mainmenu__tree-link {
    padding-right: 2px;
  }

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

  .ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
    padding: 0 15px 0 0;
    color: var(--ms-text);
  }

  .ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle::after {
    font-size: 16px;
  }

  /* Desplegable bajo la pestaña (en HB es un panel a todo el ancho) */
  /* HB calcula un top en línea para su panel a todo el ancho: aquí va pegado a la pestaña */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li .submenu {
    top: 100% !important;
    right: auto;
    left: 0;
    width: max-content;
    min-width: 340px;
    border-top: 3px solid var(--ms-pink);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  /* Últimas pestañas: el desplegable se abre hacia la izquierda para no salirse de la pantalla */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li:nth-last-child(-n+4) .submenu {
    right: 0;
    left: auto;
  }

  .ps-mainmenu--desktop .submenu > .container {
    width: auto;
    max-width: none;
    padding: 0;
  }

  .ps-mainmenu--desktop .submenu__row {
    flex-wrap: nowrap;
    margin: 0;
    --bs-gutter-x: 0;
  }

  .ps-mainmenu--desktop .submenu__left {
    flex: 0 0 340px;
    width: 340px;
    max-width: none;
    gap: 0;
    padding: 20px 30px 30px;
    border-right: 0;
  }

  .ps-mainmenu--desktop .submenu__left-item,
  .ps-mainmenu--desktop .submenu__left-item.active,
  .ps-mainmenu--desktop .submenu__left-item:hover,
  .ps-mainmenu--desktop .submenu__left-item:focus {
    padding: 17px 0 9px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ms-text);
    text-transform: uppercase;
    background: transparent;
    border-bottom: 1px solid var(--ms-pink);
    border-radius: 0;
  }

  .ps-mainmenu--desktop .submenu__left-item:hover,
  .ps-mainmenu--desktop .submenu__left-item.active {
    color: #b4546b;
  }

  /* Columna de subcategorías (nietas): solo si existen, en lista de una columna */
  .ps-mainmenu--desktop .submenu:not(:has(.submenu__right .menu-item)) .submenu__right {
    display: none;
  }

  .ps-mainmenu--desktop .submenu__right {
    flex: 0 0 300px;
    width: 300px;
    max-width: none;
    padding: 20px 30px 30px;
    background: #fbf5f6;
  }

  .ps-mainmenu--desktop .submenu__right-items {
    grid-template-columns: 1fr !important;
    row-gap: 0;
  }

  .ps-mainmenu--desktop .submenu__right-items .menu-item {
    padding: 10px 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--ms-text);
  }

  .ps-mainmenu--desktop .submenu__right-items .menu-item:hover {
    color: #b4546b;
  }

  .ps-mainmenu--desktop .submenu__right-items .menu-item__group-main-item {
    margin-bottom: 0;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}

/* ==========================================================================
   Bloque 4 — Slider home (ps_imageslider). Prod: encajado a 1340px (x=85),
   30px bajo el menú, chevrons negros finos sin caja, sin indicadores, autoplay 5s en bucle.
   Móvil: 360px de ancho (x=15), pegado a la cabecera.
   ========================================================================== */
:root {
  --ms-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 34' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 2 2 17l14 15'/%3E%3C/svg%3E");
  --ms-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 34' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 14 15L2 32'/%3E%3C/svg%3E");
}

.ps-imageslider {
  width: 100%;
  max-width: 1370px;
  margin: 30px auto 0;
  padding: 0 15px;
}

/* HB fija 320px (<lg) / 240px (<md) con object-fit: cover y recorta el texto de los banners:
   aquí la imagen se muestra entera y a todo el ancho, como prod (1300x406 → 1340x418 / 360x112) */
.ps-imageslider .ps-imageslider__figure {
  height: auto;
  margin: 0;
}

.ps-imageslider .ps-imageslider__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

.ps-imageslider .carousel-indicators {
  display: none;
}

.ps-imageslider .carousel-control-prev,
.ps-imageslider .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 35px;
  height: 68px;
  padding: 0;
  background: none;
  border: 0;
  opacity: 1;
  transform: translateY(-50%);
}

.ps-imageslider .carousel-control-prev {
  left: 20px;
}

.ps-imageslider .carousel-control-next {
  right: 20px;
}

.ps-imageslider .carousel-control-prev:hover,
.ps-imageslider .carousel-control-next:hover {
  opacity: 0.6;
}

.ps-imageslider .carousel-control-prev-icon,
.ps-imageslider .carousel-control-next-icon {
  width: 18px;
  height: 34px;
  background-image: none;
  background-color: #000;
  -webkit-mask: var(--ms-chevron-left) center / contain no-repeat;
  mask: var(--ms-chevron-left) center / contain no-repeat;
}

.ps-imageslider .carousel-control-next-icon {
  -webkit-mask-image: var(--ms-chevron-right);
  mask-image: var(--ms-chevron-right);
}

.ps-imageslider .carousel-control-prev-icon::before,
.ps-imageslider .carousel-control-next-icon::before {
  content: none;
  display: none;
}

@media (max-width: 767.98px) {
  .ps-imageslider {
    margin-top: 0;
  }

  .ps-imageslider .carousel-control-prev,
  .ps-imageslider .carousel-control-next {
    width: 30px;
    height: 60px;
  }

  .ps-imageslider .carousel-control-prev-icon,
  .ps-imageslider .carousel-control-next-icon {
    width: 12px;
    height: 24px;
  }
}

/* ==========================================================================
   Bloque 5 — Home bajo el slider + tarjetas de producto
   Prod: textos 16px/300/28px · H1 rosa 32px/400 centrado · títulos de sección rosa 28px/400 centrados
   (margen 40/20) · botón "ver todos" fondo #482528, blanco 15px subrayado, 8px 20px, radio 5px ·
   contenido a 1340px como el slider · tarjetas: borde 1px #ececec, 20px de hueco, texto centrado,
   nombre 16px/300, categoría 12px, "Desde" rosa 12px + precio rosa 20px/500.
   ========================================================================== */
.ms-btn-dark {
  display: inline-block;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #fff;
  text-decoration: underline;
  background: #482528;
  border: 0;
  border-radius: 5px;
}

.ms-btn-dark:hover,
.ms-btn-dark:focus-visible {
  color: #fff;
  background: #633a3e;
}

.ms-btn-dark:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
}

/* Ancho de contenido de la home = slider (1340px) */
.page-content--home .ps-customtext > .container,
.page-content--home .module-products.container {
  max-width: 1370px;
  padding-right: 15px;
  padding-left: 15px;
}

/* HB separa las secciones de la home con grid gap 2.5rem: aquí el espaciado va por márgenes, como prod */
.page-content--home {
  gap: 0;
}

.page-content--home .ps-customtext {
  margin-top: 30px;
}

.ms-home-hours p {
  margin: 0 0 12.8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  text-align: center;
}

.ms-home-hours strong {
  font-weight: 500;
}

.ms-home-title {
  margin: 70px 0 20px;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  color: var(--ms-pink);
  text-align: center;
}

.ms-home-seo p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.ms-home-seo strong {
  font-weight: 500;
}

/* Títulos de sección (home y resto: "Los más vendidos", "Productos destacados"…) */
.section-title {
  margin: 40px 0 20px;
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ms-pink);
  text-align: center;
}

.ms-home-new__buttons,
.module-products__buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.page-content--home .products {
  gap: 20px;
}

/* Tarjeta de producto (se mantienen +/- y botón de carrito de Hummingbird) */
.product-miniature__inner {
  padding-top: 20px;
  text-align: center;
  border: 1px solid #ececec;
  border-radius: 0;
}

.product-miniature__inner,
.product-miniature__top,
.product-miniature__inner:hover .product-miniature__top {
  border-radius: 0;
}

.product-miniature__bottom {
  gap: 10px;
  padding: 10px;
}

.product-miniature__infos {
  gap: 0;
  justify-items: center;
}

.product-miniature__title {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ms-text);
}

.product-miniature__title:hover {
  color: #b4546b;
}

.product-miniature__category {
  margin: 4px 0 0;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 14.4px;
  color: var(--ms-text);
}

.product-miniature__prices {
  justify-content: center;
}

.product-miniature__price {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ms-pink);
}

.product-miniature__price-from {
  margin-right: 4px;
  font-size: 12px;
  font-weight: 400;
}

.product-miniature__form {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.product-miniature .quantity-button .btn,
.product-miniature .quantity-button button {
  color: var(--ms-text);
}

.product-miniature__add.btn {
  color: #fff;
  background: #482528;
  border-color: #482528;
}

.product-miniature__add.btn:hover,
.product-miniature__add.btn:focus-visible {
  color: #fff;
  background: var(--ms-pink);
  border-color: var(--ms-pink);
}

/* Newsletter (Hummingbird): botón en granate como los botones de prod */
.ps-emailsubscription .btn-primary {
  color: #fff;
  background: #482528;
  border-color: #482528;
}

.ps-emailsubscription .btn-primary:hover,
.ps-emailsubscription .btn-primary:focus-visible {
  color: #fff;
  background: #633a3e;
  border-color: #633a3e;
}

@media (max-width: 767.98px) {
  .page-content--home .ps-customtext {
    margin-top: 20px;
  }

  .ms-home-title {
    margin-top: 40px;
    font-size: 26px;
    line-height: 32px;
  }

  .section-title {
    font-size: 24px;
  }

  .page-content--home .products {
    gap: 10px;
  }
}

/* A6 (11/10) — "Consentimiento de cookies" (cookiesplus, #cookiesplus-tab): en prod y hasta hoy aquí era una
   pestaña rosa fija abajo a la izquierda que tapaba texto y botones (p. ej. "Volver a Envío" del checkout). El
   nodo es el último del <body>, justo tras el pie: deja de flotar y queda como franja final del pie (granate,
   texto claro, centrado). El clic sigue siendo el del módulo (abre el panel de cookies). Sin tocar el módulo. */
#cookiesplus-tab {
  position: static !important;
  padding: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: #fff !important;
  text-align: center;
  cursor: default;
  background-color: #472528 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#cookiesplus-tab > span {
  display: inline-block;
  padding: 12px 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#cookiesplus-tab > span:hover {
  color: var(--ms-pink);
}

/* Iconos PNG personalizados (prod): HB solo dimensiona bien los SVG; en todas las variantes
   (ficha de producto, carrito, checkout) la imagen se ajusta a su caja */
.blockreassurance .reassurance__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   Bloque 6a — Franja de ventajas (blockreassurance en displayFooterBefore, solo home)
   Prod: fondo #f9f9f9, ~41px arriba/abajo, 5 columnas, icono 80px, título 15px/500,
   texto 14px/300/22px, centrado.
   ========================================================================== */
.ms-reassurance.blockreassurance--light {
  padding: 41px 0;
  background-color: #f9f9f9;
}

.ms-reassurance .blockreassurance--horizontal {
  max-width: 1370px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.ms-reassurance .reassurance {
  flex-direction: column;
  gap: 0;
  padding: 0 10px;
  text-align: center;
  line-height: 1.2;
}

.ms-reassurance .reassurance__image {
  width: 80px;
  height: 80px;
}

.ms-reassurance .reassurance__image img {
  width: 80px;
  height: 80px;
}

.ms-reassurance .reassurance__content br {
  display: none;
}

.ms-reassurance .reassurance__title {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: var(--ms-text);
}

.ms-reassurance .reassurance__desc {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--ms-text);
}

@media (max-width: 991.98px) {
  .ms-reassurance .blockreassurance--horizontal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }
}

@media (max-width: 575.98px) {
  .ms-reassurance.blockreassurance--light {
    padding: 30px 0;
  }

  /* 2 por fila; el 5.º (impar) queda centrado */
  .ms-reassurance .blockreassurance--horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 30px;
  }

  .ms-reassurance .reassurance {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .ms-reassurance .reassurance__image,
  .ms-reassurance .reassurance__image img {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================================================
   Bloque 6b — Footer. Prod: fondo #472528; títulos 18px/400 MAYÚSCULAS blancos (mb 10px);
   enlaces 16px/300/28px blancos (~41px entre líneas); "Síguenos" rosa 28px; Facebook rosa;
   copyright 15px/300 blanco; logo blanco 225x48 abajo a la izquierda.
   Se mantienen las columnas de Hummingbird "Su cuenta" e "Información de la tienda".
   R4b (02/10): ya NO (decisión del usuario): 3 columnas como prod ES (Blog uñas / Información / Ayuda,
   gutter 30 → x70/537/1003 a 1510) y mapa encima del logo; EN/FR/PT sin columna de blog.
   ========================================================================== */
.footer__main {
  padding: 57px 0 40px;
  color: #fff;
  background: #472528;
}

.footer__main .container {
  max-width: 1394px;
}

.footer__main .footer-block__title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
  text-transform: uppercase;
}

.footer__main .footer-block__title .material-icons {
  color: #fff;
}

.footer__main .footer-block__list li,
.footer__main .footer-block__content li {
  margin: 0 0 13px;
}

.footer__main .footer-block__list a {
  padding-block: 0;
}

/* "Su cuenta" (ps_customeraccountlinks): el título es un enlace */
.footer__main .footer-block__title a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: #fff;
}

.footer__main a,
.footer__main .footer-block__list a,
.footer__main .ps-contactinfo,
.footer__main .ps-contactinfo a,
.footer__main address {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: #fff;
}

.footer__main a:hover,
.footer__main a:focus-visible {
  color: var(--ms-pink);
}

.footer__main .material-icons {
  color: #fff;
}

@media (min-width: 992px) {
  /* Contenedor con el mismo gutter que la fila (30): con padding 12 y fila a -15 se salía 3 px a 1024
     (K5d). 1400 de ancho máximo → el contenido sigue en x70 a 1510 */
  .footer__main .container {
    --bs-gutter-x: 30px;
    max-width: 1400px;
  }

  .footer__main-top {
    --bs-gutter-x: 30px;
  }

  .footer__main-top > .footer-block {
    width: 33.33333333%;
  }
}

/* R4b: columna "Blog uñas" (solo ES; templates/_partials/footer.tpl) — prod: texto 15/300/23 blanco,
   enlace rosa 16/300 sin subrayado a 17 px */
.footer__main .ms-footer-blog__text {
  margin: 0 0 17px;
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
  color: #fff;
}

.footer__main .ms-footer-blog__link {
  color: var(--ms-pink);
  text-decoration: none;
}

.footer__main .ms-footer-blog__link:hover,
.footer__main .ms-footer-blog__link:focus-visible {
  color: #fff;
}

/* R4b: mapa encima del logo (prod 670×300 en x70; Síguenos 40 px por debajo del borde superior del mapa) */
.ms-footer-bottom__map {
  display: block;
  width: 100%;
  max-width: 670px;
  height: 300px;
  border: 0;
}

.ms-footer-bottom {
  align-items: start;
  margin-top: 40px;
}

.ms-footer-bottom__logo img {
  display: block;
  width: 225px;
  max-width: 100%;
  height: auto;
  /* A6 (11/10): 16 px de aire entre el mapa y el logo (en prod van pegados, hueco 0; petición del revisor) */
  margin-top: 16px;
}

.ms-footer-bottom__social {
  text-align: center;
}

@media (min-width: 768px) {
  .ms-footer-bottom__social {
    padding-top: 40px;
  }
}

.ms-footer-bottom__title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ms-pink);
}

.ms-footer-bottom .ps-socialfollow {
  padding: 0 0 20px !important;
}

.ms-footer-bottom .ps-socialfollow .container {
  padding: 0;
}

.ms-footer-bottom .ps-socialfollow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  padding: 0 !important;
  color: var(--ms-pink);
  border: 1px solid var(--ms-pink);
  border-radius: 50%;
}

.ms-footer-bottom .ps-socialfollow a:hover,
.ms-footer-bottom .ps-socialfollow a:focus-visible {
  color: #fff;
  background: var(--ms-pink);
}

.ms-footer-bottom .ps-socialfollow svg {
  width: 22px;
  height: 22px;
}

.ms-footer-bottom .copyright {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
  color: #fff;
  text-align: center;
}

@media (max-width: 767.98px) {
  .footer__main {
    padding: 30px 0;
  }

  .footer__main .footer-block {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer__main .footer-block__title {
    margin: 0;
    padding: 14px 0;
  }

  /* R4b: sin el antiguo order:2 del logo → como prod a 390: mapa y logo primero, después Síguenos y copyright */
  .ms-footer-bottom {
    row-gap: 30px;
  }
}

/* ==========================================================================
   Bloque 7 — Home: "Venta para Salones de belleza" + "¿Quieres ser distribuidor?"
   (templates/_partials/ms-home-b2b.tpl). Mismo estilo que el resto de la home:
   título de sección rosa 28px, texto 16px/300/28px, botón granate.
   ========================================================================== */
.ms-home-b2b > .container {
  max-width: 1370px;
  padding-right: 15px;
  padding-left: 15px;
}

.ms-home-b2b__block {
  padding-bottom: 20px;
}

.ms-home-b2b p {
  margin: 0 0 12.8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.ms-home-b2b strong {
  font-weight: 500;
}

.ms-home-b2b__buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.page-content--home .ms-home-b2b {
  margin-bottom: 50px;
}

/* ==========================================================================
   Categoría C1 — Columnas, breadcrumb, H1 y descripción (prod: 13-unas-de-acrilico)
   Prod (warehouse): contenedor 1400px con gutter 30px → columna izq. x55 w350 y contenido
   x405 w1050 (tarjetas desde x420, 1020 útiles) · breadcrumb en caja #f9f9f9 x70 w1370 h30 y
   50px hasta las columnas (30px en móvil) · H1 25px/300/28px #e70195 centrado (mb 20px) ·
   descripción debajo de la rejilla (templates/catalog/_partials/category-footer.tpl),
   16px/300/28px, margen 24px arriba y 32px abajo.
   Desviación intencionada: texto del breadcrumb #707070 (4.7:1 sobre #f9f9f9) en vez del #8f8f8f de prod
   (3.1:1); enlaces de la descripción #b4546b en vez del rosa (2.55:1).
   ========================================================================== */
.layout-left-column .columns-container,
.layout-right-column .columns-container,
.layout-left-column .columns-container > .row,
.layout-right-column .columns-container > .row {
  --bs-gutter-x: 30px;
}

@media (min-width: 1400px) {
  .layout-left-column .columns-container,
  .layout-right-column .columns-container {
    max-width: 1400px;
  }
}

/* Breadcrumb (todas las páginas que lo tienen, como prod) */
.breadcrumb__wrapper {
  margin-bottom: 30px;
  background: none;
}

.breadcrumb__wrapper > .container {
  --bs-gutter-x: 30px;
}

@media (min-width: 768px) {
  .breadcrumb__wrapper {
    margin-bottom: 50px;
  }
}

@media (min-width: 1400px) {
  .breadcrumb__wrapper > .container {
    max-width: 1400px;
  }
}

.breadcrumb {
  gap: 0;
  align-items: center;
  min-height: 30px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #707070;
  background: #f9f9f9;
}

.breadcrumb-item,
.breadcrumb-link {
  color: #707070;
}

.breadcrumb-link {
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: #b4546b;
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding: 0 5px;
  font-size: 16px;
  font-weight: 300;
  color: #8f8f8f;
}

/* H1 de la categoría (siempre el nombre de la categoría) */
.page-category .category__header .page-title-section {
  margin: 0 0 20px;
  font-size: 25px;
  font-weight: 300;
  line-height: 28px;
  color: #e70195;
  text-align: center;
}

/* R6 (02/10): contenido de cabecera de prod (módulo categoriescms → página CMS por categoría; ver
   category-header.tpl). Prod: H1 25/300/28 #e70195 centrado mb 20 (sustituye al de la categoría), párrafos
   16/300/28 (mb 0.8em), vídeo 500×394 a la izquierda, H2 16/300 ("… – productos:", mb 8), botones .botones a
   subcategorías (enlace 16/400 con borde inferior). Desviaciones intencionadas: el vídeo se adapta al ancho
   (prod desborda a 390), los enlaces del texto van en #b4546b (4.75:1) en vez del rosa de prod (2.55:1), como la
   descripción en C1, y los botones .botones se ocultan (ver abajo). */
.page-category .categoria-entradilla {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.page-category .categoria-entradilla h1 {
  margin: 0 0 20px;
  font-size: 25px;
  font-weight: 300;
  line-height: 28px;
  color: #e70195;
  text-align: center;
}

.page-category .categoria-entradilla p {
  margin: 0 0 0.8em;
}

.page-category .categoria-entradilla h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.page-category .categoria-entradilla iframe {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 500 / 394;
  border: 0;
}

.page-category .categoria-entradilla a {
  color: #b4546b;
}

.page-category .categoria-entradilla .botones {
  /* 17/10 (usuario, bloque 2 P1): los botones a subcategorías de la CMS vuelven a verse, como en prod (antes
     ocultos por R6). Enlaces ya relativos y por idioma en el contenido de las CMS 14, 17, 19, 21-24 (los que daban
     404 en prod, fuera). Prod: fila flex con margin 20px 0; cada h2 1 1 auto, margin 0 15px, padding 0 25px,
     centrado 16/300; enlace en bloque 16/400/28 con borde inferior de 1px del color del enlace. Desviaciones: con
     9 botones prod desborda (scrollWidth 1230 en 1020) → aquí envuelve (flex-wrap + gap), y el color es #b4546b
     (4.75:1) como el resto de enlaces de la entradilla, en vez del #e68699 de prod (2.4:1). */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 20px 0;
}

/* 17/10 (T1, usuario: "igual que prod"): margen 0 15px por botón como prod (el primero empieza a 15px, no a 0) y
   color del enlace #e68699 de prod en lugar de #b4546b. Se mantiene el salto de línea: prod desborda con muchos
   botones y en móvil los estrecha en columnas de 3-4 líneas. */
.page-category .categoria-entradilla .botones h2 {
  flex: 1 1 auto;
  margin: 0 15px;
  padding: 0 25px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  text-align: center;
}

.page-category .categoria-entradilla .botones a {
  display: block;
  color: #e68699;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 17/10 (usuario, T1): en las categorías cuya CMS trae botones a subcategorías (13, 14, 15, 28, 33, 40, 41) se
   oculta la lista nativa de subcategorías de HB, que la duplicaba; prod tampoco la pinta. En la 20 (CMS sin
   botones desde el bloque 2) y en el resto se sigue viendo. Si cambian los botones de una CMS, revisar esta lista. */
body.category-id-13 .category__header .subcategory,
body.category-id-14 .category__header .subcategory,
body.category-id-15 .category__header .subcategory,
body.category-id-28 .category__header .subcategory,
body.category-id-33 .category__header .subcategory,
body.category-id-40 .category__header .subcategory,
body.category-id-41 .category__header .subcategory {
  display: none;
}

/* 17/10 (bloque 2 bis): descripción adicional arriba, tras la CMS (en la 13, el bloque que en prod es Elementor).
   Prod (medido en Chrome): título 37/300/37 #e8359a; separador de 1px #472528 con 15px arriba y abajo; párrafos
   16/300/28, mb 0.8em; vídeo a todo el ancho en 16:9 (990x557). Enlaces #b4546b como el resto de la entradilla. */
/* T1: prod (sección Elementor) lleva 15px de relleno en escritorio y 0 en móvil; el vídeo va en su propia sección
   (15px arriba y abajo) y la barra de orden empieza justo al acabar. Título 37px también en móvil, como prod. */
.page-category .category__header .category__additional-description {
  margin: 0;
  padding: 15px 15px 15px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.page-category .category__header .category__additional-description h2 {
  margin: 0 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ms-text);
  font-size: 37px;
  font-weight: 300;
  line-height: 37px;
  color: #e8359a;
}

.page-category .category__header .category__additional-description p {
  margin: 0 0 0.8em;
}

.page-category .category__header .category__additional-description a {
  color: #b4546b;
  text-decoration: underline;
}

.page-category .category__header .category__additional-description iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 15px;
  border: 0;
}

.page-category .category__header .category__additional-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .page-category .category__header .category__additional-description {
    padding: 0;
  }

  .page-category .category__header .category__additional-description iframe {
    margin-top: 0;
  }

  /* Botones en móvil: dos por fila siempre (con flex 1 1 auto quedaban unos solos y otros emparejados). Prod los
     estrecha todos en una fila y se salen de la pantalla. */
  .page-category .categoria-entradilla .botones h2 {
    flex: 1 1 calc(50% - 30px);
    padding: 0 10px;
  }

  /* prod en móvil: párrafos de la CMS con 9.6px debajo y el H2 "… – productos:" con 6px */
  .page-category .categoria-entradilla p {
    margin-bottom: 9.6px;
  }

  .page-category .categoria-entradilla h2 {
    margin-bottom: 6px;
  }
}

/* Descripción debajo de la rejilla y la paginación (la adicional va arriba desde el 17/10) */
.page-category .category__footer .category__description {
  margin: 24px 0 32px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.page-category .category__footer .rich-text p:last-child {
  margin-bottom: 0;
}

.page-category .category__footer .rich-text a {
  color: #b4546b;
  text-decoration: underline;
}

.page-category .category__footer .rich-text a:hover,
.page-category .category__footer .rich-text a:focus-visible {
  color: var(--ms-text);
}

@media (max-width: 767.98px) {
  .page-category .category__footer .category__description {
    margin: 18px 0 24px;
  }
}

/* ==========================================================================
   Categoría C2 — Subcategorías (templates/catalog/_partials/subcategories.tpl sin miniaturas)
   Prod: enlaces de texto rosa 16px/400/28px centrados con borde inferior 1px rosa, 4 por fila
   (el enlace mide lo que su texto). Móvil: 2 por fila, sin cortar palabras (prod se desborda).
   ========================================================================== */
.page-category .subcategory {
  margin-inline: 0;
}

.page-category .subcategory__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 20px;
  align-items: start;
  padding: 0;
  margin: 0 0 30px;
  overflow: visible;
}

@media (min-width: 992px) {
  .page-category .subcategory__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-category .subcategory__link {
  justify-self: center;
  max-width: 100%;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ms-pink);
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ms-pink);
  border-radius: 0;
}

.page-category .subcategory__link:hover,
.page-category .subcategory__link:focus-visible {
  color: #b4546b;
  background: none;
  border-bottom-color: #b4546b;
}

/* ==========================================================================
   Categoría C3 — Árbol de categorías (ps_categorytree, acordeón de Hummingbird)
   Prod: título "Inicio" 16px/300/28px #333 (el texto está en el <a>; el 14px/700 del h5
   no se ve), pb 7px + borde inferior 1px #e3e3e3 (alto 36), mb 11px · elementos 16px/300/28px
   #472528, paso 28px, "›" delante (pad-izq. 12px), flecha fina a la derecha (x380-390) ·
   subniveles con sangría de 8px · bloque con margen inferior 32px.
   Móvil (<md): la columna izquierda va DEBAJO de los productos (prod: y≈5958), con order.
   ========================================================================== */
.category-tree.left-block {
  padding-bottom: 0;
  margin-bottom: 32px;
  border-bottom: 0; /* HB separa los bloques laterales con una línea; prod no la tiene */
}

.category-tree .left-block__title {
  padding-bottom: 7px;
  margin: 0 0 11px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  border-bottom: 1px solid #e3e3e3;
}

.category-tree .left-block__title-link {
  font-weight: 300;
  color: #333;
}

.category-tree .left-block__title-link:hover,
.category-tree .left-block__title-link:focus-visible {
  color: #b4546b;
}

.category-tree__list {
  row-gap: 0;
  margin-bottom: 0;
}

.category-tree__item-header {
  align-items: center;
  padding: 0;
}

.category-tree__list .category-tree__item-link,
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header .category-tree__item-link {
  position: relative;
  padding-left: 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.category-tree__item-link::before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  content: "\203A";
}

.category-tree__item-link:hover,
.category-tree__item-link:focus-visible {
  color: #b4546b;
}

/* Botón de desplegar de HB: se conserva, con la flecha fina de prod pegada a la derecha */
.accordion--category .category-tree__item-header.split .accordion-button {
  justify-content: flex-end;
  width: 24px;
  height: 28px;
  padding: 0;
  margin: 0 0 0 auto;
}

.accordion--category .accordion-button::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
}

.accordion--category .accordion-button:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 0;
  box-shadow: none;
}

.accordion--category .accordion-body {
  padding: 0;
}

@media (max-width: 767.98px) {
  .layout-left-column .columns-container > .row > #center-column {
    order: 1;
  }

  .layout-left-column .columns-container > .row > #left-column {
    order: 2;
    margin-top: 24px;
  }
}

/* ==========================================================================
   Categoría C4 — Barra "Hay N productos / Ordenar por" + rejilla + etiquetas
   Prod: rejilla de 3 columnas con tarjetas de 327px y 20px de hueco (móvil: 2 × 173, hueco 15).
   La barra de orden y las etiquetas existen en prod pero están ocultas; aquí se conservan (HB)
   con el estilo del sitio: texto 16px/300 #472528, desplegable con borde #ececec y radio 5,
   etiquetas rosa con texto granate 12px/500 (5.3:1).
   Tarjeta: la misma de la home (bloque 5), con sus +/- , carrito y vista rápida.
   ========================================================================== */
#js-product-list .products {
  gap: 20px;
}

@media (max-width: 767.98px) {
  #js-product-list .products {
    gap: 15px;
  }
}

.products__count,
.products__sort-label {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--ms-text);
}

.products__sort-dropdown-button.btn {
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  background: #fff;
  border-color: #ececec;
  border-radius: 5px;
}

.products__sort-dropdown-button.btn:hover,
.products__sort-dropdown-button.btn.show {
  color: var(--ms-text);
  background: #fff;
  border-color: var(--ms-pink);
}

.products__sort-dropdown-button.btn:focus-visible {
  color: var(--ms-text);
  background: #fff;
  border-color: var(--ms-pink);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(230 134 153 / 35%);
}

.products__sort .dropdown-menu {
  border-color: #ececec;
  border-radius: 5px;
}

.products__sort .dropdown-item {
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
}

.products__sort .dropdown-item:hover,
.products__sort .dropdown-item:focus-visible {
  color: var(--ms-text);
  background: #fbf5f6;
}

.products__sort .dropdown-item.current,
.products__sort .dropdown-item:active {
  font-weight: 500;
  color: #b4546b;
  background: #fbf5f6;
}

/* Etiquetas "¡En oferta!", "Fuera de stock", "Nuevo"… (home y listados) */
.product-miniature .product-flags .badge {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--ms-text);
  text-align: left;
  white-space: normal; /* textos largos de agotado ("Reserva tu producto y te llegará…") */
  background: var(--ms-pink);
  border-radius: 3px;
}

/* HB fuerza "color: #000 !important" en .product-flags .badge:not(.discount) dentro de una capa
   (@layer). Un !important sin capa pierde contra uno con capa, y entre importantes gana la
   PRIMERA capa declarada (vendors): por eso esta regla va en @layer vendors. */
@layer vendors {
  .product-miniature .product-flags .badge {
    color: #472528 !important;
  }
}

/* ==========================================================================
   Categoría C5 — Paginación (HB; prod usa scroll infinito). Página actual #b4546b 600
   (4.75:1; el rosa daba 2.55:1), resto #472528, hover #b4546b. Resumen "Mostrando…"
   16px/300 #472528, como la barra "Hay N productos".
   ========================================================================== */
.pagination {
  --bs-pagination-color: #472528;
  --bs-pagination-hover-color: #b4546b;
  --bs-pagination-focus-color: #b4546b;
  --bs-pagination-active-color: #b4546b;
}

.pagination__number {
  font-weight: 300;
  color: var(--ms-text);
}

/* Vídeos incrustados en textos (descripciones de categoría, ficha, CMS): p.ej. la categoría 18
   lleva un YouTube de 550×360 fijo que en móvil desborda (prod también: scrollWidth 565 a 390px) */
.rich-text iframe,
.rich-text video {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .rich-text iframe,
  .rich-text video {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   Categoría C6 — Pasada móvil (390px)
   - Etiquetas largas (texto de agotado a medida) parten línea dentro de la tarjeta (ver C4).
   - "Ver más detalles" (producto no comprable, btn-outline-primary de HB): el rosa como texto
     daba 2.55:1 → texto y borde #b4546b (4.75:1); hover relleno #b4546b con texto blanco.
   ========================================================================== */
.product-miniature__details.btn-outline-primary {
  color: #b4546b;
  border-color: #b4546b;
  border-radius: 5px;
}

.product-miniature__details.btn-outline-primary:hover,
.product-miniature__details.btn-outline-primary:focus-visible {
  color: #fff;
  background: #b4546b;
  border-color: #b4546b;
}

/* Móvil: entre la descripción y el árbol, 48px como prod (24 + 24; sin el padding inferior de 32 de HB) */
@media (max-width: 767.98px) {
  .layout-left-column .columns-container > .row > #center-column {
    padding-bottom: 0;
  }
}

/* Breadcrumb largo en móvil: parte en varias líneas como prod (HB lo cortaba con scroll
   horizontal oculto). Una línea sigue midiendo 30px (6 + 18 + 6). */
@media (max-width: 767.98px) {
  .breadcrumb {
    flex-wrap: wrap;
    padding: 6px 15px;
    overflow-x: visible;
    line-height: 18px;
  }

  .breadcrumb-item {
    white-space: normal;
  }

  /* el "/" de 16px alineado por la línea base estiraba la línea a 19px */
  .breadcrumb-item + .breadcrumb-item::before {
    line-height: 18px;
    vertical-align: top;
  }
}

/* ==========================================================================
   Ficha F1 — Columnas + galería (prod: /es/monomero-y-otros/1181-75-monomero-secado-medio.html)
   Prod (warehouse): dos columnas de 700px con padding 15 → galería x70 w670 e info x770 w670
   (30px entre ellas); imagen principal de 492px de alto encajada (contain); 10px entre el
   breadcrumb y la ficha. Staging usa product_main cuadrado (755px): se encaja a 492 de alto.
   Se conservan las miniaturas, el carrusel y el zoom de Hummingbird.
   ========================================================================== */
.page-product .breadcrumb__wrapper {
  margin-bottom: 10px;
}

/* Mismo contenedor que la categoría: 1400px con gutter 30 (móvil x15 w360, como prod) */
.page-product .columns-container,
.page-product .columns-container > .row {
  --bs-gutter-x: 30px;
}

@media (min-width: 1400px) {
  .page-product .columns-container {
    max-width: 1400px;
  }
}

@media (min-width: 992px) {
  .page-product .product__container,
  .page-product .product__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }
}

.page-product .product__carousel .carousel-item img {
  width: 100%;
  height: auto;
  max-height: 492px;
  object-fit: contain;
}

/* ==========================================================================
   Ficha F2 — Nombre, precio y descripción corta
   Prod: H1 30px/400/36px MAYÚSCULAS #472528, 20px por debajo del borde superior de la imagen ·
   precio 27px/500 #e68699 pegado al nombre (bloque de 36px) y 10px hasta la descripción ·
   descripción 16px/300/28px, párrafos sin margen, negrita en 400.
   ========================================================================== */
.page-product .product__name {
  margin: 20px 0 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  color: var(--ms-text);
  text-transform: uppercase;
}

.page-product .product__prices {
  margin-bottom: 10px;
}

/* HB separa precio e impuestos con 12px aunque "product__tax-infos" esté vacío */
.page-product .product__prices-block {
  gap: 0;
}

.page-product .product__price {
  font-size: 27px;
  font-weight: 500;
  line-height: 36px;
  color: var(--ms-pink);
}

.page-product .product__description-short {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.page-product .product__description-short p {
  margin: 0;
}

.page-product .product__description-short b,
.page-product .product__description-short strong {
  font-weight: 400;
}

/* ==========================================================================
   Ficha F3 — Referencia, variantes, cantidad y "Añadir al carrito" (+ .btn-primary global)
   Prod: "Ref: LM210" 16px/500 · etiqueta de la variante 14px/500 ("SELECCIONA TAMAÑO (ml):") ·
   opciones en cajas de 64×32, 16px/300, borde 1px #ececec, la activa con borde 2px #e68699,
   10px entre cajas · cantidad de 50px de alto · botón de 319×50, 17px/400 MAYÚSCULAS, radio 0,
   10px después de la cantidad. Los radios de HB se conservan (ocultos a la vista pero
   accesibles con teclado y lector); solo cambia el aspecto de su etiqueta.
   ========================================================================== */
.product__reference {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ms-text);
}

/* flex: nombre y valor elegido en la misma línea; el espacio inicial del valor desaparece → "(ml): 30 ml" */
.product-variant__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 28px;
  color: var(--ms-text);
}

.product-variant__legend {
  display: inline;
  float: none;
  width: auto;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.product-variant__selected {
  font-size: 14px;
  font-weight: 300;
  line-height: 28px;
}

.product-variant__radios {
  flex-wrap: wrap;
  gap: 8px 10px;
}

.product-variant__radio.form-check {
  position: relative;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.product-variant__radio .form-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 0;
}

.product-variant__radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 32px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: var(--ms-text);
  cursor: pointer;
  border: 1px solid #ececec;
}

.product-variant__radio label:hover {
  border-color: var(--ms-pink);
}

.product-variant__radio .form-check-input:checked + label {
  padding: 0 7px;
  border: 2px solid var(--ms-pink);
}

.product-variant__radio .form-check-input:focus-visible + label {
  outline: 2px solid #b4546b;
  outline-offset: 2px;
}

/* Cantidad (+/- de HB) y botón */
.product__actions-qty-add {
  gap: 10px;
}

.product__actions-qty-add .quantity-button .btn,
.product__actions-qty-add .quantity-button .form-control {
  height: 50px;
  border-color: #ececec;
  border-radius: 0;
}

.product__actions-qty-add .quantity-button .btn {
  width: 44px;
  color: var(--ms-text);
}

/* Lo que los módulos enganchan en la fila (banner de PayPal) va en su propia línea */
.product__actions-qty-add > :not(.product__quantity):not(.product__add-to-cart) {
  flex-basis: 100%;
}

.product__add-to-cart-button.btn {
  height: 50px;
  padding: 0 40px;
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
}

/* R3 (02/10, #12): "Añadir al carrito" de ficha y vista rápida como prod (decisión del usuario): texto
   BLANCO sobre #E68699 (2.55:1), sin borde, sin icono (prod lo tiene en display:none) y hover sin cambio
   (medido en prod). El resto de .btn-primary sigue con texto #472528. */
.product__add-to-cart-button.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e68699;
  --bs-btn-border-width: 0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e68699;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e68699;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e68699;
}

.product__add-to-cart-button .material-icons {
  display: none;
}

/* R3 (#9, #10, #13): sin ventajas, Descripción (movida a la columna derecha) ni Detalles, la parte inferior de
   la ficha queda vacía (24 + 48 px de márgenes): se oculta salvo que haya adjuntos o pestañas de módulos */
.page-product .product__bottom:not(:has(.accordion-item)) {
  display: none;
}

@media (min-width: 576px) {
  .product__add-to-cart {
    flex-grow: 0;
  }

  .product__add-to-cart-button.btn {
    min-width: 319px;
  }
}

/* .btn-primary GLOBAL (decisión por defecto del revisor, pendiente #8; el usuario puede cambiarla):
   rosa de prod con texto granate (5.3:1; el blanco de prod da 2.55:1), hover #b4546b con texto
   blanco (4.75:1), radio 0 como prod. Afecta a vista rápida, "Volver a Página Principal",
   checkout… Los botones granate propios (tarjetas, newsletter) mantienen su regla. */
.btn-primary {
  --bs-btn-color: #472528;
  --bs-btn-bg: #e68699;
  --bs-btn-border-color: #e68699;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b4546b;
  --bs-btn-hover-border-color: #b4546b;
  --bs-btn-focus-shadow-rgb: 230, 134, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9e4a5e;
  --bs-btn-active-border-color: #9e4a5e;
  --bs-btn-disabled-color: #472528;
  --bs-btn-disabled-bg: #e68699;
  --bs-btn-disabled-border-color: #e68699;
  --bs-btn-border-radius: 0;
}

/* ==========================================================================
   Ficha F4 — Acordeón "Detalles del producto" / "Descripción", reassurance, Compartir
   Prod no tiene estos bloques (se conservan de HB) → estilo coherente con el sitio: títulos
   #472528 18px/500 (HB: 20px/600 #b4546b), textos 16px/300, bordes #ececec; iconos de
   reassurance a 48px (HB: 64px); "Compartir" 16px/300 con iconos granate (hover #b4546b).
   ========================================================================== */
.page-product .product__accordion .accordion-item {
  border-bottom-color: #ececec;
}

.page-product .product__accordion .accordion-button {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ms-text);
}

.page-product .product__accordion .accordion-button:hover {
  color: #b4546b;
}

.page-product .product__accordion .accordion-button:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
  box-shadow: none;
}

.page-product .product__accordion .accordion-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.page-product .details__item {
  border-bottom-color: #ececec;
}

.page-product .details__title {
  font-weight: 500;
}

.blockreassurance--product .reassurance__image {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

.blockreassurance--product .reassurance {
  align-items: center;
  min-height: 48px;
}

.blockreassurance--product .reassurance__title {
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
}

.blockreassurance--product .reassurance__desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--ms-text);
}

.ps-sharebuttons__label {
  font-weight: 300;
  color: var(--ms-text);
}

.ps-sharebuttons a {
  color: var(--ms-text);
}

.ps-sharebuttons a:hover,
.ps-sharebuttons a:focus-visible {
  color: #b4546b;
}

/* ==========================================================================
   Ficha F5 — Comentarios (productcomments). Plantilla del hijo con guardas isset
   (modules/productcomments/views/templates/hook/product-comments-list.tpl): 0 avisos PHP.
   Títulos de sección de la ficha ("Comentarios (0)", productos relacionados en F6) como los
   de prod en la ficha: 25px/500 #472528 a la izquierda (el global de la home es rosa, 28px, centrado).
   ========================================================================== */
.page-product .section-title {
  margin: 40px 0 20px;
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  color: var(--ms-text);
  text-align: left;
}

/* ==========================================================================
   Ficha F6 — Productos relacionados (ps_categoryproducts; plantilla del hijo con el título de prod)
   Prod: "Artículos similares" 25px/500/28px #472528 a la izquierda, 10px hasta las tarjetas;
   carrusel de 4 tarjetas de 323px. Se conserva la rejilla de HB, con el hueco de los listados.
   ========================================================================== */
.ps-categoryproducts .section-title {
  margin-bottom: 10px;
  line-height: 28px;
}

.ps-categoryproducts .products {
  gap: 20px;
}

@media (max-width: 767.98px) {
  .ps-categoryproducts .products {
    gap: 15px;
  }
}

/* ==========================================================================
   Ficha F7 — Pasada móvil + casos
   Variantes de tipo desplegable (p.ej. color en 1794 dappen dish): prod 175×42, borde 1px
   #e3e3e3, radio 0, 16px, padding 16 → mismo aspecto (texto #472528 en vez del #777 de prod).
   ========================================================================== */
.product__variants .form-select {
  width: auto;
  min-width: 175px;
  max-width: 100%;
  height: 42px;
  padding: 0 36px 0 16px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  border-color: #ececec;
  border-radius: 0;
}

.product__variants .form-select:focus {
  border-color: var(--ms-pink);
  box-shadow: 0 0 0 0.2rem rgb(230 134 153 / 35%);
}

/* ==========================================================================
   Carrito K1 — Modal "Añadido a tu carrito" (HB) + página del carrito
   Prod: texto 16/300/28 #472528; H1 22/400 #333 con borde inferior 1px #e3e3e3 (pad 11);
   nombre y precio 16/300, total de línea 16/700; "Continuar comprando" = btn-secondary de prod
   (#f8f8f8, texto 16/400, h40, pad 8×20, radio 0; hover #ececec). Se conservan el modal,
   la lista y el stepper −/+ de HB: solo cambia el estilo.
   ========================================================================== */
#cart .cart-grid {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

#cart .cart-grid__content .page-title-section {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

/* El borde del H1 hace de separador superior (HB pinta además un <hr>) */
#cart .cart__overview > hr:first-child {
  display: none;
}

#cart .cart__overview hr {
  margin: 20px 0;
  color: #ececec;
  opacity: 1;
}

/* R4a (02/10, #14): sin el bloque de ventajas (checkout/cart.tpl del hijo) el <hr> que lo separaba del
   resumen queda suelto al final de la columna */
#cart .cart-summary + hr:last-child {
  display: none;
}

#cart .cart__item {
  border-block-end-color: #ececec;
}

#cart .product-line__title {
  font-weight: 300;
  color: var(--ms-text);
}

#cart .product-line__title:hover,
#cart .product-line__title:focus-visible {
  color: #b4546b;
}

#cart .product-line__item-price {
  font-weight: 300;
}

#cart .product-line__price {
  font-weight: 700;
}

#cart .product-line__quantity-button .btn,
#cart .product-line__quantity-button .form-control {
  height: 40px;
  border-color: #e3e3e3;
  border-radius: 0;
}

#cart .product-line__quantity-button .btn {
  width: 40px;
  color: var(--ms-text);
}

#cart .product-line__quantity-button .form-control {
  font-weight: 400;
  color: var(--ms-text);
  text-align: center;
}

#cart .product-line__quantity-button .form-control:focus {
  border-color: var(--ms-pink);
  box-shadow: 0 0 0 0.2rem rgb(230 134 153 / 35%);
}

#cart .product-line__actions .js-remove-from-cart {
  font-weight: 300;
  color: var(--ms-text);
}

#cart .product-line__actions .js-remove-from-cart:hover,
#cart .product-line__actions .js-remove-from-cart:focus-visible {
  color: #b4546b;
}

/* "Continuar comprando" (carrito y modal): btn-secondary de prod. HB: contorno y texto rosa (2.55:1) */
#cart .cart__continue-shopping.btn,
.blockcart-modal .modal-footer .btn-outline-primary,
#checkout .step__content .js-back.btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 8px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
  --bs-btn-color: #472528;
  --bs-btn-bg: #f8f8f8;
  --bs-btn-border-width: 0;
  --bs-btn-border-color: #f8f8f8;
  --bs-btn-border-radius: 0;
  --bs-btn-hover-color: #472528;
  --bs-btn-hover-bg: #ececec;
  --bs-btn-hover-border-color: #ececec;
  --bs-btn-active-color: #472528;
  --bs-btn-active-bg: #e3e3e3;
  --bs-btn-active-border-color: #e3e3e3;
  --bs-btn-focus-shadow-rgb: 230, 134, 153;
}

#cart .cart__continue-shopping .material-icons {
  font-size: 18px;
}

/* Modal "Añadido a tu carrito" (HB, se conserva): título granate, check #b4546b (HB: verde),
   textos 16/300, radios 0, botones de 40 de alto ("Finalizar compra" = .btn-primary global) */
.blockcart-modal .modal-content {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  border-radius: 0;
}

.blockcart-modal .blockcart-modal__title {
  gap: 12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ms-text);
}

.blockcart-modal .blockcart-modal__title-icon {
  font-size: 28px;
  color: #b4546b;
}

.blockcart-modal .blockcart-modal__name {
  font-weight: 400;
}

.blockcart-modal .blockcart-modal__price {
  font-weight: 300;
}

.blockcart-modal .blockcart-modal__name,
.blockcart-modal .blockcart-modal__price,
.blockcart-modal .blockcart-modal__nb-products,
.blockcart-modal .blockcart-modal__total,
.blockcart-modal .blockcart-modal__property {
  margin-bottom: 0;
}

.blockcart-modal .blockcart-modal__total--bold {
  font-weight: 700;
}

.blockcart-modal .blockcart-modal__image {
  border-radius: 0;
}

.blockcart-modal .modal-footer .btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 8px;
  --bs-btn-line-height: 24px;
  --bs-btn-border-width: 0;
}

@media (min-width: 576px) {
  .blockcart-modal .blockcart-modal__title {
    font-size: 22px;
  }
}

/* ==========================================================================
   Carrito K2 — Resumen del pedido (carrito .js-cart-summary y checkout .js-checkout-summary)
   Prod: caja con borde 1px rgba(160,160,160,.25) (≈ #e7e7e7) y 20 de padding; líneas 16/300/28;
   TOTAL 24/700 #472528; "Finalizar compra" a todo el ancho, 56 de alto, 16/400. Título del carrito
   "Resumen del pedido" con el estilo del H1. Se conservan el acordeón del código promocional,
   el banner de PayPal y la reassurance de HB (iconos a 48 como en la ficha).
   ========================================================================== */
#cart .cart-grid__aside h2 {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

#cart .cart-summary {
  padding: 20px;
  border: 1px solid #e7e7e7;
}

#cart .cart-summary,
#checkout .cart-summary {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.cart-summary .cart-summary__line {
  padding: 0;
}

.cart-summary .cart-summary__value {
  font-weight: 300;
}

.cart-summary .cart-summary__subtotals {
  margin-bottom: 12px;
}

.cart-summary .cart-summary__total {
  padding-block: 12px;
  margin-bottom: 0;
  border-color: #e7e7e7;
}

.cart-summary .cart-summary__total .cart-summary__line--bold,
.cart-summary .cart-summary__total .cart-summary__line--bold .cart-summary__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

/* Código promocional (acordeón de HB) */
.cart-summary .cart-voucher__accordion {
  padding-block-end: 0;
  margin-block-end: 0;
  border-color: #e7e7e7;
}

.cart-summary .cart-voucher__accordion-button {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ms-text);
  background: none;
  box-shadow: none;
}

.cart-summary .cart-voucher__accordion-button:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
}

.cart-summary .cart-voucher__accordion .accordion-body {
  padding: 0 0 16px;
}

.cart-voucher__form .form-control {
  height: 45px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  border-color: #e3e3e3;
  border-radius: 0;
}

.cart-voucher__form .form-control:focus {
  border-color: var(--ms-pink);
  box-shadow: 0 0 0 0.2rem rgb(230 134 153 / 35%);
}

.cart-voucher__form .btn {
  flex-shrink: 0;
  height: 45px;
  padding: 0 20px;
}

.cart-summary .cart-voucher__highlight {
  border-color: #e7e7e7;
}

.cart-summary .cart-voucher__highlight .h5 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

.cart-summary .cart-voucher__code-value {
  color: #b4546b;
  text-decoration: underline;
}

.cart-summary .cart-voucher__list {
  border-color: #e7e7e7;
}

/* "Finalizar compra": 56 de alto (15 + 24 + 15 + borde), 16/400 */
.cart-summary .cart-summary__actions {
  padding-block-start: 20px;
}

.cart-summary .cart-summary__actions .btn-lg {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
}

/* Banner de PayPal (iframe del módulo, no se toca): a todo el ancho bajo el botón */
.cart-summary .cart-summary__actions [data-pp-message] {
  width: 100%;
  margin-top: 8px;
}

#cart .cart-grid__aside-wrapper > hr {
  margin: 24px 0;
  color: #e7e7e7;
  opacity: 1;
}

/* Reassurance del carrito y del checkout: como la de la ficha (48px, textos sin opacidad) */
.blockreassurance--cart .reassurance__image,
.blockreassurance--checkout .reassurance__image {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

.blockreassurance--cart .reassurance,
.blockreassurance--checkout .reassurance {
  align-items: center;
  min-height: 48px;
}

.blockreassurance--cart .reassurance__title,
.blockreassurance--checkout .reassurance__title {
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
}

.blockreassurance--cart .reassurance__desc,
.blockreassurance--checkout .reassurance__desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--ms-text);
}

/* ==========================================================================
   Checkout K3 — Stepper de HB (se conserva), H1 del paso y caja del resumen
   Banda #f9f9f9 con borde #ececec. Números: actual #472528/blanco, completados rosa/#472528,
   pendientes #ececec/#666 (HB: #ced4da con blanco, 1.5:1). Etiquetas 16/300 #472528, activa 500.
   Líneas #e3e3e3; el tramo recorrido en rosa (HB: verde). Móvil: anillo #b4546b (HB: verde
   #188251), título 20/500. H1 del paso como el "Checkout" de prod: 22/400 #333 con borde
   inferior 1px #e3e3e3 y pad 11. Resumen: caja 1px #e7e7e7 con 20 de padding (como el carrito).
   ========================================================================== */
#checkout .checkout-steps {
  background-color: #f9f9f9;
  border-block-end-color: #ececec;
}

#checkout .checkout-steps__step::before,
#checkout .checkout-steps__step::after {
  background: #e3e3e3;
}

#checkout .checkout-steps__step--current::before,
#checkout .checkout-steps__step--success::before,
#checkout .checkout-steps__step--success::after {
  background: var(--ms-pink);
}

#checkout .checkout-steps__number {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #ececec;
}

#checkout .checkout-steps__step--current .checkout-steps__number {
  color: #fff;
  background: var(--ms-text);
}

#checkout .checkout-steps__step--success .checkout-steps__number {
  color: var(--ms-text);
  background: var(--ms-pink);
}

#checkout .checkout-steps__btn,
#checkout .checkout-steps__step--current .checkout-steps__btn,
#checkout .checkout-steps__step--success .checkout-steps__btn {
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  text-decoration: none;
}

#checkout .checkout-steps__btn.active {
  font-weight: 500;
}

#checkout .checkout-steps__btn:not(:disabled):hover {
  color: #b4546b;
}

#checkout .checkout-steps__btn:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
  box-shadow: none;
}

/* Móvil: anillo de progreso (stroke="currentColor" + utilidad .text-success con !important
   en capa → se pinta el trazo directamente) */
#checkout .checkout-steps__mobile .progress-ring__circle {
  stroke: #b4546b;
}

#checkout .checkout-steps__mobile .progress-ring__background-circle {
  stroke: #ececec;
}

#checkout .checkout-steps__mobile .progress-ring__text {
  font-weight: 500;
  fill: var(--ms-text);
}

#checkout .checkout-steps__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: var(--ms-text);
}

#checkout .checkout-steps__subtitle {
  font-size: 14px;
  font-weight: 300;
  color: var(--ms-text);
}

/* H1 del paso ("Datos Personales"…): el borde sustituye al <hr> de HB */
#checkout .step__title .page-title-section {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

#checkout .step__title hr {
  display: none;
}

/* Resumen del pedido en el checkout: caja como la del carrito. En móvil el acordeón de HB
   ("Resumen del pedido" plegable) va dentro de la caja; el padding inferior va dentro del
   colapsable para que la animación no salte. */
#checkout .checkout__summary-accordion-item {
  border: 1px solid #e7e7e7;
  border-radius: 0;
}

#checkout .checkout__summary-accordion-wrapper {
  padding: 0 20px;
}

/* Espacio arriba/abajo con pseudo-elementos (cuentan en la altura que anima el colapso) */
#checkout #js-checkout-summary::before,
#checkout #js-checkout-summary::after {
  display: block;
  height: 20px;
  content: "";
}

#checkout .checkout__summary-accordion-header .accordion-button {
  padding: 16px 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: #333;
  background: none;
  box-shadow: none;
}

#checkout .checkout__summary-accordion-header .accordion-button:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: -2px;
}

@media (max-width: 991.98px) {
  #checkout #js-checkout-summary::before {
    display: none;
  }
}

#checkout .cart-summary__products hr {
  color: #e7e7e7;
  opacity: 1;
}

#checkout .cart-summary__products-accordion .accordion-button {
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
  background: none;
  box-shadow: none;
}

#checkout .checkout-grid__aside-wrapper > .blockreassurance {
  margin-top: 24px;
}

/* ==========================================================================
   Checkout K4 — Paso 1 (datos personales): pestañas invitado/login, campos, casillas,
   textos legales, "Información adicional" (módulo de campos de registro) y "Continuar"
   Prod: campos de 45 con borde #e3e3e3 y radio 0; "Continuar" a todo el ancho, 56 de alto,
   16/400. Se conservan las pestañas y las etiquetas encima del campo de HB.
   (Área de cliente, 30/09: los estilos de campos/casillas se comparten con login, registro,
   recuperar contraseña y seguimiento de invitado vía :is(), limitados por body id.)
   ========================================================================== */
#checkout #personal-information-tabs {
  --bs-nav-link-color: #707070;
  --bs-nav-link-hover-color: #b4546b;
  --bs-nav-underline-link-active-color: #472528;
}

#checkout #personal-information-tabs .nav-link {
  font-weight: 400;
}

#checkout #personal-information-tabs .nav-link.active {
  font-weight: 500;
  border-bottom-color: var(--ms-pink);
}

#checkout #personal-information-tabs .nav-link:focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
  box-shadow: none;
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column input.form-control,
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column select.form-control,
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-select {
  height: 45px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  border-color: #e3e3e3;
  border-radius: 0;
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column textarea.form-control {
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  border-color: #e3e3e3;
  border-radius: 0;
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-control:focus,
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-select:focus {
  border-color: var(--ms-pink);
  box-shadow: 0 0 0 0.25rem rgb(230 134 153 / 50%);
}

/* Botón de mostrar contraseña (btn-primary de HB) a la altura del campo */
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .password-field .btn {
  height: 45px;
}

/* Casillas y radios: borde #8c8c8c (3.4:1; el #dee2e6 de HB da 1.3:1), marcados en granate */
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-check-input {
  border-color: #8c8c8c;
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-check-input:checked {
  background-color: var(--ms-text);
  border-color: var(--ms-text);
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-check-input:focus {
  border-color: var(--ms-text);
  box-shadow: 0 0 0 0.25rem rgb(230 134 153 / 50%);
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-check-label {
  font-weight: 300;
  color: var(--ms-text);
}

/* Textos legales bajo las casillas: 13px/300 cursiva como prod (HB: 14px normal al 75%) */
:is(#checkout #checkout-personal-information-step, #registration .form-check-label) em {
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  line-height: 20px;
  color: var(--ms-text);
}

/* "Información adicional" (módulo de campos de registro, rejilla BS4 col-md-3/col-md-6 que se
   salía 12px a la izquierda): etiqueta encima y desplegable a todo el ancho, como el resto.
   El asterisco en línea del módulo (#f55) se cambia por el de HB (::after, mismo rosa). */
#registration_fields {
  padding: 0;
  margin: 0;
}

#registration_fields .rf_input_wrapper.row {
  display: block;
  margin: 0 0 1rem;
}

#registration_fields .rf_input_wrapper > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

#registration_fields .rf_input_label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
}

#registration_fields .rf_input_label > span:first-child {
  display: none;
}

#registration_fields .rf_input_label.required::after {
  padding-left: 0.25em;
  color: var(--bs-danger);
  content: "*" / "";
}

#registration_fields select {
  width: 100%;
}

/* Fila vacía que el módulo pinta tras el fieldset */
#registration_fields + .form-group.row:not(:has(input, select, textarea)) {
  display: none;
}

/* "Continuar" de los pasos: a todo el ancho, 56 de alto, 16/400 (HB: 123×38 a la derecha) */
#checkout .step__content .buttons-wrapper {
  margin-top: 24px;
}

#checkout .step__content .buttons-wrapper .btn-primary {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
  width: 100%;
}

/* Pestaña "Iniciar sesión": botón arriba a todo el ancho y "¿Olvidó su contraseña?" debajo */
:is(#checkout .step__content, #authentication #content) .buttons-wrapper--split {
  flex-direction: column-reverse;
  align-items: flex-start;
}

:is(#checkout .step__content, #authentication #content) .buttons-wrapper--split .btn-basic {
  width: auto;
  padding-inline: 0;
  font-weight: 300;
  color: var(--ms-text);
  text-decoration: underline;
}

:is(#checkout .step__content, #authentication #content) .buttons-wrapper--split .btn-basic:hover {
  color: #b4546b;
}

/* ==========================================================================
   Checkout K3/K4 — retoques del revisor (ronda 1, junto con K5)
   (a) Casillas cuadradas (radio 0) como prod y los campos; los radios siguen redondos.
   (b) Línea TOTAL del resumen: 12px mínimo entre etiqueta e importe y salto de línea del importe
       si no cabe; en <576 a 20px (a 390 con 24px "Total (impuestos inc.)" ocupa 235 de 324 útiles).
   ========================================================================== */
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .form-check-input[type="checkbox"] {
  border-radius: 0;
}

.cart-summary .cart-summary__total .cart-summary__line {
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 0;
}

.cart-summary .cart-summary__total .cart-summary__line .cart-summary__value {
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .cart-summary .cart-summary__total .cart-summary__line--bold,
  .cart-summary .cart-summary__total .cart-summary__line--bold .cart-summary__value {
    font-size: 20px;
  }
}

/* ==========================================================================
   Carrito/Checkout K6 — casos
   - Carrito vacío: HB pinta "Tramitar Pedido" deshabilitado sin .btn-lg → mismo alto (56).
   - Deshabilitado legible en carrito/checkout (HB: opacidad .65 → texto a ~2:1): rosa claro #f5d3da
     con texto #472528 (10:1), sin opacidad; sigue viéndose inactivo frente al rosa #e68699.
   - "Gratis"/importe del transporte: el <small> vacío del hook añadía 4px a la derecha.
   - Error del cupón con radio 0, como campos y botones.
   ========================================================================== */
.cart-summary .cart-summary__actions .btn-primary {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
}

:is(#cart, #checkout) .btn-primary:disabled,
:is(#cart, #checkout) .btn-primary.disabled {
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-color: #472528;
  --bs-btn-disabled-bg: #f5d3da;
  --bs-btn-disabled-border-color: #f5d3da;
}

.cart-summary .cart-summary__value-inner:empty {
  display: none;
}

.cart-summary .cart-voucher__error {
  border-radius: 0;
}

/* ==========================================================================
   Checkout K5a — Paso 2 Direcciones (03/10). En prod no se pueden ver los pasos 2-4 sin crear un
   invitado → coherencia con K1-K4: campos ya cubiertos por K4. Tarjeta de dirección: borde 1px
   #e7e7e7, fondo blanco, radio 0, padding 20, texto 16/300/28; seleccionada con borde 2px rosa (sin
   salto: el borde de 1px se compensa con 1px de padding). Modificar/Eliminar, "Añadir nueva dirección"
   y "La dirección de facturación difiere…" en #b4546b (HB: negro, rojo #ff4657 y rosa 2.55:1).
   "Volver a …" (.js-back de los pasos 2-4) = "Continuar comprando" de K1 (regla del carrito).
   ========================================================================== */
#checkout .address-card {
  color: var(--ms-text);
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 0;
}

#checkout .address-card.selected {
  border: 2px solid var(--ms-pink);
}

#checkout .address-card__container {
  padding: 20px;
}

#checkout .address-card.selected .address-card__container {
  padding: 19px;
}

#checkout .address-card__alias {
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}

#checkout .address-card__content {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

#checkout .address-card .form-check-input {
  border-color: #8c8c8c;
}

#checkout .address-card .form-check-input:checked {
  background-color: var(--ms-text);
  border-color: var(--ms-text);
}

/* Modificar/Eliminar llevan .link-body-emphasis/.link-danger (color !important dentro de @layer de HB):
   entre importantes gana la primera capa declarada → @layer vendors, como C4 */
@layer vendors {
  #checkout .address-card__actions a {
    color: #b4546b !important;
  }

  #checkout .address-card__actions a:hover,
  #checkout .address-card__actions a:focus-visible {
    color: #472528 !important;
  }
}

#checkout .address-card__actions a {
  font-weight: 400;
  text-decoration: underline;
}

#checkout #checkout-addresses-step a.btn-outline-primary[href*="newAddress"],
#checkout #checkout-addresses-step a.btn-outline-primary[href*="newAddress"]:visited {
  --bs-btn-color: #b4546b;
  --bs-btn-border-color: #b4546b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b4546b;
  --bs-btn-hover-border-color: #b4546b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9e4a5e;
  --bs-btn-active-border-color: #9e4a5e;
  --bs-btn-border-radius: 0;
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 20px;
}

#checkout #checkout-addresses-step a[data-link-action="different-invoice-address"] {
  padding-inline: 0;
  font-weight: 400;
  color: #b4546b;
  text-align: left;
  text-decoration: underline;
}

#checkout #checkout-addresses-step a[data-link-action="different-invoice-address"]:hover {
  color: var(--ms-text);
}

/* K5b (revisor): texto introductorio de los pasos (p.ej. "La dirección seleccionada se utilizará…") a 16/300/28 */
#checkout .step__content form > p {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

/* ==========================================================================
   Checkout K5b — Paso 3 Método de envío (03/10). Cada transportista en una fila: separador 1px
   #ececec, padding 15 0, sin fondo ni radio (HB: tarjeta #f8f9fa con radio 8); radio #8c8c8c /
   granate (K4); logo máx. 50 de alto; nombre 16/400 #472528 (HB 600); plazo 14/300 #707070 (HB 16/400
   al 75%); precio 16/500 a la derecha. Widget de Correos (Oficina Elegida): solo contenedor y
   tipografía (campo y desplegable como K4, botón a 45 de alto y radio 0; colores de Correos intactos).
   "Continuar" a todo el ancho: el botón trae w-100 w-md-auto (!important en capa) → @layer vendors.
   ========================================================================== */
#checkout .delivery-option__item {
  background: none;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
}

#checkout .delivery-option__item:first-child {
  border-top: 1px solid #ececec;
}

#checkout .delivery-option__label {
  padding: 15px 0;
}

#checkout .delivery-option__carrier-logo {
  flex-shrink: 0;
  width: 64px;
  height: 50px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
}

#checkout .delivery-option__carrier-name {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ms-text);
}

#checkout .delivery-option__content {
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: #707070;
}

#checkout .delivery-option__price {
  justify-self: end;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
  color: var(--ms-text);
  text-align: right;
}

/* Extra del transportista: HB padding 0 16 16 aunque esté vacío (Correos "Domicilio" solo trae un comentario
   → +16 px en la fila seleccionada). Solo con contenido real (widget de oficina), 15 px abajo y sin sangría. */
#checkout .delivery-option__extra-content {
  padding: 0;
}

#checkout .delivery-option__extra-content:has(.extra-container) {
  padding: 0 0 15px;
}

/* K5d (revisor, opcional): <768 HB apila logo+nombre, plazo y precio al 100 % (fila de ~157 px) → rejilla:
   logo+nombre y precio en la misma línea; plazo debajo, sangrado hasta el nombre (radio 16 + 16 + logo 64 + 16) */
@media (max-width: 767.98px) {
  #checkout .delivery-option__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
  }

  #checkout .delivery-option__left {
    grid-column: 1;
    grid-row: 1;
  }

  #checkout .delivery-option__price {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  #checkout .delivery-option__content {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 112px;
  }
}

#checkout .correos_oficial {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

#checkout .correos_oficial .officeSelector,
#checkout .correos_oficial .frontOptionSelector {
  height: 45px;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ms-text);
  border: 1px solid #e3e3e3;
  border-radius: 0;
}

#checkout .correos_oficial button.SearchOfficeByCp.co_primary_button {
  height: 45px;
}

/* !important en capa: gana al w-md-auto de HB (en capa, declarado después) y al "border-radius: 3px
   !important" sin capa de correosoficial/global.css (entre importantes, lo de capa gana a lo sin capa) */
@layer vendors {
  #checkout .step__content .buttons-wrapper .btn-primary {
    width: 100% !important;
  }

  #checkout .correos_oficial .co_primary_button {
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   Checkout K5c — Paso 4 Pago (03/10). Opciones de pago con el patrón de fila de K5b (separador 1px
   #ececec, padding 15 0; HB: líneas de 26 px sin separación); logos de Redsys alineados con el texto
   (máx. 24 de alto, 8 px de hueco); información adicional del método en caja #f9f9f9 con padding 15;
   casilla de términos como K4 y enlace a las condiciones #b4546b; "Realizar pedido" a todo el ancho
   (HB 187×56). Deshabilitado: se mantiene el de K6 (#f5d3da + texto #472528, 10:1) en vez de opacidad .5.
   "Volver a Envío" = K1 (regla .js-back). El bloque de ventajas del paso no se toca (R4a-bis pendiente).
   ========================================================================== */
#checkout .payment-options__list .payment-option {
  padding: 15px 0;
  border-bottom: 1px solid #ececec;
}

#checkout .payment-options__list .payment-option:first-child {
  border-top: 1px solid #ececec;
}

#checkout #center-column .payment-option__label {
  font-size: 16px;
  font-weight: 400;
  color: var(--ms-text);
}

#checkout .payment-option__label img {
  width: auto;
  max-height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

#checkout .payment-option__additional-information {
  padding: 15px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  background: #f9f9f9;
}

/* El último <p> visible no es :last-child (detrás va el modal oculto de ps_wirepayment) */
#checkout .payment-option__additional-information section > p:last-of-type {
  margin-bottom: 0;
}

#checkout .payment-option__additional-information a {
  color: #b4546b;
  text-decoration: underline;
  cursor: pointer;
}

#checkout label[for^="conditions_to_approve"] a {
  color: #b4546b;
  text-decoration: underline;
}

#checkout label[for^="conditions_to_approve"] a:hover,
#checkout label[for^="conditions_to_approve"] a:focus-visible {
  color: var(--ms-text);
}

/* El contenedor partido (column-reverse + align-items: flex-start, K4) encogía #payment-confirmation a 187 */
#checkout #payment-confirmation,
#checkout #payment-confirmation > .ps-shown-by-js {
  width: 100%;
}

#checkout #payment-confirmation .btn-primary {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
}

@layer vendors {
  #checkout #payment-confirmation .btn-primary {
    width: 100% !important;
  }
}

/* ==========================================================================
   Cuenta A1 — Base común de las páginas SIN sesión: iniciar sesión (#authentication),
   crear cuenta (#registration), recuperar contraseña (#password) y seguimiento de invitado
   (#guest-tracking). Limitado por body id (NO .page-customer-account: la llevan también las
   páginas con sesión). Columna central de HB (container--limited-sm/md) a 600 (576 útiles),
   H1 estándar y contenido en caja 1px #e7e7e7 con 24 de padding (como el .page-content de prod).
   Campos y casillas: reglas de "Checkout K4" (compartidas vía :is()).
   ========================================================================== */
:is(#authentication, #registration, #password, #guest-tracking) :is(.container--limited-sm, .container--limited-md) {
  max-width: 600px;
}

:is(#authentication, #registration, #password, #guest-tracking) #center-column .page-title-section {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

:is(#authentication, #registration, #password, #guest-tracking) #content.page-content {
  padding: 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  border: 1px solid #e7e7e7;
}

:is(#authentication, #registration, #password, #guest-tracking) #center-column hr {
  margin: 24px 0;
  color: #e7e7e7;
  opacity: 1;
}

/* Botón principal de cada formulario: a todo el ancho, 56 de alto, 16/400 */
:is(#authentication, #registration, #password, #guest-tracking) #content .buttons-wrapper .btn-primary {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
  width: 100%;
}

:is(#authentication, #registration, #password, #guest-tracking) #content .buttons-wrapper {
  margin-top: 24px;
}

/* Enlaces de texto de estas páginas: #472528 subrayado, hover #b4546b */
:is(#authentication, #registration, #password, #guest-tracking) #center-column :is(p a, .btn-basic) {
  font-weight: 300;
  color: var(--ms-text);
  text-decoration: underline;
}

:is(#authentication, #registration, #password, #guest-tracking) #center-column :is(p a, .btn-basic):hover {
  color: #b4546b;
}

/* Alertas (p.ej. error de inicio de sesión): radio 0, texto 16/300 */
:is(#authentication, #registration, #password, #guest-tracking) #center-column .alert {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  border-radius: 0;
}

/* ==========================================================================
   Cuenta A2 — Iniciar sesión
   "Iniciar sesión" a todo el ancho (arriba) y "¿Olvidó su contraseña?" debajo (reglas de K4);
   "¿No tiene una cuenta?" 18/500 #472528; "Cree su cuenta" como botón secundario de prod
   (#f8f8f8, texto #472528, radio 0, 56 de alto; HB: contorno y texto rosa, 2.55:1).
   ========================================================================== */
#authentication .login__register-prompt .h4 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ms-text);
}

#authentication .login__register-prompt .btn-outline-primary {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 16px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
  --bs-btn-color: #472528;
  --bs-btn-bg: #f8f8f8;
  --bs-btn-border-width: 0;
  --bs-btn-border-color: #f8f8f8;
  --bs-btn-border-radius: 0;
  --bs-btn-hover-color: #472528;
  --bs-btn-hover-bg: #ececec;
  --bs-btn-hover-border-color: #ececec;
  --bs-btn-active-color: #472528;
  --bs-btn-active-bg: #e3e3e3;
  --bs-btn-active-border-color: #e3e3e3;
  --bs-btn-focus-shadow-rgb: 230, 134, 153;
}

/* ==========================================================================
   Cuenta A3 — Crear cuenta, recuperar contraseña, seguimiento de invitado
   Botones principales a todo el ancho (A1). "¿Ya tiene una cuenta? Iniciar sesión" y
   "Volver a Inicio de sesión" como enlaces #472528 (A1). Pie de "recuperar contraseña" (fuera
   de la caja) sin sangría del botón.
   ========================================================================== */
#password .page-footer .buttons-wrapper {
  margin-top: 0;
}

#password .page-footer .btn-basic {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding-inline: 0;
}

#password .page-footer .btn-basic .material-icons {
  font-size: 18px;
  text-decoration: none;
}

#registration .register-form__login-prompt {
  margin-bottom: 0;
}

/* A3 — retoques: textos legales del alta como en el checkout (bloque en línea para que valga el
   interlineado de 20), asterisco separado en "recuperar contraseña" (la plantilla no deja espacio)
   y flecha de "Volver a Inicio de sesión" sin subrayado */
#registration .form-check-label em {
  display: inline-block;
}

#password .form-label.required::after {
  padding-left: 0.25em;
}

#password .page-footer .btn-basic {
  text-decoration: none;
}

#password .page-footer .btn-basic span {
  text-decoration: underline;
}

/* ==========================================================================
   CMS M1 — Páginas CMS (#cms). H1 estándar (22/400 #333 + borde #e3e3e3, pad 11). Contenido
   .page-content--cms 16/300/28 #472528; h2-h6 del contenido 16/400/28 (prod los aplana a 300;
   400 para distinguirlos del texto); enlaces #b4546b subrayados; imágenes fluidas.
   A 390: palabras/URL largas se parten (8, 1, 7 desbordaban hasta 483) y las tablas anchas
   (67 cookies, 534px) hacen scroll dentro de sí mismas, no la página. El contenido NO se toca
   (colores en línea de la 64, 2.º H1…: pendiente de sincronizar la DB).
   ========================================================================== */
#cms #center-column .page-title-section {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

#cms .page-content--cms {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

#cms .page-content--cms :is(h2, h3, h4, h5, h6) {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ms-text);
}

#cms .page-content--cms a {
  color: #b4546b;
  text-decoration: underline;
}

#cms .page-content--cms a:hover {
  color: var(--ms-text);
}

#cms .page-content--cms img {
  max-width: 100%;
  height: auto;
}

#cms .page-content--cms table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   Contacto M2 (#contact). Se conserva la columna "Información de la tienda" de HB (ps_contactinfo).
   H1 del formulario y título de la columna con el estilo del H1 estándar (22/400 #333 + borde),
   alineados a la misma altura; textos 16/300, iconos y enlaces #472528 (hover #b4546b).
   Campos: reglas compartidas de "Checkout K4" (:is(… #contact) #center-column); textarea ≥93
   (prod 93); adjunto con botón gris #f8f8f8 como btn-secondary de prod. "Enviar tu mensaje":
   .btn-primary de 46 a la derecha en escritorio, a todo el ancho en móvil (buttons-wrapper de HB).
   ========================================================================== */
#contact #center-column .page-title-section,
#contact #left-column .ps-contactinfo__title {
  padding-bottom: 11px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

#contact #left-column .ps-contactinfo {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

#contact #left-column .ps-contactinfo__item .material-icons {
  font-size: 20px;
  line-height: 28px;
  color: var(--ms-text);
}

#contact #left-column .ps-contactinfo__info a {
  color: var(--ms-text);
}

#contact #left-column .ps-contactinfo__info a:hover {
  color: #b4546b;
}

#contact #left-column .ps-contactinfo hr {
  color: #e7e7e7;
  opacity: 1;
}

#contact #center-column textarea.form-control {
  min-height: 93px;
}

#contact #center-column input[type="file"].form-control::file-selector-button {
  font-weight: 400;
  color: var(--ms-text);
  background-color: #f8f8f8;
}

#contact #center-column input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
  background-color: #ececec;
}

#contact .contact-form .buttons-wrapper .btn-primary {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 30px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 24px;
}

/* ==========================================================================
   Blog B1 — Tarjeta de post COMPARTIDA (home + listados del blog) y bloque "Blog de uñas" de la home
   (modules/ph_simpleblog/…/_partials/post-miniature.tpl + modules/ph_blog_column_custom/…/custom_block_column.tpl).
   Prod (1510): 2 columnas de 654 con hueco 32 dentro de 1340 (x85); de una tarjeta a la siguiente fila 57
   (padding 16 + 25 + 16); imagen a tamaño natural (600×300) con margen inferior 16; título 16/300/28
   con borde inferior 1px rgba(161,161,161,.25), padding y margen inferiores de 12.8; extracto 16/300/28 + "Leer más ›"
   12.8 subrayado; meta con línea encima (margen 16 + padding 16): fecha 16/300 · categoría 12.8 · visitas 16/300.
   Móvil (390): 1 columna (x15 w360), separaciones de 12 y 49 entre tarjetas.
   ========================================================================== */
.ms-home-blog > .container {
  max-width: 1370px;
  padding-right: 15px;
  padding-left: 15px;
}

.page-content--home .ms-home-blog {
  margin-bottom: 41px;
}

.ms-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 57px 32px;
}

.ms-blog-card {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.ms-blog-card a {
  color: var(--ms-text);
}

.ms-blog-card a:hover,
.ms-blog-card a:focus-visible {
  color: #b4546b;
}

/* R2 (02/10): todas las imágenes a 2:1 (600×300 a 1510, 360×180 a 390) con object-fit: cover, petición del
   usuario; antes tamaño natural (post 23 516×300 salía 600×349, igual que en prod) */
.ms-blog-card__image {
  display: block;
  width: 600px;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  margin-bottom: 16px;
}

.ms-blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-blog-card__title {
  padding-bottom: 12.8px;
  margin: 0 0 12.8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  border-bottom: 1px solid rgba(161, 161, 161, 0.25);
}

.ms-blog-card__title a {
  text-decoration: none;
}

.ms-blog-card__excerpt {
  margin: 0;
}

.ms-blog-card__more {
  font-size: 12.8px;
  line-height: 15.36px;
  white-space: nowrap;
  text-decoration: none;
}

/* B2 (corrección del revisor a B1): solo el texto subrayado, no el chevron */
.ms-blog-card__more-text {
  text-decoration: underline;
}

.ms-blog-card__more .material-icons {
  font-size: 13px;
  vertical-align: -2px;
  text-decoration: none;
}

.ms-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: baseline;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(161, 161, 161, 0.25);
}

.ms-blog-card__meta-item {
  white-space: nowrap;
}

.ms-blog-card__meta .material-icons {
  margin-right: 4px;
  font-size: 16px;
  vertical-align: -3px;
}

.ms-blog-card__category a {
  font-size: 12.8px;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .ms-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 49px;
  }

  .ms-blog-card__image {
    margin-bottom: 12px;
  }

  .ms-blog-card__meta {
    padding-top: 12px;
    margin-top: 12px;
  }
}

/* ==========================================================================
   Blog B2 — Listado (/xx/blog, /xx/blog/page/N) y categoría (/xx/blog/<cat>)
   (modules/ph_simpleblog/views/templates/front/1.7/list.tpl + pagination.tpl; body #module-ph_simpleblog-*).
   Prod (1510): ancho completo x70 w1370; H1 22/400 #333, pb 11 + borde 1px #e3e3e3, mb 17.6 (patrón A1);
   del H1 a la primera imagen 30; columnas de 670 con hueco 30 y filas a 25 (sin el masonry de prod);
   paginación con margen superior 24: "Mostrando…" 16/300 a la izquierda; a la derecha páginas 16/300 #333
   con padding 6.4×12.8, la actual con borde 1px #333, y "Siguiente ›" #472528.
   ========================================================================== */
/* Mismo contenedor que categoría y ficha: gutter 30 (móvil x15 w360, como prod) */
[id^="module-ph_simpleblog-"] .columns-container,
[id^="module-ph_simpleblog-"] .columns-container > .row {
  --bs-gutter-x: 30px;
}

@media (min-width: 1400px) {
  [id^="module-ph_simpleblog-"] .columns-container {
    max-width: 1400px;
  }
}

[id^="module-ph_simpleblog-"] #center-column .page-title-section {
  padding-bottom: 11px;
  margin-bottom: 17.6px;
  font-size: 22px;
  font-weight: 400;
  line-height: 26.4px;
  color: #333;
  border-bottom: 1px solid #e3e3e3;
}

.simpleblog__listing {
  margin-top: 30px;
}

.ms-blog-grid--list {
  gap: 25px 30px;
}

.ms-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

/* ph_simpleblog-17.css pinta el resumen en #7a7a7a (4.3:1) con .simpleblog__listing__pagination > div */
.ms-blog-pagination > .ms-blog-pagination__summary {
  color: var(--ms-text);
}

.ms-blog-pagination__list {
  --bs-pagination-padding-x: 12.8px;
  --bs-pagination-padding-y: 6.4px;
  --bs-pagination-font-size: 16px;
  --bs-pagination-border-width: 0;
  --bs-pagination-bg: transparent;
  --bs-pagination-hover-bg: transparent;
  --bs-pagination-focus-bg: transparent;
  --bs-pagination-active-bg: transparent;
  --bs-pagination-disabled-bg: transparent;
  gap: 0 0.8px;
  margin: 0;
}

.ms-blog-pagination__list .page-link {
  display: flex;
  align-items: center;
  font-weight: 300;
  line-height: 28px;
  color: #333;
  border: 1px solid transparent;
  border-radius: 0;
}

.ms-blog-pagination__list .page-link:hover,
.ms-blog-pagination__list .page-link:focus-visible {
  color: #b4546b;
}

.ms-blog-pagination__list .active > .page-link {
  color: #333;
  border-color: #333;
}

.ms-blog-pagination__list .previous,
.ms-blog-pagination__list .next {
  color: var(--ms-text);
}

.ms-blog-pagination__list .material-icons {
  font-size: 18px;
}

@media (max-width: 767.98px) {
  .ms-blog-grid--list {
    row-gap: 25px;
  }
}

/* ==========================================================================
   Blog B3 — Post (modules/ph_simpleblog/views/templates/front/1.7/single.tpl; H1 y contenedor de B2)
   Prod (1510): meta bajo el H1 con margen 20 arriba y abajo: icono 16 + 5 + texto 16/300/28, ≈22 entre
   elementos; contenido x70 w1370 sin padding (ph_simpleblog-17.css le pone 25×20), 16/300/28 #472528:
   p mb 12.8, los "h2.MsoNormal" que el contenido usa como párrafos a 16/300/28 mb 8, strong 500,
   imágenes a tamaño natural (máx. 100%); bloque mb 60; "Productos Relacionados" 16/700/28 #333, pb 8, y 24 hasta
   las tarjetas (328 de ancho, 4 por fila, hueco 20).
   ========================================================================== */
.ms-blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  padding: 0;
  margin: 20px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  list-style: none;
}

.ms-blog-post__meta li {
  white-space: nowrap;
}

.ms-blog-post__meta .material-icons {
  margin-right: 5px;
  font-size: 16px;
  vertical-align: -3px;
}

.ms-blog-post__meta a {
  color: var(--ms-text);
  text-decoration: none;
}

.ms-blog-post__meta a:hover,
.ms-blog-post__meta a:focus-visible {
  color: #b4546b;
}

.ms-blog-post {
  margin-bottom: 60px;
}

.simpleblog__post .ms-blog-post__content {
  padding: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.ms-blog-post__content p {
  margin: 0 0 12.8px;
}

.ms-blog-post__content :is(h1, h2, h3, h4, h5, h6).MsoNormal {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.ms-blog-post__content :is(strong, b) {
  font-weight: 500;
}

.ms-blog-post__content img {
  max-width: 100%;
  height: auto;
}

.ms-blog-post__content a {
  color: var(--ms-text);
}

.ms-blog-post__content a:hover,
.ms-blog-post__content a:focus-visible {
  color: #b4546b;
}

.ms-blog-post__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ms-blog-post__related {
  margin-bottom: 48px;
}

.ms-blog-post__related-title {
  padding-bottom: 8px;
  margin: 0 0 24px; /* prod: mb 12.8 + mt-4 del bloque → 24 hasta las tarjetas (60 desde el inicio del título) */
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: #333;
}

.ms-blog-post__related .products {
  gap: 20px;
}

@media (max-width: 767.98px) {
  .ms-blog-post__related .products {
    gap: 15px;
  }
}

/* ==========================================================================
   Blog B4 — Pasada: vídeos/iframes del contenido de los posts sin desbordar en móvil
   (p.ej. "solucion-eficiente…" lleva un <video width="400" height="350"> → scrollWidth 415 a 390)
   ========================================================================== */
.ms-blog-post__content :is(video, iframe) {
  max-width: 100%;
}

.ms-blog-post__content video {
  height: auto;
}

@media (max-width: 767.98px) {
  .ms-blog-post__content iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   Variantes V1 — "Tamaños: 15 g 30 g…" en las tarjetas de producto (templates/catalog/_partials/
   miniatures/product.tpl, block product_sizes; HTML de Product::getAttributesData() del override).
   Prod (IQIT): bloque centrado 16/300/28; etiqueta <strong> 12/400/28 #472528 padding 0 5 e inline-block;
   <ul> inline-block sin viñetas ni margen/padding; <li> inline-block 12/300/28 lowercase padding 0 5.
   Si caben, etiqueta y valores en una línea (h29 a 1510); si no, los valores pasan debajo y se parten
   en varias líneas (58/87; a 390 la etiqueta va sola en su línea).
   ========================================================================== */
.products-custom-variants {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
  text-align: center;
}

.have_attribute_values strong {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
}

.have_attribute_values ul {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-align: left;
  list-style: none;
}

.have_attribute_values li {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 300;
  line-height: 28px;
  text-transform: lowercase;
}

/* ==========================================================================
   I8 (07/10) — Tarjetas: "Varios colores" / "Varios tamaños"… en lugar de la lista de valores de V1
   (los probadores pensaban que eran enlaces). Texto plano, sin subrayado ni hover, 12/300/28 #707070.
   Rollback: quitar esta sección + volver al bloque product_sizes anterior en miniatures/product.tpl.
   ========================================================================== */
.products-custom-variants .ms-card-options {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 28px;
  color: #707070;
  cursor: default;
}

/* ==========================================================================
   I15 (07/10) — Pago: aviso mientras "Realizar pedido" esté deshabilitado (custom.js crea
   p.ms-pay-hint encima de los botones) y casilla de términos resaltada al tocar el botón.
   Rojo de formulario de BS (#dc3545, 4.5:1 sobre blanco).
   Rollback: quitar esta sección + bloque "I15" de custom.js.
   ========================================================================== */
#checkout .ms-pay-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #dc3545;
}

#checkout .ms-pay-hint::before {
  flex-shrink: 0;
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 20px;
  content: "\e88e"; /* info */
}

#checkout .ms-pay-hint[hidden] {
  display: none;
}

#checkout #conditions-to-approve .form-check.ms-is-invalid .form-check-input {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgb(220 53 69 / 25%);
}

#checkout #conditions-to-approve .form-check.ms-is-invalid .form-check-label {
  color: #dc3545;
}

/* ==========================================================================
   I11 (07/10) — La cabecera fija (sticky: 219 px a 1510, 85 px a 390) tapaba el campo al que salta
   reportValidity(). custom.js pone en --ms-header-h el alto real de #header → margen de scroll.
   + Casilla obligatoria sin marcar tras intentar enviar (.was-validated de HB): borde y halo #dc3545,
   etiqueta en rojo, mensaje .invalid-feedback (I12) debajo, 14/400/20.
   Rollback: quitar esta sección + bloque "I11 + I12" de custom.js.
   ========================================================================== */
form :is(input, select, textarea) {
  scroll-margin-top: calc(var(--ms-header-h, 100px) + 24px);
}

/* Mismo prefijo que K4 (si no, pierden contra el borde #8c8c8c y la etiqueta granate) + genérico */
.was-validated .form-check-input[type="checkbox"]:invalid,
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .was-validated .form-check-input[type="checkbox"]:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgb(220 53 69 / 25%);
}

.was-validated .form-check-input[type="checkbox"]:invalid ~ .form-check-label,
:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact) #center-column .was-validated .form-check-input[type="checkbox"]:invalid ~ .form-check-label {
  color: #dc3545;
}

.form-check > .js-ms-check-feedback {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #dc3545;
}

/* ==========================================================================
   I2 (07/10) — Errores de formato con explicación (templates/_partials/form-errors.tpl del hijo):
   la explicación va en su propia línea dentro del aviso rojo de HB. Ayudas de los campos
   (span.form-text, p. ej. "Solo se permiten caracteres alfabéticos…") heredaban 16/28 en línea →
   bloque 13/20 (revisor). Mismo tamaño para "Opcional".
   Rollback: quitar esta sección + borrar templates/_partials/form-errors.tpl del hijo (también en el servidor).
   ========================================================================== */
.help-block .alert .ms-error-hint {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
}

:is(#checkout, #authentication, #registration, #password, #guest-tracking, #contact, #address, #identity) #center-column .form-text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
}

/* ==========================================================================
   I5 (07/10) — Modal "Más información" de la transferencia (override BS5 de ps_wirepayment_intro.tpl;
   custom.js lo mueve a <body>). Texto 16/300/28 como la caja de la transferencia (K5c); datos en <dl>.
   Rollback: quitar esta sección, el bloque "I5" de custom.js y borrar modules/ps_wirepayment/ del hijo
   (también en el servidor).
   ========================================================================== */
.ms-bankwire-modal .modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--ms-text);
}

.ms-bankwire-modal .modal-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ms-text);
}

.ms-bankwire-modal dt {
  font-weight: 500;
}

.ms-bankwire-modal dd {
  margin-bottom: 12px;
}

/* ==========================================================================
   I13 (07/10) — Menú de Mi cuenta: registrationfields ("Mi información de registro") y cookiesplus
   ("Tus ajustes de cookies") pintan marcado del tema clásico (<a class="col-lg-4 …"><span class="link-item">
   <i class="material-icons">) → salían en línea, pegados. Mismo aspecto que .account-menu__link de HB:
   lateral (≥992) fila 12×16, hueco 8, radio 8; panel principal (/mi-cuenta) ficha #f8f9fa 600.
   Rollback: quitar esta sección.
   ========================================================================== */
.account-menu > a:not(.account-menu__link),
.account-menu__nav > a:not(.account-menu__link) {
  display: flex;
  flex: none;
  align-items: center;
  width: auto;
  max-width: none;
  color: var(--bs-body-color);
  text-decoration: none;
  border-radius: var(--bs-border-radius);
  transition: var(--bs-transition-default);
}

.account-menu > a:not(.account-menu__link):hover,
.account-menu__nav > a:not(.account-menu__link):hover {
  color: var(--bs-link-hover-color);
}

.account-menu > a:not(.account-menu__link) .link-item,
.account-menu__nav > a:not(.account-menu__link) .link-item {
  display: flex;
  flex-direction: inherit;
  gap: inherit;
  align-items: inherit;
}

.account-menu > a:not(.account-menu__link) .material-icons,
.account-menu__nav > a:not(.account-menu__link) .material-icons {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.account-menu--sidebar .account-menu__nav > a:not(.account-menu__link) {
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.account-menu--main > a:not(.account-menu__link) {
  gap: 0.75rem;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--bs-tertiary-bg);
}

.account-menu--main > a:not(.account-menu__link) .material-icons {
  font-size: 2rem;
}

@media (min-width: 576px) {
  .account-menu--main > a:not(.account-menu__link) {
    flex-direction: column;
    align-items: initial;
    padding: 1.25rem 1rem;
  }
}

/* ==========================================================================
   I4 (07/10) — Enlaces a las CMS de condiciones (3) y privacidad (8) dentro de las etiquetas de las
   casillas (textos de psgdpr y ps_dataprivacy en configuración): mismo estilo que el enlace de términos
   del pago (K5c): #b4546b subrayado, hover #472528.
   Rollback: quitar esta sección (y restaurar los textos, ver CHANGELOG).
   ========================================================================== */
:is(#checkout, #authentication, #registration, #identity, #contact) #center-column .form-check-label a {
  color: #b4546b;
  text-decoration: underline;
}

:is(#checkout, #authentication, #registration, #identity, #contact) #center-column .form-check-label a:hover {
  color: var(--ms-text);
}