/* ============================================================
   TEXTIL DEL HOGAR — CATEGORIA
   Escrito de cero contra el prototipo v3 (CategoryPage.jsx + ProductCard.jsx).
   Contiene la tarjeta de producto (compartida con home y busqueda), el listado,
   las facetas y la paginacion.
   ============================================================ */

/* ============================================================
   TARJETA DE PRODUCTO  (ProductCard.jsx)
   La usan categoria, home y busqueda: .product-miniature es el nodo de classic.
   ============================================================ */
.product-miniature{ width:auto; margin:0; height:100%; }
.product-miniature .thumbnail-container{
  width:auto; height:100%; background:#fff; border-radius:var(--r-xs);
  border:1px solid var(--line); box-shadow:none; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.product-miniature .thumbnail-container:hover{ transform:none; border-color:var(--ink); box-shadow:var(--sh-sm); }

/* ---- foto ---- */
.product-miniature .thumbnail-top{ position:relative; }
.product-miniature .thumbnail.product-thumbnail{ display:block; }
.product-miniature .thumbnail.product-thumbnail img{ width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block; }

/* ---- badges sobre la foto ---- */
/* Arriba a la izquierda a ras (estilo v4, cuadrados), apilados. */
.tdh-card-badges{
  position:absolute; top:0; left:0; z-index:2;
  display:flex; flex-direction:column; gap:0; align-items:flex-start;
}
.tdh-card-badges .product-flags{
  position:static; display:flex; flex-direction:column; gap:6px;
  margin:0; padding:0; list-style:none;
}
/* base.css impone font-size/padding/border-radius con !important sobre
   .product-flags li.product-flag. Igualamos la geometria de la tarjeta
   con la misma especificidad + !important para que todos los badges
   (descuento, nuevo, TOP) compartan radio pill, altura y separacion. */
.product-miniature .product-flag,
.product-miniature .product-flags li.product-flag{
  position:static !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  font-family:var(--font-display) !important; font-weight:800 !important;
  font-size:12px !important; line-height:1.2 !important;
  border-radius:var(--r-pill) !important; padding:5px 12px !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
.product-miniature .product-flag.discount,
.product-miniature .product-flag.on-sale,
.product-miniature .product-flag.discount-percentage{ background:var(--sale); color:#fff; }
.product-miniature .product-flag.new,
.product-miniature .product-flag.online-only{ background:var(--ink); color:#fff; }
/* Ruido que classic pinta y el diseno no contempla: el stock se comunica
   via el texto del boton ("Sin stock"), no como badge sobre la foto.
   Se necesita una especificidad mayor que base.css (.product-flags li.product-flag.out_of_stock
   con !important) para que display:none prevalezca. */
.product-miniature .product-flags li.product-flag.out_of_stock,
.product-miniature .product-flags li.product-flag.discount-amount{ display:none !important; }

.tdh-top{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--ink); color:#fff; border-radius:var(--r-xs);
  padding:5px 10px 5px 8px; font-family:var(--font-display); font-weight:800; font-size:11px;
}
.tdh-top .tdh-ico{ font-size:12px; }

/* Abajo a la izquierda: prueba social con dato real de ventas (modulo tdhbought) */
.tdh-bought{
  position:absolute; bottom:0; left:0; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(28,28,26,.82); color:#fff; border-radius:0;
  padding:5px 10px 5px 8px; font-family:var(--font-display); font-weight:700;
  font-size:10.5px; white-space:nowrap;
}
.tdh-bought .tdh-ico{ font-size:11px; color:#fff; }

/* Arriba a la derecha: favorito */
.tdh-favbtn{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:var(--r-xs); background:#fff;
  box-shadow:var(--sh-sm); display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:.18s ease;
}
.tdh-favbtn .tdh-ico{ font-size:17px; }
.tdh-favbtn:hover{ transform:none; box-shadow:var(--sh-card); color:var(--ink); }
.tdh-favbtn.is-fav .tdh-ico{ fill:currentColor; }

/* ---- cuerpo ---- */
.product-miniature .product-description{
  padding:14px 16px 18px; display:flex; flex-direction:column; flex:1; border:0;
  /* classic centra el texto de la tarjeta; el diseno lo quiere alineado a la izquierda */
  text-align:left;
}
/* Ojo: classic centra tanto .product-title COMO el <a> de dentro, con la misma
   especificidad. Hay que anular los dos o el titulo sigue saliendo centrado. */
.product-miniature .product-title,
.product-miniature .product-title a,
.product-miniature .product-price-and-shipping,
.product-miniature .tdh-brand{ text-align:left; }
.product-miniature .tdh-brand{
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fg3);
}
.product-miniature .product-title{ margin:4px 0; min-height:40px; }
.product-miniature .product-title a{
  font-family:var(--font-display); font-weight:700; font-size:15.5px; line-height:1.3;
  color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-miniature .product-title a:hover{ color:var(--teal-700); }

/* Muchos productos del catalogo no tienen opiniones y productcomments inyecta un
   contenedor vacio. No se reserva altura: si no hay estrellas, el bloque colapsa
   en vez de dejar un hueco en blanco en la tarjeta. */
.product-miniature .tdh-stars{
  display:flex; align-items:center; gap:6px; margin:0;
  color:var(--star); letter-spacing:1px; font-size:13px;
}
.product-miniature .tdh-stars:not(:empty){ margin-bottom:10px; }
.product-miniature .tdh-stars__glifos{ letter-spacing:1px; }
.product-miniature .tdh-stars small{ color:var(--fg3); font-weight:600; letter-spacing:0; font-size:13px; }
.product-miniature .tdh-stars .product-list-reviews{ display:flex; align-items:center; gap:6px; }
.product-miniature .tdh-stars .comments-note{ margin:0; }
.product-miniature .tdh-stars small{ color:var(--fg3); font-weight:600; letter-spacing:0; }

.product-miniature .product-price-and-shipping{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto;
}
.product-miniature .price{
  font-family:var(--font-display); font-weight:800; font-size:23px;
  color:var(--price); white-space:nowrap;
}
.product-miniature .regular-price{
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:var(--fg3); text-decoration:line-through; white-space:nowrap;
}
/* El descuento se muestra SOLO como flag en la esquina de la foto, no repetido
   junto al precio. Ojo: hay que acotarlo al bloque de precio — el flag de oferta
   lleva tambien la clase .discount-percentage y una regla global lo ocultaria. */
.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-price-and-shipping .discount-amount,
.product-miniature .highlighted-informations{ display:none; }

/* ---- anadir al carrito / stepper ---- */
.product-miniature .tdh-addform{ margin:12px 0 0; }
.product-miniature .tdh-addbtn{ width:100%; }
.product-miniature .tdh-addbtn .tdh-ico{ font-size:18px; }

.tdh-stepper{
  display:flex; align-items:center; justify-content:center; gap:2px;
  width:fit-content; margin:12px auto 0;
  border:1.5px solid var(--line); border-radius:var(--r-xs); background:#fff;
  animation:tdh-add-pop .3s cubic-bezier(.16,1,.3,1);
}
.tdh-stepper__btn{
  display:flex; align-items:center; justify-content:center;
  padding:9px 16px; color:var(--ink); line-height:1;
}
.tdh-stepper__btn:hover{ color:#000; background:var(--bg3); }
.tdh-stepper__btn.is-disabled{ opacity:.4; pointer-events:none; }
.tdh-stepper__qty{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  min-width:22px; text-align:center; color:var(--ink);
}

/* Error de "anadir al carrito" (atributo obligatorio sin elegir, sin stock...) */
.product-miniature .js-error-add-to-cart,
.product-miniature .alert-danger{
  margin:8px 0 0; padding:8px 10px; font-size:12px; line-height:1.35;
  border:0; border-radius:var(--r-sm); background:var(--sale-bg); color:var(--pink-700);
}

/* ============================================================
   LISTADO DE CATEGORIA  (CategoryPage.jsx)
   ============================================================ */

/* ---- ancho del contenido: FLUIDO (v4), sin tope ----
   El catalogo ocupa todo el viewport con el gutter lateral. */
#category #wrapper > .container{
  width:auto !important; max-width:none !important;
  padding-left:var(--gutter); padding-right:var(--gutter);
}

/* En el prototipo la cabecera (miga, H1, subtitulo y descripcion) ocupa el ANCHO
   COMPLETO y las dos columnas empiezan debajo. PrestaShop, en cambio, mete todo
   eso dentro de #content-wrapper, a la derecha de #left-column.

   Se resuelve aplanando la jerarquia con display:contents en #content-wrapper y
   #main, de modo que sus hijos pasan a ser items del mismo grid que
   #left-column, y colocandolos por filas de forma explicita. Asi no hace falta
   reestructurar plantillas ni tocar el layout de PrestaShop.

     fila 1  cabecera            (columnas 1 y 2)
     fila 2  subcategorias       (columnas 1 y 2)
     fila 3  filtros | productos
     fila 4  texto SEO           (columnas 1 y 2)
*/
@media (min-width:992px){
  #category.layout-left-column #wrapper > .container > .row{
    display:grid; grid-template-columns:240px 1fr; column-gap:clamp(24px, 3vw, 44px); margin:0;
  }
  #category #content-wrapper,
  #category #content-wrapper > #main{ display:contents; }

  #category .tdh-cat-header{ grid-column:1 / -1; grid-row:1; }
  #category .tdh-cat-subcats{ grid-column:1 / -1; grid-row:2; }
  #category #left-column{
    grid-column:1; grid-row:3;
    max-width:none; flex:none; width:auto; min-width:0; padding:0;
    /* El panel puede superar la altura de la ventana: debe seguir el scroll de la pagina. */
    align-self:start;
  }
  #category #products{
    grid-column:2; grid-row:3;
    /* min-width:0 es imprescindible: un item de grid trae min-width:auto y no
       puede encoger por debajo del ancho intrinseco de su contenido. Con fotos
       reales de 800px la columna se estiraba a miles de px. */
    min-width:0;
  }
  #category .tdh-cat-footer{ grid-column:1 / -1; grid-row:4; }
}

/* ---- cabecera ---- */
.tdh-cat-head{ padding:8px 0 0; }
.tdh-cat-title{
  font-family:var(--font-display); font-weight:800; font-size:44px;
  line-height:1.10; letter-spacing:-.015em; color:var(--ink); margin:0 0 6px;
}
.tdh-cat-subtitle{
  font-family:var(--font-body); font-size:18px; line-height:1.6;
  color:var(--fg2); margin:0 0 20px;
}
.tdh-cat-count{ font-weight:400; color:inherit; }
.tdh-cat-sep{ margin:0 4px; color:var(--fg3); }
.tdh-cat-shipping{ white-space:nowrap; }

/* ---- introduccion breve y estable ---- */
.tdh-cat-intro{ max-width:72ch; margin:0 0 28px; }
.tdh-cat-intro__text{
  font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--fg2);
}
.tdh-cat-intro__text > :first-child{ margin-top:0; }
.tdh-cat-intro__text > :last-child{ margin-bottom:0; }
.tdh-cat-intro__text p{ margin:0; }
.tdh-cat-intro__text a{ color:var(--teal-700); text-decoration:underline; }
.tdh-cat-assurances{
  display:flex; flex-wrap:wrap; gap:8px 24px; padding:14px 0;
  margin:12px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--fg2); font-size:14px; line-height:1.4;
}
.tdh-cat-assurances span::before{
  content:"✓"; margin-right:8px; color:var(--teal-700); font-weight:700;
}

/* ---- filtros: cada facet es una tarjeta blanca (FilterGroup) ----
   Se conserva el markup nativo de ps_facetedsearch (del que depende su AJAX):
   no se toca ningun data-*, .js-search-link ni el id de los <ul class="collapse">. */
#search_filters{ background:none; padding:0; border:0; }
#search_filters > .h6,
#search_filters .clear-all-wrapper{ display:none; }

#search_filters .facet{
  background:#fff; border-radius:var(--r-xs); padding:16px 18px;
  margin:0 0 12px; box-shadow:none; border:1px solid var(--line);
}
/* classic usa `#search_filters .facet .facet-title` (mas especifico): hay que
   igualar el selector o el tamano de fuente no se aplica. */
#search_filters .facet .facet-title,
#search_filters .facet-title{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  color:var(--ink); margin:0 0 12px; text-transform:none; letter-spacing:0;
}
#search_filters .facet ul{ list-style:none; margin:0; padding:0; }
#search_filters .facet li{ margin:0; }

#search_filters .facet-label{
  display:flex; align-items:center; gap:10px; padding:5px 0; margin:0;
  font-family:var(--font-body); font-size:14px; color:var(--fg2); cursor:pointer;
  text-align:left;
}
#search_filters .facet-label:hover{ color:var(--teal-700); }
#search_filters .facet-label a{ color:inherit; flex:1; text-align:left; }
#search_filters .facet-label .magnitude{ color:var(--fg3); font-size:12.5px; }
.tdh-facet-help{ margin:-3px 0 9px; color:var(--fg3); font-size:12.5px; line-height:1.45; }

/* casilla propia de 18px. Classic aplica top:-7px / bottom:7px a
   .custom-checkbox y .custom-radio, desplazando la casilla hacia arriba
   respecto al texto. Se neutraliza aqui con !important para que casilla
   y texto queden alineados al centro de la fila. */
#search_filters .custom-checkbox,
#search_filters .custom-radio{
  position:relative; top:auto !important; bottom:auto !important;
  display:flex; flex-shrink:0; float:none; margin:0;
}
#search_filters .custom-checkbox input,
#search_filters .custom-radio input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:1;
}
#search_filters .custom-checkbox input + span,
#search_filters .custom-radio input + span{
  width:18px; height:18px; flex-shrink:0; border:1.5px solid var(--teal-300);
  background:transparent; display:flex; align-items:center; justify-content:center;
  transition:.15s ease; margin:0;
}
#search_filters .custom-checkbox input + span{ border-radius:5px; }
#search_filters .custom-radio input + span{ border-radius:99px; }
#search_filters .custom-checkbox input:checked + span,
#search_filters .custom-radio input:checked + span{ background:var(--ink); border-color:var(--ink); }
#search_filters .custom-checkbox .checkbox-checked{ font-size:13px; color:#fff; opacity:0; }
#search_filters .custom-checkbox input:checked + span .checkbox-checked{ opacity:1; }
/* muestras de color del facet "Color": el cuadro ES la muestra */
#search_filters .custom-checkbox input + span.color{ border:1.5px solid var(--line); }
#search_filters .custom-checkbox input:checked + span.color{
  background:none; box-shadow:0 0 0 2px var(--ink);
}

/* "Ver N mas" que inyecta textildelhogar.js */
#search_filters .facet:not(.tdh-facet-expanded) .tdh-facet-hidden{ display:none; }
.tdh-facet-more{
  margin-top:8px; background:none; border:0; padding:0;
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--teal-700);
  text-decoration:underline;
}
.tdh-facet-more:hover{ color:var(--teal-800); }
.tdh-facet-more:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* ---- barra de herramientas: chips de filtros activos + orden ---- */
.tdh-cat-toolbar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:12px; margin:0 0 16px;
}
.tdh-cat-toolbar__active{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
/* Sin filtros activos: el section.hide no ocupa espacio. */
.tdh-cat-toolbar__active .active_filters.hide{ display:none; }
/* Ocultar el titulo "Filtros activos" del clasico (el JS lo elimina, pero
   el CSS es fallback si JS no se ejecuta). */
.tdh-cat-toolbar__active .active-filter-title{ display:none; }
/* El section#js-active-search-filters se vuelve flex inline dentro del toolbar.
   El label "Filtros:", los chips y "Limpiar todo" se reparten horizontalmente. */
.tdh-cat-toolbar__active .active_filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; padding:0;
}
.tdh-cat-toolbar__active .active-filter-label{
  font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--fg2);
  margin:0; padding:0; text-transform:none; letter-spacing:0;
}
.tdh-cat-toolbar__active .active_filters ul{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
}
.tdh-cat-toolbar__active .filter-block{
  display:inline-flex; align-items:center; gap:5px; margin:0;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:5px 6px 5px 12px; font-size:13px; font-weight:600;
  min-height:32px;
}
.tdh-cat-toolbar__active .filter-block__text{ white-space:nowrap; }
.tdh-cat-toolbar__active .filter-block__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; color:inherit; text-decoration:none;
  flex-shrink:0; transition:background .15s ease;
}
.tdh-cat-toolbar__active .filter-block__close:hover{ background:rgba(19,116,106,.15); }
.tdh-cat-toolbar__active .filter-block__close .tdh-ico{ font-size:13px; }
.tdh-cat-toolbar__active .active-filter-clear{
  background:none; border:0; padding:0; margin-left:4px;
  font-size:13px; font-weight:700; color:var(--fg2); text-decoration:underline;
  min-height:32px; display:inline-flex; align-items:center;
}
.tdh-cat-toolbar__active .active-filter-clear:hover{ color:var(--teal-700); }

.tdh-cat-toolbar__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
/* El desplegable de orden de classic, con forma de pill como en el prototipo */
.products-sort-order{ margin:0; }
.products-sort-order .select-title{
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  width:auto; min-width:210px; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--r-pill); padding:10px 16px; margin:0; box-shadow:none;
  font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--fg2);
}
.products-sort-order .select-title:hover{ border-color:var(--teal-300); color:var(--teal-700); }
.products-sort-order .select-title .tdh-ico{ font-size:16px; color:var(--fg2); }
.products-sort-order .dropdown-menu{
  border:0; border-radius:var(--r-md); box-shadow:var(--sh-lift); padding:6px; margin-top:6px;
}
.products-sort-order .dropdown-menu .select-list{
  display:block; padding:9px 12px; border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:14px; color:var(--fg2);
}
.products-sort-order .dropdown-menu .select-list:hover{ background:var(--teal-50); color:var(--teal-700); }

/* Boton "Filtrar": solo movil/tablet */
.tdh-cat-filter-btn{ display:none; }

/* ---- rejilla de productos: fluida (auto-fill) ---- */
.tdh-cat-grid-inner,
#js-product-list .products{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:clamp(12px, 1.5vw, 18px); margin:0;
}
/* min-width:0 por el mismo motivo: sin el, la foto del producto impone su ancho
   intrinseco a la columna del grid. */
#js-product-list .products > .js-product{ width:auto; max-width:none; min-width:0; margin:0; padding:0; }
.tdh-cat-grid-inner > .js-product{ min-width:0; }

/* ---- pie SEO de categoria ---- */
.tdh-cat-footer{
  width:100%; max-width:72ch; margin:48px auto 0; padding-top:28px; border-top:1px solid var(--line);
  font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--fg2);
}
.tdh-cat-footer__desc + .tdh-cat-footer__desc{ margin-top:28px; }
.tdh-cat-footer__desc > :first-child{ margin-top:0; }
.tdh-cat-footer__desc > :last-child{ margin-bottom:0; }
.tdh-cat-footer__desc h2{ margin:28px 0 10px; font-size:24px; line-height:1.25; color:var(--ink); }
.tdh-cat-footer__desc h3{ margin:22px 0 8px; font-size:19px; line-height:1.35; color:var(--ink); }
.tdh-cat-footer__desc p{ margin:0 0 14px; }
.tdh-cat-footer__desc ul,
.tdh-cat-footer__desc ol{ margin:10px 0 16px 24px; padding:0; }
.tdh-cat-footer__desc li + li{ margin-top:8px; }
.tdh-cat-footer__desc a{ color:var(--teal-700); text-decoration:underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px){
  .tdh-cat-grid-inner,
  #js-product-list .products{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:991px){
  .tdh-cat-title{ font-size:44px; }
  .tdh-cat-subtitle{ font-size:18px; }
  .tdh-cat-intro__text{ font-size:14px; }
  .tdh-cat-hero{ height:200px; }
  .tdh-cat-filter-btn{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    width:100%; margin:0; padding:12px 24px;
    border:0; border-radius:var(--r-xs); background:var(--ink); color:#fff;
    font-family:var(--font-display); font-weight:800; font-size:14px;
  }
  .tdh-cat-toolbar__actions{ width:100%; flex-direction:column; align-items:stretch; }
  .products-sort-order,
  .products-sort-order .select-title{ width:100%; }
}
@media (max-width:575px){
  .tdh-cat-title{ font-size:44px; }
  .tdh-cat-grid-inner,
  #js-product-list .products{ grid-template-columns:1fr; gap:14px; }
}

/* ---- navegación visual de subcategorías ---- */
.tdh-cat-subcats{ width:100%; margin:2px 0 32px; }
.tdh-cat-subcats__head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin:0 0 14px; }
.tdh-cat-subcats__head h2{
  margin:4px 0 0; font-family:var(--font-display); font-size:25px;
  line-height:1.2; font-weight:800; color:var(--ink);
}
.tdh-cat-subcats__head--campaigns{ margin-top:28px; }
.tdh-cat-subcats__grid--campaigns{ max-width:calc(75% - 3px); }
.tdh-cat-subcats__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  list-style:none; margin:0; padding:0;
}
.tdh-cat-subcat{
  display:block; min-width:0; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xs); box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tdh-cat-subcat:hover{
  transform:none; border-color:var(--ink); box-shadow:var(--sh-sm);
}
.tdh-cat-subcat:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.tdh-cat-subcat__image{
  display:flex; align-items:center; justify-content:center; height:150px;
  overflow:hidden; background:var(--bg3); color:var(--fg3);
}
.tdh-cat-subcat__image picture{ width:100%; height:100%; }
.tdh-cat-subcat__image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.tdh-cat-subcat:hover .tdh-cat-subcat__image img{ transform:scale(1.035); }
.tdh-cat-subcat__body{
  min-height:60px; padding:13px 15px; display:flex; align-items:center;
  justify-content:space-between; gap:10px;
}
.tdh-cat-subcat__name{
  min-width:0; font-family:var(--font-display); font-size:14.5px; line-height:1.3;
  font-weight:800; color:var(--ink);
}
.tdh-cat-subcat__body .tdh-ico{ flex:0 0 auto; color:var(--ink); transition:transform .2s ease; }
.tdh-cat-subcat:hover .tdh-cat-subcat__body .tdh-ico{ transform:translateX(3px); }

/* ============================================================
   ANCHO FLUIDO v4 — el catalogo ocupa todo el viewport.
   (Sustituye a la "RÉPLICA ESTRUCTURAL APROBADA 2026-07-20" de 1240px,
   abolida por la nueva dirección full-screen.)
   ============================================================ */

/* Un único sistema de anchura para todo el catálogo: fluido. */
#category #wrapper{ padding-top:24px; }
#category #wrapper > .container{
  width:auto !important;
  max-width:none !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}
#category #wrapper > .container > .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Miga compacta y alineada con la retícula. */
#category #wrapper .breadcrumb{
  width:100%; min-height:0;
  padding:0 !important;
  margin:0 0 16px !important;
  margin-left:0 !important; transform:none;
  font-size:15px; line-height:1.55;
}
#category #wrapper .breadcrumb ol{ column-gap:6px; row-gap:4px; }
#category #wrapper .breadcrumb ol li{ gap:6px; }
#category #wrapper .breadcrumb ol{ display:flex; align-items:center; flex-wrap:wrap; }
#category #wrapper .breadcrumb ol li{ display:inline-flex; align-items:center; }
#category #wrapper .breadcrumb ol li::after{
  content:"\203A" !important; position:static !important;
  width:auto !important; height:auto !important; top:auto !important;
  border:0 !important; transform:none !important; line-height:inherit !important;
  margin:0 0 0 6px; color:var(--fg3); opacity:.55;
}
#category #wrapper .breadcrumb ol li:last-child::after{ content:"" !important; margin:0; }
#category #wrapper .breadcrumb ol li + li::before{ content:none !important; }
#category #wrapper .breadcrumb a{ color:var(--fg3); text-decoration:none; }
#category #wrapper .breadcrumb a:hover{ color:var(--teal-700); }
#category #wrapper .breadcrumb ol li:last-child > span{
  display:inline-block; color:var(--teal-700); font-weight:700;
}
#category #wrapper .breadcrumb ol li:last-child > span{ text-transform:none; }
.tdh-cat-title{ text-transform:none; }

/* La cabecera ocupa una única fila. La siguiente comienza exactamente después
   de los 24px de margen de la descripción/subtítulo. */
.tdh-cat-head{ padding:0; }
.tdh-cat-title{ margin:0 0 6px; }
.tdh-cat-subtitle{ margin:0 0 20px; }

/* ---- banner hero de categor\xeda (imagen de portada) ----
   Se muestra solo si la categor\xeda tiene imagen de portada cargada.
   La gesti\xf3n es 100% nativa: Cat\xe1logo > Categor\xedas > Editar > Portada. */
.tdh-cat-hero{
  width:100%; height:280px;
  border-radius:var(--r-xs); overflow:hidden;
  margin:0 0 24px; box-shadow:none; border:1px solid var(--line);
}
.tdh-cat-hero img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

.tdh-cat-intro{ max-width:72ch; margin:0 0 29px; }
.tdh-cat-intro__text{ font-size:14px; line-height:1.5; }
.tdh-cat-intro__text p{ margin:0; font:inherit !important; line-height:inherit !important; color:inherit; }

@media (min-width:992px){
  #category.layout-left-column #wrapper > .container > .row{
    grid-template-columns:240px minmax(0,1fr);
    column-gap:clamp(24px, 3vw, 44px);
    row-gap:0;
  }
  #category .tdh-cat-header{ grid-column:1 / -1; grid-row:1; }
  #category #left-column{ grid-column:1; grid-row:2; }
  #category #products{ grid-column:2; grid-row:2; }
  #category .tdh-cat-footer{ grid-column:1 / -1; grid-row:3; }
}

/* Facetas: ritmo táctil y foco sin alterar los data-* de ps_facetedsearch. */
#search_filters .facet{ padding:16px 18px; margin-bottom:14px; }
#search_filters .facet-label{
  min-height:0; padding:5px 0; gap:10px;
  align-items:center; line-height:1.35;
}
#search_filters .facet-label a{
  min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
#search_filters .facet .facet-label a{
  min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0; line-height:19px;
}
#search_filters .facet-label:focus-within{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs);
}
#search_filters .custom-checkbox input:focus-visible + span,
#search_filters .custom-radio input:focus-visible + span{
  outline:2px solid var(--focus); outline-offset:3px;
}
.tdh-facet-more{ min-height:29px; display:inline-flex; align-items:center; }

/* Toolbar de una sola altura: filtros activos a la izquierda y un único pill. */
.tdh-cat-toolbar{ min-height:41px; margin:0 0 16px; align-items:center; }
.tdh-cat-toolbar__sort{ display:flex; align-items:center; }
.tdh-cat-toolbar__sort > .sort-by{ display:none !important; }
.tdh-cat-toolbar__sort .products-sort-order{
  float:none; width:auto; padding:0; margin:0;
}
.tdh-cat-toolbar__sort .products-sort-order .select-title{
  min-width:198px; min-height:41px; height:41px;
  padding:0 16px; display:flex; align-items:center;
}
.tdh-cat-toolbar__sort .tdh-sort-prefix{
  flex:0 0 auto; color:var(--fg3); font-weight:600;
}
.tdh-cat-toolbar__sort .tdh-sort-current{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tdh-cat-toolbar__sort .tdh-sort-chevron{
  flex:0 0 auto; margin-left:auto; font-size:16px; color:var(--fg2);
}
.tdh-cat-toolbar__sort .products-sort-order .dropdown-menu{ min-width:260px; }
.tdh-cat-toolbar__sort .products-sort-order .select-list{
  min-height:44px; display:flex; align-items:center; cursor:pointer;
}
.tdh-cat-toolbar__sort .products-sort-order .select-list.current{
  background:var(--teal-50); color:var(--teal-800); font-weight:700;
}
.tdh-cat-toolbar__active .filter-block{ min-height:36px; }
.tdh-cat-toolbar__active .filter-block a{ color:inherit; }

/* Rejilla fluida: el número de columnas lo decide el viewport. */
@media (min-width:992px){
  .tdh-cat-grid-inner,
  #js-product-list .products{ grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); }
}
@media (min-width:576px) and (max-width:991px){
  .tdh-cat-grid-inner,
  #js-product-list .products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Tarjeta uniforme. El favorito real de blockwishlist es el único control. */
.product-miniature{ min-width:0; position:relative; }
.product-miniature .thumbnail-container{ min-width:0; margin:0 !important; }
.product-miniature.js-product-miniature{ position:relative; height:100%; }
.product-miniature .thumbnail-top{ flex:0 0 auto; overflow:hidden; }
.product-miniature .thumbnail.product-thumbnail img{
  width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; object-position:center;
}
.product-miniature .tdh-favbtn{ display:none !important; }
.product-miniature .wishlist-button-add{
  position:absolute !important; top:10px !important; right:10px !important; z-index:4;
  width:34px !important; height:34px !important; min-width:34px !important;
  margin:0 !important; border:1px solid var(--line) !important; border-radius:var(--r-xs) !important;
  background:#fff !important; color:var(--ink) !important; box-shadow:var(--sh-sm) !important;
  display:flex !important; align-items:center; justify-content:center; overflow:visible;
}
.product-miniature .wishlist-button-add::after{
  content:""; position:absolute; inset:-5px; border-radius:var(--r-xs);
}
.product-miniature .wishlist-button-add .material-icons,
.product-miniature .wishlist-button-add svg{ color:var(--ink) !important; font-size:17px !important; }
.product-miniature .wishlist-button-add:hover{ transform:none; box-shadow:var(--sh-card) !important; }
.product-miniature .wishlist-button-add:focus-visible{
  outline:3px solid var(--focus) !important; outline-offset:3px;
}
.product-miniature .product-description{ min-height:0; }
.product-miniature .tdh-brand{ color:var(--fg3); font-size:11px; line-height:14px; }
.product-miniature .product-title{ min-height:40px; }
.product-miniature .tdh-card-cart{ width:100%; }
.product-miniature .tdh-addform[hidden],
.product-miniature .tdh-stepper[hidden]{ display:none !important; }
.product-miniature .tdh-addbtn{ min-height:44px; height:44px; font-size:13px; cursor:pointer; }
.product-miniature .tdh-addbtn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.product-miniature .tdh-stepper__btn{
  min-width:44px; min-height:44px; padding:0 14px; border:0; background:transparent;
}
.product-miniature .tdh-stepper__btn:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs);
}
.product-miniature .js-tdh-card-cart[aria-busy="true"]{ opacity:.68; pointer-events:none; }
.product-miniature .thumbnail.product-thumbnail:focus-visible,
.product-miniature .product-title a:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs);
}

/* La altura la fija el contenido (foto 4:3 + cuerpo), no una cifra fija. */

/* El orden de las facetas procede del HTML en todos los tamaños de pantalla. */
@media (min-width:992px){
  #search_filters{ display:flex; flex-direction:column; }
  #search_filters > .facet{ display:block; }
  #search_filters .tdh-facet-more{ display:inline-flex; }
  #search_filters .facet-label .magnitude{ display:none; }
}


/* Drawer móvil construido sobre el mismo wrapper nativo. */
.tdh-filter-drawer__backdrop{ display:none; }
@media (max-width:991px){
  /* Classic limita .header-nav a 50px aunque el buscador movil vive debajo de
     la fila de iconos. La altura real debe entrar en el flujo para que el
     buscador no se superponga con la miga ni con el titulo de categoria. */
  #category #header .header-nav{ height:auto !important; max-height:none !important; }

  #category #wrapper > .container > .row{ display:block !important; }
  #category #left-column{ display:contents !important; }
  #category #content-wrapper{
    width:100% !important; max-width:100% !important; flex:0 0 100% !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  #category #search_filters_wrapper:not(.tdh-filter-drawer){ display:none !important; }

  #category #wrapper .breadcrumb{
    padding-top:0 !important; margin-bottom:16px !important; overflow:hidden;
  }
  #category #wrapper .breadcrumb ol{
    display:flex !important; align-items:center; flex-wrap:nowrap;
    overflow:hidden; white-space:nowrap;
  }
  #category #wrapper .breadcrumb ol li{
    display:inline-flex !important; align-items:center;
    flex:0 0 auto; min-width:0;
  }
  #category #wrapper .breadcrumb ol li::after{
    content:"\203A" !important; position:static !important;
    margin:0; color:var(--fg3); opacity:.55;
  }
  #category #wrapper .breadcrumb ol li:last-child::after{ content:"" !important; }
  #category #wrapper .breadcrumb ol li:not(:first-child):not(:last-child){ display:none; }
  #category #wrapper .breadcrumb ol li:last-child{ flex:1 1 auto; overflow:hidden; }
  #category #wrapper .breadcrumb ol li:last-child::before{
    content:none !important;
  }
  #category #wrapper .breadcrumb ol li:last-child > span{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  body.tdh-filter-open{ overflow:hidden; }
  #search_filters_wrapper.tdh-filter-drawer{
    position:fixed; inset:0 0 0 auto; z-index:1002;
    width:min(390px,calc(100vw - 32px)); height:100dvh;
    display:flex !important; flex-direction:column;
    margin:0 !important; padding:0; background:var(--bg2); box-shadow:-12px 0 36px rgba(36,53,53,.2);
    transform:translateX(100%); visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;
  }
  #search_filters_wrapper.tdh-filter-drawer.is-open{
    transform:translateX(0); visibility:visible;
    transition:transform .22s ease;
  }
  #search_filter_controls.tdh-filter-drawer__controls{ display:contents !important; }
  .tdh-filter-drawer__heading{
    order:1; min-height:64px; padding:10px 16px 10px 20px;
    display:flex; align-items:center; justify-content:space-between;
    background:#fff; border-bottom:1px solid var(--line);
    font-family:var(--font-display); font-size:18px; color:var(--ink);
  }
  .tdh-filter-drawer__close{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--fg2);
  }
  #search_filters_wrapper #search_filters{
    order:2; flex:1 1 auto; min-height:0; overflow-y:auto;
    padding:16px 16px 104px;
  }
  #search_filters_wrapper #search_filters .facet{ box-shadow:none; border:1px solid var(--line); }
  #search_filters_wrapper #search_filters .facet .title{
    min-height:44px; display:flex; align-items:center; justify-content:space-between;
  }
  #search_filters_wrapper #search_filters .facet .title .facet-title{ margin:0; }
  /* "Ver mas" solo tiene sentido cuando las opciones de la faceta estan visibles. */
  #search_filters_wrapper #search_filters .facet > ul:not(.in) + .tdh-facet-more{ display:none; }
  #search_filters_wrapper #search_filters .facet-label{
    min-height:44px; padding:7px 0; font-size:16px;
  }
  .tdh-filter-drawer__footer{
    order:3; position:absolute; left:0; right:0; bottom:0; z-index:2;
    min-height:88px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,1.25fr); gap:10px;
    align-items:center; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(36,53,53,.08);
  }
  .tdh-filter-drawer__footer .btn{ width:100%; min-height:48px; margin:0; }
  .tdh-filter-drawer__footer .js-search-filters-clear-all{
    width:100%; min-height:48px; margin:0; border:1px solid var(--line);
    border-radius:var(--r-pill); background:#fff; color:var(--fg2);
  }
  .tdh-filter-drawer__backdrop{
    position:fixed; inset:0; z-index:1001; width:100%; height:100%;
    border:0; padding:0; background:rgba(20,35,35,.42);
  }
  .tdh-filter-drawer__backdrop.is-open{ display:block; }
  .tdh-cat-toolbar__actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tdh-cat-filter-btn{ min-height:44px; }
  .tdh-cat-filter-btn,
  .tdh-cat-filter-btn:hover,
  .tdh-cat-filter-btn:focus,
  .tdh-cat-filter-btn:active{
    border:0 !important; background:var(--ink) !important; color:#fff !important;
    box-shadow:none !important;
  }
  .tdh-cat-filter-btn:focus-visible{
    outline:3px solid var(--focus); outline-offset:3px;
  }
  .tdh-cat-toolbar__sort,
  .tdh-cat-toolbar__sort .products-sort-order,
  .tdh-cat-toolbar__sort .products-sort-order .select-title{ width:100%; }
  .tdh-cat-toolbar__sort .products-sort-order .select-title{ min-height:44px; height:44px; }
  .tdh-cat-toolbar__sort .products-sort-order .dropdown-menu{ width:100%; min-width:100%; }
}

@media (max-width:575px){
  #category #wrapper > .container{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; }
  .tdh-cat-toolbar__actions{ grid-template-columns:1fr; }
  .tdh-cat-title{ overflow-wrap:anywhere; }
  .tdh-cat-intro{ margin-bottom:24px; }
  .tdh-cat-assurances{ display:grid; gap:8px; }
  .tdh-cat-subcats__grid--campaigns{ max-width:none; }
  .tdh-cat-footer{ margin-top:36px; padding-top:24px; font-size:16px; }
  .tdh-cat-subcats__grid{ grid-template-columns:1fr; }
  .tdh-cat-subcat__image{ height:170px; }
  .tdh-cat-hero{ height:160px; margin-bottom:20px; }
}

@media (min-width:576px) and (max-width:991px){
  .tdh-cat-subcats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .product-miniature .thumbnail-container,
  .product-miniature .wishlist-button-add,
  .tdh-stepper,
  #search_filters_wrapper.tdh-filter-drawer{ transition:none !important; animation:none !important; }
}