/* ============================================================
   SUPRA CASES — Tarjetas de producto, tabla de mayoreo, listados, modelo, producto, carrito
   Extraido de supra-cases-v3.html lineas 309-516
   ============================================================ */

/* ============ TARJETAS DE PRODUCTO ============ */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prod{border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden;background:var(--blanco);
  display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--t)}
.prod:hover{border-color:var(--negro);box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
/* El prototipo mete la foto en una caja cuadrada (.ph) y la recorta con
   object-fit. Al portarlo, la tarjeta se quedo con la <img> suelta: todas
   las fotos del catalogo son 300x300, asi que aqui no se recorta nada, pero
   la caja garantiza que una foto futura que no sea cuadrada no descuadre la
   fila entera --las tarjetas de una misma fila han de empezar el texto a la
   misma altura. */
.prod-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:var(--humo)}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-tags{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;z-index:2}
.prod-cpo{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;gap:4px}
.prod-cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:6px;color:var(--texto-3)}
.prod-cat i{width:8px;height:8px;border-radius:2px;flex:none}
.prod-nom{font-size:15.5px;font-weight:800;line-height:1.2;letter-spacing:-.015em}
.prod-meta{font-size:12px;color:var(--texto-2);display:flex;align-items:center;gap:5px}
.prod-precio{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.prod-precio b{font-size:20px;font-weight:800;letter-spacing:-.025em}
.prod-precio s{font-size:13px;color:var(--texto-3)}
.prod-may{font-size:11.5px;font-weight:700;color:var(--texto-2);
  background:var(--humo);border-radius:3px;padding:3px 7px;display:inline-block;margin-top:6px}
.prod-acc{margin-top:10px}
.punto-stock{width:7px;height:7px;border-radius:50%;background:var(--exito);flex:none}

/* ============ TABLA DE MAYOREO ============ */
.escalones{display:grid;gap:6px}
.esc{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--r);
  background:var(--humo);color:var(--texto);font-size:14.5px;transition:background var(--t)}
.esc.act{background:var(--negro);color:#fff}
.esc.act .esc-p{color:var(--amarillo)}
.esc-r{font-weight:700}
.esc-p{margin-left:auto;font-weight:800;font-size:18px;letter-spacing:-.02em}
.esc small{font-size:11.5px;font-weight:600;opacity:.7}
.esc-promo{background:var(--amarillo);color:var(--negro)}
.nota-pago{margin-top:12px;font-size:12.5px;color:var(--texto-2);
  border-left:3px solid var(--amarillo);padding-left:11px;line-height:1.5}

/* ============ LISTADOS ============ */
.mig{font-size:13px;color:var(--texto-2);padding:16px 0;display:flex;gap:7px;flex-wrap:wrap}
.mig a:hover{color:var(--negro);text-decoration:underline}
.cat-hero{border-bottom:1px solid var(--linea);padding-bottom:22px;margin-bottom:22px;
  border-left:6px solid var(--c,var(--amarillo));padding-left:16px}
.cat-hero p,.cat-hero-desc{margin:10px 0 0;color:var(--texto-2);max-width:64ch;font-size:15px}
.layout{display:grid;grid-template-columns:236px 1fr;gap:34px;align-items:start;padding-bottom:60px}
.filtros{position:sticky;top:calc(var(--h-header) + 16px)}
.fgrupo{border-bottom:1px solid var(--linea);padding:0 0 16px;margin-bottom:16px}
.fgrupo:last-child{border-bottom:none}
.fgrupo h4{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:10px}
.fop{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14px;cursor:pointer}
.fop input{width:16px;height:16px;accent-color:var(--negro);flex:none;margin:0}
.fop span{color:var(--texto-2)}
.fop:hover span{color:var(--texto)}
.fop em{margin-left:auto;font-style:normal;font-size:12px;color:var(--texto-3)}
.barra-res{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.barra-res p{margin:0;font-size:14px;color:var(--texto-2)}
/* Solo <select>: finder.js pone .sel en .fila y .busq-item para la fila
   activa, y esta regla les encogia la caja a 40px con el chevron del orden. */
select.sel,.woocommerce-ordering select{height:40px;border:1.5px solid var(--linea);border-radius:var(--r);padding:0 32px 0 12px;
  font-size:14px;font-weight:600;background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357575E' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/15px;
  appearance:none;cursor:pointer}
.vacio{border:2px dashed var(--linea);border-radius:var(--r-g);padding:48px 24px;text-align:center}
.vacio h3{margin-bottom:6px}
.vacio p{color:var(--texto-2);font-size:14.5px;margin-bottom:16px}

/* ============ PÁGINA DE MODELO ============ */
.mod-hero{background:var(--negro);color:#fff;padding:30px 0 34px;position:relative;overflow:hidden}
.mod-hero::after{content:'';position:absolute;right:-60px;top:-40px;width:280px;height:280px;
  background:var(--amarillo);opacity:.12;transform:rotate(24deg);border-radius:26px}
.mod-hero h1{color:#fff;position:relative}
.mod-hero p{color:#A9A9B2;margin:10px 0 0;font-size:16px;position:relative}
.mod-lista{display:grid;gap:10px;padding:26px 0 60px}
.mod-item{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;
  border:1px solid var(--linea);border-radius:var(--r-g);padding:12px;background:var(--blanco);
  transition:border-color var(--t)}
.mod-item:hover{border-color:var(--negro)}
.mod-item .ph{width:84px;height:84px;border-radius:6px;padding:0;flex:none}
.mod-item .ph-img::after{display:none}
.mod-item .ph-img img{width:100%;height:100%;object-fit:cover;display:block}
.mod-i-n{font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.mod-i-d{font-size:13px;color:var(--texto-2);margin-top:2px}
.mod-i-acc{display:flex;align-items:center;gap:12px}
.mod-i-p{text-align:right}
.mod-i-p b{font-size:19px;font-weight:800;letter-spacing:-.02em;display:block}
.mod-i-p small{font-size:11.5px;color:var(--texto-3)}

/* ============ PÁGINA DE PRODUCTO ============ */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:46px;padding:8px 0 56px;align-items:start}
.pdp-gal{position:sticky;top:calc(var(--h-header) + 16px)}
.pdp-foto{border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden}
.pdp h1{font-size:clamp(27px,3.6vw,40px);margin:10px 0 10px}
.pdp-precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.pdp-precio b{font-size:36px;font-weight:800;letter-spacing:-.035em}
.pdp-precio s{font-size:18px;color:var(--texto-3)}
.pdp-iva{font-size:12.5px;color:var(--texto-3);margin-bottom:18px}
.bloque{border:1px solid var(--linea);border-radius:var(--r-g);margin-bottom:16px;overflow:hidden}
.bloque-cab{padding:13px 15px;border-bottom:1px solid var(--linea);display:flex;
  align-items:center;justify-content:space-between;gap:12px;background:var(--humo)}
.bloque-cab b{font-size:14.5px;font-weight:800;text-transform:uppercase;font-style:italic;letter-spacing:-.01em}
.bloque-cab span{font-size:12.5px;color:inherit;opacity:.62;font-weight:600}
.bloque-cpo{padding:15px}
.buscar-modelo{display:flex;align-items:center;gap:9px;padding:0 14px;border-bottom:1px solid var(--linea)}
.buscar-modelo svg{width:17px;height:17px;color:var(--texto-3);flex:none}
.buscar-modelo input{flex:1;height:48px;border:none;outline:none;font-size:15px;background:none}
.modelos{max-height:310px;overflow:auto}
.modelo{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--humo-2)}
.modelo:last-child{border-bottom:none}
.modelo:hover{background:var(--humo)}
.modelo-n{font-size:14.5px;font-weight:500;flex:1;min-width:0}
.modelo-n small{display:block;font-size:11px;color:var(--amarillo-osc);font-weight:800;text-transform:uppercase}
.cant{display:flex;align-items:center;border:1.5px solid var(--linea);border-radius:var(--r);
  height:36px;overflow:hidden;flex:none;background:var(--blanco)}
.cant button{width:34px;height:100%;display:grid;place-items:center;font-size:18px;
  font-weight:700;color:var(--texto-2);transition:background var(--t)}
.cant button:hover{background:var(--amarillo)}
.cant input{width:48px;height:100%;border:none;outline:none;text-align:center;
  font-size:14.5px;font-weight:800;background:none;-moz-appearance:textfield}
.cant input::-webkit-outer-spin-button,.cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cant-g{height:46px}
.cant-g input{width:58px;font-size:16px}
.resumen-sel{padding:13px 15px;background:var(--negro);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.resumen-sel b{font-size:15px}
.resumen-sel .rt{font-weight:800;font-size:19px;color:var(--amarillo);letter-spacing:-.02em}
.pdp-acc{display:flex;gap:10px;margin-bottom:18px}
.pdp-ventajas{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.pdp-ventajas li{display:flex;gap:9px;font-size:14px;color:var(--texto-2);align-items:flex-start}
.pdp-ventajas svg{width:16px;height:16px;color:var(--exito);flex:none;margin-top:3px}
.ficha{width:100%;border-collapse:collapse;font-size:14.5px}
.ficha td{padding:9px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.ficha td:first-child{width:38%;color:var(--texto-2);font-weight:700}
.ficha tr:last-child td{border-bottom:none}
.prosa{max-width:70ch;font-size:15px;color:var(--texto-2)}
.prosa h4{font-size:17px;color:var(--texto);margin:22px 0 8px;font-style:italic;text-transform:uppercase}
/* Las descripciones de producto y las paginas del cliente usan h2 y h3. */
.prosa h2{font-size:23px;color:var(--texto);margin:28px 0 10px}
.prosa h3{font-size:18px;color:var(--texto);margin:24px 0 8px}
.prosa :is(h2,h3):first-child{margin-top:0}
.prosa ul{padding-left:19px;margin:0 0 1em}
.prosa li{margin-bottom:5px}


/* ============ PEDIDO RÁPIDO ============ */
.rapido-cab{background:var(--negro);color:#fff;padding:34px 0;position:relative;overflow:hidden}
.rapido-cab h1{color:#fff}
.rapido-cab h1 em{color:var(--amarillo);font-style:italic}
.rapido-cab p{color:#A9A9B2;max-width:58ch;font-size:16px;margin:10px 0 0}
.pasos{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.paso{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#C9C9D0;
  border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 14px}
.paso b{width:20px;height:20px;border-radius:50%;background:var(--amarillo);color:var(--negro);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none}
.rapido-grid{display:grid;grid-template-columns:252px 1fr;gap:26px;padding:26px 0 60px;align-items:start}
.fam-lista{border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden;
  position:sticky;top:calc(var(--h-header) + 16px);max-height:calc(100vh - var(--h-header) - 40px);overflow-y:auto}
.fam{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--humo-2);transition:background var(--t)}
.fam:last-child{border-bottom:none}
.fam:hover{background:var(--humo)}
.fam.act{background:var(--negro);color:#fff}
.fam.act .fam-s{color:#9A9AA3}
.fam .ph{width:36px;height:36px;border-radius:4px;flex:none;padding:0}
.fam .ph b{font-size:9px}.fam .ph i{display:none}
.fam .ph-img::after{display:none}
.fam .ph-img img{width:100%;height:100%;object-fit:cover;display:block}
.fam-n{font-size:13.5px;font-weight:700;line-height:1.2}
.fam-s{font-size:11.5px;color:var(--texto-3)}
.fam-c{margin-left:auto;font-size:12px;font-weight:800;background:var(--amarillo);color:var(--negro);
  border-radius:10px;padding:1px 7px;flex:none}
.tabla-r{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-r thead th{position:sticky;top:0;background:var(--blanco);z-index:2;
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);padding:11px 12px;border-bottom:1px solid var(--linea)}
.tabla-r td{padding:7px 12px;border-bottom:1px solid var(--humo-2)}
.tabla-r tbody tr:hover{background:var(--humo)}
.tabla-r tr.hay{background:rgba(255,196,0,.1)}
.tabla-r .td-c{width:124px}
.tabla-r .td-p{width:100px;text-align:right;font-weight:700}
.tabla-r .td-t{width:112px;text-align:right;font-weight:800}
.barra-fija{position:sticky;bottom:0;background:var(--blanco);border-top:2px solid var(--negro);
  padding:12px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;z-index:40}
.barra-fija b{font-size:19px;font-weight:800;letter-spacing:-.02em}

/* ============ CARRITO ============ */
.capa{position:fixed;inset:0;background:rgba(14,14,14,.5);z-index:90;opacity:0;visibility:hidden;
  transition:opacity var(--t),visibility var(--t)}
.capa.abierto{opacity:1;visibility:visible}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--blanco);z-index:91;
  display:flex;flex-direction:column;height:100dvh;max-height:100dvh;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.cajon-cab{flex:0 0 auto}
.cajon.abierto{transform:none}
.cajon-cab{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  border-bottom:2px solid var(--negro)}
.cajon-cab h3{font-size:17px;font-style:italic;text-transform:uppercase}
.cajon-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.cajon-cpo{padding:6px 18px}
.item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--humo-2)}
.item .ph{width:58px;border-radius:5px;flex:none}
.item .ph b{font-size:9px}.item .ph i{display:none}
.item-n{font-size:14px;font-weight:800;line-height:1.25}
.item-m{font-size:12.5px;color:var(--texto-2);margin-bottom:7px}
.item-f{display:flex;align-items:center;gap:10px}
.item-p{margin-left:auto;font-weight:800;font-size:14.5px}
.quitar{font-size:12.5px;color:var(--texto-3);text-decoration:underline;transition:color var(--t)}
.quitar:hover{color:var(--negro)}
.cajon-pie{border-top:1px solid var(--linea);padding:16px 18px;background:var(--humo)}
.cajon-cta{flex:0 0 auto;border-top:2px solid var(--negro);background:var(--blanco);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 22px -18px rgba(0,0,0,.45)}
.cajon-cta:empty{display:none}
.cajon-cta .linea-tot.grande{margin:0 0 10px}
.linea-tot{display:flex;justify-content:space-between;font-size:14px;color:var(--texto-2);margin-bottom:6px;gap:12px}
.linea-tot.grande{font-size:20px;font-weight:800;color:var(--texto);margin:10px 0 14px;letter-spacing:-.02em}
.ahorro{color:var(--exito);font-weight:700}
.envio-av{font-size:12.5px;background:var(--negro);color:#fff;border-radius:var(--r);
  padding:10px 12px;margin-bottom:12px;font-weight:700}
.envio-av.ok{background:var(--exito)}
.progreso{height:5px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:8px;overflow:hidden}
.progreso i{display:block;height:100%;background:var(--amarillo);border-radius:3px;transition:width .3s}


/* ============================================================
   AJUSTES DEL PORTE A WORDPRESS
   ============================================================ */

/* Listado sin widgets de filtro: una sola columna a todo el ancho. */
.layout-solo{grid-template-columns:1fr}
.cat-hero-desc p{margin:0}

/* Aviso de tienda de WooCommerce (woocommerce_demo_store).
   Es contenido real que administra el cliente, asi que se conserva y se
   viste como la barra de aviso del prototipo en lugar de ocultarlo.
   Solo se ve cuando la barra del tema esta vacia: las dos a la vez salian
   una encima de otra. La regla esta en inc/aviso.php.
   Arranca oculto, como en la hoja de Woo: woocommerce.js lo muestra con
   .show() salvo que el visitante ya lo haya descartado. Con display:block
   aparecia en cada carga y desaparecia al llegar el JS, moviendo la pagina. */
.woocommerce-store-notice{
  display:none;background:var(--negro-2);color:#B9B9C0;font-size:12.5px;
  padding:8px 20px;text-align:center;margin:0;position:relative}
.woocommerce-store-notice a{color:var(--amarillo);font-weight:700}
.woocommerce-store-notice__dismiss-link{
  margin-left:10px;text-decoration:underline;white-space:nowrap}

/* El contenedor que WooCommerce reemplaza por AJAX no debe crear una caja:
   con display:contents sus hijos (.cajon-scroll y .cajon-cta) siguen siendo
   hijos de flex de .cajon, que es lo que el diseno espera. */
.widget_shopping_cart_content{display:contents}

/* Cantidad de la linea en el cajon. El prototipo trae +/- en vivo; cambiar
   cantidades por AJAX es comportamiento nuevo y queda fuera de alcance, asi
   que aqui se muestra el numero y se conserva el enlace de quitar. */
.item-cant{font-size:13px;font-weight:700;color:var(--texto-2)}
.item .ph-img img{width:100%;height:auto;display:block;border-radius:5px}

/* Filtros del listado (inc/filtros.php). La columna se estira a la altura de
   la fila para que .filtros pueda quedarse pegada al bajar. */
.filtros-col{align-self:stretch}
.filtros-acc{display:grid;gap:8px}
.filtros-quitar{font-size:13px;font-weight:700;text-decoration:underline;color:var(--texto-2);text-align:center}
[data-filtros].cargando{opacity:.55;pointer-events:none}
.filtros-acc [hidden]{display:none}

/* Tarjetas de subcategoria del listado: el titulo y la descripcion van dentro
   de .cat-lista (flex con wrap) y en pantallas medianas se ponian en renglon. */
.cat .cat-lista>:is(h3,p){flex-basis:100%}