/* ============================================================
   Grupo Zentra — Paleta de marca derivada del logo
   Oro #E8BB3D · Oro profundo #9B630A · Carbón #131417
   Inyectado como custom.css (tema classic). NO editar a mano en server.
   ============================================================ */
:root{
  --z-gold:#E8BB3D;        /* acento / fondos */
  --z-gold-2:#d4a72f;      /* hover de oro */
  --z-gold-deep:#9B630A;   /* oro legible sobre blanco (texto/enlaces) */
  --z-dark:#131417;        /* carbón (superficies oscuras, footer) */
  --z-dark-2:#1d2026;
}

/* ---------- Selección de texto ---------- */
::selection{background:var(--z-gold);color:var(--z-dark);}

/* ---------- Enlaces y acentos sobre blanco ---------- */
a{color:var(--z-dark);}
a:hover,a:focus{color:var(--z-gold-deep);text-decoration:none;}
.link,.breadcrumb a{color:var(--z-gold-deep);}
.breadcrumb a:hover{color:var(--z-dark);}
.btn-link{color:var(--z-gold-deep)!important;}

/* ---------- Botones primarios ---------- */
.btn-primary,
.btn-primary:visited{
  background-color:var(--z-gold)!important;
  border-color:var(--z-gold)!important;
  color:var(--z-dark)!important;
  font-weight:600;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active{
  background-color:var(--z-gold-2)!important;
  border-color:var(--z-gold-2)!important;
  color:var(--z-dark)!important;
}
.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(232,187,61,.45)!important;}

/* Botón secundario / outline en tono carbón */
.btn-secondary{
  background-color:var(--z-dark)!important;
  border-color:var(--z-dark)!important;
  color:#fff!important;
}
.btn-secondary:hover,.btn-secondary:focus{
  background-color:var(--z-dark-2)!important;border-color:var(--z-dark-2)!important;color:#fff!important;
}

/* Añadir al carrito y acciones de producto */
.product-add-to-cart .add-to-cart,
.add-to-cart,
.product-actions .add-to-cart{
  background-color:var(--z-gold)!important;
  border-color:var(--z-gold)!important;
  color:var(--z-dark)!important;
  font-weight:600;
}
.product-add-to-cart .add-to-cart:hover,.add-to-cart:hover{
  background-color:var(--z-gold-2)!important;border-color:var(--z-gold-2)!important;color:var(--z-dark)!important;
}

/* ---------- Precios ---------- */
.product-price,.current-price,.price,
.product-price.current-price,
.product-miniature .product-price-and-shipping .price{
  color:var(--z-dark)!important;
}
.has-discount .discount,.product-discount .discount{background-color:#c0392b!important;color:#fff!important;}

/* ---------- Flags / badges de producto ---------- */
.product-flag,
.product-flag.new,
.product-flag.online-only,
.product-flag.pack{
  background-color:var(--z-gold)!important;
  color:var(--z-dark)!important;
  font-weight:600;
}
.product-flag.on-sale{background-color:var(--z-dark)!important;color:#fff!important;}
.product-flag.discount{background-color:#c0392b!important;color:#fff!important;}

/* ---------- Títulos de sección (NOVEDADES, etc.) ---------- */
.products-section-title,
.h1.products-section-title,
.h2.products-section-title{color:var(--z-dark)!important;}

/* ---------- Tarjetas de producto ---------- */
.product-title a:hover,
.product-miniature .product-title a:hover{color:var(--z-gold-deep)!important;}
.product-miniature{transition:box-shadow .2s ease;}
.product-miniature:hover{box-shadow:0 6px 22px rgba(19,20,23,.12);}

/* ---------- Menú superior ---------- */
.top-menu a{color:var(--z-dark);}
#_desktop_top_menu .top-menu a.dropdown-item:hover,
.top-menu a:hover,
.top-menu .sub-menu a:hover{color:var(--z-gold-deep)!important;}
.top-menu .collapse a.dropdown-submenu:hover{color:var(--z-gold-deep)!important;}

/* ---------- Header: iconos / enlaces hover ---------- */
#header .header-nav a:hover,
.header-top a:hover,
#_desktop_user_info a:hover,
.blockcart a:hover,
.header__search button:hover{color:var(--z-gold-deep)!important;}
.blockcart.active{background-color:var(--z-gold)!important;color:var(--z-dark)!important;}

/* ---------- Buscador ---------- */
.search-widget button[type=submit],
.ps-search button{color:var(--z-gold-deep)!important;}

/* ---------- Formularios: foco ---------- */
.form-control:focus,
.js-child-focus .form-control,
.input-group.focus{
  border-color:var(--z-gold)!important;
  box-shadow:0 0 0 .15rem rgba(232,187,61,.35)!important;
}

/* ---------- Checkbox / radio marcados ---------- */
.custom-radio input:checked+span,
.custom-checkbox input[type=checkbox]:checked+span{
  background-color:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
.custom-radio input:checked+span{box-shadow:inset 0 0 0 3px #fff;}

/* ---------- Paginación ---------- */
.page-list .page-item.active .page-link,
.pagination .current a{
  background-color:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
.page-link:hover{color:var(--z-gold-deep)!important;}

/* ---------- Tabs de producto ---------- */
.nav-tabs .nav-link.active{color:var(--z-dark)!important;border-bottom:3px solid var(--z-gold)!important;}
.nav-tabs .nav-link:hover{color:var(--z-gold-deep)!important;}

/* ---------- Filtros / facetas ---------- */
.facet .collapse .facet-label a:hover,
.facet .facet-title{color:var(--z-dark)!important;}
.active_filters .filter-block{background-color:var(--z-gold)!important;color:var(--z-dark)!important;}

/* ---------- Footer en carbón ---------- */
.footer-container{
  background-color:var(--z-dark)!important;
  color:#cfcfcf!important;
  margin-top:0;
  padding-top:2.5rem;
}
.footer-container .h3,
.footer-container h3,
.footer-container .links .h3,
.footer-container .blockcms-title,
.footer-container .ps-emailsubscription h3{color:var(--z-gold)!important;}
.footer-container a,
.footer-container li a,
.footer-container .link-block li a,
.footer-container .block-contact,
.footer-container .navbar-toggler{color:#cfcfcf!important;}
.footer-container a:hover,.footer-container li a:hover{color:var(--z-gold)!important;}
.footer-container .links .collapse ul>li,
.footer-container .links ul>li{border-color:rgba(255,255,255,.08)!important;}
.footer-container .ps-emailsubscription .btn-primary{background:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;}

/* Barra de copyright */
#footer .footer__copyright,
.footer__copyright,
#footer .copyright{color:#9a9a9a!important;}

/* ============================================================
   Cobertura extendida (estados, checkout, modales, buscador)
   ============================================================ */

/* ---------- Botones deshabilitados (que NO parezcan activos) ---------- */
.btn-primary:disabled,.btn-primary.disabled,
.btn-secondary:disabled,.btn-secondary.disabled,
.add-to-cart:disabled,.add-to-cart.disabled,
.btn.disabled,.btn:disabled{
  opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important;
}

/* ---------- Foco accesible en botones ---------- */
.btn-primary:focus-visible,.add-to-cart:focus-visible{
  outline:2px solid var(--z-gold-deep)!important;outline-offset:2px;
}

/* ---------- Buscador (classic real: #search_widget) ---------- */
#search_widget button[type=submit],
#search_widget .search button,
#search_widget button:hover{color:var(--z-gold-deep)!important;}
#search_widget input:focus{border-color:var(--z-gold)!important;}
.search-widgets .dropdown-menu .ui-menu-item a:hover,
ul.ui-autocomplete .ui-menu-item:hover{background-color:var(--z-gold)!important;color:var(--z-dark)!important;}

/* ---------- Paginación (variantes classic) ---------- */
.pagination .current,
.pagination .page-list .current,
.pagination .page-list li.active a{
  background-color:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
.pagination a:hover{color:var(--z-gold-deep)!important;}

/* ---------- Checkout: pasos ---------- */
.checkout-step .step-title,
.checkout-step.-current .step-title,
.order-confirmation .card-title h3{color:var(--z-dark)!important;}
.checkout-step .step-number,
.checkout .step-number{background-color:var(--z-gold)!important;color:var(--z-dark)!important;}
.checkout-step.-complete .done,
.checkout-step .step-edit{color:var(--z-gold-deep)!important;}
#checkout .btn-primary,
.cart-detailed-actions .btn-primary,
.checkout a.btn-primary{
  background-color:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
.cart-summary-line .value,.cart-total .value{color:var(--z-dark)!important;}

/* ---------- Modal del carrito y modales en general ---------- */
.modal-title,.modal-header .h5{color:var(--z-dark)!important;}
#blockcart-modal .cart-content .btn-primary,
#blockcart-modal a.cart-content-btn .btn-primary{
  background-color:var(--z-gold)!important;border-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
#blockcart-modal .product-name{color:var(--z-dark)!important;}
.modal-body a:hover{color:var(--z-gold-deep)!important;}

/* ---------- Formularios: estado inválido (mantener rojo semántico) ---------- */
.form-control.is-invalid,
.was-validated .form-control:invalid{border-color:#c0392b!important;}

/* ---------- Carrito: enlaces de acción ---------- */
.cart-grid-body a:hover,
.product-line-grid a:hover{color:var(--z-gold-deep)!important;}

/* ============ Barra de utilidades superior (marca Zentra) ============ */
#header .header-nav{
  background-color:var(--z-dark)!important;
  border-bottom:2px solid var(--z-gold)!important;
  min-height:44px;
  display:flex;align-items:center;
  font-size:.9rem;
}
#header .header-nav .container{width:100%;}
#header .header-nav .row{align-items:center;}
#header .header-nav a,
#header .header-nav .user-info a,
#header .header-nav #contact-link a,
#header .header-nav .blockcart{color:#fff!important;}
#header .header-nav a:hover,
#header .header-nav .blockcart:hover{color:var(--z-gold)!important;}
#header .header-nav .material-icons{color:var(--z-gold)!important;vertical-align:middle;}
#header .header-nav .cart-products-count{color:#fff!important;}
#header #_desktop_contact_link #contact-link a{font-weight:600;}
#header .header-nav .right-nav{
  display:flex!important;align-items:center;justify-content:flex-end;float:none!important;
}
#header .header-nav .right-nav > div{
  float:none!important;margin:0!important;display:flex;align-items:center;
  padding:0 1.1rem;border-right:1px solid rgba(232,187,61,.35);
}
#header .header-nav .right-nav > div:last-child{border-right:none;padding-right:0;}
#header .header-nav .right-nav::before{
  content:"\1F552  365 días al año · 24 horas";
  order:-1;display:flex;align-items:center;
  color:var(--z-gold)!important;font-weight:600;white-space:nowrap;
  padding:0 1.1rem 0 0;border-right:1px solid rgba(232,187,61,.35);
}

/* ============ Menú principal de categorías (barra de marca) ============ */
#header .header-top .header-top-right{
  display:flex!important;align-items:center;gap:1rem;
}
#header #_desktop_top_menu{
  flex:1 1 auto;min-width:0;
  background-color:var(--z-dark)!important;
  border-bottom:2px solid var(--z-gold)!important;
  border-radius:3px;
  padding:0;
}
#header #_desktop_top_menu .top-menu{
  display:flex;flex-wrap:wrap;align-items:stretch;margin:0;padding:0;
}
#header #_desktop_top_menu .top-menu .category{margin:0;list-style:none;}
#header #_desktop_top_menu .top-menu .category > a.dropdown-item{
  display:flex;align-items:center;
  color:#fff!important;
  text-transform:uppercase;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
  padding:.85rem 1.1rem!important;
  border-right:1px solid rgba(232,187,61,.25);
  white-space:nowrap;
  background:transparent!important;
  transition:background-color .15s ease,color .15s ease;
}
#header #_desktop_top_menu .top-menu .category:first-child > a.dropdown-item{
  border-left:1px solid rgba(232,187,61,.25);
}
#header #_desktop_top_menu .top-menu .category > a.dropdown-item:hover,
#header #_desktop_top_menu .top-menu .category:hover > a.dropdown-item,
#header #_desktop_top_menu .top-menu .category.active > a.dropdown-item{
  background-color:var(--z-gold)!important;
  color:var(--z-dark)!important;
}
/* buscador a la derecha de la barra */
#header .header-top-right #search_widget{flex:0 0 auto;margin:0;}

/* ============================================================
   Sidebar de filtros en categorías (buscar + precio + categorías)
   Estilo tipo LDM con colores de marca. (left-column)
   ============================================================ */

/* Tarjetas de las secciones del sidebar */
#left-column .block-categories,
#left-column #search_filters_wrapper,
#left-column .z-sidebar-search{
  background:#fff;
  border:1px solid #ececec;
  border-radius:6px;
  padding:1rem 1.1rem;
  margin-bottom:1.25rem;
  box-shadow:0 1px 2px rgba(19,20,23,.05);
}

/* Ocultar bloques de filtro SOLO cuando no tienen opciones (sin checkboxes ni search-links).
   Condicional con :has() para que reaparezcan automáticamente si en el futuro
   algún producto recibe marca/proveedor y el facet vuelve a poblarse. */
#left-column #search_filters_suppliers:not(:has(.custom-checkbox)):not(:has(a.search-link)),
#left-column #search_filters_brands:not(:has(.custom-checkbox)):not(:has(a.search-link)){display:none!important;}

/* ---- Buscador del sidebar ---- */
#left-column .z-sidebar-search-title,
#left-column .block-categories::before,
#left-column #search_filters > p:first-child{
  display:block;
  color:var(--z-dark)!important;
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.03em;
  margin:0 0 .7rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--z-gold);
}
#left-column .z-sidebar-search-form{position:relative;margin:0;}
#left-column .z-sidebar-search-form input[type=text]{
  width:100%;
  border:1px solid #d9d9d9;
  border-radius:4px;
  padding:.55rem 2.4rem .55rem .8rem;
  font-size:.92rem;
  color:var(--z-dark);
  background:#fafafa;
}
#left-column .z-sidebar-search-form input[type=text]::placeholder{color:#9a9a9a;}
#left-column .z-sidebar-search-form input[type=text]:focus{
  outline:none;
  border-color:var(--z-gold)!important;
  background:#fff;
  box-shadow:0 0 0 2px rgba(232,187,61,.25);
}
#left-column .z-sidebar-search-form button[type=submit]{
  position:absolute;right:0;top:0;height:100%;
  width:2.4rem;border:none;background:transparent;
  color:var(--z-gold-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#left-column .z-sidebar-search-form button[type=submit]:hover{color:var(--z-dark);}
#left-column .z-sidebar-search-form button[type=submit] .material-icons{font-size:1.2rem;}

/* ---- Bloque de categorías ---- */
#left-column .block-categories::before{content:"Categorías";}
#left-column .block-categories ul{list-style:none;margin:0;padding:0;}
#left-column .block-categories a{
  display:block;
  color:#333!important;
  padding:.42rem 0;
  border-bottom:1px solid #f1f1f1;
  font-weight:500;font-size:.92rem;
  transition:color .15s ease,padding-left .15s ease;
}
#left-column .block-categories li:last-child a{border-bottom:none;}
#left-column .block-categories a:hover{color:var(--z-gold-deep)!important;padding-left:.35rem;}
#left-column .block-categories .category-top-menu > li:first-child > a{
  color:var(--z-gold-deep)!important;font-weight:700;
}

/* ---- Títulos de facets ---- */
#left-column #search_filters > p:first-child{margin-bottom:.4rem;} /* "Filtrar por" */
#left-column .facet{border-top:1px solid #f1f1f1;padding-top:.85rem;margin-top:.85rem;}
#left-column #search_filters .facet:first-of-type{border-top:none;padding-top:.4rem;margin-top:0;}
#left-column .facet .facet-title{
  color:var(--z-dark)!important;
  font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.02em;
}

/* ---- Checkboxes de facets (oro al marcar) ---- */
#left-column .facet .custom-checkbox input[type=checkbox]:checked{
  background-color:var(--z-gold)!important;
  border-color:var(--z-gold)!important;
}
#left-column .facet .custom-checkbox .checkbox-checked{color:var(--z-dark)!important;}
#left-column .facet .facet-label a.search-link:hover,
#left-column .facet .collapse .facet-label a:hover{color:var(--z-gold-deep)!important;}
#left-column .facet .magnitude{color:#9a9a9a!important;font-size:.85em;}

/* ---- Slider de precio (jQuery UI) ---- */
#left-column .faceted-slider p[id^="facet_label_"]{
  color:var(--z-dark)!important;font-weight:600;font-size:.95rem;text-align:center;margin:.2rem 0 .4rem;
}
#left-column .ui-slider{
  background:#ececec!important;border:none!important;height:6px!important;
  border-radius:3px!important;margin:1rem .5rem 1.2rem;
}
#left-column .ui-slider .ui-slider-range{background:var(--z-gold)!important;border-radius:3px;}
#left-column .ui-slider .ui-slider-handle{
  background:var(--z-dark)!important;
  border:2px solid var(--z-gold)!important;
  border-radius:50%!important;
  width:16px!important;height:16px!important;top:-6px!important;
  margin-left:-8px!important;cursor:pointer;outline:none;
}
#left-column .ui-slider .ui-slider-handle:hover,
#left-column .ui-slider .ui-slider-handle:focus{background:var(--z-gold-deep)!important;}

/* ---- Botón OK (aplicar filtros, móvil) ---- */
#left-column .btn.btn-secondary.ok,
#search_filter_controls .btn.btn-secondary.ok{
  background:var(--z-gold)!important;border-color:var(--z-gold)!important;
  color:var(--z-dark)!important;font-weight:600;
}

/* ---- Chips de filtros activos ---- */
.active_filters .filter-block{
  background-color:var(--z-gold)!important;color:var(--z-dark)!important;
}
.active_filters .filter-block .close{color:var(--z-dark)!important;opacity:.8;}

/* ============================================================
   Filtro de precio del HOME (widget custom)
   El home no es un listado, así que el slider faceted nativo no
   aplica ahí. Este widget redirige a la categoría "Catálogo"
   (/892-catalogo) con el facet de precio: ?q=Precio-$-min-max
   Solo se renderiza en page-index (ver layout-both-columns.tpl).
   ============================================================ */
#left-column .z-sidebar-price{
  background:#fff;border:1px solid #ececec;border-radius:6px;
  padding:1rem 1.1rem;margin-bottom:1.25rem;box-shadow:0 1px 2px rgba(19,20,23,.05);
}
#left-column .z-price-form{margin:0;}
#left-column .z-price-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.7rem;}
#left-column .z-price-input{
  width:100%;min-width:0;
  border:1px solid #d9d9d9;border-radius:4px;
  padding:.55rem .6rem;font-size:.92rem;color:var(--z-dark);background:#fafafa;
  -moz-appearance:textfield;
}
#left-column .z-price-input::placeholder{color:#9a9a9a;}
#left-column .z-price-input:focus{
  outline:none;border-color:var(--z-gold)!important;background:#fff;
  box-shadow:0 0 0 2px rgba(232,187,61,.25);
}
#left-column .z-price-sep{color:#9a9a9a;font-weight:600;flex:0 0 auto;}
#left-column .z-price-btn{
  width:100%;border:none;border-radius:4px;cursor:pointer;
  background:var(--z-gold)!important;color:var(--z-dark)!important;
  font-weight:600;font-size:.9rem;padding:.55rem .8rem;
  transition:background-color .15s ease;
}
#left-column .z-price-btn:hover{background:var(--z-gold-2)!important;}
#left-column .z-price-all{
  display:block;text-align:center;margin-top:.6rem;
  font-size:.82rem;font-weight:600;color:var(--z-gold-deep)!important;
}
#left-column .z-price-all:hover{color:var(--z-dark)!important;text-decoration:underline;}

/* ============================================================
   Slider del HOME (ps_imageslider sobre carousel Bootstrap)
   El nombre de la categoría salía en texto blanco SIN fondo
   (figcaption.caption > h2.display-1) -> ilegible sobre las
   imágenes claras (p.ej. "Alimentos"). Le ponemos un velo
   oscuro inferior + texto blanco con sombra + acento de marca.
   custom.css carga al final => gana sin depender de !important
   salvo en el color del título.
   ============================================================ */
.carousel .carousel-item figure{position:relative;margin:0;}
.carousel .carousel-item figure::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to top,
    rgba(19,20,23,.74) 0%,
    rgba(19,20,23,.40) 42%,
    rgba(19,20,23,0) 100%);
  pointer-events:none;z-index:1;
}
.carousel .carousel-item .caption,
.carousel .carousel-item figcaption.caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1rem 1.6rem 1.25rem;text-align:left;
  background:transparent;color:#fff;
}
.carousel .carousel-item .caption h2,
.carousel .carousel-item .caption h2.display-1{
  color:#fff!important;margin:0;font-weight:800;line-height:1.05;
  letter-spacing:.01em;
  font-size:clamp(1.6rem,4.4vw,2.9rem);
  text-shadow:0 2px 12px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.85);
}
.carousel .carousel-item .caption h2::after{
  content:"";display:block;width:62px;height:4px;margin-top:.55rem;
  background:var(--z-gold);border-radius:2px;
}
.carousel .carousel-item .caption .caption-description{
  color:#f2f2f2;text-shadow:0 1px 6px rgba(0,0,0,.7);
}

/* ============================================================
   v2 (jun 2026) — Pulido del menú de categorías + integración
   del buscador en la barra + dropdown de autocompletado.
   Carga al final de custom.css => estas reglas ganan a las de
   arriba por orden de cascada (misma especificidad).
   ============================================================ */

/* ---- Barra del menú: más profundidad y acabado ---- */
#header .header-top .header-top-right{
  display:flex!important;align-items:stretch;gap:.9rem;
}
#header #_desktop_top_menu{
  display:block;
  border-top:2px solid var(--z-gold)!important;
  border-bottom:2px solid var(--z-gold)!important;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(19,20,23,.14);
  overflow:visible;
  padding:.4rem .5rem .55rem;
}
#header #_desktop_top_menu .top-menu{
  display:flex;flex-wrap:wrap;
  justify-content:flex-start;align-items:stretch;
}
#header #_desktop_top_menu .top-menu .category > a.dropdown-item{
  position:relative;
  padding:.8rem 1.2rem!important;
  font-size:.8rem;letter-spacing:.03em;
  border-right:1px solid rgba(232,187,61,.16)!important;
  color:#f4f4f4!important;
}
#header #_desktop_top_menu .top-menu .category:first-child > a.dropdown-item{
  border-left:none!important;
}
/* Indicador inferior animado (sutil, en lugar del relleno oro pleno) */
#header #_desktop_top_menu .top-menu .category > a.dropdown-item::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:0;height:3px;
  background:var(--z-gold);border-radius:2px 2px 0 0;
  transform:scaleX(0);transform-origin:center;
  transition:transform .18s ease;
}
#header #_desktop_top_menu .top-menu .category > a.dropdown-item:hover,
#header #_desktop_top_menu .top-menu .category:hover > a.dropdown-item,
#header #_desktop_top_menu .top-menu .category.active > a.dropdown-item{
  background-color:var(--z-dark-2)!important;
  color:var(--z-gold)!important;
}
#header #_desktop_top_menu .top-menu .category > a.dropdown-item:hover::after,
#header #_desktop_top_menu .top-menu .category:hover > a.dropdown-item::after,
#header #_desktop_top_menu .top-menu .category.active > a.dropdown-item::after{
  transform:scaleX(1);
}

/* Submenús desplegables (categorías con hijos) como tarjeta clara */
#header #_desktop_top_menu .top-menu .sub-menu,
#header #_desktop_top_menu .top-menu .popover{
  background:#fff!important;border:none!important;
  border-top:3px solid var(--z-gold)!important;
  border-radius:0 0 8px 8px!important;
  box-shadow:0 14px 34px rgba(19,20,23,.2)!important;
  padding:.4rem 0!important;
}
#header #_desktop_top_menu .top-menu .sub-menu a{
  color:var(--z-dark)!important;
  padding:.5rem 1.25rem!important;font-size:.86rem;
}
#header #_desktop_top_menu .top-menu .sub-menu a:hover{
  background:var(--z-gold)!important;color:var(--z-dark)!important;
}

/* ---- Buscador integrado DENTRO de la tarjeta de categorías ---- */
#header .header-top-right #search_widget{
  margin:0;display:flex;align-items:center;position:relative;
}
/* Reubicado por JS dentro del cuadro: barra full-width al pie */
#header #_desktop_top_menu #search_widget{
  flex:1 1 auto;width:100%;max-width:none;
  margin:.5rem .2rem .1rem;
}
#header #search_widget form{
  display:flex;align-items:center;width:100%;
  background:#fff;border:1px solid var(--z-gold);
  border-radius:24px;height:42px;padding:0 .9rem;
  box-shadow:0 1px 2px rgba(19,20,23,.06);
  transition:box-shadow .15s ease,border-color .15s ease;
}
#header #search_widget form:focus-within{
  border-color:var(--z-gold-deep);
  box-shadow:0 0 0 3px rgba(232,187,61,.3);
}
#header #search_widget .material-icons.search{
  order:-1;color:var(--z-gold-deep)!important;font-size:1.25rem;
}
#header #search_widget input[name=s]{
  flex:1 1 auto;min-width:0;
  border:none!important;background:transparent!important;
  box-shadow:none!important;outline:none!important;
  padding:.3rem .55rem;font-size:.9rem;color:var(--z-dark);
}
#header #search_widget input[name=s]::placeholder{color:#9a9a9a;}
#header #search_widget .material-icons.clear{
  display:none;color:#bdbdbd;font-size:1.1rem;cursor:pointer;
}
#header #search_widget.z-has-value .material-icons.clear{display:inline-flex;}
#header #search_widget .material-icons.clear:hover{color:var(--z-dark);}

/* ---- Dropdown de autocompletado (.z-ac, generado por JS) ---- */
.z-ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1050;
  background:#fff;border:1px solid #e6e6e6;border-radius:10px;
  box-shadow:0 14px 36px rgba(19,20,23,.2);
  max-height:64vh;overflow-y:auto;padding:.3rem;
}
.z-ac-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem .55rem;border-radius:7px;
  color:var(--z-dark)!important;text-decoration:none!important;
}
.z-ac-item:hover,.z-ac-item.is-active{
  background:var(--z-gold)!important;color:var(--z-dark)!important;
}
.z-ac-thumb{
  flex:0 0 46px;width:46px;height:46px;border-radius:6px;overflow:hidden;
  background:#f4f4f4;display:flex;align-items:center;justify-content:center;
}
.z-ac-thumb img{width:100%;height:100%;object-fit:contain;}
.z-ac-info{display:flex;flex-direction:column;min-width:0;gap:.1rem;}
.z-ac-name{
  font-size:.86rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.z-ac-price{font-size:.85rem;font-weight:700;color:var(--z-gold-deep);}
.z-ac-item:hover .z-ac-price,.z-ac-item.is-active .z-ac-price{color:var(--z-dark);}
.z-ac-empty{padding:.75rem .6rem;color:#9a9a9a;font-size:.85rem;}
.z-ac-all{
  display:block;text-align:center;padding:.6rem;margin-top:.2rem;
  border-top:1px solid #f0f0f0;border-radius:7px;
  font-weight:700;font-size:.82rem;
  color:var(--z-gold-deep)!important;text-decoration:none!important;
}
.z-ac-all:hover,.z-ac-all.is-active{background:var(--z-dark)!important;color:#fff!important;}

/* ============================================================
   Bloque de reaseguros del HOME (garantías de compra)
   Franja full-width entre <header> y #wrapper, SOLO en page-index
   (markup en layout-both-columns.tpl, gate {if page_name=='index'}).
   4 columnas: icono Material o logo (SPEI/DHL) + texto.
   ============================================================ */
.z-reaseguros{
  background:#fff;
  border-top:1px solid #ececec;
  border-bottom:1px solid #ececec;
  padding:.9rem 0;
  margin:0 0 1.25rem;
}
.z-reaseguros .container{width:100%;}
.z-reaseguros-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.z-rea-item{
  display:flex;align-items:center;gap:.75rem;justify-content:center;
  padding:.35rem .6rem;border-right:1px solid #efefef;
}
.z-rea-item:last-child{border-right:none;}
.z-rea-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:rgba(232,187,61,.16);
  display:flex;align-items:center;justify-content:center;
}
.z-rea-icon .material-icons{color:var(--z-gold-deep);font-size:1.65rem;line-height:1;}
.z-rea-logo{flex:0 0 auto;height:42px;display:flex;align-items:center;justify-content:center;}
.z-rea-logo img{height:42px;width:auto;max-width:128px;object-fit:contain;display:block;}
.z-rea-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.z-rea-text strong{color:var(--z-dark);font-weight:700;font-size:.92rem;}
.z-rea-text span{color:#6b6b6b;font-size:.8rem;margin-top:.1rem;}

/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width:991px){
  .z-reaseguros-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;}
  .z-rea-item:nth-child(2n){border-right:none;}
  .z-rea-item:nth-child(-n+2){border-bottom:1px solid #efefef;padding-bottom:.7rem;}
}
@media (max-width:575px){
  .z-reaseguros-grid{grid-template-columns:1fr;}
  .z-rea-item{border-right:none;justify-content:flex-start;border-bottom:1px solid #efefef;padding:.55rem .4rem;}
  .z-rea-item:last-child{border-bottom:none;}
}

/* ============================================================
   HOME (jun 2026) — ¿Por qué comprar con nosotros? + Nuestros clientes
   Insertadas en index.tpl, dentro de #content.page-home.
   ============================================================ */

/* ---- ¿Por qué comprar con nosotros? ---- */
.z-why{padding:3rem 0 2.5rem;}
.z-why .z-why-head{text-align:center;max-width:760px;margin:0 auto 2.2rem;}
.z-why .z-why-head h2{
  color:var(--z-dark);font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 .6rem;
}
.z-why .z-why-head h2::after{
  content:"";display:block;width:64px;height:4px;margin:.7rem auto 0;
  background:var(--z-gold);border-radius:2px;
}
.z-why .z-why-head p{color:#5b5f66;font-size:1.02rem;margin:0;line-height:1.55;}
.z-why .z-why-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:center;
}
.z-why .z-why-media{margin:0;}
.z-why .z-why-media img{
  width:100%;display:block;border-radius:10px;
  box-shadow:0 12px 30px rgba(19,20,23,.16);
  aspect-ratio:4/3;object-fit:cover;
}
.z-why .z-why-list{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem;}
.z-why .z-why-item{display:flex;gap:1rem;align-items:flex-start;}
.z-why .z-why-ico{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--z-gold) 0%,var(--z-gold-2) 100%);
  box-shadow:0 6px 16px rgba(232,187,61,.4);
}
.z-why .z-why-ico .material-icons{color:var(--z-dark);font-size:1.7rem;}
.z-why .z-why-item h3{
  margin:.15rem 0 .25rem;color:var(--z-dark);
  font-size:1.06rem;font-weight:700;
}
.z-why .z-why-item p{margin:0;color:#5b5f66;font-size:.95rem;line-height:1.5;}

/* ---- Nuestros clientes ---- */
.z-clients{padding:2.6rem 0 3rem;border-top:1px solid #efefef;margin-top:1.5rem;}
.z-clients .z-clients-head{text-align:center;margin:0 0 1.8rem;}
.z-clients .z-clients-head h2{
  color:var(--z-dark);font-weight:800;
  font-size:clamp(1.35rem,2.8vw,1.85rem);margin:0 0 .4rem;
}
.z-clients .z-clients-head h2::after{
  content:"";display:block;width:64px;height:4px;margin:.6rem auto 0;
  background:var(--z-gold);border-radius:2px;
}
.z-clients .z-clients-head p{color:#7a7d83;margin:0;font-size:.98rem;}
.z-clients .z-clients-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1.2rem 2.8rem;
}
.z-clients .z-client-logo{
  flex:0 0 auto;height:58px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.z-clients .z-client-logo img{max-height:58px;width:auto;display:block;}
.z-clients .z-client-logo:hover{transform:translateY(-2px);}

/* ---- Responsive ---- */
@media (max-width:767.98px){
  .z-why .z-why-grid{grid-template-columns:1fr;gap:1.6rem;}
  .z-why .z-why-media{order:-1;}
  .z-clients .z-clients-strip{gap:1rem 1.6rem;}
  .z-clients .z-client-logo{height:42px;}
  .z-clients .z-client-logo img{max-height:42px;}
}

/* ============================================================
   Opiniones de clientes (ficha de producto) — z-reviews
   ============================================================ */
.z-reviews{
  margin:2rem 0 1rem;padding:1.6rem 1.6rem 1.8rem;
  background:#fff;border:1px solid #ece7da;border-radius:14px;
  box-shadow:0 1px 3px rgba(19,20,23,.04);
}
.z-reviews-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem 1.2rem;padding-bottom:1.1rem;margin-bottom:1.2rem;
  border-bottom:1px solid #efeadd;
}
.z-reviews-title{
  margin:0;font-size:1.3rem;font-weight:800;color:var(--z-dark,#131417);
  letter-spacing:-.01em;
}
.z-reviews-summary{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.z-reviews-avg{font-size:1.7rem;font-weight:800;color:var(--z-dark,#131417);line-height:1;}
.z-reviews-of{font-size:.95rem;color:#8a8a90;font-weight:600;margin-right:.25rem;}
.z-reviews-stars{display:inline-flex;gap:1px;}
.z-reviews-count{font-size:.86rem;color:#6b6b72;}
.z-reviews-count strong{color:var(--z-dark,#131417);}
.z-star{width:18px;height:18px;fill:#dfdacb;flex:0 0 auto;}
.z-star.on{fill:var(--z-gold,#E8BB3D);}
.z-star.sm{width:15px;height:15px;}
.z-rev-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;}
.z-rev{
  padding:1.05rem 1.15rem;border:1px solid #efeadd;border-radius:12px;
  background:#fdfcf9;
}
.z-rev-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.55rem;}
.z-rev-av{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.05rem;
}
.z-rev-av-0{background:var(--z-gold-deep,#9B630A);}
.z-rev-av-1{background:#2a8a3f;}
.z-rev-av-2{background:#b8462a;}
.z-rev-av-3{background:#5a3aa6;}
.z-rev-av-4{background:var(--z-dark,#131417);}
.z-rev-av-5{background:#0b6b8a;}
.z-rev-id{min-width:0;flex:1 1 auto;}
.z-rev-name-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.z-rev-name{font-weight:700;color:var(--z-dark,#131417);font-size:.98rem;}
.z-rev-ver{
  display:inline-flex;align-items:center;gap:.2rem;
  font-size:.72rem;font-weight:700;color:#2a8a3f;
}
.z-rev-ver svg{width:14px;height:14px;}
.z-rev-meta{display:flex;align-items:center;gap:.6rem;margin-top:.2rem;}
.z-rev-stars{display:inline-flex;gap:1px;}
.z-rev-date{font-size:.78rem;color:#9a9aa0;}
.z-rev-h{display:block;font-size:.98rem;font-weight:700;color:var(--z-dark,#131417);margin:.15rem 0 .25rem;}
.z-rev-body{margin:0;font-size:.92rem;line-height:1.55;color:#4a4a52;}
@media (max-width:767.98px){
  .z-reviews{padding:1.2rem 1rem 1.4rem;}
  .z-reviews-head{flex-direction:column;align-items:flex-start;}
  .z-rev-av{width:38px;height:38px;font-size:.95rem;}
}