/* ============================================================
   TEXTIL DEL HOGAR — LAYOUT — cabecera, menus, footer, newsletter, toast y WhatsApp flotante.
   Estructura comun a todas las paginas.
   ============================================================ */
#wrapper{ background:transparent; box-shadow:none; }
/* v4: layout fluido, sin tope de ancho. El margen lateral es el gutter
   (16-32px segun viewport) y el contenido respira a pantalla completa. */
.tdh-wrap{ max-width:none; margin:0; padding:0 var(--gutter); }

/* ============================================================
   CINTA PROMO + CABECERA
   ============================================================ */
.tdh-promo{
  background:var(--ink); color:#D8D6CE; text-align:center; padding:9px 16px;
  font-family:var(--font-display); font-weight:800; font-size:12px; line-height:1.5; letter-spacing:.1em;
  text-transform:uppercase;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.tdh-promo-sep{ color:#5A5650; }
.header-top{ background:rgba(255,255,255,.96); }
#header{ position:sticky; top:0; z-index:40; background:#fff; box-shadow:0 1px 0 var(--line); }
#header .header-top{ padding-top:0 !important; padding-bottom:0; }

.tdh-header-main{ display:flex; align-items:center; gap:24px; padding:18px 0; }
.tdh-logo img{ height:63px; width:auto; display:block; }
.tdh-search{ flex:1; max-width:480px; display:flex; align-items:center; gap:8px; background:var(--bg3); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:11px 20px; }
.tdh-search input{ border:0; outline:none; background:none; flex:1; font-family:var(--font-body); font-size:16px; color:var(--ink); }
.tdh-search .tdh-ico{ color:var(--teal-600); }
.tdh-header-actions{ display:flex; gap:26px; margin-left:auto; }
.tdh-iconbtn{ background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--fg2); font-family:var(--font-body); font-size:13px; font-weight:600; position:relative; white-space:nowrap; cursor:pointer; }
.tdh-iconbtn .tdh-ico{ font-size:27px; color:var(--fg2); }
.tdh-iconbtn:hover{ color:var(--teal-700); }
.tdh-iconbtn:hover .tdh-ico{ color:var(--teal-700); }

/* --- buscador (widget ps_searchbar) reestilizado a pill como el diseño ---
   El tema classic deja #search_widget flotado/estrecho y los iconos en
   position:absolute. Forzamos ancho completo y devolvemos los iconos al
   flujo flex (lupa a la izquierda, gap 8), por eso van con !important. */
.tdh-search-wrap{ flex:1; max-width:480px; }
.tdh-search-wrap #search_widget,
.tdh-search-wrap .search-widgets,
.tdh-search-wrap .search-widget{ width:100% !important; max-width:none !important; float:none !important; margin:0 !important; }
.tdh-search-wrap form{ display:flex !important; align-items:center; gap:8px; width:100%; box-sizing:border-box; background:var(--bg3); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:13px 20px; position:relative; }
.tdh-search-wrap form input[type="text"]{ border:0 !important; outline:none !important; background:transparent !important; box-shadow:none !important; flex:1 1 auto; min-width:0; padding:0 !important; margin:0; height:auto; font-family:var(--font-body); font-size:17px; color:var(--ink); }
.tdh-search-wrap form input[type="text"]:focus{ box-shadow:none; }
/* el módulo renderiza los iconos como <i class="material-icons search/clear"> en position:absolute (classic): los devolvemos al flujo flex */
.tdh-search-wrap form i.tdh-ico.search{ position:static !important; top:auto; left:auto; right:auto; padding:0 !important; margin:0 !important; width:1em !important; height:1em !important; box-sizing:content-box; order:-1; flex:none; color:var(--teal-600); font-size:20px; line-height:1; cursor:default; }
.tdh-search-wrap form i.tdh-ico.clear{ position:static !important; top:auto; left:auto; right:auto; padding:0 !important; margin:0 !important; width:1em !important; height:1em !important; box-sizing:content-box; order:1; flex:none; color:var(--fg2); font-size:20px; line-height:1; cursor:pointer; }
/* compatibilidad si en otra vista el widget usase un botón */
.tdh-search-wrap form button[type="submit"]{ background:none; border:0; color:var(--teal-600); padding:0; order:-1; }
.tdh-search-wrap form button .tdh-ico{ font-size:20px; color:var(--teal-600); }
.tdh-search-wrap .ui-front{ z-index:80; }
/* buscador en la barra móvil/táctil: ancho completo bajo el logo */
.tdh-search-mobile{ flex:none; max-width:none; width:100%; margin:6px 0 10px; }

/* --- carrito (widget ps_shoppingcart / blockcart) como icono de marca --- */
/* classic pinta .blockcart con fondo cian #24b9d7: fuera en v4 */
.blockcart{ background:transparent !important; }
.blockcart .header a, .blockcart > a{ color:var(--ink) !important; }
.blockcart .cart-products-count{ background:var(--ink) !important; color:#fff !important; }
/* en la barra móvil el contador hereda el tamaño del icono: se fija */
.header-nav .blockcart .cart-products-count{
  font-size:11px !important; font-weight:800; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px; padding:0 5px; vertical-align:super;
}
.tdh-cart-slot{ position:relative; }
.tdh-cart-slot .blockcart{ background:none; padding:0; }
.tdh-cart-slot .blockcart .header,
.tdh-cart-slot .blockcart > a,
.tdh-cart-slot .blockcart .header a{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--fg2); font-family:var(--font-body); font-size:13px; font-weight:600; position:relative; }
.tdh-cart-slot .blockcart .tdh-ico{ font-size:27px; color:var(--fg2); }
.tdh-cart-slot .blockcart:hover .tdh-ico{ color:var(--teal-700); }
.tdh-cart-slot .cart-products-count{ position:absolute; top:-7px; right:-9px; background:var(--coral); color:#fff; font-size:11px; font-weight:800; min-width:19px; height:19px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-family:var(--font-display); }

/* ============================================================
   MEGA-MENÚ (ps_mainmenu override)
   ============================================================ */
.tdh-nav{ border-top:1px solid var(--line-2); background:#fff; padding-bottom:.5px; }
.tdh-nav .tdh-wrap{ position:relative; }
.tdh-nav .tdh-menu{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 2px; list-style:none; margin:0; padding:0; }
/* display:flex !important para ganar al CSS de classic (.top-menu > li), que
   fuerza display:block y dejaba la flecha en una segunda línea bajo el texto. */
.tdh-nav .tdh-menu > li{ position:static; display:flex !important; align-items:center; }
.tdh-nav .tdh-menu > li > a,
.tdh-nav .tdh-menu > li > .tdh-menu-label{
  display:flex; align-items:center; padding:15px 2px 15px 10px;
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--fg2);
  border-bottom:2px solid transparent; white-space:nowrap; flex-shrink:0; transition:.15s;
  text-transform:uppercase; letter-spacing:.05em;
}
.tdh-nav .tdh-menu > li > .tdh-menu-label{ cursor:default; }
/* botón disclosure (la flecha) — hermano del enlace, pegado al texto y accesible */
.tdh-nav .tdh-acc-toggle{
  display:flex; align-items:center; background:none; border:0; cursor:pointer;
  color:var(--fg2); padding:15px 7px 15px 0; margin:0;
}
.tdh-nav .tdh-acc-toggle .tdh-caret{ font-size:16px; transition:transform .2s; }
.tdh-nav .tdh-menu > li:hover > a,
.tdh-nav .tdh-menu > li:hover > .tdh-menu-label,
.tdh-nav .tdh-menu > li:focus-within > a,
.tdh-nav .tdh-menu > li:focus-within > .tdh-menu-label,
.tdh-nav .tdh-menu > li.tdh-active > a{ color:var(--teal-700); }
.tdh-nav .tdh-menu > li:hover .tdh-acc-toggle,
.tdh-nav .tdh-menu > li:focus-within .tdh-acc-toggle{ color:var(--teal-700); }
.tdh-nav .tdh-menu > li.tdh-active > a{ border-bottom-color:var(--coral); }
.tdh-nav .tdh-menu > li:hover .tdh-caret,
.tdh-nav .tdh-menu > li:focus-within .tdh-caret,
.tdh-nav .tdh-menu > li.tdh-open .tdh-caret{ transform:rotate(180deg); }

/* Los nueve grupos reales caben en una sola línea en portátiles. El prototipo
   usa menos grupos; aquí se conserva todo el catálogo sin duplicar la altura. */
@media (min-width:992px) and (max-width:1199px){
  .tdh-nav .tdh-menu{ flex-wrap:nowrap; gap:0; }
  .tdh-nav .tdh-menu > li > a{
    padding-left:4px; font-size:12px;
  }
  .tdh-nav .tdh-acc-toggle{ padding-right:1px; }
}
/* foco visible para teclado en todo el menú */
.tdh-nav .tdh-menu a:focus-visible,
.tdh-nav .tdh-acc-toggle:focus-visible,
.tdh-burger:focus-visible,
.tdh-sub a:focus-visible{ outline:2px solid var(--teal-700); outline-offset:2px; border-radius:2px; }
.tdh-sub{
  position:absolute; top:100%; left:var(--gutter); z-index:60; width:calc(100% - (var(--gutter) * 2)); max-height:min(640px,calc(100vh - 220px)); overflow-y:auto; background:#fff;
  border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh-lift); border:1px solid var(--line);
  border-top:2px solid var(--ink); padding:24px; list-style:none; margin:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:24px 28px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s;
}
.tdh-nav .tdh-menu > li:hover .tdh-sub,
.tdh-nav .tdh-menu > li:focus-within .tdh-sub,
.tdh-nav .tdh-menu > li.tdh-open .tdh-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.tdh-sub li a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:5px 0; font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1.35; color:var(--fg2); text-transform:none; transition:.12s; }
.tdh-sub li a:hover{ color:var(--teal-700); }
.tdh-sub .tdh-sub-all{ margin-top:4px; padding-top:10px; border-top:1px solid var(--line-2); font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--teal-700); }
.tdh-sub-item{ position:relative; display:block; min-width:0; }
.tdh-sub-item > a{ flex:1 1 auto; min-width:0; }
.tdh-sub > .tdh-sub-item > a{
  min-height:36px; padding:0 0 10px; border-bottom:1px solid var(--teal-100);
  font-family:var(--font-display); font-size:14px; font-weight:800; line-height:1.3; color:var(--ink); text-transform:uppercase;
}
.tdh-sub-item > a > span{ min-width:0; }
.tdh-sub-item > .tdh-acc-toggle--nested{
  display:none; min-width:34px; min-height:34px; padding:0; justify-content:center;
}
.tdh-sub-level{
  position:static; min-width:0; padding:7px 0 0; margin:0; list-style:none;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  opacity:1; transform:none;
}
.tdh-sub > .tdh-has-children > a .tdh-branch-caret{ display:none; }
/* ============================================================
   MENÚ MÓVIL (#mobile_top_menu_wrapper) — acordeón accesible
   El JS de classic clona el menú de escritorio aquí. Reseteamos el dropdown
   hover (position:absolute) a un acordeón vertical con subcategorías que se
   despliegan al pulsar el botón de la flecha. Mayúsculas para uniformidad.
   ============================================================ */
#mobile_top_menu_wrapper .tdh-menu{ flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:0; }
#mobile_top_menu_wrapper .tdh-menu a{ text-transform:uppercase; }
/* fila de nivel 1: enlace (ocupa el ancho) + botón flecha, ambos táctiles */
#mobile_top_menu_wrapper .tdh-menu > li{ display:flex; flex-wrap:wrap; align-items:center; position:static; border-bottom:1px solid var(--line-2); }
#mobile_top_menu_wrapper .tdh-menu > li > a,
#mobile_top_menu_wrapper .tdh-menu > li > .tdh-menu-label{ flex:1; min-height:48px; padding:12px 14px; border-bottom:0; display:flex; align-items:center; }
#mobile_top_menu_wrapper .tdh-acc-toggle{ background:none; border:0; cursor:pointer; color:var(--fg2); display:flex; align-items:center; min-width:48px; min-height:48px; justify-content:center; padding:0; margin:0; }
#mobile_top_menu_wrapper .tdh-acc-toggle .tdh-caret{ font-size:22px; transition:transform .2s; }
#mobile_top_menu_wrapper .tdh-menu > li.tdh-open > .tdh-acc-toggle .tdh-caret{ transform:rotate(180deg); }
/* subcategorías: estáticas, colapsadas por defecto, expandidas con .tdh-open */
#mobile_top_menu_wrapper .tdh-sub{
  position:static; flex:1 0 100%; opacity:1; visibility:visible; transform:none;
  box-shadow:none; border:0; border-top:1px solid var(--line-2); border-radius:0;
  min-width:0; width:auto; max-width:none; max-height:none; overflow:visible; padding:4px 0 10px 14px; margin:0;
  display:none;
}
#mobile_top_menu_wrapper .tdh-menu > li.tdh-open > .tdh-sub{ display:flex; }
#mobile_top_menu_wrapper .tdh-sub li a{ min-height:44px; justify-content:flex-start; gap:8px; }
#mobile_top_menu_wrapper .tdh-sub li a .tdh-ico{ margin-left:auto; }
#mobile_top_menu_wrapper .tdh-sub-item{ display:flex; flex-wrap:wrap; width:100%; }
#mobile_top_menu_wrapper .tdh-sub-item > a{ flex:1 1 calc(100% - 48px); }
#mobile_top_menu_wrapper .tdh-sub-item > a .tdh-branch-caret{ display:none; }
#mobile_top_menu_wrapper .tdh-sub-item > .tdh-acc-toggle--nested{
  display:flex; flex:0 0 48px; min-width:48px; min-height:44px;
}
#mobile_top_menu_wrapper .tdh-sub-item.tdh-open > .tdh-acc-toggle--nested .tdh-caret{ transform:rotate(180deg); }
#mobile_top_menu_wrapper .tdh-sub-level{
  position:static; flex:1 0 100%; width:auto; min-width:0; max-width:none;
  display:none; opacity:1; visibility:visible; transform:none !important;
  margin:0; padding:2px 0 7px 14px; border:0; border-left:1px solid var(--line);
  border-radius:0; box-shadow:none; background:transparent;
}
#mobile_top_menu_wrapper .tdh-sub-item.tdh-open > .tdh-sub-level{ display:block; }

/* brand strip */
.tdh-brands{ background:var(--bg3); padding:30px 0; }
.tdh-brands .tdh-brands-label{ text-align:center; margin:0 0 18px; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.06em; color:var(--fg3); text-transform:uppercase; }
.tdh-brands-list{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.tdh-newsletter{ background:var(--bg-cream); border-top:1px solid var(--line); }
.tdh-newsletter .tdh-nl-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:40px 0; }
.tdh-newsletter h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:6px 0 4px; }
.tdh-newsletter p{ font-family:var(--font-body); font-size:15px; color:var(--fg2); max-width:440px; margin:0; }
.tdh-newsletter b{ color:var(--teal-700); }
.tdh-nl-form{ flex:1 1 360px; max-width:460px; }
.tdh-nl-input{ display:flex; gap:10px; flex-wrap:wrap; }
.tdh-nl-input .tdh-nl-field{ flex:1 1 200px; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:11px 20px; }
.tdh-nl-input .tdh-nl-field input{ border:0; outline:none; background:none; flex:1; font-family:var(--font-body); font-size:16px; color:var(--ink); min-width:0; }
.tdh-nl-input .tdh-ico{ color:var(--teal-600); }
.tdh-nl-note{ font-size:12px; color:var(--fg3); margin:10px 4px 0; }

.footer-container{ background:var(--ink); color:#fff; margin-top:0; padding:0; box-shadow:none; }
.footer-container .container{ padding-top:48px; padding-bottom:28px; }
.footer-container li a,
.footer-container .links a,
.footer-container a{ color:rgba(255,255,255,.8); font-size:13.5px; }
.footer-container a:hover{ color:#fff; }
.footer-container .h3,
.footer-container .title,
.footer-container h3{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; }
.footer-container .block-contact,
.footer-container .links{ border:0; }
.tdh-footer-brand{ font-family:var(--font-display); font-weight:900; font-size:26px; line-height:.9; color:#fff; }
.tdh-footer-brand .tdh-script{ color:#fff; font-size:.85em; }
.tdh-footer-copyright{ border-top:1px solid rgba(255,255,255,.14); }
.tdh-footer-copyright .tdh-wrap{ padding:16px var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,.7); }

/* ============================================================
   BOTÓN WHATSAPP FLOTANTE
   ============================================================ */
.tdh-wa-float{ position:fixed; bottom:24px; right:24px; z-index:50; width:58px; height:58px; border-radius:99px; background:#25D366; border:0; box-shadow:0 10px 26px rgba(37,211,102,.45); display:flex; align-items:center; justify-content:center; color:#fff; }
.tdh-wa-float .tdh-ico{ font-size:28px; color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* botón hamburguesa accesible (touch target ≥ 44×44) */
.tdh-burger{ background:none; border:0; cursor:pointer; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; color:var(--fg2); padding:0; }
.tdh-burger .tdh-ico{ font-size:28px; }

@media (max-width: 991px){
  .tdh-header-main{ flex-wrap:wrap; gap:14px; }
  .tdh-search-wrap{ order:3; flex:1 1 100%; max-width:none; }
  .tdh-nav{ display:none; }
}
/* Dispositivos táctiles SIN hover (móviles y tablets, p.ej. iPad horizontal):
   aunque la pantalla sea ancha, usan el menú hamburguesa + acordeón en lugar de
   la barra de escritorio hover-only, que en táctil no permite abrir submenús. */
@media (hover: none) and (min-width: 992px){
  .tdh-nav{ display:none !important; }
  .header-top .tdh-header-main{ display:none !important; }
  .header-nav{ display:block !important; }
}
@media (max-width: 575px){
  .tdh-header-actions{ gap:18px; }
}

/* ============================================================
   FIX FIDELIDAD v2 (post-revisión 2026-07-20)
   Ancho 1240 del diseño aprobado · newsletter full-width
   2 columnas · footer contraste
   ============================================================ */
/* ============================================================
    ANCHO FLUIDO (v4) — sin tope: el contenido ocupa todo el viewport
    con el gutter lateral. Se eliminan los candados de 1240px de v3.
    ============================================================ */
#wrapper > .container{ width:auto !important; max-width:none !important; padding-left:var(--gutter); padding-right:var(--gutter); }
/* Home: el padding lateral lo aportan las secciones full-bleed y .tdh-wrap */
.page-index #wrapper > .container{ padding-left:0 !important; padding-right:0 !important; }
.page-index #wrapper > .container > .row{ margin-left:0 !important; margin-right:0 !important; }
.page-index #wrapper > .container > .row > #content-wrapper{ padding-left:0 !important; padding-right:0 !important; }

/* --- Newsletter: banda full-width (anula max-width:800px de .block_newsletter) --- */
.tdh-newsletter.block_newsletter,
.block_newsletter.tdh-newsletter{ max-width:none !important; margin:0 !important; padding:0; width:100%; }
.tdh-nl-copy{ flex:1 1 320px; min-width:0; }

/* --- Footer: contraste del texto de marca + social --- */
.tdh-footer-desc{ color:#fff !important; opacity:.85; font-size:13.5px; line-height:1.6; max-width:240px; margin-top:12px; }
.tdh-footer-social{ display:flex; gap:10px; margin-top:16px; }
.tdh-footer-social a{ width:38px; height:38px; border-radius:99px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; transition:.15s; }
.tdh-footer-social a:hover{ background:rgba(255,255,255,.22); }
.tdh-footer-social .tdh-ico{ font-size:18px; }

/* ============================================================
    v4 — ELIMINADO el candado de 1240px de Bootstrap.
    (La regla "#wrapper > .container{ width:1240px !important }" de v3
    queda sustituida por el ancho fluido definido arriba.)
    ============================================================ */

/* FIX FIDELIDAD v4 — contraste global del footer (columna de contacto/info tenue) */
.footer-container li a,
.footer-container .links a,
.footer-container .block-contact,
.footer-container .block-contact *,
.footer-container .account-list a{ color:rgba(255,255,255,.84) !important; }
.footer-container li a:hover,
.footer-container .links a:hover{ color:#fff !important; }

/* ============================================================
   FIX FIDELIDAD v5 — FOOTER a medida (grid del diseño)
   marca (1.4fr) + Tienda / Ayuda / Empresa (1fr) · contraste · espacios
   ============================================================ */
.footer-container{ padding:0; }
.footer-container .tdh-footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
  padding:48px 0 32px; margin:0; align-items:start;
}
.footer-container .tdh-footer-col{ min-width:0; }
.tdh-footer-title{ font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; margin:0 0 14px; }
.tdh-footer-col > a{ display:block; color:rgba(255,255,255,.8); font-size:13.5px; line-height:1.5; padding:5px 0; transition:.15s; }
.tdh-footer-col > a:hover{ color:#fff; padding-left:3px; }
.tdh-footer-brand{ font-family:var(--font-display); font-weight:900; font-size:26px; line-height:.92; color:#fff; }
.tdh-footer-brand .tdh-brand-line{ display:flex; align-items:baseline; gap:6px; }
.tdh-footer-brand .tdh-script{ color:#fff; font-size:.85em; }
.tdh-footer-desc{ color:#fff !important; opacity:.82; font-size:13.5px; line-height:1.6; max-width:240px; margin:14px 0 0; }
.tdh-footer-social{ display:flex; gap:10px; margin-top:16px; }
.tdh-footer-social a{ width:38px; height:38px; border-radius:99px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; transition:.15s; }
.tdh-footer-social a:hover{ background:rgba(255,255,255,.22); }
.tdh-footer-social .tdh-ico{ font-size:18px; color:#fff; }
.tdh-footer-copyright{ border-top:1px solid rgba(255,255,255,.14); }
.tdh-footer-copyright .tdh-wrap{ padding:16px var(--gutter); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,.7); }
.tdh-footer-legal{ display:flex; gap:16px; }
.tdh-footer-copyright a{ color:rgba(255,255,255,.7); }
.tdh-footer-copyright a:hover{ color:#fff; }
@media (max-width:991px){
  .footer-container .tdh-footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:575px){
  .footer-container .tdh-footer-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FIX FIDELIDAD v6 — footer full-width + banda de marcas full-bleed
   ============================================================ */
/* #footer es flex (classic) → el footer-container quedaba como flex-item
   desplazado a la derecha. Forzar apilado en bloque a todo el ancho. */
#footer{ display:block !important; }
#footer > .footer-container,
#footer > .tdh-newsletter,
#footer > .block_newsletter{ width:100% !important; }
.tdh-brands{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* Toast "Añadido al carrito" (lo inyecta textildelhogar.js) */
.tdh-toast{
  position:fixed; bottom:24px; left:50%; z-index:9999;
  box-sizing:border-box; width:min(380px,calc(100vw - 32px));
  background:var(--ink); border:1px solid var(--teal-700); border-left:4px solid var(--teal-700);
  border-radius:var(--r-xs); box-shadow:0 12px 30px rgba(0,0,0,.2);
  padding:17px 20px; display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); color:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,16px) scale(.96);
  transition:opacity .24s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s;
}
.tdh-toast.is-show{
  opacity:1; visibility:visible; transform:translate(-50%,0) scale(1);
  transition:opacity .24s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility 0s;
}
.tdh-toast .tdh-ico{ color:#6cddc4; font-size:29px; flex-shrink:0; }
.tdh-toast b{ font-family:var(--font-display); font-weight:800; font-size:16px; display:block; color:#fff; }
.tdh-toast small{ font-size:14px; color:rgba(255,255,255,.84); font-weight:500; line-height:1.35; }
.tdh-toast.tdh-toast-error{ border-color:var(--coral); }
.tdh-toast.tdh-toast-error .tdh-ico{ color:var(--coral); }

@keyframes tdh-cart-confirm-pop{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(31,133,133,0); }
  42%{ transform:scale(1.045); box-shadow:0 0 0 7px rgba(31,133,133,.22); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(31,133,133,0); }
}
@keyframes tdh-cart-icon-pop{
  0%,100%{ transform:scale(1); }
  45%{ transform:scale(1.28); }
}
.js-tdh-pdp-cart.tdh-cart-confirmed .tdh-pdp-stepper,
.js-tdh-card-cart.tdh-cart-confirmed .tdh-stepper{
  border-color:var(--teal-700);
  animation:tdh-cart-confirm-pop .65s cubic-bezier(.16,1,.3,1);
}
.tdh8-cartslot.tdh-cart-confirmed .tdh8-cart-link .tdh-ico,
.tdh8-mobilecart.tdh-cart-confirmed .tdh8-cart-link .tdh-ico{
  animation:tdh-cart-icon-pop .65s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .tdh-toast{ transition:none; }
  .js-tdh-pdp-cart.tdh-cart-confirmed .tdh-pdp-stepper,
  .js-tdh-card-cart.tdh-cart-confirmed .tdh-stepper,
  .tdh8-cartslot.tdh-cart-confirmed .tdh8-cart-link .tdh-ico,
  .tdh8-mobilecart.tdh-cart-confirmed .tdh8-cart-link .tdh-ico{ animation:none; }
}

/* ============================================================
   FIX v15 — auth/registro: restaurar diseño original del prototipo
   (AuthPage.jsx). La tarjeta es 920px max centrada dentro del .tdh-wrap
   (que aporta el padding lateral de 24px como el resto del sitio),
   con grid 1fr 460px (panel de marca fluido + formulario fijo).
   En móvil colapsa a 1 columna (definido en @media max-width:991px).
   Reemplaza los FIX v12/v14 que ensanchaban la tarjeta a ancho completo
   y rompían la proporción del diseño.
   ============================================================ */
body.page-customer-account #wrapper > .container,
body.page-customer-account #content-wrapper{ padding-left:0 !important; padding-right:0 !important; }
body.page-customer-account #wrapper > .container > .row{ margin-left:0 !important; margin-right:0 !important; }
.tdh-auth-page > .tdh-wrap{ max-width:none !important; padding:0 var(--gutter) !important; margin:0 !important; box-sizing:border-box !important; }
.tdh-auth-page > .tdh-wrap{ background:transparent !important; }
.tdh-nl-form .psgdpr_consent_message{ margin-top:10px; }

/* RGPD del newsletter (footer): el módulo psgdpr inyecta
   input + span(icono custom) + span(texto). Sin scope, el tema Classic los
   posiciona en `absolute` y el checkbox se montaba ENCIMA del texto.
   Forzamos el input nativo (ya estilizado turquesa arriba) y el texto en fila,
   sacándolos de `absolute`. Scoped al newsletter: NO afecta login/contacto/cuenta. */
.tdh-newsletter .gdpr_consent{ width:100%; }
.tdh-newsletter .gdpr_consent .custom-checkbox{ display:block !important; width:100%; float:none; position:static !important; }
.tdh-newsletter .psgdpr_consent_message{ display:flex !important; width:100%; align-items:flex-start; gap:8px; }
.tdh-newsletter .psgdpr_consent_message > input[type="checkbox"]{ position:static !important; opacity:1 !important; flex:0 0 16px; margin:2px 0 0; }
.tdh-newsletter .psgdpr_consent_message > input[type="checkbox"] + span{ display:none !important; }
.tdh-newsletter .psgdpr_consent_message > span:last-child{ position:static !important; flex:1 1 auto !important; min-width:0; width:auto; text-align:left; }

/* ============================================================
   PÁGINA DE CONTACTO (controller contact) — estilo de marca
   ============================================================ */
/* Ancho completo: la página usa layout de columna izquierda; la vaciamos y
   forzamos el contenido a todo el ancho, sin el marco blanco del tema. */
#contact #wrapper > .container > .row,
.page-contact #wrapper > .container > .row{ display:block; }

/* ============================================================
   FIX v17 — Banner newsletter: proporciones caja/botón + pegar al footer
   ============================================================ */
/* El módulo ps_socialfollow renderiza un .block-social entre el banner y el footer
   que dejaba un hueco; el footer ya tiene sus iconos en .tdh-footer-social. */
#footer .block-social{ display:none !important; }

/* Caja del email y botón a la MISMA altura y alineados (antes 66px vs 42px).
   El <input> heredaba height:42px + padding:11px del tema y la caja añadía otro
   padding → doble altura. Reset del input + altura común de 52px. */
.tdh-newsletter .tdh-nl-input{ align-items:center; flex-wrap:nowrap; gap:12px; }
.tdh-newsletter .tdh-nl-field{ flex:1 1 auto; min-width:0; height:52px; padding:0 18px; }
.tdh-newsletter .tdh-nl-field input{ height:auto !important; min-height:0 !important; padding:0 !important; line-height:1.4; font-size:16px; border:0 !important; outline:none !important; background:transparent !important; box-shadow:none !important; }
.tdh-newsletter .tdh-nl-field input:focus,
.tdh-newsletter .tdh-nl-field input:focus-visible{ border:0 !important; outline:none !important; box-shadow:none !important; }
.tdh-newsletter .tdh-nl-field:focus-within{ outline:2px solid #fff; outline-offset:4px; }
.tdh-newsletter .tdh-nl-field .tdh-ico{ font-size:20px; }
.tdh-newsletter .tdh-nl-input .btn,
.tdh-newsletter .tdh-nl-input .btn-coral{ height:52px; min-height:52px; padding:0 30px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:15px; white-space:nowrap; cursor:pointer; }
/* Móvil: caja y botón apilados a ancho completo */
@media (max-width:575px){
  .tdh-newsletter .tdh-nl-input{ flex-wrap:wrap; }
  .tdh-newsletter .tdh-nl-field{ flex:1 1 100%; }
  .tdh-newsletter .tdh-nl-input .btn,
  .tdh-newsletter .tdh-nl-input .btn-coral{ flex:1 1 100%; width:100%; }
}

/* ===========================================================================
   FIX MÓVIL PDP (2026-06-25)
   1) Cabecera: ocultar header-top en móvil (franja fantasma sin contenido)
   2) Espaciado galería → info en móvil (más respiro)
   3) Flechas productos relacionados más pequeñas
   4) Banderas producto (descuento/nuevo/etc) más discretas
   =========================================================================== */

/* 1) Ocultar header-top en móvil: franja blanca fantasma que empuja el search */
@media(max-width:767px){
  #header .header-top{ display:none !important; }
}

/* ============================================================
   MIGA DE PAN (categoria y ficha de producto)
   Prototipo v3: "Inicio > Categoria", separador chevron, ultimo en teal y bold.
   ============================================================ */
.breadcrumb{
  background:transparent; padding:14px 0; margin:0;
  font-family:var(--font-body); font-size:15px; color:var(--fg2);
}
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.breadcrumb ol li{ display:inline-flex; align-items:center; gap:6px; }
.breadcrumb ol li::after{ content:"\203A"; color:var(--fg3); }
.breadcrumb ol li:last-child::after{ content:""; }
.breadcrumb ol li:last-child > span{ color:var(--teal-700); font-weight:700; }
.breadcrumb a{ color:var(--fg2); }
.breadcrumb a:hover{ color:var(--teal-700); }

/* La ficha necesita un bloque propio para que la miga no quede pegada a la
   reticula. Classic aplica una regla mas especifica que anulaba este aire. */
#product #wrapper .breadcrumb{
  width:100%;
  min-height:0; padding:12px 0 0 !important; margin:0 0 16px !important;
  margin-left:0 !important; transform:none;
  font-size:13px; line-height:1.35;
}
#product #wrapper .breadcrumb ol{ column-gap:6px; row-gap:4px; }
#product #wrapper .breadcrumb ol li{ gap:6px; }
#product #wrapper .breadcrumb ol li::after{ color:var(--fg3); opacity:.55; }
#product #wrapper .breadcrumb a{ color:var(--fg3); text-decoration:none; }
#product #wrapper .breadcrumb a:hover{ color:var(--teal-700); }
#product #wrapper .breadcrumb ol li:last-child > span{ color:var(--fg2); font-weight:600; }

@media(max-width:767px){
  #product #wrapper .breadcrumb{
    width:100%; margin-left:0 !important; transform:none;
    padding-top:8px !important; margin-bottom:12px !important; overflow:hidden;
  }
  #product #wrapper .breadcrumb ol{ flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
  #product #wrapper .breadcrumb ol li{ flex:0 0 auto; min-width:0; }
  #product #wrapper .breadcrumb ol li:not(:first-child):not(:last-child){ display:none; }
  #product #wrapper .breadcrumb ol li:last-child{ flex:1 1 auto; overflow:hidden; }
  #product #wrapper .breadcrumb ol li:last-child::before{
    content:"\2026\00a0\203A"; color:var(--fg3); margin-right:6px; flex-shrink:0; opacity:.65;
  }
  #product #wrapper .breadcrumb ol li:last-child > span{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* ------------------------------------------------------------
   Migrado desde legacy-catalogo.css al terminar el rediseno v3.
   ------------------------------------------------------------ */
/* Ocultar el modal nativo de "Producto añadido al carrito" de blockcart:
   el diseño usa un toast inferior-izq en su lugar. */
#blockcart-modal{ display:none !important; }