/* =============================================================
   Diosa Planta — capa de marca sobre Hummingbird (PS 9.1)
   -------------------------------------------------------------
   Hummingbird compila Bootstrap 5.3.3. Bootstrap define los colores
   de cada componente en variables propias del componente
   (--bs-btn-bg, --bs-pagination-active-bg...), NO derivadas de
   --bs-primary en tiempo de ejecución. Por eso aquí se redefinen
   componente a componente: cambiar solo --bs-primary no recolorea
   los botones.

   Paleta extraída del CSS en producción de diosaplanta.com
   (themes/PRS080193_01/assets/css/custom.css).
   ============================================================= */

/* Poppins es la tipografía actual de la tienda.
   PRODUCCIÓN: sustituir este @import por fuentes autoalojadas en
   assets/fonts/. Servir Google Fonts desde el navegador del cliente
   es un problema de RGPD en la UE y además bloquea el render. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* -------------------------------------------------------------
   1. Tokens de marca
   ------------------------------------------------------------- */
:root {
  --dp-verde:        #587205; /* color principal: botones, enlaces, iconos */
  --dp-verde-hover:  #6c8e04; /* hover de botones y enlaces */
  --dp-verde-oscuro: #405304; /* activo, cabeceras de tabla, bloques sólidos */
  --dp-verde-medio:  #88a725; /* hover de las cajas de categoría de portada */
  --dp-lima:         #cfd910; /* acento: badges, botón regalo, hover de flechas */
  --dp-lima-oscuro:  #d4d90e;

  --dp-fondo-suave:  #f4f8ee; /* avisos y bloques de contenido */
  --dp-fondo-alt:    #f7f9f3; /* filas alternas */
  --dp-chip:         #e7eed8; /* etiquetas pequeñas */
  --dp-borde:        #dfe4d8;
  --dp-borde-fuerte: #d8dfcf;
  --dp-gris-caja:    #f0f0f0;

  --dp-rgb-verde: 88, 114, 5;
  --dp-rgb-lima: 207, 217, 16;
}

/* -------------------------------------------------------------
   2. Tokens globales de Bootstrap
   ------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--dp-verde);
  --bs-primary-rgb: var(--dp-rgb-verde);
  --bs-primary-text-emphasis: var(--dp-verde-oscuro);
  --bs-primary-bg-subtle: var(--dp-fondo-suave);
  --bs-primary-border-subtle: var(--dp-borde);

  --bs-secondary: var(--dp-verde-oscuro);
  --bs-secondary-rgb: 64, 83, 4;

  --bs-link-color: var(--dp-verde);
  --bs-link-color-rgb: var(--dp-rgb-verde);
  --bs-link-hover-color: var(--dp-verde-hover);
  --bs-link-hover-color-rgb: 108, 142, 4;

  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #ffffff;

  --bs-border-color: var(--dp-borde);
  --bs-border-radius: 0.3125rem;      /* 5px, el radio que usa la tienda */
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.375rem;

  --bs-focus-ring-color: rgba(var(--dp-rgb-verde), 0.25);
  --bs-focus-ring-width: 0.2rem;
}

/* La tienda no usa mayúsculas forzadas en títulos ni en enlaces de pie.
   Hummingbird tampoco, pero varios módulos sí: se neutraliza aquí. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family);
  text-transform: none;
}

/* -------------------------------------------------------------
   3. Botones
   ------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.3125rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dp-verde);
  --bs-btn-border-color: var(--dp-verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dp-verde-hover);
  --bs-btn-hover-border-color: var(--dp-verde-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dp-verde-oscuro);
  --bs-btn-active-border-color: var(--dp-verde-oscuro);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--dp-verde);
  --bs-btn-disabled-border-color: var(--dp-verde);
  --bs-btn-focus-shadow-rgb: var(--dp-rgb-verde);
}

.btn-outline-primary {
  --bs-btn-color: var(--dp-verde);
  --bs-btn-border-color: var(--dp-verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dp-verde);
  --bs-btn-hover-border-color: var(--dp-verde);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dp-verde-oscuro);
  --bs-btn-active-border-color: var(--dp-verde-oscuro);
  --bs-btn-disabled-color: var(--dp-verde);
  --bs-btn-disabled-border-color: var(--dp-verde);
  --bs-btn-focus-shadow-rgb: var(--dp-rgb-verde);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dp-verde-oscuro);
  --bs-btn-border-color: var(--dp-verde-oscuro);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dp-verde);
  --bs-btn-hover-border-color: var(--dp-verde);
  --bs-btn-active-bg: var(--dp-verde-oscuro);
  --bs-btn-focus-shadow-rgb: 64, 83, 4;
}

/* Acento lima con texto negro: el patrón del botón "regalo" y de los
   hover de las flechas de carrusel en la tienda actual. */
.btn-acento {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--dp-lima);
  --bs-btn-border-color: var(--dp-lima);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--dp-lima-oscuro);
  --bs-btn-hover-border-color: var(--dp-lima-oscuro);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--dp-lima-oscuro);
  --bs-btn-focus-shadow-rgb: var(--dp-rgb-lima);
}

/* -------------------------------------------------------------
   4. Formularios
   ------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: 0.3125rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dp-verde-medio);
  box-shadow: 0 0 0 0.2rem rgba(var(--dp-rgb-verde), 0.15);
}

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

.form-check-input:focus {
  border-color: var(--dp-verde-medio);
  box-shadow: 0 0 0 0.2rem rgba(var(--dp-rgb-verde), 0.15);
}

.form-range::-webkit-slider-thumb { background-color: var(--dp-verde); }
.form-range::-moz-range-thumb     { background-color: var(--dp-verde); }

/* Foco visible de teclado en toda la tienda. */
:focus-visible {
  outline: 2px solid var(--dp-verde);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   5. Navegación, pestañas y paginación
   ------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--dp-verde);
  --bs-nav-pills-link-active-color: #fff;
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--dp-verde-oscuro);
  --bs-nav-tabs-link-active-border-color: var(--dp-borde) var(--dp-borde) #fff;
  --bs-nav-link-color: #212529;
  --bs-nav-link-hover-color: var(--dp-verde);
}

.nav-underline {
  --bs-nav-underline-link-active-color: var(--dp-verde);
}

.pagination {
  --bs-pagination-color: #212529;
  --bs-pagination-hover-color: var(--dp-verde);
  --bs-pagination-hover-bg: var(--dp-fondo-suave);
  --bs-pagination-hover-border-color: var(--dp-borde);
  --bs-pagination-focus-color: var(--dp-verde-oscuro);
  --bs-pagination-focus-bg: var(--dp-fondo-suave);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--dp-rgb-verde), 0.2);
  --bs-pagination-active-bg: var(--dp-verde-hover);
  --bs-pagination-active-border-color: var(--dp-verde-hover);
  --bs-pagination-active-color: #fff;
  --bs-pagination-border-radius: 0.25rem;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--dp-verde);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: var(--dp-fondo-suave);
  --bs-dropdown-link-hover-color: var(--dp-verde-oscuro);
  --bs-dropdown-border-color: var(--dp-borde);
}

.list-group {
  --bs-list-group-active-bg: var(--dp-verde);
  --bs-list-group-active-border-color: var(--dp-verde);
  --bs-list-group-action-hover-bg: var(--dp-fondo-suave);
  --bs-list-group-border-color: var(--dp-borde);
}

/* Acordeón: lo usan las FAQ de portada y los desplegables del pie. */
.accordion {
  --bs-accordion-active-color: var(--dp-verde-oscuro);
  --bs-accordion-active-bg: var(--dp-fondo-suave);
  --bs-accordion-border-color: var(--dp-borde);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--dp-rgb-verde), 0.2);
}

/* -------------------------------------------------------------
   6. Avisos, badges y progreso
   ------------------------------------------------------------- */
.alert-success {
  --bs-alert-color: var(--dp-verde-oscuro);
  --bs-alert-bg: var(--dp-fondo-suave);
  --bs-alert-border-color: var(--dp-borde);
}

.alert-info {
  --bs-alert-color: var(--dp-verde-oscuro);
  --bs-alert-bg: var(--dp-fondo-alt);
  --bs-alert-border-color: var(--dp-borde);
}

.badge {
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 0.25rem;
}

.progress {
  --bs-progress-bar-bg: var(--dp-verde);
}

.spinner-border,
.spinner-grow {
  color: var(--dp-verde);
}

/* -------------------------------------------------------------
   7. Utilidades de marca reutilizables
   ------------------------------------------------------------- */
.dp-bloque-solido {
  background: var(--dp-verde-oscuro);
  color: #fff;
  padding: 1.5rem;
}

.dp-bloque-suave {
  background: var(--dp-fondo-suave);
  border-left: 5px solid var(--dp-verde-hover);
  padding: 1.1875rem 1.3125rem;
}

.dp-etiqueta {
  display: inline-block;
  padding: 5px 10px;
  background: var(--dp-chip);
  color: var(--dp-verde-oscuro);
  font-size: 13px;
  font-weight: 700;
}

/* Las cuatro cajas de categoría de la portada actual
   (A GRANEL / FEMINIZADAS / AUTOS / SEMILLAS CBD). */
.dp-caja-categoria {
  display: block;
  background: var(--dp-verde);
  color: #fff;
  padding: 1.5rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.dp-caja-categoria:hover,
.dp-caja-categoria:focus {
  background: var(--dp-verde-medio);
  color: #fff;
}

.dp-caja-categoria h2,
.dp-caja-categoria .h2 {
  color: #fff;
  margin-bottom: 0.5rem;
}

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

/* =============================================================
   8. Selectores propios de Hummingbird (BEM)
   -------------------------------------------------------------
   Nombres verificados contra
   themes/hummingbird/assets/css/theme.css de la instalación.
   ============================================================= */

/* ---------- Cabecera ---------- */
.header,
.header-top {
  background: #ffffff;
}

.header-top {
  border-bottom: 1px solid var(--dp-borde);
}

.header-block__icon {
  color: var(--dp-verde);
}

.header-block__action-btn:hover,
.header-block--active .header-block__action-btn {
  color: var(--dp-verde-oscuro);
}

/* Contador de artículos del carrito */
.header-block__badge {
  background: var(--dp-verde);
  color: #ffffff;
  font-weight: 700;
}

/* ---------- Menú principal ---------- */
/* En escritorio la barra de menú va en verde con texto blanco, como ahora.
   En móvil el panel se queda claro: es como se comporta hoy la tienda. */
@media (min-width: 992px) {
  .header .menu {
    background: var(--dp-verde);
  }

  .header .menu > .menu__list > .menu-item > .menu__link,
  .header .menu > .menu__list > .menu-item > .menu-item__group-main-item > .menu__link {
    color: #ffffff;
    font-weight: 500;
  }

  .header .menu > .menu__list > .menu-item > .menu__link:hover,
  .header .menu > .menu__list > .menu--current > .menu__link {
    color: var(--dp-lima);
  }

  /* Submenús desplegados: fondo claro, texto oscuro */
  .header .menu--childrens {
    background: #ffffff;
    border: 1px solid var(--dp-borde);
  }

  .header .menu--childrens .menu__link {
    color: #212529;
    font-weight: 400;
  }

  .header .menu--childrens .menu__link:hover {
    color: var(--dp-verde);
  }

  .header .menu--childrens .menu__title {
    color: var(--dp-verde-oscuro);
    font-weight: 600;
  }
}

.menu-toggle {
  color: var(--dp-verde);
}

.menu__toggle-child {
  color: inherit;
}

/* ---------- Tarjeta de producto (listados y carruseles) ---------- */
.product-miniature__inner {
  border-color: var(--dp-borde);
}

.product-miniature__price {
  color: var(--dp-verde-oscuro);
  font-weight: 700;
}

.product-miniature__regular-price {
  color: #808080;
  font-weight: 400;
  text-decoration: line-through;
}

/* En la tienda actual el botón "Comprar" ocupa todo el ancho de la tarjeta */
.product-miniature__add,
.product-miniature__form {
  width: 100%;
}

.product-miniature__add .btn {
  width: 100%;
}

/* Título a dos líneas con puntos suspensivos, como ahora */
.product-miniature__details .product__name,
.product-miniature__infos .product__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Etiquetas sobre la miniatura ---------- */
/* Marcado real: <ul class="product-flags"><li class="badge {$flag.type}">
   Se tematizan con las variables del componente badge de Bootstrap. */
.product-flags .badge {
  --bs-badge-color: #ffffff;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 0.25rem;
  background-color: var(--dp-verde);
}

/* Descuentos: acento lima sobre negro, como en la tienda actual */
.product-flags .badge.discount,
.product-flags .badge.discount-percentage,
.product-flags .badge.discount-amount,
.product-flags .badge.on-sale {
  --bs-badge-color: #000000;
  background-color: var(--dp-lima);
}

.product-flags .badge.new {
  background-color: var(--dp-verde-oscuro);
}

.product-flags .badge.pack,
.product-flags .badge.online-only {
  background-color: var(--dp-verde-medio);
}

.product-flags .badge.out_of_stock {
  --bs-badge-color: #ffffff;
  background-color: #6c757d;
}

/* ---------- Ficha de producto ---------- */
.product__price {
  color: var(--dp-verde-oscuro);
  font-weight: 700;
}

.product__regular-price,
.product__pack-price {
  color: #808080;
  font-weight: 400;
  text-decoration: line-through;
}

.product__discount-percentage,
.product__discount-amount {
  display: inline-block;
  padding: 2px 8px;
  background: var(--dp-lima);
  color: #000000;
  font-weight: 700;
  border-radius: 0.25rem;
}

.product__unit-price,
.product__tax-infos,
.product__minimal-quantity {
  color: #6c757d;
}

.product__availability-status {
  font-weight: 600;
}

.product__manufacturer a {
  color: var(--dp-verde);
  font-weight: 600;
}

/* Selector de variantes: en diosaplanta cada opción es una fila completa
   con nombre a la izquierda y precio a la derecha. */
.product-variant__label {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.product-variant__radio:checked + .product-variant__label {
  border-color: var(--dp-verde);
  box-shadow: 0 0 0 1px var(--dp-verde);
}

.product-variant__selected {
  color: var(--dp-verde-oscuro);
  font-weight: 600;
}

.product-variant__legend {
  font-weight: 600;
}

/* Listas dentro de la descripción, como en la tienda actual */
.product__description-short ul,
.product__additional-info ul {
  list-style: circle;
  padding-left: 2.5rem;
}

/* ---------- Carrito y checkout ---------- */
.product-line__title {
  color: #212529;
  font-weight: 600;
}

.product-line__item-price,
.product-line__price {
  color: var(--dp-verde-oscuro);
  font-weight: 700;
}

.product-line__item-regular-price {
  color: #808080;
  font-weight: 400;
  text-decoration: line-through;
}

.product-line__item-discount {
  background: var(--dp-lima);
  color: #000000;
  font-weight: 700;
  border-radius: 0.25rem;
}

/* El regalo en cada pedido es una promesa de marca visible en portada */
.product-line__gift-icon,
.product-line__gift {
  color: var(--dp-verde);
}

.product-line__quantity-button:hover {
  border-color: var(--dp-verde);
  color: var(--dp-verde);
}

/* ---------- Listado: orden y filtros ---------- */
.products__filter-button,
.products__sort-dropdown-button {
  border-color: var(--dp-borde);
  color: #212529;
}

.products__filter-button:hover,
.products__sort-dropdown-button:hover {
  border-color: var(--dp-verde);
  color: var(--dp-verde-oscuro);
}

.products__count strong {
  color: var(--dp-verde-oscuro);
}

/* ---------- Opiniones ---------- */
.product-list-review,
.product-comment-list-item {
  color: var(--dp-verde-oscuro);
}

.product-list-comments-number {
  color: #6c757d;
}

/* ---------- Pie ---------- */
/* DECISIÓN A CONFIRMAR: el pie actual tiene fondo oscuro con enlaces en
   #ebebeb. Aquí se usa el verde oscuro de marca en vez de un gris neutro.
   Si Rubén prefiere el gris, cambiar solo esta regla. */
.footer__main {
  background: var(--dp-verde-oscuro);
  color: #ebebeb;
}

.footer__main a,
.footer-block__list a {
  color: #ebebeb;
  text-decoration: none;
}

.footer__main a:hover,
.footer-block__list a:hover {
  color: var(--dp-lima);
  text-decoration: underline;
}

.footer-block__title,
.footer-block__title--toggle {
  color: #ffffff;
  font-weight: 600;
  text-transform: none;
}

.footer-block__title::first-letter {
  text-transform: uppercase;
}

/* ---------- Enlaces dentro de contenido editorial ---------- */
.product__description-short a,
.card-text a,
#category-description a {
  color: var(--dp-verde);
  font-weight: 600;
  text-decoration: underline;
}

.footer__main .card-text a {
  color: #ebebeb;
}

/* =============================================================
   9. Ajustes contra la portada real
   -------------------------------------------------------------
   Correcciones tras comparar con diosaplanta.com en producción.
   Sustituyen a supuestos del bloque 8 que eran incorrectos.
   ============================================================= */

/* ---------- Rojo de descuento ---------- */
/* CORRECCIÓN: los descuentos de la tienda son ROJOS, no lima.
   El lima se reserva para acentos (badge HOT, resaltado de títulos). */
:root {
  --dp-rojo: #d92b1e;
}

.product-flags .badge.discount,
.product-flags .badge.discount-percentage,
.product-flags .badge.discount-amount,
.product-flags .badge.on-sale {
  --bs-badge-color: #ffffff;
  background-color: var(--dp-rojo) !important;
  border-color: var(--dp-rojo) !important;
  color: #ffffff !important;
}

/* Precio anterior: rojo y tachado, no gris */
.product-miniature__regular-price,
.product__regular-price,
.product-line__item-regular-price {
  color: var(--dp-rojo);
  text-decoration: line-through;
  font-weight: 400;
}

/* Precio actual en negro, no en verde */
.product-miniature__price,
.product__price {
  color: #212529;
  font-weight: 700;
}

/* ---------- Pie oscuro ---------- */
/* CORRECCIÓN: el pie real es gris carbón con títulos en lima y
   filete lima arriba. No verde, como había supuesto. */
.footer__main {
  background: #2b2b2b;
  color: #d9d9d9;
  border-top: 3px solid var(--dp-lima);
}

.footer__main a,
.footer-block__list a {
  color: #d9d9d9;
}

.footer__main a:hover,
.footer-block__list a:hover {
  color: var(--dp-lima);
}

.footer-block__title,
.footer-block__title--toggle {
  color: var(--dp-lima);
  font-weight: 600;
}

/* ---------- Tarjeta de producto ---------- */
/* En la tienda actual la tarjeta no lleva selector de cantidad:
   solo el botón COMPRAR a ancho completo. */
.product-miniature__actions .qty-input,
.product-miniature__actions .product__quantity {
  display: none;
}

.product-miniature__add,
.product-miniature__add .btn {
  width: 100%;
}

/* Título del producto: enlace verde subrayado */
.product-miniature__details .product__name a,
.product-miniature__infos .product__name a {
  color: var(--dp-verde);
  text-decoration: underline;
}

/* ---------- Títulos de sección ---------- */
/* Marcado real (tras sobrescribir components/section-title.tpl):
   <h2 class="section-title"><span class="section-title__text">…</span></h2> */
.section-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.75rem;
  color: #111111;
  margin: 2.5rem 0 1.5rem;
}

.section-title__text {
  background: linear-gradient(
    to bottom,
    transparent 62%,
    var(--dp-lima) 62%,
    var(--dp-lima) 92%,
    transparent 92%
  );
  padding: 0 0.35rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Utilidades para los bloques de portada ---------- */
/* Las cuatro cajas de categoría del hero. Se usan desde un bloque
   HTML en ps_customtext o en una plantilla propia. */
.dp-cajas-categoria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.dp-cajas-categoria .dp-caja-categoria {
  text-align: center;
  padding: 2rem 1.5rem;
}

.dp-cajas-categoria .dp-caja-categoria h2 {
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.dp-cajas-categoria .dp-caja-categoria p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Banda de fondo lima pálido, como la de OFERTAS DESTACADAS */
.dp-banda-lima {
  background: #eef3c9;
  padding: 2.5rem 0;
}

/* Tarjeta de garantías superpuesta al slider */
.dp-garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: #f7f7f7;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}

.dp-garantias > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-right: 1px solid var(--dp-borde);
}

.dp-garantias > div:last-child {
  border-right: 0;
}

.dp-garantias strong {
  display: block;
  font-weight: 600;
}

.dp-garantias span {
  color: #6c757d;
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .dp-garantias {
    margin-top: 0;
  }
  .dp-garantias > div {
    border-right: 0;
    border-bottom: 1px solid var(--dp-borde);
  }
}

/* Texto de presentación de portada (bloque C) */
.dp-presentacion {
  max-width: 1100px;
  margin: 2rem auto;
  text-align: center;
}

.dp-presentacion p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}


/* =============================================================
   Diosa Planta — bloques de portada
   -------------------------------------------------------------
   Estilos de los bloques que la portada actual genera con módulos
   de PS 1.7 que no existen en PS 9. El HTML de cada uno está en
   docs/bloques-portada.html, listo para pegar.
   ============================================================= */

/* ---------- Título de sección con resaltado lima ---------- */
.dp-titulo {
  text-align: center;
  margin: 2.5rem 0 1.5rem;
}

.dp-titulo h2,
.dp-titulo .h2 {
  display: inline;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #111111;
  background: linear-gradient(
    to bottom,
    transparent 62%,
    var(--dp-lima) 62%,
    var(--dp-lima) 92%,
    transparent 92%
  );
  padding: 0 0.35rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Tres botones de categoría (ABONOS / ARMARIOS / ...) ---------- */
.dp-botones-categoria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0;
}

.dp-botones-categoria a {
  flex: 1 1 0;
  padding: 1.5rem 1rem;
  background: var(--dp-verde);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.dp-botones-categoria a:hover,
.dp-botones-categoria a:focus {
  background: var(--dp-verde-medio);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .dp-botones-categoria a { transition: none; }
}

/* ---------- Texto SEO a dos columnas ---------- */
.dp-seo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem 3rem;
  margin: 2.5rem 0;
}

.dp-seo h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.dp-seo h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}

.dp-seo p {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  line-height: 1.65;
}

.dp-seo a {
  color: var(--dp-verde);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Opiniones ---------- */
.dp-opiniones {
  background: #f4f8ee;
  border-top: 3px solid var(--dp-verde-hover); /* solo superior, como en produccion */
  padding: 2.5rem 1rem;
  /* auto: la portada es flex en columna y sin margen auto el .container se pega a la izquierda.
     Sin margen vertical: en flex los margenes NO se solapan; el hueco lo ponen el margin-bottom
     de .dp-seo (arriba) y el margin-top de .dp-faq (abajo), como los 45px de produccion. */
  margin: 0 auto;
  text-align: center;
}

.dp-opiniones__intro {
  max-width: 640px;
  margin: 0 auto 1.25rem;
  color: #495057;
}

.dp-opiniones__nota {
  font-weight: 700;
  margin-bottom: 1.75rem;
}

.dp-estrellas {
  color: #f0ad00;
  letter-spacing: 0.1em;
  font-size: 1.25rem;
}

.dp-opiniones__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
  text-align: left;
}

.dp-opinion {
  background: #ffffff;
  border: 1px solid var(--dp-borde);
  padding: 1.25rem;
}

.dp-opinion p {
  margin: 0.625rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.dp-opinion cite {
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
}

.dp-opiniones__pie {
  color: #6c757d;
  font-size: 0.8125rem;
  margin: 1rem 0 0;
}

/* media estrella de la nota 4,5: estrella gris con la mitad izquierda pintada */
.dp-estrella-media {
  position: relative;
  display: inline-block;
  color: #d8d8d8;
}

.dp-estrella-media::after {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #f0ad00;
}

/* ---------- Ficha de producto ---------- */
/* marca bajo el titulo: produccion no la muestra */
.page-product .product__manufacturer { display: none; }

/* Rejilla de la ficha: los banners (aside) solo acompanan a la primera parte (.product__container);
   el resto de bloques (relacionados, pestanas, comentarios, categoria) va a ancho completo, como produccion. */
.page-product .dp-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2rem;
}

.page-product .dp-ficha > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 992px) {
  .page-product .dp-ficha {
    grid-template-columns: minmax(0, 1fr) 22%;
  }

  .page-product .dp-ficha > .product__container {
    grid-column: 1;
    grid-row: 1;
  }

  .page-product .dp-ficha > .dp-banners-producto {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }
}

/* banners (tm_rightbanner de produccion) */
.dp-banners-producto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.dp-banners-producto img {
  width: 100%;
  height: auto;
  display: block;
}

/* segunda parte de la ficha: sin columna derecha de reassurance (desenganchado) -> una sola columna */
.page-product .product__bottom {
  grid-template-columns: minmax(0, 1fr);
}

.page-product .product__bottom-right:empty {
  display: none;
}

/* "Podria interesarte" bajo la ficha y "N productos esta categoria" antes del footer: sliders por CSS,
   mismo patron que .ps-specials de la portada (scroll-snap, 5 tarjetas desde 992px) */
.page-product .ps-crossselling .module-products,
.page-product .ps-categoryproducts .module-products {
  padding-left: 0;
  padding-right: 0;
}

.dp-ficha-relacionados { margin: 0 0 2.5rem; }
.dp-ficha-categoria { margin: 2.5rem 0 1rem; }

.page-product .ps-crossselling .products,
.page-product .ps-categoryproducts .products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
}

.page-product .ps-crossselling .products::-webkit-scrollbar,
.page-product .ps-categoryproducts .products::-webkit-scrollbar { height: 6px; }
.page-product .ps-crossselling .products::-webkit-scrollbar-thumb,
.page-product .ps-categoryproducts .products::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }

.page-product .ps-crossselling .product-miniature,
.page-product .ps-categoryproducts .product-miniature {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 70%;
}

@media (min-width: 360px) {
  .page-product .ps-crossselling .product-miniature,
  .page-product .ps-categoryproducts .product-miniature { width: calc((100% - 1.5rem) / 2.5); }
}

@media (min-width: 992px) {
  .page-product .ps-crossselling .product-miniature,
  .page-product .ps-categoryproducts .product-miniature { width: calc((100% - 6rem) / 5); }
}

/* pestanas Descripcion / Detalles (produccion) en vez del acordeon */
.dp-tabs .nav-tabs {
  border-bottom: 1px solid var(--dp-borde);
}

.dp-tabs .nav-tabs .nav-link {
  color: #212529;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 0.3rem 0.3rem 0 0;
}

.dp-tabs .nav-tabs .nav-link.active {
  color: var(--dp-verde);
  background: #f7f8f4;
  border-color: var(--dp-borde) var(--dp-borde) #f7f8f4;
}

.dp-tabs .tab-content {
  background: #f7f8f4;
  padding: 1.5rem;
}

/* dentro de la pestana Detalles, los items de acordeon del padre van desplegados y sin cabecera */
.dp-tabs .accordion-item { border: 0; background: transparent; }
.dp-tabs .accordion-header { display: none; }
.dp-tabs .accordion-collapse.collapse { display: block; }
.dp-tabs .accordion-body { padding: 0 0 1rem; }

/* ---------- Listado de categoria ---------- */
/* descripcion bajo los productos (produccion): un poco de aire respecto a la paginacion */
.dp-categoria-descripcion {
  margin-top: 2.5rem;
}

/* ---------- Blog (Simple Blog) como produccion: rejilla de 3 tarjetas ---------- */
/* blog.css del modulo pone .ets_blog_content en flex (barra lateral + contenido); sin barra lateral el
   titulo y el listado quedaban en la misma fila y el listado encogido a la derecha */
.dp-blog.ets_blog_content {
  display: block;
}

.dp-blog .ets-blog-wrapper {
  width: 100%;
  float: none;
}

.dp-blog__titulo {
  margin: 0 0 1.5rem;
}

.dp-blog .ets-blog-list.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .dp-blog .ets-blog-list.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .dp-blog .ets-blog-list.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dp-blog .ets-blog-list > li {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}

.dp-blog .post-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--dp-borde);
}

.dp-blog .post-wrapper .ets_item_img {
  display: block;
  width: 100%;
  float: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dp-blog .post-wrapper .ets_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dp-blog .post-wrapper .ets-blog-wrapper-content {
  width: 100%;
  float: none;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.dp-blog .post-wrapper .ets_title_block {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: #212529;
  margin-bottom: 0.5rem;
}

.dp-blog .post-wrapper .ets_title_block:hover { color: var(--dp-verde); }

.dp-blog .post-wrapper .blog_description {
  font-size: 0.9375rem;
  color: #495057;
  flex: 1 1 auto;
  margin-bottom: 1rem;
  /* extracto a 3 lineas, como produccion (psblog cortaba a ~150 caracteres) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-blog .post-wrapper .blog_description p {
  margin: 0;
}

.dp-blog .post-wrapper a.read_more {
  display: inline-block;
  align-self: flex-start;
  background: var(--dp-verde);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  text-decoration: none;
}

.dp-blog .post-wrapper a.read_more:hover { background: var(--dp-verde-hover); color: #fff; }

/* ---------- Logos de pago del footer ---------- */
.dp-pagos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0 0.5rem;
}

.dp-pagos img {
  height: 20px; /* tamaño natural de los PNG de produccion (32x20) */
  width: auto;
}

/* ---------- Preguntas frecuentes ---------- */
.dp-faq {
  border-top: 3px solid var(--dp-verde-hover);
  border-bottom: 3px solid var(--dp-verde-hover);
  padding: 2.5rem 0;
  margin: 2.8125rem auto 2.5rem; /* 45px arriba (hueco con opiniones) / 40px abajo, como produccion; auto = centrado en el flex */
}

.dp-faq > h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.dp-faq summary {
  display: block;
  width: fit-content;
  margin: 0.9375rem auto 0;
  padding: 11px 20px;
  background: var(--dp-verde);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.dp-faq summary::-webkit-details-marker {
  display: none;
}

.dp-faq summary:hover {
  background: var(--dp-verde-hover);
}

.dp-faq__contenido {
  max-width: 860px;
  margin: 1.5625rem auto 0;
}

.dp-faq__contenido h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.dp-faq__contenido p {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

.dp-faq__contenido hr {
  border: 0;
  border-top: 1px solid #dddddd;
  margin: 22px 0;
  opacity: 1;
}

/* ---------- Entradas del blog ---------- */
.dp-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 2.5rem 0;
}

.dp-blog article {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.dp-blog img {
  width: 100%;
  height: auto;
}

.dp-blog h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}

.dp-blog h3 a {
  color: var(--dp-verde);
  text-decoration: none;
}

.dp-blog h3 a:hover {
  text-decoration: underline;
}

.dp-blog time {
  display: block;
  color: #6c757d;
  font-size: 0.8125rem;
  margin-bottom: 0.625rem;
}

.dp-blog p {
  margin: 0;
  font-size: 0.9375rem;
  color: #495057;
}

@media (max-width: 575px) {
  .dp-blog article {
    grid-template-columns: 1fr;
  }
}

/* ---------- Banners a tres columnas ---------- */
.dp-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}

.dp-banners img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
   Cabecera en dos bandas
   Requiere templates/_partials/header.tpl del tema hijo.
   ============================================================= */

.dp-header-top {
  background: #ffffff;
  padding: 0.75rem 0;
  border-bottom: 0;
}

.dp-header-top .header-block__icon {
  color: var(--dp-verde);
}

/* ---------- Banda verde del menú ---------- */
.dp-header-nav {
  background: var(--dp-verde);
}

.dp-header-nav .menu__link,
.dp-header-nav .menu__title,
.dp-header-nav .menu-toggle,
.dp-header-nav .header-block__action-btn,
.dp-header-nav .header-block__icon {
  color: #ffffff;
}

.dp-header-nav .menu__link:hover,
.dp-header-nav .menu__link:focus,
.dp-header-nav .menu--current > .menu__link {
  color: var(--dp-lima);
}

/* Submenús desplegados: fondo claro y texto oscuro */
.dp-header-nav .menu--childrens {
  background: #ffffff;
  border: 1px solid var(--dp-borde);
}

.dp-header-nav .menu--childrens .menu__link {
  color: #212529;
}

.dp-header-nav .menu--childrens .menu__link:hover {
  color: var(--dp-verde);
}

.dp-header-nav .menu--childrens .menu__title {
  color: var(--dp-verde-oscuro);
  font-weight: 600;
}

/* Contador del carrito en lima, para que destaque sobre el verde */
.dp-header-nav .header-block__badge {
  background: var(--dp-lima);
  color: #000000;
}

/* En móvil el panel del menú es claro, como ahora */
@media (max-width: 767.98px) {
  .dp-header-nav .menu--childrens,
  .dp-header-nav .offcanvas {
    background: #ffffff;
  }
  .dp-header-nav .offcanvas .menu__link {
    color: #212529;
  }
}

/* Badge "HOT" para destacar una entrada del menú.
   Uso: añadir la clase dp-menu-hot al <a> desde el módulo de menú. */
.dp-menu-hot {
  position: relative;
}

.dp-menu-hot::after {
  content: "HOT";
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dp-lima);
  color: #000000;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 2px;
}

/* Corrección de orden en la banda verde: sesión y carrito a la derecha.
   ps_mainmenu emite su propia columna con margen automático, así que
   se fuerza el orden en lugar de pelear con márgenes. */
.dp-header-nav .header-bottom__row {
  align-items: center;
}

.dp-header-nav .header-top__right {
  order: 99;
  margin-left: auto;
}

/* El buscador va centrado en la fila blanca */
.dp-header-top .header-top__left {
  justify-content: center;
}

/* ---------- Bloques de envío y contacto (esquina superior derecha) ---------- */
.dp-header-info {
  display: flex;
  gap: 1.75rem;
}

.dp-header-info__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.dp-header-info__item svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--dp-lima);
}

.dp-header-info__item span {
  display: block;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.2;
}

.dp-header-info__item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.3;
}

.dp-header-info__item strong a {
  color: inherit;
  text-decoration: none;
}

.dp-header-info__item strong a:hover {
  color: var(--dp-verde);
}

/* ---------- Banda verde: separador y acabado ---------- */
.dp-header-nav .header-top__right {
  position: relative;
  padding-left: 1.5rem;
  gap: 1.25rem;
}

.dp-header-nav .header-top__right::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
}

/* Menú pegado a la izquierda y en negrita, como en la tienda actual */
.dp-header-nav .menu__list {
  justify-content: flex-start;
}

.dp-header-nav .menu > .menu__list > .menu-item > .menu__link {
  font-weight: 700;
}

/* Contador del carrito en círculo lima */
.dp-header-nav .header-block__badge {
  min-width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- El menú debe caber en una sola línea ---------- */
.dp-header-nav .ps-mainmenu--desktop {
  flex: 1 1 auto;
  min-width: 0;
}

.dp-header-nav .ps-mainmenu__tree {
  flex-wrap: nowrap;
}

.dp-header-nav .ps-mainmenu__tree-item {
  flex-shrink: 1;
}

.dp-header-nav .ps-mainmenu__tree-link {
  padding-left: 0.5rem;
  padding-right: 0.25rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.dp-header-nav .ps-mainmenu__tree-dropdown-toggle {
  padding-left: 0;
  padding-right: 0.25rem;
}

/* Por debajo de 1400px se aprieta un poco más antes de partir */
@media (max-width: 1399.98px) {
  .dp-header-nav .ps-mainmenu__tree-link {
    padding-left: 0.375rem;
    padding-right: 0.125rem;
    font-size: 0.875rem;
  }
  .dp-header-nav .header-top__right {
    padding-left: 1rem;
    gap: 0.75rem;
  }
}

/* La fila de la banda verde no debe partir: .row de Bootstrap envuelve
   por defecto y bajaba sesión y carrito a un segundo renglón. */
.dp-header-nav .header-bottom__row {
  flex-wrap: nowrap;
}

.dp-header-nav .header-top__right {
  flex: 0 0 auto;
}

/* ---------- Menú de escritorio en blanco ----------
   CORRECCIÓN: .menu__link es del menú MÓVIL. El de escritorio usa
   .ps-mainmenu__tree-link, que es lo que hay que colorear. */
.dp-header-nav .ps-mainmenu__tree-link,
.dp-header-nav .ps-mainmenu__tree-dropdown-toggle {
  color: #ffffff;
}

.dp-header-nav .ps-mainmenu__tree-link:hover,
.dp-header-nav .ps-mainmenu__tree-link:focus,
.dp-header-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
  color: var(--dp-lima);
}

/* Los submenús desplegados siguen con fondo claro y texto oscuro */
.dp-header-nav .submenu {
  background: #ffffff;
}

.dp-header-nav .submenu__left-item,
.dp-header-nav .menu-item {
  color: #212529;
}

.dp-header-nav .submenu__left-item:hover,
.dp-header-nav .menu-item:hover {
  color: var(--dp-verde);
}

/* Aire entre la última entrada del menú y el filete separador */
.dp-header-nav .ps-mainmenu--desktop {
  padding-right: 1.25rem;
}

.dp-header-nav .header-top__right {
  margin-left: 0.5rem;
}

/* =============================================================
   Tarjeta de producto — acabado como en producción
   ============================================================= */

/* Botón COMPRAR a ancho completo con su texto visible.
   Hummingbird ya trae .product-miniature__add-text; si viene oculto,
   esto lo saca sin tocar la plantilla. */
.product-miniature__add-text {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  text-decoration: underline;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.product-miniature__add .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  text-transform: uppercase;
}

/* Precio a la izquierda, anterior tachado a la derecha */
.product-miniature__prices {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.625rem;
}

.product-miniature__price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #212529;
}

.product-miniature__regular-price {
  font-size: 0.9375rem;
  color: var(--dp-rojo);
  text-decoration: line-through;
}

/* Título alineado a la izquierda, verde y subrayado */
.product-miniature__details,
.product-miniature__infos {
  text-align: left;
}

.product-miniature__details .product__name,
.product-miniature__infos .product__name {
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

/* Tarjeta blanca con borde suave, para que destaque sobre la banda lima */
.product-miniature__inner {
  background: #ffffff;
}

/* Valoraciones de la tarjeta: en Hummingbird 2.0 el bloque va en .product-miniature__infos (bajo el nombre), no dentro de
   la imagen; la versión anterior lo ponía en position:absolute y, sin contenedor posicionado, todas las estrellas se
   apilaban sobre la página (aviso del cliente 2026-10, "barra de reseñas que tapa contenido"). Se dejan en su sitio. */
.product-miniature .product-list-review {
  position: static;
  justify-content: center;
  background: none;
  padding: 0;
}

/* =============================================================
   Parches aplicados en servidor durante la sesión
   ============================================================= */

/* 1. Hummingbird pinta .product-flags .badge:not(.discount) con
   !important, así que los modificadores por tipo necesitan !important. */
.product-flags .badge.out_of_stock {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

.product-flags .badge.new {
  background-color: var(--dp-verde-oscuro) !important;
  border-color: var(--dp-verde-oscuro) !important;
}

.product-flags .badge.pack,
.product-flags .badge.online-only {
  background-color: var(--dp-verde-medio) !important;
  border-color: var(--dp-verde-medio) !important;
}

/* 2. Los títulos de las cajas de categoría llevan enlace dentro */
.dp-caja-categoria h2 a,
.dp-caja-categoria h2 a:hover,
.dp-caja-categoria h2 a:focus {
  color: #ffffff;
  text-decoration: none;
}

/* 3. Iconos de la tira de garantías (SVG en /img/cms/) */
.dp-garantias .dp-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* 4. La tarjeta de garantías se superpone al slider */
.dp-garantias {
  margin-top: -4.5rem;
  z-index: 3;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 5. El padding no separaba del filete: hace falta margin */
.dp-header-nav .ps-mainmenu--desktop {
  padding-right: 0;
  margin-right: 1.75rem;
}

/* =============================================================
   Correcciones tras leer miniatures/product.tpl del padre
   -------------------------------------------------------------
   Selectores reales:
     .product-miniature__add      → ES el botón (no un contenedor)
     .product-miniature__title    → el enlace del nombre
     .product-miniature__details  → ES el botón "Ver más detalles"
     .quantity-button             → el selector de cantidad
   ============================================================= */

/* Botón añadir: a ancho completo, icono + texto centrados */
.product-miniature__add {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  text-transform: uppercase;
}

/* En la tarjeta no hay selector de cantidad, como en la tienda actual */
.product-miniature__form .quantity-button {
  display: none;
}

.product-miniature__form {
  width: 100%;
}

/* Título del producto: verde, subrayado, a la izquierda */
.product-miniature__title {
  display: block;
  color: var(--dp-verde);
  text-decoration: underline;
  font-size: 0.9375rem;
  text-align: left;
  margin-bottom: 0.75rem;
}

.product-miniature__title:hover {
  color: var(--dp-verde-oscuro);
}

/* Bloque de precios: actual a la izquierda, anterior a la derecha */
.product-miniature__prices {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.625rem;
}

.product-miniature__discount-price {
  margin-left: auto;
}

/* "Ver más detalles" es un botón: su texto va centrado */
.product-miniature__details {
  text-align: center;
  width: 100%;
}

.product-miniature__infos {
  text-align: left;
}

/* =============================================================
   TOP SEMILLAS en carrusel
   -------------------------------------------------------------
   Hummingbird pinta .products como grid (1 col, 2 col desde 360px,
   4 col desde 992px). Aquí se convierte SOLO el bloque de productos
   destacados en una tira con desplazamiento horizontal.

   Acotado a .ps-featuredproducts para no afectar a los listados de
   categoría ni a novedades ni a ofertas.

   Sin flechas: requieren JavaScript. Se desplaza arrastrando en
   móvil y con la rueda o la barra en escritorio.
   ============================================================= */

.ps-featuredproducts .products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  /* Barra de desplazamiento discreta */
  scrollbar-width: thin;
  scrollbar-color: var(--dp-borde) transparent;
}

.ps-featuredproducts .products::-webkit-scrollbar {
  height: 6px;
}

.ps-featuredproducts .products::-webkit-scrollbar-track {
  background: transparent;
}

.ps-featuredproducts .products::-webkit-scrollbar-thumb {
  background: var(--dp-borde);
  border-radius: 3px;
}

.ps-featuredproducts .product-miniature {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* 1 tarjeta y media visible por debajo de 360px */
  width: 70%;
}

@media (min-width: 360px) {
  /* 2 tarjetas y media, mismo escalón que usa el grid del padre */
  .ps-featuredproducts .product-miniature {
    width: calc((100% - 1.5rem) / 2.5);
  }
}

@media (min-width: 992px) {
  /* 5 tarjetas, como en la tienda actual */
  .ps-featuredproducts .product-miniature {
    width: calc((100% - 6rem) / 5);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ps-featuredproducts .products {
    scroll-behavior: smooth;
  }
}

/* Producción no tiene botón "Todos los productos destacados" bajo el carrusel */
.ps-featuredproducts .module-products__buttons {
  display: none;
}

/* ---------- OFERTAS DESTACADAS: banda lima y carrusel ---------- */
.ps-specials {
  background: #eaf0c0;
  padding: 2rem 0 2.5rem;
  margin: 2.5rem 0;
}

.ps-specials .products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
}

.ps-specials .products::-webkit-scrollbar { height: 6px; }
.ps-specials .products::-webkit-scrollbar-track { background: transparent; }
.ps-specials .products::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }

.ps-specials .product-miniature {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 70%;
  background: #ffffff;
}

@media (min-width: 360px) {
  .ps-specials .product-miniature { width: calc((100% - 1.5rem) / 2.5); }
}

@media (min-width: 992px) {
  .ps-specials .product-miniature { width: calc((100% - 6rem) / 5); }
}

/* Sin botón "Todos los descuentos" bajo OFERTAS DESTACADAS */
.ps-specials .module-products__buttons {
  display: none;
}

/* =============================================================
   Marcas destacadas
   Bloque estatico de templates/_partials/dp-bloques-portada.tpl.
   Carrusel por CSS, mismo patron que .ps-featuredproducts.
   ============================================================= */

.dp-marcas {
  margin: 0 0 2.5rem;
}

.dp-marcas__titulo {
  font-size: 1.5rem;
  color: #2b2b2b;
  margin-bottom: 1.5rem;
}

.dp-marcas__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--dp-borde) transparent;
}

.dp-marcas__lista::-webkit-scrollbar {
  height: 6px;
}

.dp-marcas__lista::-webkit-scrollbar-track {
  background: transparent;
}

.dp-marcas__lista::-webkit-scrollbar-thumb {
  background: var(--dp-borde);
  border-radius: 3px;
}

.dp-marcas__lista li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 45%;
}

.dp-marcas__lista img {
  width: 130px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (min-width: 360px) {
  .dp-marcas__lista li {
    width: calc((100% - 1.5rem) / 2.5);
  }
}

@media (min-width: 992px) {
  .dp-marcas__lista li {
    width: calc((100% - 4.5rem) / 4);
  }
}

/* =============================================================
   Nuevos productos: panel lateral + carrusel
   Requiere modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl
   del tema hijo. Medidas leidas del theme.css de produccion:
   panel 267x400, padding 40px, radio 8px, fondo a cover.
   ============================================================= */

.ps-newproducts .module-products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

/* En el resto de paginas el titulo normal ocupa la fila entera */
.ps-newproducts .section-title {
  flex: 0 0 100%;
}

.ps-newproducts .module-products__list {
  flex: 1 1 0;
  min-width: 0;
}

.dp-novedades {
  flex: 0 0 267px;
  min-height: 400px;
  padding: 40px;
  border-radius: 8px;
  background: url('/img/cms/bloques/banner-novedades.jpg') no-repeat center / cover;
}

.dp-novedades__titulo {
  font-size: 28px;
  line-height: 1.15;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.dp-novedades__texto {
  color: #ffffff;
  font-size: 12px;
  padding-top: 40px;
}

.dp-novedades__boton {
  padding-top: 40px;
}

.dp-novedades__boton a {
  display: inline-block;
  background: var(--dp-lima);
  color: #000000;
  font-size: 12px;
  font-weight: 500;
  padding: 10px 17px;
  border-radius: 5px;
  text-transform: capitalize;
}

.dp-novedades__boton a:hover {
  background: #000000;
  color: var(--dp-lima);
}

/* Carrusel, mismo patron que destacados y ofertas */
.ps-newproducts .products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--dp-borde) transparent;
}

.ps-newproducts .products::-webkit-scrollbar {
  height: 6px;
}

.ps-newproducts .products::-webkit-scrollbar-track {
  background: transparent;
}

.ps-newproducts .products::-webkit-scrollbar-thumb {
  background: var(--dp-borde);
  border-radius: 3px;
}

.ps-newproducts .product-miniature {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 70%;
}

@media (min-width: 360px) {
  .ps-newproducts .product-miniature {
    width: calc((100% - 1.5rem) / 2.5);
  }
}

@media (min-width: 992px) {
  /* 4 tarjetas junto al panel, como en la tienda actual */
  .ps-newproducts .product-miniature {
    width: calc((100% - 4.5rem) / 4);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ps-newproducts .products {
    scroll-behavior: smooth;
  }
}

/* El enlace "ver mas" ya esta en el panel */
.ps-newproducts .module-products__buttons {
  display: none;
}

/* Movil: produccion quita el fondo, centra el titulo en negro y
   oculta texto y boton. */
@media (max-width: 767.98px) {
  .dp-novedades {
    flex: 0 0 100%;
    min-height: 0;
    padding: 20px;
    background: none;
    border-radius: 0;
  }

  .dp-novedades__titulo {
    color: #000000;
    text-align: center;
  }

  .dp-novedades__texto,
  .dp-novedades__boton {
    display: none;
  }
}

/* =============================================================
   Orden de la portada
   El DOM viene dado: primero todo $HOOK_HOME (modulos) y detras los
   bloques estaticos del tema. Se reordena con flex para que quede
   como en produccion, sin tocar plantillas.
   ============================================================= */

.page-content--home {
  display: flex;
  flex-direction: column;
}

.page-content--home > .ps-imageslider     { order: 1; }
.page-content--home > .ps-customtext      { order: 2; }
.page-content--home > .ps-featuredproducts { order: 3; }
.page-content--home > .ps-specials        { order: 4; }
.page-content--home > .dp-bloque          { order: 5; }
.page-content--home > .ps-newproducts     { order: 6; }
.page-content--home > .dp-bloque--g       { order: 7; }
.page-content--home > .dp-opiniones       { order: 8; }
.page-content--home > .dp-faq             { order: 9; }
.page-content--home > .ets_block_latest   { order: 10; }  /* blog (ets_blog en displayHome), cierra la portada como en producción */

/* ---------- Mega Menu PRO (ets_megamenu 3.0.4) en la banda verde ----------
   El módulo pinta su propia barra (layout1, fondo ETS_MM_COLOR1 = verde de marca) dentro de la banda. Como en el
   tema viejo (theme.css de producción): sin bordes ni degradado del módulo. Además: sin velo oscuro al desplegar
   (backdrop nuevo del 3.0.4, no existía en producción) y sin el contenedor interno del módulo, para que el menú
   ocupe el ancho de la banda igual que en producción (.header-top-main > .container). */
.dp-header-nav .dp-megamenu {
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

/* Entradas como en producción: sin mayúsculas forzadas, semibold y menos aire, para que las 9 quepan en una
   fila junto a sesión y carrito */
.dp-header-nav .dp-megamenu .mm_menus_li > a {
  text-transform: none;
  font-weight: 600;
}

.dp-header-nav .dp-megamenu .mm_menu_content_title {
  padding: 0 10px;
}

/* Entre 768 y 1399 px no caben las 9 entradas junto a "Iniciar sesión" y "Carrito" con texto: sesión y carrito
   solo con icono (y contador) hasta 1400 px, con texto a partir de ahí */
@media (min-width: 768px) and (max-width: 1399.98px) {
  /* Sin display:none: el d-md-inline/d-md-flex de Hummingbird va en un @layer con !important y, en capas, el
     !important de la capa gana al de fuera. Se colapsa el texto en vez de ocultarlo. */
  .dp-header-nav .dp-megamenu ~ .header-top__right .header-block__title {
    font-size: 0;
    line-height: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .dp-header-nav .dp-megamenu ~ .header-top__right {
    padding-left: 1rem;
    gap: 0.75rem;
  }
}

@media (min-width: 768px) {
  .dp-header-nav .header-bottom__row {
    flex-wrap: nowrap;
  }
}

.dp-header-nav .dp-megamenu .ets_mm_megamenu {
  margin-top: 0;
  background: transparent;
}

.dp-header-nav .dp-megamenu .ets_mm_megamenu_content,
.dp-header-nav .dp-megamenu .layout_layout1 .ets_mm_megamenu_content {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.dp-header-nav .dp-megamenu .ets_mm_megamenu .container {
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.dp-header-nav .dp-megamenu .layout_layout1 .mm_menus_li,
.dp-header-nav .dp-megamenu .layout_layout1 .mm_menus_li:nth-child(2),
.dp-header-nav .dp-megamenu .layout_layout1 .mm_menus_li:last-child {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Velo oscuro sobre la página al desplegar un submenú: fuera */
.dp-header-nav .dp-megamenu .ets_mm_megamenu::before {
  display: none !important;
}

/* Modo hamburguesa del módulo (tablet 768-1199 px cuando no caben las entradas, y móvil < 768 px): el botón
   "MENÚ" en blanco sobre el verde de la banda, sin la caja gris ni el margen que le pone el módulo */
@media (max-width: 1199.98px) {
  .dp-header-nav .dp-megamenu .ets_mm_megamenu .container {
    background: transparent;
  }
  .dp-header-nav .dp-megamenu .changestatus.ets_mm_megamenu.hook-custom {
    margin-top: 0;
  }
  .dp-header-nav .dp-megamenu .mm-menu-toggle {
    color: #ffffff;
    padding-left: 0;
  }
  .dp-header-nav .dp-megamenu .mm-menu-toggle .icon-bar {
    background-color: #ffffff;
  }
}

/* =============================================================
   Barras de desplazamiento de los carruseles con los colores de la marca (1.0.25, revisión del cliente 2026-10)
   -------------------------------------------------------------
   Los carruseles (Top semillas, Ofertas destacadas, Novedades, marcas, relacionados de la ficha) son tiras con scroll
   horizontal sin flechas; el cliente acepta la barra si encaja con la web. Misma barra para todos: carril verde claro,
   guía verde de la marca, 8 px. scrollbar-color lo usan Chrome/Edge/Brave/Firefox; ::-webkit-scrollbar, Safari.
   En móvil la barra la gestiona el sistema (solo aparece al deslizar); el arrastre con el dedo es lo que cuenta.
   ============================================================= */
.ps-featuredproducts .products,
.ps-specials .products,
.ps-newproducts .products,
.dp-marcas__lista,
.page-product .ps-crossselling .products,
.page-product .ps-categoryproducts .products {
  scrollbar-width: thin;
  scrollbar-color: var(--dp-verde) var(--dp-chip);
  padding-bottom: 1rem;
}

.ps-featuredproducts .products::-webkit-scrollbar,
.ps-specials .products::-webkit-scrollbar,
.ps-newproducts .products::-webkit-scrollbar,
.dp-marcas__lista::-webkit-scrollbar,
.page-product .ps-crossselling .products::-webkit-scrollbar,
.page-product .ps-categoryproducts .products::-webkit-scrollbar {
  height: 8px;
}

.ps-featuredproducts .products::-webkit-scrollbar-track,
.ps-specials .products::-webkit-scrollbar-track,
.ps-newproducts .products::-webkit-scrollbar-track,
.dp-marcas__lista::-webkit-scrollbar-track,
.page-product .ps-crossselling .products::-webkit-scrollbar-track,
.page-product .ps-categoryproducts .products::-webkit-scrollbar-track {
  background: var(--dp-chip);
  border-radius: 4px;
}

.ps-featuredproducts .products::-webkit-scrollbar-thumb,
.ps-specials .products::-webkit-scrollbar-thumb,
.ps-newproducts .products::-webkit-scrollbar-thumb,
.dp-marcas__lista::-webkit-scrollbar-thumb,
.page-product .ps-crossselling .products::-webkit-scrollbar-thumb,
.page-product .ps-categoryproducts .products::-webkit-scrollbar-thumb {
  background: var(--dp-verde);
  border-radius: 4px;
}

.ps-featuredproducts .products::-webkit-scrollbar-thumb:hover,
.ps-specials .products::-webkit-scrollbar-thumb:hover,
.ps-newproducts .products::-webkit-scrollbar-thumb:hover,
.dp-marcas__lista::-webkit-scrollbar-thumb:hover,
.page-product .ps-crossselling .products::-webkit-scrollbar-thumb:hover,
.page-product .ps-categoryproducts .products::-webkit-scrollbar-thumb:hover {
  background: var(--dp-verde-oscuro);
}

/* Tarjetas estrechas (móvil): estrellas y número de reseñas en una línea o bajando entero, sin cortar "reseña(s)" */
.product-miniature .product-list-review {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.product-miniature .product-list-review .product-list-comments-number {
  white-space: nowrap;
}

/* =============================================================
   Subcategorías con miniatura como la tienda actual (1.0.26, revisión del cliente 2026-10)
   -------------------------------------------------------------
   Las miniaturas {id}_thumb.jpg ya están en img/c (copiar_imagenes_categorias.sh). Hummingbird las pinta como icono de
   3 rem junto al nombre; producción las enseña como baldosas (la miniatura lleva el nombre impreso) con el nombre debajo,
   5 por fila. La imagen sale a 180 px (tamaño category_default del tema), así que se limita a eso para no pixelar.
   ============================================================= */
.subcategory__list--with-images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 576px) {
  .subcategory__list--with-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (min-width: 1200px) {
  .subcategory__list--with-images { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.subcategory__link--with-image {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border: 0;
  padding: 0;
  gap: 0.5rem;
  background: none;
}

.subcategory__link--with-image:hover {
  background: none;
  color: var(--dp-verde);
}

.subcategory__link--with-image picture,
.subcategory__link--with-image > img {
  display: block;
  width: 100%;
  max-width: 180px;
}

.subcategory__link--with-image .subcategory__thumbnail {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  transition: opacity 0.2s;
}

.subcategory__link--with-image:hover .subcategory__thumbnail {
  opacity: 0.85;
}

.subcategory__link--with-image .subcategory__name {
  font-size: 0.95rem;
  line-height: 1.25;
}


/* =============================================================
   Ficha: combinaciones como botones a todo el ancho con su precio (1.0.28, revisión del cliente 2026-10)
   -------------------------------------------------------------
   Producción pinta cada opción de un grupo "radio" como un botón: nombre a la izquierda, precio y precio anterior
   tachado a la derecha, el elegido en verde. Hummingbird las deja como radios en línea; el precio de cada opción lo
   añade assets/js/dp-variantes.js (pide el refresh del core por opción, como en el tema de semillas).
   ============================================================= */
.product-variant__radios {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 24rem;
}

.product-variant__radio {
  width: 100%;
  margin: 0;
  padding: 0;
}

.product-variant__radio .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.product-variant__radio label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dp-borde-fuerte);
  background: #fff;
  color: #212529;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.product-variant__radio label:hover {
  border-color: var(--dp-verde);
}

.product-variant__radio:has(.form-check-input:checked) label {
  background: var(--dp-verde);
  border-color: var(--dp-verde);
  color: #fff;
}

.product-variant__radio .form-check-input:focus-visible + label {
  outline: 2px solid var(--dp-verde-oscuro);
  outline-offset: 2px;
}

.dp-variant-price {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.1;
}

.dp-variant-price b {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
}

.dp-variant-price s {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}


/* Checkout (OPC): aviso y error del CIF/NIF/NIE obligatorio (assets/js/dp-nif.js, 1.0.29-1.0.30) */
/* #checkout + id: el OPC fija color y tamaño de los <p> con "#checkout .opc-bootstrap-533 p" */
#checkout #field_delivery_dni .dp-nif-aviso {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #6c757d;
}

#checkout #field_delivery_dni .dp-nif-error {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc3545;
}

/* Checkout (OPC): los avisos "sin transportistas / sin métodos de pago" que salen con el formulario vacío son una
   indicación, no un error (revisión del cliente, 1.0.31): fondo suave de la marca en vez del rojo de alert-danger.
   Solo esos dos <p> (hermanos del hook de transportistas y dentro de la lista de pagos); los demás errores del OPC
   siguen en rojo. El texto lo cambia modules/onepagecheckoutps/translations/es.php. */
#checkout #hook-displayBeforeCarrier ~ p.alert.alert-danger,
#checkout #payment_method_container > p.alert.alert-danger {
  background: var(--dp-fondo-suave);
  border: 1px solid var(--dp-borde);
  color: #212529;
  font-weight: 400;
}

/* =============================================================
   Portada en MÓVIL como la tienda actual (1.0.34, revisión del cliente: versión móvil)
   -------------------------------------------------------------
   Producción, por debajo de 768 px: sin slider (en su lugar un banner fijo hecho para móvil, bloque tmcmsbannerblock
   "no-pc" del tema viejo), sin la tarjeta de garantías (envío gratis / regalo / embalaje) y las 4 cajas de categoría en
   2 filas de 2 solo con el título. El banner va al principio del HTML del hero (ps_customtext) con la clase
   .dp-banner-movil, editable desde el BO; aquí solo se decide dónde se ve.
   ============================================================= */
.dp-banner-movil {
  display: none;
}

@media (max-width: 767.98px) {
  .page-content--home > .ps-imageslider {
    display: none;
  }

  .dp-banner-movil {
    display: block;
    margin: 0 0 1.5rem;
  }

  .dp-banner-movil img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .dp-garantias {
    display: none;
  }

  .dp-cajas-categoria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
  }

  .dp-cajas-categoria .dp-caja-categoria {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    padding: 0.75rem 0.5rem;
  }

  .dp-cajas-categoria .dp-caja-categoria h2 {
    font-size: 1.125rem;
    margin: 0;
  }

  .dp-cajas-categoria .dp-caja-categoria p {
    display: none;
  }
}

/* =============================================================
   Cabecera en MÓVIL como la tienda actual (1.0.35, revisión del cliente: versión móvil)
   -------------------------------------------------------------
   Producción < 768 px: todo sobre verde; fila 1 = hamburguesa | logo blanco centrado | cuenta y carrito;
   fila 2 = buscador a todo el ancho siempre visible. En new: la fila blanca pasa a verde y a rejilla, el logo
   normal se cambia por el blanco (.dp-logo-movil, header.tpl), el buscador sale del offcanvas de Hummingbird
   (se muestra en línea y se quita la lupa y "Cancelar") y la banda del Mega Menu se reduce a su botón,
   colocado encima de la fila 1 (su menú es un panel lateral fijo, no depende de dónde esté el botón).
   ============================================================= */
.dp-logo-movil {
  display: none;
}

@media (max-width: 767.98px) {
  #header {
    position: relative;
  }

  .dp-header-top {
    background: var(--dp-verde);
    padding: 0.5rem 0 0.75rem;
  }

  .dp-header-top .header-top__row {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto auto;
    align-items: center;
    row-gap: 0.625rem;
    margin: 0;
  }

  .dp-header-top .header-top__row > * {
    width: auto;
    padding: 0;
  }

  .dp-header-top .header-top__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0 !important;
  }

  /* .navbar-brand lleva d-block y .header-block d-flex: utilidades de Bootstrap con !important dentro de @layer, que
     ganan a cualquier !important sin capa; se ocultan sacándolas del flujo en vez de con display. */
  .dp-header-top .header-top__logo .navbar-brand,
  .dp-header-top .ps-searchbar--mobile > .header-block {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .dp-logo-movil {
    display: block;
  }

  .dp-logo-movil img {
    display: block;
    width: 13rem;
    max-width: 100%;
    height: auto;
  }

  .dp-header-top #_mobile_ps_customersignin {
    grid-column: 3;
    grid-row: 1;
  }

  .dp-header-top #_mobile_ps_shoppingcart {
    grid-column: 4;
    grid-row: 1;
  }

  .dp-header-top .header-block__icon,
  .dp-header-top .header-block__action-btn {
    color: #fff;
  }

  .dp-header-top .header-block__icon {
    font-size: 1.75rem;
  }

  /* Buscador siempre visible en la segunda fila */
  .dp-header-top .header-top__left {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block !important;
  }

  .dp-header-top .ps-searchbar--mobile {
    display: block !important;
    width: 100%;
  }

  .dp-header-top .ps-searchbar__offcanvas.offcanvas {
    position: static;
    visibility: visible;
    transform: none;
    width: 100%;
    height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: auto;
    transition: none;
  }

  .dp-header-top .ps-searchbar__offcanvas .offcanvas-header {
    padding: 0;
  }

  .dp-header-top .ps-searchbar__offcanvas .offcanvas-header .btn-link {
    display: none;
  }

  .dp-header-top #_mobile_ps_searchbar {
    width: 100%;
  }

  .dp-header-top .ps-searchbar__input {
    height: 2.5rem;
    background: #fff;
    border: 2px solid var(--dp-verde-oscuro);
    border-radius: 5px;
  }

  /* Banda del Mega Menu: solo el botón, encima de la fila 1 a la izquierda */
  .dp-header-nav {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 5;
  }

  .dp-header-nav .header-bottom__container,
  .dp-header-nav .header-bottom__row,
  .dp-header-nav .dp-megamenu,
  .dp-header-nav .ets_mm_megamenu,
  .dp-header-nav .ets_mm_megamenu_content,
  .dp-header-nav .ets_mm_megamenu_content .container {
    padding: 0;
    margin: 0;
    background: transparent;
    min-height: 0;
  }

  .dp-header-nav .mm-menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .dp-header-nav .mm-menu-toggle .icon-bar {
    width: 1.5rem;
    height: 2px;
    background: #fff;
  }
}

/* =============================================================
   Ficha en MÓVIL como la tienda actual (1.0.37, revisión del cliente: versión móvil)
   -------------------------------------------------------------
   Producción < 768 px oculta los banners laterales (envío gratis / regalo) y, debajo de la foto, pone dos botones lima
   (div.boton-regalo del tema viejo: 260×40, negrita 16 px, radio 15 px). Aquí: .dp-avisos-ficha-movil en el bloque
   product_cover_thumbnails (catalog/product.tpl).
   ============================================================= */
.dp-avisos-ficha-movil {
  display: none;
}

@media (max-width: 767.98px) {
  .page-product .dp-ficha > .dp-banners-producto {
    display: none;
  }

  .dp-avisos-ficha-movil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 1.5rem;
  }

  .dp-aviso-ficha {
    display: inline-block;
    min-width: 16.25rem;
    padding: 0.625rem 1.25rem;
    background: var(--dp-lima);
    border: 1px solid #c2e0c1;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    color: #000;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
  }
}

/* =============================================================
   Tipografía como la tienda actual (1.0.38, revisión de Omar / SEO: "las tipografías no son las mismas")
   -------------------------------------------------------------
   Misma familia (Poppins) pero producción va a 13 px con letter-spacing 0,5 px de base y títulos con 1 px; Hummingbird
   hereda 16 px sin espaciado. No se toca la base global (afectaría a formularios y checkout): se igualan, con las medidas
   de producción (Playwright, 1440 px), los bloques de producto, el menú, los botones de comprar y los encabezados.
   ============================================================= */

/* Tarjetas de producto */
.product-miniature .product-miniature__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.9px;
  line-height: 20px;
}

.product-miniature .product-miniature__price {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
}

.product-miniature .product-miniature__regular-price {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
}

.product-miniature .product-miniature__add,
.product-miniature .product-miniature__add-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Menú principal (primer nivel) */
.dp-header-nav .ets_mm_megamenu .mm_menus_li > a .mm_menu_content_title {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

/* Sesión y carrito de la banda verde */
.dp-header-nav .header-block__action-btn .d-md-inline,
.dp-header-nav .header-block__action-btn .d-md-flex {
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Encabezados de secciones de producto (Top semillas, Ofertas destacadas…) y de la portada */
.section-title .section-title__text {
  font-size: 25px;
  letter-spacing: 1px;
}

.dp-novedades__titulo {
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.page-content--home .dp-titulo h2 {
  font-size: 25px;
  letter-spacing: 0.5px;
}

/* Ficha de producto */
.page-product h1.product__name {
  font-size: 28px;
  letter-spacing: 0.5px;
}

.page-product .product__description-short,
.page-product .product__description-short p {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 24px;
}

.page-product .product-variant__legend,
.page-product .product-variant__selected {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.page-product .product-variant__radio label {
  letter-spacing: 0.5px;
}

.page-product .dp-tabs .nav-link {
  font-size: 14px;
  letter-spacing: 1px;
}

.page-product .section-title .section-title__text {
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
}

/* =============================================================
   Sesión y cesta de la banda verde en dos líneas, como la tienda actual (1.0.39, revisión de Omar)
   -------------------------------------------------------------
   «Iniciar sesión» (13 px blanco) / «Mi cuenta ▾» (15 px, 600, lima) y «Mi Cesta» / importe, con el contador sobre el
   icono del carrito. Plantillas: modules/ps_customersignin y modules/ps_shoppingcart del tema hijo.
   ============================================================= */
.dp-cuenta {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  text-align: left;
}

.dp-header-nav .dp-cuenta__linea1 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #fff;
}

.dp-header-nav .dp-cuenta__linea2 {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--dp-lima);
}

.dp-cuenta__linea2 .material-icons {
  font-size: 1.125rem;
}

.dp-cesta__icono {
  position: relative;
  display: inline-flex;
}

.dp-cesta__icono .header-block__badge {
  position: absolute;
  top: -0.375rem;
  right: auto;
  left: -0.625rem;
  margin: 0;
}

@media (min-width: 768px) {
  .dp-header-nav .dp-cesta__icono .header-block__icon {
    font-size: 1.875rem;
  }

  .dp-header-nav .dp-cesta__icono .header-block__badge {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.125rem;
  }

  .dp-header-nav .header-block .dp-cesta {
    margin-left: 0.5rem;
  }
}

.dp-header-nav #userMenuButton::after {
  display: none;
}

/* Móvil: contador de la cesta con círculo lima sobre el icono (1.0.43) */
@media (max-width: 767.98px) {
  .dp-header-top .dp-cesta__icono .header-block__badge {
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 50rem;
    background: var(--dp-lima);
    color: #000;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1rem;
  }
}

/* Tarjetas: el nombre reserva siempre dos líneas (2 × 20 px) para que los precios queden alineados en la fila aunque el
   nombre ocupe una sola, como la tienda actual (1.0.44, revisión de Omar). Los nombres más largos no se recortan. */
.product-miniature .product-miniature__title {
  min-height: 40px;
}

@media (max-width: 767.98px) {
  /* en móvil las tarjetas son estrechas y hay nombres de tres líneas */
  .product-miniature .product-miniature__title {
    min-height: 60px;
  }
}

/* Escritorio: el bloque de cuenta sin icono, como producción («Iniciar sesión / Mi cuenta ▾» solo texto). Con el icono
   el menú no cabía en una fila y «Parafernalia» bajaba a una segunda línea (1.0.47). En móvil se queda el icono. */
@media (min-width: 768px) {
  .dp-header-nav #_desktop_ps_customersignin .header-block__icon {
    display: none;
  }
}

/* Entre 768 y 1399 px el contenedor es más estrecho y el menú no cabe junto a los textos de cuenta y cesta: ahí se
   quedan solo los iconos (con el contador), como una cabecera compacta; desde 1400 px, las dos líneas (1.0.48). */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .dp-header-nav #_desktop_ps_customersignin .header-block__icon {
    display: inline-block;
    font-size: 1.75rem;
  }

  .dp-header-nav #_desktop_ps_customersignin .dp-cuenta,
  .dp-header-nav #_desktop_ps_shoppingcart .dp-cesta {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* aun así faltaban 13 px: algo menos de espaciado en el menú en este rango */
  .dp-header-nav .ets_mm_megamenu .mm_menus_li > a .mm_menu_content_title {
    letter-spacing: 0.25px;
  }
}

/* =============================================================
   Buscador y bloques «Envío GRATIS» / «Contacto» de la cabecera como la tienda actual (1.0.50, revisión de Omar)
   -------------------------------------------------------------
   Buscador: borde verde de 2 px, radio 5 px, texto 12 px con 0,6 px de espaciado y la lupa a la DERECHA (el padre la
   pone a la izquierda). Envío/contacto: iconos lima del sprite del tema viejo (barco y auriculares, 35 px) y texto en
   verde de marca, 13 px (título normal, subtítulo seminegrita, mayúscula inicial).
   ============================================================= */
.ps-searchbar .ps-searchbar__input {
  border: 2px solid var(--dp-verde);
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 0.6px;
  padding-left: 1.25rem;
  padding-right: 2.75rem;
}

.ps-searchbar .ps-searchbar__input::placeholder {
  color: #adadad;
}

.ps-searchbar .ps-searchbar__magnifier {
  left: auto;
  right: 0.875rem;
  color: #212529;
}

.ps-searchbar .ps-searchbar__clear {
  right: 2.5rem;
}

.dp-cab-icono {
  display: block;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  background: url("../img/cabecera-iconos.png") no-repeat 0 0;
}

.dp-cab-icono--contacto {
  background-position: 0 -110px;
}

.dp-header-info__item span:not(.dp-cab-icono),
.dp-header-info__item strong {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--dp-verde);
  text-transform: capitalize;
}

.dp-header-info__item span:not(.dp-cab-icono) {
  font-weight: 400;
}

.dp-header-info__item strong {
  font-weight: 600;
}

/* =============================================================
   Barra fija al hacer scroll como la tienda actual (1.0.51, revisión de Omar: "sticky menú no funciona")
   -------------------------------------------------------------
   Producción fija una barra de 60 px con el menú y la cesta. En new había dos sticky a la vez: el de Hummingbird
   (toda la cabecera, 169 px) y el del Mega Menu (solo la lista, a la izquierda, encima). El del módulo se desactiva
   (ETS_MM_STICKY_ENABLED=0, bloque 48_megamenu) y aquí la cabecera se pega con top negativo = alto de la fila blanca
   (100 px desde 1200 px), así solo queda visible la banda verde entera. Por debajo de 1200 px el menú es hamburguesa y
   producción no tiene sticky: cabecera normal.
   ============================================================= */
@media (min-width: 1200px) {
  #header.js-sticky-header {
    position: sticky;
    top: -100px;
    z-index: 1020;
  }
}

@media (max-width: 1199.98px) {
  #header.js-sticky-header {
    position: relative;
    top: auto;
  }
}

/* =============================================================
   Carruseles sin barra de desplazamiento visible y con flechas ‹ › como la tienda actual (1.0.52, revisión de Omar)
   -------------------------------------------------------------
   Sustituye al estilo de barra de 1.0.25: la barra se oculta y las flechas (assets/js/dp-carruseles.js) van centradas
   entre el título y los productos, círculos pequeños con borde verde. Se ocultan solas si todo cabe.
   ============================================================= */
.ps-featuredproducts .products,
.ps-specials .products,
.ps-newproducts .products,
.dp-marcas__lista,
.page-product .ps-crossselling .products,
.page-product .ps-categoryproducts .products {
  scrollbar-width: none;
}

.ps-featuredproducts .products::-webkit-scrollbar,
.ps-specials .products::-webkit-scrollbar,
.ps-newproducts .products::-webkit-scrollbar,
.dp-marcas__lista::-webkit-scrollbar,
.page-product .ps-crossselling .products::-webkit-scrollbar,
.page-product .ps-categoryproducts .products::-webkit-scrollbar {
  display: none;
}

.dp-carrusel-flechas {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin: 0 0 1rem;
}

.dp-carrusel-flechas[hidden] {
  display: none;
}

.dp-carrusel-flecha {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--dp-verde);
  border-radius: 50%;
  background: #fff;
  color: var(--dp-verde);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.dp-carrusel-flecha:hover:not(:disabled) {
  background: var(--dp-verde);
  color: #fff;
}

.dp-carrusel-flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

/* =============================================================
   «Seguir leyendo» del blog con el aspecto del botón «Comprar» (1.0.53, revisión de Omar: listado del blog)
   -------------------------------------------------------------
   Listado /blog (.dp-blog) y bloque «De nuestro Blog» de la portada (.ets_block_latest): verde de marca, 12 px,
   600, mayúsculas, subrayado, 0,5 px de espaciado, radio 5 px; sin la cursiva que traía el módulo. En el listado el
   botón queda al pie de la tarjeta para que salgan alineados aunque el extracto sea más corto.
   ============================================================= */
.dp-blog .post-wrapper a.read_more,
.ets_block_latest a.read_more {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 12px;
  border: 1px solid var(--dp-verde);
  border-radius: 5px;
  background: var(--dp-verde);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: underline;
}

.dp-blog .post-wrapper a.read_more:hover,
.ets_block_latest a.read_more:hover {
  background: var(--dp-verde-hover);
  border-color: var(--dp-verde-hover);
  color: #fff;
}

/* Botón al pie también cuando el extracto es más corto (1.0.54): las tarjetas ocupan todo el alto de su fila y el
   contenido es columna flexible. En la portada el bloque es un carrusel owl: stage en flex (alto igual por fila). */
.dp-blog .ets-blog-list > li {
  display: flex;
}

.dp-blog .ets-blog-list > li > .post-wrapper {
  flex: 1 1 auto;
}

.dp-blog .post-wrapper .ets-blog-wrapper-content-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ets_block_latest .owl-stage {
  display: flex;
}

.ets_block_latest .owl-item {
  display: flex;
  flex-shrink: 0;
}

.ets_block_latest .owl-item > li {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ets_block_latest .ets-blog-latest-post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Móvil: «Abonos / Armarios / Iluminación» en una sola fila de tres como la tienda actual (≈116×85 px, texto 13 px);
   con 24 px y el relleno de escritorio «Iluminación» no cabía y bajaba a otra fila (1.0.56, revisión de Omar). */
@media (max-width: 767.98px) {
  .dp-botones-categoria {
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 1.5rem 0;
  }

  .dp-botones-categoria a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 5.25rem;
    padding: 0.5rem 0.25rem;
    font-size: 13px;
    letter-spacing: 0.3px;
  }
}

/* =============================================================
   Carruseles de producto en MÓVIL como la tienda actual (1.0.57, revisión de Omar: tamaños y espaciado)
   -------------------------------------------------------------
   Producción < 768 px: dos tarjetas por pantalla (≈180 px, sin asomar la tercera), precio y tachado en la misma
   línea, el botón justo debajo y poco aire alrededor del título de la sección. Antes: 2,5 tarjetas de 137 px con 24 px
   de hueco, el tachado en otra línea, 32 px hasta el botón y 40 px sobre el título. En carruseles el nombre reserva
   2 líneas (las 3 de 1.0.45 se quedan para los listados en rejilla).
   ============================================================= */
@media (max-width: 767.98px) {
  .ps-featuredproducts .products,
  .ps-specials .products,
  .ps-newproducts .products,
  .page-product .ps-crossselling .products,
  .page-product .ps-categoryproducts .products {
    gap: 0.5rem;
    padding-bottom: 0;
  }

  .ps-featuredproducts .product-miniature,
  .ps-specials .product-miniature,
  .ps-newproducts .product-miniature,
  .page-product .ps-crossselling .product-miniature,
  .page-product .ps-categoryproducts .product-miniature {
    width: calc((100% - 0.5rem) / 2);
  }

  .ps-featuredproducts .section-title,
  .ps-specials .section-title,
  .ps-newproducts .section-title,
  .page-product .ps-crossselling .section-title,
  .page-product .ps-categoryproducts .section-title {
    margin: 1.25rem 0 0.75rem;
  }

  .ps-specials {
    padding: 1.25rem 0 1.5rem;
    margin: 1.5rem 0;
  }

  .dp-carrusel-flechas {
    margin-bottom: 0.75rem;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature__bottom {
    padding: 0.5rem 0.375rem;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature .product-miniature__title {
    min-height: 40px;
    margin-bottom: 0.25rem;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature__prices {
    flex-wrap: nowrap;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature .product-miniature__price {
    font-size: 15px;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature .product-miniature__regular-price {
    font-size: 12px;
    white-space: nowrap;
  }

  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature__actions {
    margin-top: 0.5rem;
  }
}

/* Móvil, más compacto (1.0.58): en carruseles el nombre se corta a 2 líneas para que los precios queden alineados
   (el completo está en la ficha), y la portada separa sus secciones 16 px en vez de 40 (el hueco que marcó Omar
   sobre «Top semillas» sumaba ese gap, el margen del título y el de la presentación). */
@media (max-width: 767.98px) {
  :is(.ps-featuredproducts, .ps-specials, .ps-newproducts, .ps-crossselling, .ps-categoryproducts) .product-miniature .product-miniature__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-content--home {
    row-gap: 1rem;
  }

  .page-content--home .dp-presentacion {
    margin-bottom: 0.5rem;
  }

  .page-content--home > .ps-specials {
    margin: 0;
  }
}

/* Flechas del bloque «De nuestro Blog» (owl de ets_blog) más visibles, con el estilo de las de los carruseles de
   producto: círculo de 32 px, borde e icono verdes, relleno verde al pasar (1.0.59, revisión de Omar). */
.ets_block_latest .owl-nav .owl-prev,
.ets_block_latest .owl-nav .owl-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--dp-verde);
  /* !important: blog_home.css de ets_blog fuerza border-radius: 0 !important en .owl-nav > div */
  border-radius: 50% !important;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ets_block_latest .owl-nav .owl-prev::before,
.ets_block_latest .owl-nav .owl-next::before {
  color: var(--dp-verde);
  font-size: 18px;
  line-height: 1;
}

.ets_block_latest .owl-nav .owl-prev:hover,
.ets_block_latest .owl-nav .owl-next:hover {
  background: var(--dp-verde);
}

.ets_block_latest .owl-nav .owl-prev:hover::before,
.ets_block_latest .owl-nav .owl-next:hover::before {
  color: #fff;
}

.ets_block_latest .owl-nav .disabled {
  opacity: 0.35;
}

/* Listados: en la página 2 en adelante, sin el árbol de categorías de la barra lateral (enlazado interno solo en la
   primera página; body.dp-paginada lo pone assets/js/dp-listado.js). 1.0.61, revisión de Omar. */
body.dp-paginada #left-column .ps-categorytree,
body.dp-paginada .left-column .ps-categorytree {
  display: none;
}

/* Reseñas de la tarjeta bajo el nombre, alineadas a la izquierda, con hueco reservado aunque el producto no tenga
   reseñas (precios alineados), como la tienda actual (1.0.62). */
.product-miniature .dp-resenas-tarjeta {
  min-height: 20px;
  margin-bottom: 0.25rem;
}

.product-miniature .dp-resenas-tarjeta .product-list-review {
  justify-content: flex-start;
}

/* Móvil: estrellas y nº de reseñas en una sola línea (en tarjetas estrechas saltaban a dos y descuadraban los precios) */
@media (max-width: 767.98px) {
  .product-miniature .dp-resenas-tarjeta .product-list-review {
    flex-wrap: nowrap;
    gap: 0.25rem;
    white-space: nowrap;
    font-size: 11px;
  }
}

/* =============================================================
   Página de categoría como la tienda actual (1.0.64, revisión de Omar)
   -------------------------------------------------------------
   Título 18 px, 500, mayúsculas; encabezado «Subcategorías» de 13 px sobre la cuadrícula (category.tpl); árbol lateral
   «Comprar por categoría» (ps_categorytree.tpl). El orden filtro → árbol lo pone el bloque 58_filtros.
   ============================================================= */
.page-category .category__header h1,
.page-category .category__header .page-title-section h1 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #313131;
}

.dp-subcategorias-titulo {
  margin: 0.5rem 0 0.75rem;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
}

#left-column .ps-categorytree .left-block__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* =============================================================
   Listados como la tienda actual (1.0.65, revisión de Omar)
   -------------------------------------------------------------
   · 4 productos por fila desde 992 px (Hummingbird pone 3, y 2 entre 992 y 1199, con columna lateral).
   · Paginación: cuadros de 35 px gris casi negro con número blanco, la página actual en amarillo verdoso, los puntos
     suspensivos en negro y flechas sin texto (_partials/pagination.tpl). Resumen «Mostrando…» a 13 px en negro.
   ============================================================= */
@media (min-width: 992px) {
  .layout-left-column #js-product-list .products,
  .layout-right-column #js-product-list .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pagination__number {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
}

.pagination {
  gap: 4px;
  margin-bottom: 0;
}

.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 35px;
  padding: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
  background-color: #1f1f1f;
  border: 1px solid #1f1f1f;
  border-radius: 5px;
  margin-left: 0;
}

.pagination .page-link .material-icons {
  font-size: 22px;
}

.pagination .page-item.active .page-link,
.pagination .page-link.js-pager-link:hover,
.pagination .page-link.js-pager-link:focus-visible {
  color: #000;
  background-color: #cfd910;
  border-color: #cfd910;
}

.pagination .page-item.disabled .page-link {
  height: 40px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: #000;
  border-color: #000;
}

/* Listado con 4 por fila: entre 992 y 1199 px las tarjetas son estrechas y hay nombres de 3-4 líneas, que descuadraban
   los precios. La tarjeta ocupa el alto de la fila y el precio y el botón van siempre al pie, así quedan alineados con
   cualquier largo de nombre (1.0.66). */
#js-product-list .product-miniature,
#js-product-list .product-miniature__inner,
#js-product-list .product-miniature__bottom,
#js-product-list .product-miniature__infos {
  display: flex;
  flex-direction: column;
}

#js-product-list .product-miniature__inner,
#js-product-list .product-miniature__bottom,
#js-product-list .product-miniature__infos {
  flex: 1 1 auto;
}

#js-product-list .product-miniature__prices {
  margin-top: auto;
}

/* =============================================================
   Listado en móvil como la tienda actual (1.0.67, revisión de Omar)
   -------------------------------------------------------------
   · La columna lateral (árbol de categorías) va al final, tras el listado y la descripción, plegada bajo un botón
     «Categorías» (ps_categorytree.tpl); antes era lo primero que se veía. En escritorio, árbol siempre desplegado.
   · Barra gris «ORDENAR | FILTRAR» a todo el ancho y debajo «Mostrando X-Y de N producto(s)» (products-top.tpl y
     sort-orders.tpl); en escritorio sigue «Hay N productos» y el desplegable con la ordenación elegida.
   · Paginación alineada a la derecha, con el resumen encima.
   ============================================================= */
.dp-orden-movil,
.dp-mostrando,
.dp-arbol-boton {
  display: none;
}

@media (min-width: 768px) {
  .dp-arbol-contenido.collapse:not(.show) {
    display: block;
  }
}

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

  .ps-categorytree .dp-arbol-titulo {
    display: none;
  }

  .ps-categorytree {
    border: 3px solid #f0f0f0;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .dp-arbol-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    border: 0;
    background: #f0f0f0;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
  }

  .dp-arbol-boton::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }

  .dp-arbol-boton:not(.collapsed)::after {
    transform: rotate(-135deg);
  }

  .dp-arbol-contenido {
    padding: 0 15px;
  }

  #js-product-list-top .products__selection {
    row-gap: 10px;
  }

  #js-product-list-top .products__count {
    display: none;
  }

  #js-product-list-top .products__sort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #eee;
  }

  #js-product-list-top .products__sort-dropdown {
    position: relative;
  }

  #js-product-list-top .products__sort-dropdown::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 0;
    height: 20px;
    border-right: 1px solid #999;
  }

  #js-product-list-top .products__sort-dropdown-button,
  #js-product-list-top .products__filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  #js-product-list-top .products__sort-dropdown-button::after,
  #js-product-list-top .products__filter-button .material-icons,
  #js-product-list-top .dp-orden-actual {
    display: none;
  }

  #js-product-list-top .dp-orden-movil,
  .dp-mostrando {
    display: block;
  }

  .dp-mostrando {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #000;
  }

  .pagination__container {
    flex-direction: column;
    align-items: flex-end;
    row-gap: 10px;
  }

  .pagination__number {
    text-align: right;
  }
}

/* =============================================================
   Flechas de los carruseles a los lados, como la tienda actual pero más visibles (1.0.68, revisión de Omar: ficha de
   producto y portada)
   -------------------------------------------------------------
   Sustituye a las flechas pequeñas centradas sobre la lista (1.0.52): círculos de 40 px verdes con la flecha en blanco y
   sombra, sobre el borde de la lista a media altura de las fotos (la altura la calcula dp-carruseles.js). La flecha sin
   recorrido en su sentido se oculta.
   ============================================================= */
.dp-carrusel-caja {
  position: relative;
}

.dp-carrusel-flechas {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: block;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.dp-carrusel-flecha {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--dp-verde);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-50%);
  pointer-events: auto;
}

.dp-carrusel-flecha--prev {
  left: -8px;
}

.dp-carrusel-flecha--next {
  right: -8px;
}

.dp-carrusel-flecha:hover:not(:disabled) {
  background: var(--dp-verde-oscuro);
  color: #fff;
}

.dp-carrusel-flecha:disabled {
  visibility: hidden;
}

@media (max-width: 767.98px) {
  .dp-carrusel-flechas {
    margin: 0;
  }

  .dp-carrusel-flecha {
    width: 36px;
    height: 36px;
    font-size: 26px;
  }

  .dp-carrusel-flecha--prev {
    left: -4px;
  }

  .dp-carrusel-flecha--next {
    right: -4px;
  }
}

/* =============================================================
   Columna de compra de la ficha como la tienda actual (1.0.69, revisión de Omar)
   -------------------------------------------------------------
   Orden (catalog/product.tpl): título → estrellas «(n)» → descripción corta → «Leer más» → formatos → precio en una
   línea → «Cantidad» + COMPRAR. Medidas de producción: precio anterior 20 px rojo tachado, precio 24 px, distintivo
   amarillo «AHORRAS UN 30%» 13 px, «Impuestos incluidos» 13 px gris.
   ============================================================= */
.page-product .product__additional-info .product-comments-additional-info,
.page-product .dp-ficha-resenas .post-product-comment {
  display: none;
}

.page-product .dp-ficha-resenas {
  margin: 4px 0 12px;
}

.page-product .dp-ficha-resenas .comments-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #555;
}

.page-product .dp-ficha-resenas a {
  text-decoration: none;
}

.page-product .dp-leer-mas {
  display: inline-block;
  margin: 2px 0 20px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
}

.page-product .product-variant__selected {
  display: none;
}

/* la leyenda «Paquete» flota (reboot de Bootstrap); sin el texto de la opción elegida, los formatos subían a su lado */
.page-product .product-variant__label {
  display: flow-root;
}

.page-product .product__actions .product__prices {
  margin: 20px 0;
}

.page-product .product__actions .product__prices-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px 10px;
  text-align: left;
}

.page-product .product__actions .product__prices-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.page-product .product__actions .product__regular-price {
  font-size: 20px;
  font-weight: 600;
  color: #bc0000;
  text-decoration: line-through;
}

.page-product .product__actions .product__price {
  font-size: 24px;
  font-weight: 600;
  color: #000;
}

.page-product .product__actions .product__discount-percentage,
.page-product .product__actions .product__discount-amount {
  padding: 5px 8px;
  border-radius: 5px;
  background: #cfd910;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.page-product .product__actions .product__tax-infos {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #878787;
}

.page-product .product__actions-qty-add {
  align-items: center;
}

.page-product .product__actions-qty-add::before {
  content: "Cantidad";
  margin-right: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #000;
}

.page-product .product__add-to-cart-button {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

/* =============================================================
   Ficha en tablet y barra de compra fija en móvil, como la tienda actual (1.0.72, revisión de Omar)
   -------------------------------------------------------------
   · Por debajo de 992 px producción no muestra los banners laterales (envío gratis / regalo); en new salían ANTES del
     producto entre 768 y 991 px. Los avisos «Regalo en cada pedido» / «Envío gratis desde 25€» siguen solo < 768 px.
   · < 768 px: precio + cantidad + COMPRAR (.dp-compra-flotante, catalog/product.tpl) fijos al pie de la pantalla, siempre
     visibles (div.flota-movil de producción: fondo blanco, filete gris arriba, precio en una fila y debajo cantidad y
     botón). El pie de la página deja hueco para que la barra no tape el final.
   ============================================================= */
@media (max-width: 991.98px) {
  .page-product .dp-ficha > .dp-banners-producto {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .page-product .dp-compra-flotante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 8px 15px 10px;
    background: #fff;
    border-top: 1px solid #bbb;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }

  .page-product .dp-compra-flotante .product__prices {
    margin: 0 0 8px;
  }

  .page-product .dp-compra-flotante .product__regular-price,
  .page-product .dp-compra-flotante .product__price {
    font-size: 20px;
  }

  .page-product .dp-compra-flotante .product__tax-infos,
  .page-product .dp-compra-flotante .product__availability {
    display: none;
  }

  .page-product .dp-compra-flotante .product__add-to-cart-container {
    margin: 0;
  }

  .page-product .dp-compra-flotante .product__actions-qty-add {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .page-product .dp-compra-flotante .product__actions-qty-add::before {
    content: none;
  }

  .page-product .dp-compra-flotante .product__quantity {
    flex: 0 0 auto;
    width: auto;
  }

  .page-product .dp-compra-flotante .product__add-to-cart {
    flex: 1 1 auto;
  }

  .page-product .dp-compra-flotante .product__add-to-cart-button {
    width: 100%;
    height: 100%;
  }

  body.page-product {
    padding-bottom: 125px;
  }
}

/* Las listas de los carruseles son la referencia de posición de lo que llevan dentro: algunos elementos absolutos de las
   tarjetas (estrellas de reseñas) escapaban del recorte del scroll horizontal y la página «medía» 1.057 px en la ficha
   y 4.423 px en la portada con una pantalla de 390. En el móvil eso ensancha el área de la página y la barra de compra
   fija quedaba fuera de la pantalla (1.0.73). */
.ps-featuredproducts .products,
.ps-specials .products,
.ps-newproducts .products,
.dp-marcas__lista,
.page-product .ps-crossselling .products,
.page-product .ps-categoryproducts .products {
  position: relative;
}

/* =============================================================
   Descuentos por volumen como la tienda actual (1.0.74, revisión de Omar: semillas a granel)
   -------------------------------------------------------------
   Título «Descuentos por volumen» 13 px y tabla de tres columnas con cabecera en negrita y filas en gris claro
   (catalog/_partials/product-discounts.tpl).
   ============================================================= */
.page-product .dp-descuentos-titulo {
  margin: 1rem 0 0.5rem;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
}

.page-product .discounts-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
}

.page-product .discounts-table th {
  padding: 8px;
  border: 3px solid #f0f0f0;
  font-weight: 600;
  color: #000;
}

.page-product .discounts-table td {
  padding: 6px 8px;
  border: 3px solid #fff;
  background: #f0f0f0;
}

/* =============================================================
   Inicio de sesión, registro y recuperar contraseña como la tienda actual (1.0.75, revisión de Omar)
   -------------------------------------------------------------
   El login y el registro los pinta One Page Checkout (OPC_REPLACE_AUTH_CONTROLLER, como producción); el login con
   código por correo se quita en el bloque `opc` (OPC_ENABLE_LOGIN_OTP=0) y los textos en
   modules/onepagecheckoutps/translations/es.php. Producción: título «INICIAR SESIÓN CON SU CUENTA» 15 px, caja con
   borde fino, etiquetas a la izquierda de campos de 30 px, botón amarillo «MOSTRAR», «¿Olvidó su contraseña?»
   centrado, botón verde «ACCEDER» y «¿Sin cuenta? Créate una aquí». Recuperar contraseña: customer/password-email.tpl.
   ============================================================= */
#authentication #opc_main .opc-step {
  border: 1px solid #ebebeb;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

#authentication #opc_main .opc-step-header {
  background: none;
  border-bottom: 0;
}

#authentication #opc_main .opc-step-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000 !important;
}

#authentication #opc_main:has(#opc_login_customer:not(.opc-login-customer-hidden *)) .opc-step-title {
  font-size: 0 !important;
}

#authentication #opc_main:has(#opc_login_customer:not(.opc-login-customer-hidden *)) .opc-step-title::before {
  content: "Iniciar sesión con su cuenta";
  font-size: 15px;
  color: #000;
}

#authentication #opc_login_customer .opc-login-customer__form {
  max-width: 700px;
  margin: 0 auto;
}

#authentication #opc_login_customer .form-floating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

#authentication #opc_login_customer .form-floating > label {
  position: static;
  order: -1;
  width: 230px;
  height: auto;
  padding: 0 20px 0 0 !important;
  transform: none;
  opacity: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #000;
  text-align: right;
  white-space: normal;
}

#authentication #opc_login_customer .form-floating > label::after {
  content: none;
}

#authentication #opc_login_customer .form-floating > .form-control {
  flex: 1 1 0;
  height: 30px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 0;
  font-size: 13px;
}

#authentication #opc_login_customer .form-floating > .form-control::placeholder {
  color: transparent;
}

#authentication #opc_login_customer .opc-login-customer__password-toggle {
  position: static !important;
  width: 82px;
  height: 30px !important;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #cfd910;
  color: #000;
  transform: none;
}

#authentication #opc_login_customer .opc-login-customer__password-toggle .material-icons {
  display: none;
}

#authentication #opc_login_customer .opc-login-customer__password-toggle::before {
  content: "Mostrar";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#authentication #opc_login_customer .opc-login-customer__forget-link-anchor {
  position: static;
  flex: 0 0 100%;
  margin: 16px 0 4px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
  text-align: center;
  text-decoration: none;
}

#authentication #opc_login_customer .opc-login-customer__button-container {
  display: flex;
  justify-content: center;
}

#authentication #opc_login_customer .opc-login-customer__submit-btn,
#authentication #opc_login_customer .opc-login-customer__submit-btn:disabled {
  width: auto;
  min-width: 128px;
  padding: 10px 30px;
  border: 0;
  border-radius: 5px;
  background: var(--dp-verde);
  color: #fff;
  opacity: 1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

#authentication #opc_login_customer .opc-auth-page-link--register a {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #000;
  text-decoration: none;
}

#authentication #opc_login_customer .opc-auth-page-link--register .material-icons {
  display: none;
}

/* registro (mismo OPC): botón verde en mayúsculas como «GUARDAR INFORMACIÓN» de producción */
#authentication #opc_main .opc-step-body .btn-primary:not(.opc-login-customer__submit-btn) {
  background: var(--dp-verde);
  border-color: var(--dp-verde);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  #authentication #opc_login_customer .form-floating > label {
    width: 100%;
    padding: 0 0 4px !important;
    text-align: left;
  }
}

/* Recuperar contraseña */
#password .page-title-section {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#password .forgotten-password {
  padding: 30px;
  border: 1px solid #ebebeb;
  font-size: 13px;
  letter-spacing: 0.5px;
}

#password .forgotten-password .send-renew-password-link {
  font-size: 13px;
  color: #000;
}

#password .forgotten-password .form-label {
  font-size: 13px;
  font-weight: 500;
}

#password .forgotten-password .form-label::after {
  content: none;
}

#password .forgotten-password .form-control {
  height: 30px;
  border-radius: 0;
  font-size: 13px;
}

#password #send-reset-link {
  padding: 10px 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

#password .page-footer hr {
  display: none;
}

#password #back-to-login {
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #000;
}

/* Registro (OPC): etiqueta encima y campo bajo, como producción, en vez de etiquetas flotantes (1.0.76). En el HTML
   de OPC la etiqueta va DESPUÉS del campo: la columna flex la sube (1.0.77). Los botones de la contraseña (ver /
   generar) se quedan dentro del campo, abajo a la derecha. */
#authentication #opc_main .opc-step-body .form-floating:not(#opc_login_customer *) {
  display: flex;
  flex-direction: column;
  position: relative;
}

#authentication #opc_main .opc-step-body .form-floating:not(#opc_login_customer *) > label {
  order: -1;
}

#authentication #opc_main .opc-step-body .form-floating:not(#opc_login_customer *) > button {
  top: auto !important;
  bottom: 0 !important;
  height: 30px !important;
  transform: none !important;
}

#authentication #opc_main .form-floating > label {
  position: static !important;
  height: auto !important;
  padding: 0 0 4px !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #000;
}

#authentication #opc_main .form-floating > .form-control,
#authentication #opc_main .form-floating > .form-select {
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 0;
  font-size: 13px;
}

#authentication #opc_main .form-floating > .form-control::placeholder {
  color: transparent;
}

/* =============================================================
   Aviso de envío gratis como la tienda actual (1.0.78, revisión de Omar: carrito)
   -------------------------------------------------------------
   Franja centrada de 13 px, verde «El coste total del envío será GRATIS» / rosa «Gasta X € más para tener envío
   GRATIS. Seguir comprando ›» con el importe en rojo (modules/lgfreeshippingzones/.../shoppingCart.tpl; los colores
   de fondo son los del módulo, bloque `enviogratis`).
   ============================================================= */
#lgfreshippingzones-container #freeshippinginfo.dp-envio-gratis,
#lgfreshippingzones-container #freeshippinginfo.dp-envio-falta {
  margin: 10px 0;
  padding: 10px 15px;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 20px;
  text-align: center;
}

#lgfreshippingzones-container .dp-envio-importe {
  color: #d0021b;
}

#lgfreshippingzones-container .dp-envio-seguir {
  color: #d0021b;
  text-decoration: none;
  white-space: nowrap;
}

/* =============================================================
   Listado del blog sin cajas, como la tienda actual (1.0.79, revisión de Omar: «más limpio, sin bordes ni encajetar»)
   -------------------------------------------------------------
   Producción (blog.html): título «BLOG CANÁBICO» 16 px en mayúsculas; entradas sin borde ni fondo, foto a todo el
   ancho, título 18 px negro en mayúsculas, extracto gris 13 px y botón verde.
   ============================================================= */
.dp-blog .dp-blog__titulo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}

.dp-blog .post-wrapper {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.dp-blog .post-wrapper .ets-blog-wrapper-content {
  padding: 16px 0 0;
}

.dp-blog .post-wrapper .ets_title_block {
  padding: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: #000;
}

.dp-blog .post-wrapper .blog_description,
.dp-blog .post-wrapper .blog_description p {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 23px;
  color: #707070;
}

.dp-blog .post-wrapper a.read_more {
  padding: 8px 16px;
  font-size: 13px;
  letter-spacing: 0.7px;
}

/* ---------- Checkout (One Page Checkout 5.3.3, estilo three_columns) ----------
   Revisión de Omar (2026-10): el checkout no seguía los estilos de Diosa Planta (paleta del módulo: azul marino y
   botón amarillo) y pedía diferenciar más cada paso. El módulo pinta sus colores con variables CSS en :root
   (views/templates/front/theme.tpl); se redefinen solo dentro del checkout (las páginas de login y registro del
   módulo tienen sus propias reglas más arriba). Cada paso lleva una cabecera verde con el número en lima. */
#checkout #opc_main {
  --bs-primary: var(--dp-verde);
  --bs-primary-rgb: var(--dp-rgb-verde);
  --bs-primary-hover: var(--dp-verde-oscuro);
  --bs-color-primary: #fff;
  --bs-color-primary-hover: #fff;
  --bs-border-primary: var(--dp-verde);
  --bs-border-primary-hover: var(--dp-verde-oscuro);
  --bs-secondary: var(--dp-verde-oscuro);
  --bs-border-secondary: var(--dp-verde-oscuro);
  --bs-secondary-hover: var(--dp-verde);
  --bs-border-secondary-hover: var(--dp-verde);
  --pts-login-panel-bg: var(--dp-verde);
  --pts-step-bg: #fff;
  --pts-step-footer-bg: #fff;
  --pts-btn-checkout-bg: var(--dp-verde);
  --pts-btn-checkout-color: #fff;
  --pts-btn-checkout-border: var(--dp-verde);
  --pts-btn-checkout-hover-bg: var(--dp-verde-oscuro);
  --pts-btn-checkout-hover-color: #fff;
}
#checkout #opc_main.opc-three-columns .opc-step {
  background: #fff;
  border: 1px solid var(--dp-borde-fuerte);
  box-shadow: none;
}
/* Contacto y Direcciones son un único bloque visual (la cabecera de Direcciones está oculta) */
#checkout #opc_main.opc-three-columns #opc_step_my_account { border-bottom: 0; }
#checkout #opc_main.opc-three-columns #opc_step_addresses { border-top: 0; }
#checkout #opc_main.opc-three-columns .opc-step .opc-step-header {
  background: var(--dp-verde);
  padding: 10px 16px;
  border-bottom: 0;
}
#checkout #opc_main.opc-three-columns .opc-step > .opc-step-header:first-child { border-radius: 9px 9px 0 0; }
#checkout #opc_main.opc-three-columns .opc-step .opc-step-header .opc-step-title {
  color: #fff;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: .04em;
}
#checkout #opc_main.opc-three-columns .opc-step .opc-step-header .opc-step-badge {
  background: var(--dp-lima);
  width: 34px;
  height: 34px;
}
#checkout #opc_main.opc-three-columns .opc-step .opc-step-header .opc-step-icon-bg { color: var(--dp-verde-oscuro); }
#checkout #opc_main.opc-three-columns .opc-step .opc-step-header .opc-step-number { color: var(--dp-verde-oscuro); font-size: 16px; }
#checkout #opc_main.opc-three-columns .opc-step-header #opc-login-link.opc-login-link { color: #fff; }
#checkout #opc_main.opc-three-columns .opc-step-header #opc-login-link.opc-login-link:hover { color: var(--dp-lima); }
/* paso aún no disponible (el módulo lo atenúa): cabecera gris */
#checkout #opc_main.opc-three-columns .opc-step.opc-step--disabled .opc-step-header { background: var(--dp-gris-caja); }
#checkout #opc_main.opc-three-columns .opc-step.opc-step--disabled .opc-step-header .opc-step-badge { background: #d0d0d0; }
#checkout #opc_main.opc-three-columns #opc_cart_total_products {
  background: var(--dp-lima);
  border-color: var(--dp-lima);
  color: var(--dp-verde-oscuro);
  font-weight: 700;
}
/* Transporte y pago: opción elegida en verde */
#checkout #opc_main.opc-three-columns .delivery-option {
  border: 1px solid var(--dp-borde-fuerte);
  border-radius: 6px;
  background: #fff;
}
#checkout #opc_main.opc-three-columns .delivery-option.delivery-option-selected {
  border-color: var(--dp-verde);
  background: var(--dp-fondo-suave);
}
#checkout #opc_main.opc-three-columns .delivery_option_price { color: var(--dp-verde); }
#checkout #opc_main.opc-three-columns .module_payment_container:has(.payment_radio:checked) .payment-option {
  background: var(--dp-fondo-suave);
  box-shadow: inset 3px 0 0 var(--dp-verde);
}
/* Botón final como el «COMPRAR AHORA» de la tienda actual */
#checkout #opc_main.opc-three-columns #opc-checkout-finalize {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 12px 16px;
}
#checkout #opc_main.opc-three-columns input[type="radio"],
#checkout #opc_main.opc-three-columns input[type="checkbox"] { accent-color: var(--dp-verde); }
#checkout #opc_main.opc-three-columns .form-control:focus,
#checkout #opc_main.opc-three-columns .form-select:focus {
  border-color: var(--dp-verde);
  box-shadow: 0 0 0 .2rem rgba(var(--dp-rgb-verde), .2);
}
/* lgfreeshippingzones pinta su aviso en displayBeforeCarrier y otra vez en displayShoppingCartFooter: en el checkout
   se deja solo el del paso de envío (producción enseña uno) */
#checkout #opc_main.opc-three-columns #hook_shopping_cart_footer #lgfreshippingzones-container { display: none; }
/* Contra reembolso: codfee ya añade su línea «Comisión por pago contra reembolso» al resumen y el JS del módulo añade
   otra, «Cuota», con el mismo importe (el total lo cuenta una vez). Se oculta la del módulo cuando está la de codfee. */
#checkout #opc_main .cart-summary-subtotals-container:has(#cart-subtotal-codfee) .cart-summary-subtotals-payment-fee { display: none; }
/* Móvil: el carrito va arriba (desplegable del módulo) y de su columna solo quedaba el pie vacío como una caja en blanco */
@media (max-width: 991.98px) {
  #checkout #opc_main.opc-three-columns #opc_step_cart:not(:has(#opc_step_cart_footer *)) { display: none; }
}

/* ---------- Paginación del blog ----------
   Formato de la web actual (revisión de Omar, 2026-10): «Mostrando X - Y de N posts» a la izquierda y
   «Anterior 1 2 3 … N Siguiente» a la derecha, página actual en un recuadro verde. La monta assets/js/dp-blog.js con
   los enlaces del módulo, que quedan ocultos. */
.blog-paggination.dp-blog-pag {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
  text-align: left;
}
.blog-paggination.dp-blog-pag > .results,
.blog-paggination.dp-blog-pag > .links { display: none; }
.dp-blog-pag__mostrando { font-size: 13px; color: #000; }
.dp-blog-pag__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.dp-blog-pag__lista a,
.dp-blog-pag__lista span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 30px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
}
.dp-blog-pag__lista a:hover { color: var(--dp-verde); }
.dp-blog-pag__lista .is-active span { background: var(--dp-verde-hover); color: #fff; }
.dp-blog-pag__lista .is-disabled { cursor: default; }
@media (max-width: 575.98px) {
  .blog-paggination.dp-blog-pag { justify-content: center; }
}

/* ---------- Entrada del blog: línea de datos como la web actual ----------
   Revisión de Omar (2026-10-15): entre la imagen y el título, «☰ En: categoría», fecha y autor en una línea de 13 px
   (producción: «En: Plagas · Comentario · Hit»; sin comentarios ni visitas aquí). La pinta
   modules/ets_blog/views/templates/hook/single_post.tpl. El título, en mayúsculas y más contenido, como producción. */
.ets-blog-wrapper-detail .dp-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  margin: 18px 0 22px;
  font-size: 13px;
  color: #000;
}
.ets-blog-wrapper-detail .dp-post-meta__item {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  float: none;
  margin: 0;
}
.ets-blog-wrapper-detail .dp-post-meta .material-icons { font-size: 17px; line-height: 1; }
.ets-blog-wrapper-detail .dp-post-meta .be-label,
.ets-blog-wrapper-detail .dp-post-meta .post-author-label { font-weight: 600; }
.ets-blog-wrapper-detail .dp-post-meta a { color: #000; text-decoration: none; }
.ets-blog-wrapper-detail .dp-post-meta a:hover { color: var(--dp-verde); }
.ets-blog-wrapper-detail .dp-post-meta .post-author-name { color: #000; font-weight: 400; }
.ets-blog-wrapper-detail h1.page-heading {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  text-transform: uppercase;
}
/* Categorías del blog en la columna izquierda del blog (modules/ets_blog/views/templates/front/blog.tpl): la activa en verde */
.dp-blog-categorias .category-tree__item.is-active > .category-tree__item-header .category-tree__item-link { color: var(--dp-verde); font-weight: 600; }