/* ===== Configurador — Ladrillos caravista (v2, apegado al diseño de referencia) ===== */
/* .config-header, .config-layout, .sidebar, .cart-*, .btn-block viven en styles.css (compartidos con contacto.html) */

/* --- Breadcrumb dentro de main (no arriba del grid): así "Tu selección" arranca
   a la misma altura que la ruta, no a la altura de los filtros. Ya no hay H1 en
   esta página (se quitó a pedido del cliente) --- */
.config-layout{ padding-top:40px; }
main .config-header{ padding:0 0 20px; }
.crumb-current{ color:var(--brick); font-weight:700; }

/* --- Barra de filtros: Formato y Acabado a la misma altura/alineados, Color junto a
   ellos — los tres siempre visibles, ocupando el menor espacio vertical posible.
   Cada grupo puede envolver sus botones a una 2a línea si no caben. --- */
.filters-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:18px 36px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line-on-dark);
}
.filter-group{ display:flex; flex-direction:column; gap:8px; }
.filter-group .flabel{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--mortar);
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  max-width:360px;
}
.filter-group-color .filter-row{ max-width:none; }

.filters-reset-button{
  flex:0 0 auto;
  width:44px;
  height:44px;
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,150,59,0.55);
  border-radius:3px;
  background:rgba(201,150,59,0.035);
  color:var(--sand);
  transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.filters-reset-button svg{ width:22px; height:22px; }
.filters-reset-button:hover:not(:disabled){ background:rgba(201,150,59,0.12); border-color:var(--sand); color:#fff; }
.filters-reset-button:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
.filters-reset-button:disabled{ opacity:0.28; cursor:not-allowed; }

/* Los chips de Formato traen etiquetas de largo muy distinto ("King" vs.
   "10×20×33"), lo que dejaba la fila despareja — se les da a todos el
   mismo ancho mínimo (el del más largo) y el texto centrado, así los más
   chicos crecen para alinearse en vez de quedar sueltos. Solo Formato, no
   Acabado/Color (no se pidió ahí y sus etiquetas ya son parejas). Ancho del
   contenedor ajustado para que las 9 (Todos + 8 formatos) queden en una
   cuadrícula pareja de 3 por fila, en vez de 4+4+1 con uno solo suelto.
   */
#formatoOptions.filter-row{ max-width:250px; }
#formatoOptions .chip{
  min-width:76px;
  text-align:center;
}

/* Acabado comparte la retícula compacta de Formato: tres opciones en la
   primera fila y dos en la segunda, conservando proporciones uniformes. */
@media (min-width:561px){
  #texturaOptions.filter-row{
    max-width:250px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  #texturaOptions .chip{
    width:100%;
    min-width:0;
    text-align:center;
  }
}

.chip{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.02em;
  padding:6px 10px;
  border:1px solid var(--line-on-dark);
  background:transparent;
  color:var(--plaster);
  opacity:0.8;
  transition:all 0.15s ease;
  white-space:nowrap;
}
.chip:hover{ opacity:1; border-color:var(--sand); }
.chip.active{
  background:var(--brick);
  border-color:var(--brick);
  color:#fff;
  opacity:1;
}
.chip.chip-all.active{
  background:rgba(237,230,217,0.07);
  border-color:rgba(237,230,217,0.3);
  color:var(--sand);
  font-weight:600;
}
.chip:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

.dot-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none;
  color:var(--mortar);
  width:52px;
}
.dot-btn .dot{
  width:26px; height:26px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(237,230,217,0.2);
  border:2px solid transparent;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.dot-btn:hover .dot{ transform:scale(1.08); }
.dot-btn.active .dot{ border-color:#fff; }
.dot-btn.active{ color:var(--plaster); }
.dot-btn .lbl{
  font-family:'Space Grotesk', sans-serif;
  font-size:9px;
  text-align:center;
  line-height:1.2;
}
/* El texto también se resalta al activarse (parejo con .chip.active en los
   otros filtros), no solo el aro del círculo. */
.dot-btn.active .lbl{ color:#fff; font-weight:700; }
.dot-btn .dot.dot-todos{ background:#fff; }
/* El círculo "Todos" ya es blanco de fondo — el aro blanco de ".active"
   (que en los demás colores sí contrasta bien) se volvía invisible ahí
   mismo, blanco sobre blanco. Al activarse, se sombrea con el color de
   marca en vez de blanco, igual que ya hacen los botones "Todos" de
   Formato/Acabado (`.chip.active`, fondo `var(--brick)`). */
.dot-btn.active .dot.dot-todos{
  background:var(--brick);
  border-color:var(--brick);
}
.dot-btn-all.active .dot.dot-todos{
  background:transparent;
  border-color:var(--sand);
  box-shadow:inset 0 0 0 6px rgba(237,230,217,0.14);
}
.dot-btn-all.active .lbl{ color:var(--sand); font-weight:600; }

/* Botón "Esmaltado" (entra al grupo de los 6 tonos) — círculo partido en 4
   con algunos de esos tonos, para insinuar "hay más colores acá" en vez de
   un solo color plano como el resto de los swatches. */
.dot-btn .dot.dot-esmaltado-group{
  background:conic-gradient(#EDEAE2 0deg 90deg, #3E5A63 90deg 180deg, #1C1C1C 180deg 270deg, #C9963B 270deg 360deg);
}
/* Botón "Volver" (sale del grupo de vuelta a colores naturales) — mismo
   círculo que los demás swatches pero con una flecha en vez de un color,
   para que se sienta parte de la misma fila de botones. */
.dot-btn.dot-btn-back .dot.dot-back{
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  color:var(--mortar);
}
.dot-btn.dot-btn-back:hover .dot.dot-back{ color:var(--plaster); }

/* --- Galería de texturas --- */
.gallery-head{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--mortar);
  margin-bottom:14px;
}
/* Fachaletas reutiliza este CSS pero no tiene selección de geometría: si el
   contenedor de botones queda vacío, no debe ocupar espacio ni romper el layout. */
.tex-geo:empty, .sel-geo:empty{ display:none; }

/* Aviso del buscador del header cuando el texto no coincide con nada (caravista.js) */
.search-notice{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--line-on-dark);
  border-left:3px solid var(--brick);
  background:rgba(191,86,49,0.08);
  font:400 12.5px/1.4 'Work Sans', sans-serif;
  color:var(--plaster);
}
.search-notice strong{ font-weight:600; }
.search-notice-close{
  margin-left:auto;
  flex-shrink:0;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:none; border:0;
  color:var(--mortar);
  font-size:16px; line-height:1;
  cursor:pointer;
}
.search-notice-close:hover{ color:var(--plaster); }
.search-notice[hidden]{ display:none; }

/* Galería independiente con su propio scroll (puede haber cientos de tarjetas) */
.gallery-scroll{
  max-height:66vh;
  overflow-y:auto;
  padding-right:14px;
  scrollbar-width:thin;
  scrollbar-color:var(--mortar) transparent;
}
.gallery-scroll::-webkit-scrollbar{ width:10px; background:transparent; }
.gallery-scroll::-webkit-scrollbar-track{ background:transparent; }
.gallery-scroll::-webkit-scrollbar-thumb{ background:var(--mortar); border-radius:4px; }
.gallery-scroll::-webkit-scrollbar-button{ background:var(--mortar); height:9px; }

.gallery{
  display:grid;
  /* 4 → 3 columnas: con menos texturas disponibles por las reglas de
     color/formato/geometría, sobra espacio — 3 columnas más anchas le dan
     más presencia a la foto de cada tarjeta. */
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

/* Estado vacío: cuando los filtros combinados no dejan ningún producto (ej.
   Esmaltado + WireCut, excluido a propósito) — antes la galería quedaba en
   blanco sin ninguna explicación, ahora se avisa y se ofrece quitar los
   filtros de un clic. */
.gallery-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:48px 20px;
  color:var(--mortar);
}
.gallery-empty p{ font-size:13.5px; margin-bottom:16px; }
.gallery-empty-reset{
  font-family:'Space Grotesk', sans-serif;
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:10px 20px;
  border:1px solid var(--brick);
  color:var(--brick);
  background:none;
  transition:all 0.15s ease;
}
.gallery-empty-reset:hover{ background:var(--brick); color:#fff; }
.tex-card{
  position:relative;
  background:none;
  color:var(--plaster);
  border:1px solid transparent;
  transition:border-color 0.2s ease;
}
.tex-card:hover{ border-color:var(--line-on-dark); }
.tex-card.active{ border-color:var(--brick); }
.tex-card.disabled .tex-tile-btn{ opacity:0.3; cursor:not-allowed; }

.tex-index{
  position:absolute;
  top:8px; left:8px;
  z-index:2;
  font-family:'Space Grotesk', sans-serif;
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--plaster);
  background:rgba(12,12,12,0.55);
  padding:2px 6px;
  pointer-events:none;
}

/* Lupa para ampliar la foto real — misma esquina/tratamiento que .tex-index
   pero del lado opuesto; solo se dibuja en tarjetas que ya tienen foto (ver
   renderCardHTML en caravista.js), nunca sobre el patrón placeholder. */
.tex-zoom-btn{
  position:absolute;
  top:8px; right:8px;
  z-index:2;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid rgba(237,230,217,0.35);
  background:rgba(12,12,12,0.55);
  color:var(--plaster);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity 0.15s ease, border-color 0.15s ease;
}
.tex-zoom-btn svg{ width:13px; height:13px; }
.tex-card:hover .tex-zoom-btn{ opacity:1; }
.tex-zoom-btn:hover{ border-color:var(--sand); }
/* En móvil no hay hover — se muestra siempre si existe, si no queda invisible. */
@media (hover:none){
  .tex-zoom-btn{ opacity:1; }
}

.tex-tile-btn{
  display:block;
  width:100%;
  background:none;
  border:none;
  padding:0;
  margin:0;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.tex-tile-btn:disabled{ cursor:not-allowed; }

.tex-tile{
  aspect-ratio:1/0.72;
  width:100%;
  position:relative;
  overflow:hidden;
  background-color:#7a5a3c;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 30px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 62px);
  transition:background-color 0.3s ease;
}
.tex-name{
  padding:12px 2px 0;
  font-family:'Work Sans', sans-serif;
  font-size:13.5px;
  line-height:1.3;
}
.tex-name .tex-sep{ color:var(--mortar); }
.tex-medida{
  padding:3px 2px 4px;
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  color:var(--mortar);
}
/* --- Acciones por tarjeta: geometría (izq.) + ficha técnica y carrito (der.) --- */
.tex-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 2px 2px;
}
.tex-geo{ display:flex; gap:6px; border-radius:20px; transition:box-shadow 0.2s ease; }
.geo-btn{
  position:relative;
  width:26px; height:26px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-on-dark);
  background:none;
  color:var(--plaster);
  display:flex; align-items:center; justify-content:center;
  opacity:0.75;
  transition:all 0.15s ease;
}
.geo-btn svg{ width:14px; height:14px; }
.geo-btn:hover{ opacity:1; border-color:var(--sand); }
.geo-btn.active{
  background:var(--brick);
  border-color:var(--brick);
  color:#fff;
  opacity:1;
}
.geo-btn::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--charcoal);
  border:1px solid var(--line-on-dark);
  color:var(--plaster);
  font-family:'Space Grotesk', sans-serif;
  font-size:10px;
  letter-spacing:0.02em;
  white-space:nowrap;
  padding:4px 8px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease;
  z-index:6;
}
.geo-btn:hover::after{ opacity:1; }
.geo-btn:focus-visible::after{ opacity:1; }
.tex-geo .geo-btn:first-child::after{
  left:0;
  transform:none;
}
.tex-geo .geo-btn:last-child::after{
  left:auto;
  right:0;
  transform:none;
}

.tex-geo.geo-flash{
  box-shadow:0 0 0 3px var(--brick);
  animation:geoFlashPulse 0.9s ease;
}
@keyframes geoFlashPulse{
  0%, 100%{ box-shadow:0 0 0 3px var(--brick); }
  50%{ box-shadow:0 0 0 3px transparent; }
}

.tex-tools{ display:flex; align-items:center; gap:8px; }
.tex-tool-btn{
  width:26px; height:26px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-on-dark);
  background:none;
  color:var(--plaster);
  display:flex; align-items:center; justify-content:center;
  opacity:0.75;
  transition:all 0.15s ease;
}
.tex-tool-btn svg{ width:13px; height:13px; }
.tex-tool-btn:hover:not(:disabled){ opacity:1; border-color:var(--sand); }
.tex-tool-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.tex-tool-btn.cart-add{
  background:var(--brick);
  border-color:var(--brick);
  color:#fff;
  opacity:1;
}
.tex-tool-btn.cart-add:hover:not(:disabled){ background:var(--brick-deep); border-color:var(--brick-deep); }
.tex-tool-btn.cart-add:disabled{
  background:none;
  border-color:var(--line-on-dark);
  color:var(--plaster);
  opacity:0.3;
}

/* --- Sidebar (contenedor .sidebar en styles.css) --- */
.sel-title{ text-transform:uppercase; letter-spacing:0.04em; }
.sel-tile{
  width:100%;
  aspect-ratio:1/0.48;
  background-color:#7a5a3c;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 30px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 62px);
  transition:background-color 0.3s ease;
}
.sel-code{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--plaster);
}
.sel-code.sel-empty{
  font-weight:400;
  color:var(--mortar);
  text-transform:none;
}

.sel-geo .tex-geo{ display:flex; gap:6px; }

/* Hueco/Multiperforado + ficha técnica en la misma fila, para aprovechar
   mejor el espacio en vez de que la ficha ocupe una fila propia a lo ancho. */
.sel-actions-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sel-ficha-btn{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  padding:6px 12px;
  border-radius:20px;
  border:1px solid var(--line-on-dark);
  background:none;
  color:var(--plaster);
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0.75;
  transition:all 0.15s ease;
}
.sel-ficha-btn svg{ width:14px; height:14px; flex-shrink:0; }
.sel-ficha-btn:hover:not(:disabled){ opacity:1; border-color:var(--sand); }
.sel-ficha-btn:disabled{ opacity:0.35; cursor:not-allowed; }

/* .qty-action-row/.stepper/.qty-facts (stepper de tarimas + resumen de
   piezas por tarima) viven en styles.css — compartidos con cualquier
   configurador de producto, ver nota ahí. */

/* --- Botones de geometría dentro de cada línea del carrito --- */
.cart-geo{ display:flex; gap:6px; margin-top:8px; }
.cgeo-btn{
  position:relative;
  width:22px; height:22px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-on-dark);
  background:none;
  color:var(--plaster);
  display:flex; align-items:center; justify-content:center;
  opacity:0.6;
  transition:all 0.15s ease;
}
.cgeo-btn svg{ width:12px; height:12px; }
.cgeo-btn:hover{ opacity:1; border-color:var(--sand); }
.cgeo-btn.active{
  background:var(--brick);
  border-color:var(--brick);
  color:#fff;
  opacity:1;
}
.cgeo-btn::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--charcoal);
  border:1px solid var(--line-on-dark);
  color:var(--plaster);
  font-family:'Space Grotesk', sans-serif;
  font-size:9.5px;
  white-space:nowrap;
  padding:3px 6px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease;
  z-index:6;
}
.cgeo-btn:hover::after{ opacity:1; }

@media (max-width: 980px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
}

/* --- Confirmación del carrito --- */
.cart-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  width:min(390px, calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 16px;
  border:1px solid var(--sand);
  background:#171512;
  color:var(--plaster);
  box-shadow:0 16px 40px rgba(0,0,0,0.38);
}
.cart-toast[hidden]{ display:none !important; }
.cart-toast > div:first-child{ display:flex; flex-direction:column; gap:3px; }
.cart-toast strong{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.cart-toast span{ font-size:12px; line-height:1.4; color:var(--mortar); }
.cart-toast-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cart-toast-actions button{
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line-on-dark);
  background:none;
  color:var(--sand);
  font-family:'Space Grotesk', sans-serif;
  font-size:10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.cart-toast-actions button:hover,
.cart-toast-actions button:focus-visible{ border-color:var(--sand); }
.cart-toast-actions button:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

/* --- Lightbox: ampliar la foto real de una textura (tarjeta o "Tu selección") --- */
.tex-lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(12,12,12,0.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  cursor:zoom-out;
}
/* El atributo [hidden] del navegador (display:none) pierde contra el
   display:flex de arriba porque tienen la misma especificidad y esta regla
   carga después — mismo problema ya documentado antes en este proyecto.
   Sin esto, el modal se queda visible siempre, no solo cuando se abre. */
.tex-lightbox[hidden]{ display:none !important; }
.tex-lightbox-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:fit-content;
  max-width:min(900px, calc(100vw - 40px));
  max-height:75vh;
  cursor:default;
}
.tex-lightbox-img{
  display:block;
  max-width:100%;
  max-height:75vh;
  object-fit:contain;
  border:1px solid var(--line-on-dark);
  cursor:default;
}
.tex-lightbox-caption{
  margin-top:16px;
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--plaster);
  text-transform:uppercase;
  cursor:default;
}
.tex-lightbox-counter{
  margin-top:7px;
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--mortar);
  cursor:default;
}
.tex-lightbox-nav{
  position:absolute;
  top:50%;
  z-index:2;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  transition:background-color 0.18s ease, border-color 0.18s ease;
}
.tex-lightbox-nav[hidden]{ display:none; }
.tex-lightbox-nav svg{
  width:28px;
  height:28px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.9));
}
.tex-lightbox-prev{ left:12px; }
.tex-lightbox-next{ right:12px; }
.tex-lightbox-nav:hover{
  background:rgba(12,12,12,0.32);
  border-color:rgba(237,230,217,0.2);
}
.tex-lightbox-nav:focus-visible{
  background:rgba(12,12,12,0.42);
  border-color:rgba(237,230,217,0.3);
  outline:2px solid var(--plaster);
  outline-offset:3px;
}
.tex-lightbox-close{
  position:absolute;
  top:20px; right:20px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(237,230,217,0.35);
  background:rgba(12,12,12,0.55);
  color:var(--plaster);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:border-color 0.15s ease;
}
.tex-lightbox-close:hover,
.tex-lightbox-close:focus-visible{
  border-color:var(--sand);
  outline:2px solid var(--plaster);
  outline-offset:3px;
}
@media (max-width:640px){
  .gallery{ grid-template-columns:1fr; }
  .gallery-scroll{ overflow-x:hidden; }
  .tex-lightbox{ padding:24px 8px; }
  .tex-lightbox-stage{ max-width:calc(100vw - 16px); }
  .tex-lightbox-img{ max-width:100%; }
  .tex-lightbox-nav{ width:44px; height:44px; }
  .tex-lightbox-prev{ left:6px; }
  .tex-lightbox-next{ right:6px; }
  .tex-lightbox-close{ top:12px; right:12px; }
}

@media (max-width:860px){
  .tex-zoom-btn,
  .geo-btn,
  .tex-tool-btn,
  .cgeo-btn,
  .tex-lightbox-close{
    min-width:44px;
    min-height:44px;
  }
  .chip,
  .dot-btn{ min-height:44px; }
  .tex-index,
  .tex-medida,
  .chip,
  .dot-btn .lbl{ font-size:12px; }
}

@media (max-width:560px){
  body.mobile-filters-open{ overflow:hidden; }
  .tex-zoom-btn{ display:none; }
  .tex-tile{ cursor:zoom-in; }
  .tex-tile-btn{ padding-bottom:6px; }
  .tex-actions{
    min-height:0;
    align-items:center;
    justify-content:space-between;
  }
  .tex-geo,
  .tex-tools{
    position:static;
    flex:0 0 auto;
    gap:8px;
  }
  .geo-btn svg,
  .tex-tool-btn svg{ width:14px; height:14px; }
  .tex-tools{
    z-index:3;
  }
  .filters-bar{
    position:sticky;
    top:var(--caravista-mobile-header-h, 77px);
    z-index:29;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) 44px;
    align-items:center;
    gap:6px;
    padding:10px 0;
    margin-bottom:18px;
    background:rgba(12,12,12,0.96);
    box-shadow:0 10px 22px rgba(0,0,0,0.2);
  }
  body.mobile-filters-open .filters-bar{ z-index:31; }
  .filter-group-formato,
  .filter-group-acabado,
  .filter-group-color{ width:auto; min-width:0; }
  .formato-desktop-label,
  .acabado-desktop-label,
  .color-desktop-label{ display:none; }
  .mobile-filter-toggle{
    width:100%;
    min-width:0;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    padding:9px 8px;
    font-family:'Space Grotesk', sans-serif;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:0.035em;
    text-transform:uppercase;
    text-align:left;
    color:var(--plaster);
    background:rgba(237,230,217,0.045);
    border:1px solid var(--line-on-dark);
    border-radius:3px;
    transition:border-color 0.18s ease, background-color 0.18s ease;
  }
  .mobile-filter-toggle:hover,
  .mobile-filter-toggle:focus-visible,
  .filter-group.is-open .mobile-filter-toggle{
    border-color:var(--sand);
    background:rgba(201,150,59,0.08);
  }
  .mobile-filter-toggle:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
  .mobile-filter-toggle svg{ width:14px; height:14px; flex:0 0 auto; }
  .filters-reset-button{ margin-top:0; }
  .mobile-filter-sheet{
    position:fixed;
    inset:0 0 0 auto;
    z-index:96;
    width:min(88vw, 380px);
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:20px 18px max(24px, env(safe-area-inset-bottom));
    overflow-y:auto;
    color:var(--plaster);
    background:#151412;
    border-left:1px solid var(--line-on-dark);
    box-shadow:-22px 0 50px rgba(0,0,0,0.5);
    transform:translateX(104%);
    visibility:hidden;
    transition:transform 0.28s cubic-bezier(0.22,0.78,0.32,1), visibility 0s linear 0.28s;
  }
  .filter-group.is-open .mobile-filter-sheet{
    transform:translateX(0);
    visibility:visible;
    transition:transform 0.28s cubic-bezier(0.22,0.78,0.32,1);
  }
  .mobile-filter-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-on-dark);
  }
  .mobile-filter-sheet-head strong{
    font-family:'Fraunces', serif;
    font-size:24px;
    font-weight:400;
  }
  .mobile-filter-close{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    color:var(--plaster);
    background:rgba(237,230,217,0.06);
    border:1px solid var(--line-on-dark);
    font-size:24px;
  }
  .mobile-filter-close:hover,
  .mobile-filter-close:focus-visible{ border-color:var(--sand); outline:2px solid var(--sand); outline-offset:2px; }
  .mobile-filter-sheet .filter-row{
    width:100%;
    max-width:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .mobile-filter-sheet .chip{
    width:100%;
    min-width:0;
    min-height:48px;
    flex:none;
    text-align:left;
    padding:11px 14px;
  }
  .mobile-filter-sheet #colorOptions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px 8px;
  }
  .mobile-filter-sheet #colorOptions .dot-btn{
    width:100%;
    min-width:0;
    min-height:64px;
  }
  .mobile-filters-backdrop{
    position:fixed;
    inset:0;
    z-index:95;
    display:block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.68);
    border:0;
    backdrop-filter:blur(2px);
  }
  .mobile-filters-backdrop[hidden]{ display:none !important; }
  .cart-toast{
    right:16px;
    bottom:16px;
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .cart-toast-actions{ width:100%; }
  .cart-toast-actions button{ flex:1; min-height:44px; }
}

@media (min-width:561px){
  .mobile-filter-toggle,
  .mobile-filter-sheet-head,
  .mobile-filters-backdrop{ display:none !important; }
  .mobile-filter-sheet{ display:contents !important; }
  .filters-bar{
    position:static;
    z-index:auto;
    display:flex;
    grid-template-columns:none;
    background:transparent;
    box-shadow:none;
  }
  .tex-zoom-btn{ display:flex; }
  .tex-tile-btn{ padding-bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  .mobile-filter-toggle,
  .mobile-filter-sheet{ transition:none; }
}
/* Teléfono horizontal y tablet: conserva el mismo filtro compacto y fijo de la
   orientación vertical, sin alterar la cuadrícula horizontal del catálogo. */
@media (min-width:561px) and (max-width:1180px){
  body.mobile-filters-open{overflow:hidden}
  .filters-bar{
    position:sticky;top:var(--caravista-mobile-header-h,77px);z-index:29;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;
    align-items:center;gap:8px;padding:10px 0;margin-bottom:18px;
    background:rgba(12,12,12,.96);box-shadow:0 10px 22px rgba(0,0,0,.2)
  }
  body.mobile-filters-open .filters-bar{z-index:31}
  .filter-group-formato,.filter-group-acabado,.filter-group-color{width:auto;min-width:0}
  .formato-desktop-label,.acabado-desktop-label,.color-desktop-label{display:none}
  .mobile-filter-toggle{
    width:100%;min-width:0;min-height:44px;display:flex!important;align-items:center;
    justify-content:space-between;gap:4px;padding:9px 8px;
    font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--plaster);
    background:rgba(237,230,217,.045);border:1px solid var(--line-on-dark);border-radius:3px
  }
  .mobile-filter-toggle svg{width:14px;height:16px;flex:0 0 auto}
  .filter-group.is-open .mobile-filter-toggle{border-color:var(--sand);background:rgba(201,150,59,.08)}
  .filters-reset-button{margin-top:0}
  .mobile-filter-sheet{
    position:fixed;inset:0 0 0 auto;z-index:96;width:min(88vw,380px);
    display:flex!important;flex-direction:column;gap:14px;
    padding:16px 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;
    color:var(--plaster);background:#151412;border-left:1px solid var(--line-on-dark);
    box-shadow:-22px 0 50px rgba(0,0,0,.5);transform:translateX(104%);
    visibility:hidden;transition:transform .28s cubic-bezier(.22,.78,.32,1),visibility 0s linear .28s
  }
  .filter-group.is-open .mobile-filter-sheet{transform:translateX(0);visibility:visible;transition:transform .28s cubic-bezier(.22,.78,.32,1)}
  .mobile-filter-sheet-head{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line-on-dark)}
  .mobile-filter-sheet-head strong{font-family:'Fraunces',serif;font-size:22px;font-weight:400}
  .mobile-filter-close{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:var(--plaster);background:rgba(237,230,217,.06);border:1px solid var(--line-on-dark);font-size:24px}
  .mobile-filter-sheet .filter-row{width:100%;max-width:none;display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .mobile-filter-sheet .chip{width:100%;min-width:0;min-height:44px;flex:none;text-align:left;padding:9px 14px}
  .mobile-filters-backdrop{position:fixed;inset:0;z-index:95;display:block!important;width:100%;height:100%;background:rgba(0,0,0,.68);border:0;backdrop-filter:blur(2px)}
  .mobile-filters-backdrop[hidden]{display:none!important}
}