/*
Theme Name: El Hornero
Theme URI: http://elhornero.local
Description: Tema de Supermercado El Hornero. Hijo de Storefront: toma de el toda la maquinaria de WooCommerce (grillas, ficha, carrito, checkout) y le pone encima el diseno de la maqueta — la paleta del logo, la barra de rubros con sus sub-rubros, y las tarjetas de producto.
Author: El Hornero
Template: storefront
Version: 1.9.51
Text Domain: hornero
*/

/* ══════════════════════════════════════════════════════════════════════
   LOS COLORES SALEN DEL LOGO, no de un gusto: el azul y el dorado estan
   muestreados del ovalo. Se conservan los nombres de variable de la
   maqueta para que las dos hojas se puedan comparar renglon a renglon.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --rojo:#334B7C;        /* el azul de la marca (nombre heredado) */
  --rojo-osc:#22345A;
  --amarillo:#E3CB55;
  --dorado:#CCB43E;
  --tinta:#1c1f23;
  --gris:#6b737c;
  --linea:#e6e9ed;
  --fondo:#f6f7f9;
  --radio:14px;
  --ancho:1180px;
}

body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
}
body,button,input,select,textarea{
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.col-full{max-width:var(--ancho)}
a{color:var(--rojo)}
img{max-width:100%;height:auto}

/* ── CABECERA ──────────────────────────────────────────────────────── */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--linea);
  /* 18/09: la cabecera medía 118 px (88 de logo + 28 de aire) y se
     comía la primera pantalla entera. A la mitad: 60 px. */
  padding-top:8px;
  padding-bottom:8px;
  box-shadow:none;
}
.site-header .site-branding{margin-bottom:0}
.site-header .custom-logo-link img,
.site-header .site-logo-anchor img{
  height:44px;width:auto;max-height:44px;
}
@media(max-width:600px){
  .site-header .custom-logo-link img,
  .site-header .site-logo-anchor img{height:34px;max-height:34px}
}

/* LA CABECERA, EN UN SOLO RENGLON.
   Al sacar el menu principal de Storefront, el carrito se quedo sin la
   fila donde vivia y bajo solo, dejando la cabecera de dos pisos altos y
   medio vacios. Se rearma como una fila flex: marca a la izquierda,
   buscador en el medio, carrito a la derecha — que es el orden de la
   maqueta y el de cualquier supermercado online. */
.site-header .col-full{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.site-header .site-branding{flex:0 0 auto;width:auto;float:none;margin:0;padding:0}
.site-header .site-search{
  flex:1 1 260px;order:2;margin:0;width:auto;float:none;max-width:640px;
}
.site-header .site-header-cart{
  order:3;margin:0 0 0 auto;width:auto;float:none;padding:0;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.site-header .site-header-cart li{margin:0;list-style:none}
@media(max-width:600px){
  .site-header .site-search{order:4;flex:1 1 100%}
}
.site-header .site-title a,.site-header .site-description{color:var(--tinta)}
.site-header .site-description{display:none}

/* el buscador redondo de la maqueta */
.site-search .widget_product_search form,
.site-header .widget_product_search form{
  display:flex;border:1.5px solid var(--linea);border-radius:99px;
  overflow:hidden;background:#fff;
}
.site-search .widget_product_search input[type="search"],
.site-header .widget_product_search input[type="search"]{
  border:0;padding:9px 18px;background:#fff;box-shadow:none;flex:1;
}
.site-search .widget_product_search button,
.site-header .widget_product_search button[type="submit"]{
  background:var(--rojo);color:#fff;border:0;border-radius:0;padding:0 18px;
}

/* el contador del carrito de Storefront, con el azul de la marca */
.site-header-cart .cart-contents{color:var(--tinta)}
.site-header-cart .cart-contents .count{
  background:var(--rojo);color:#fff;border-radius:99px;padding:2px 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   LA BARRA DE RUBROS  (la dibuja functions.php)
   OJO CON overflow-x: un hijo posicionado en absoluto —el desplegable—
   NO puede salirse de un padre con overflow, y queda recortado sin que
   nada lo explique. Por eso la barra queda visible en escritorio y solo
   se vuelve deslizable en el celular, donde no hay desplegable.
   Y el ">" en `.hornero-rubros>ul` tampoco es decoracion: sin el, la
   regla alcanza tambien al <ul> del desplegable y lo vuelve flex, con lo
   que los menus quedan los tres abiertos a la vez.
   ══════════════════════════════════════════════════════════════════════ */
.hornero-rubros{background:var(--rojo)}
.hornero-rubros>ul{
  max-width:var(--ancho);margin:0 auto;padding:0 18px;
  display:flex;gap:2px;list-style:none;overflow:visible;flex-wrap:wrap;
}
.hornero-rubros>ul>li{position:relative;margin:0}
.hornero-rubros a{
  display:block;padding:13px 16px;color:#fff;text-decoration:none;
  font-size:14.5px;white-space:nowrap;opacity:.95;
}
.hornero-rubros a:hover,.hornero-rubros a.act{background:var(--rojo-osc);opacity:1}
.hornero-rubros .flecha{font-size:11px;opacity:.7;margin-left:5px}
.hornero-rubros .desplegable{
  display:none;position:absolute;left:0;top:100%;background:#fff;
  min-width:236px;max-height:70vh;overflow:auto;z-index:300;
  box-shadow:0 10px 28px rgba(20,24,28,.22);
  border-radius:0 0 12px 12px;padding:6px 0;list-style:none;margin:0;
}
.hornero-rubros>ul>li:hover .desplegable{display:block}
.hornero-rubros .desplegable a{color:#39414a;padding:9px 18px;font-size:14px;opacity:1}
.hornero-rubros .desplegable a:hover{background:var(--fondo);color:var(--rojo)}
.hornero-rubros .desplegable .todo{font-weight:700;color:var(--rojo)}
.hornero-rubros .desplegable .todo:after{
  content:"";display:block;border-bottom:1px solid var(--linea);margin:8px -18px -4px;
}
.hornero-rubros .chico{opacity:.6;font-size:12px}
@media(max-width:900px){
  .hornero-rubros>ul{overflow-x:auto;flex-wrap:nowrap}
  .hornero-rubros .desplegable{display:none !important}
}

/* ── TITULOS Y MIGAS ───────────────────────────────────────────────── */
.woocommerce-breadcrumb{color:var(--gris);font-size:13px}
.woocommerce-breadcrumb a{color:var(--gris);text-decoration:none}
.woocommerce-breadcrumb a:hover{color:var(--rojo)}
.woocommerce-products-header__title,
.entry-title{font:700 27px/1.25 system-ui;color:var(--tinta)}

/* ══════════════════════════════════════════════════════════════════════
   LAS TARJETAS DE PRODUCTO

   OJO CON LOS SELECTORES: Storefront escribe sus anchos como
   `.site-main ul.products li.product`. Con `.woocommerce ul.products
   li.product` empatabamos en especificidad y el desempate lo decidia el
   orden de las hojas — que es justo lo que fallaba. Se agrega `.site-main`
   para ganar por especificidad y no por suerte.

   La foto va en una caja de alto fijo con la imagen "contain" adentro:
   asi todas las tarjetas miden lo mismo aunque el producto sea una
   botella alta o un paquete ancho, y ninguna foto se recorta.
   ══════════════════════════════════════════════════════════════════════ */
.woocommerce .site-main ul.products,
.woocommerce-page .site-main ul.products{
  display:grid;gap:14px;align-content:start;margin:0 0 24px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
}
.woocommerce .site-main ul.products::before,
.woocommerce .site-main ul.products::after{content:none;display:none}

/* EL ANCHO, A LA FUERZA — y con motivo.
   WooCommerce escribe el suyo como
       .woocommerce ul.products[class*="columns-"] li.product { width:22.05% }
   El `[class*=...]` cuenta como clase, asi que empata en especificidad con
   cualquier selector razonable de este tema, y el desempate lo decide el
   orden en que el navegador recibio las hojas — algo que no controlamos y
   que puede cambiar con cualquier actualizacion de WooCommerce.
   Subir la especificidad seria una carrera sin final. Se declara ganador
   una vez y se documenta: estas cuatro propiedades son el layout de la
   grilla, y la grilla la maneja este tema. */
.woocommerce .site-main ul.products li.product,
.woocommerce-page .site-main ul.products li.product,
.woocommerce .site-main ul.products[class*="columns-"] li.product,
.woocommerce-page .site-main ul.products[class*="columns-"] li.product{
  width:100% !important;
  float:none !important;
  margin:0 !important;
  clear:none !important;
}

.woocommerce .site-main ul.products li.product,
.woocommerce-page .site-main ul.products li.product{
  padding:0;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:box-shadow .15s ease,transform .15s var(--ease-out);
}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.woocommerce .site-main ul.products li.product:hover{
  box-shadow:0 6px 22px rgba(20,24,28,.10);transform:translateY(-2px);
}}
.woocommerce .site-main ul.products li.product a img{
  height:172px;width:100%;object-fit:contain;background:#fff;
  padding:14px;margin:0;box-shadow:none;border-radius:0;
}
.woocommerce .site-main ul.products li.product .woocommerce-loop-product__title{
  padding:0 14px;margin:0 0 8px;font-size:13.5px;line-height:1.35;
  color:#39414a;min-height:37px;font-weight:400;
}
.woocommerce .site-main ul.products li.product .price{
  padding:0 14px;margin:0 0 12px;color:var(--tinta);
  font:700 20px/1 system-ui;letter-spacing:-.3px;
}
.woocommerce .site-main ul.products li.product .price del{
  font:400 13px system-ui;color:var(--gris);opacity:1;
}
.woocommerce .site-main ul.products li.product .price ins{
  text-decoration:none;font-weight:700;
}
.woocommerce .site-main ul.products li.product .button,
.woocommerce .site-main ul.products li.product .added_to_cart{
  margin:auto 14px 14px;border:1.5px solid var(--rojo);background:#fff;
  color:var(--rojo);border-radius:9px;padding:9px;font:600 14px system-ui;
  text-align:center;display:block;width:auto;
}
.woocommerce .site-main ul.products li.product .button:hover,
.woocommerce .site-main ul.products li.product .added_to_cart:hover{
  background:var(--rojo);color:#fff;border-color:var(--rojo);
}
.woocommerce span.onsale{
  background:var(--amarillo);color:#3d3410;font:800 10.5px system-ui;
  letter-spacing:.7px;padding:5px 9px;border-radius:6px;min-height:0;
  min-width:0;line-height:1.4;top:10px;left:10px;right:auto;margin:0;
}

/* Storefront reserva el hueco de la barra lateral aunque no haya barra. */
.storefront-full-width-content .content-area{width:100%;float:none;margin:0}
.storefront-full-width-content .widget-area{display:none}

/* ── FICHA DE PRODUCTO ─────────────────────────────────────────────── */
.single-product div.product{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:32px;
}
.single-product div.product .product_title{font:700 27px/1.25 system-ui;margin-bottom:6px}
.single-product div.product p.price{font:800 40px/1 system-ui;letter-spacing:-1.2px;color:var(--tinta)}
.single-product div.product .stock.in-stock{color:#1e7d32}
.single-product .woocommerce-product-gallery img{object-fit:contain}

/* ── BOTONES GENERALES ─────────────────────────────────────────────── */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--rojo);color:#fff;border-radius:9px;font-weight:600;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--rojo-osc);color:#fff}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button{border-radius:9px;font-weight:600}

/* ── CARRITO Y CHECKOUT ────────────────────────────────────────────── */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;
}

/* ── PIE ───────────────────────────────────────────────────────────── */
.site-footer{background:#1c1f23;color:#98a1ab;margin-top:40px}
.site-footer a{color:#c9d1d9}
.site-footer h2,.site-footer h3,.site-footer .widget-title{color:#fff}

/* ══════════════════════════════════════════════════════════════════════
   LA COLUMNA DE SUB-RUBROS
   ══════════════════════════════════════════════════════════════════════ */
.hornero-con-rubro{
  display:grid;grid-template-columns:216px 1fr;gap:26px;align-items:start;
}
.hornero-aside{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;align-self:start;position:sticky;top:16px;
  max-height:calc(100vh - 32px);overflow:auto;
}
.hornero-aside h4{
  margin:0 0 10px;font:700 13px system-ui;text-transform:uppercase;
  letter-spacing:.8px;color:var(--gris);
}
.hornero-aside ul{list-style:none;margin:0;padding:0}
.hornero-aside li{margin:0}
.hornero-aside li a{
  display:block;padding:7px 0;color:#39414a;text-decoration:none;font-size:14.5px;
}
.hornero-aside li a:hover{color:var(--rojo)}
.hornero-aside li a.act{color:var(--rojo);font-weight:700}
.hornero-aside .chico{color:var(--gris);font-size:12.5px}

@media(max-width:900px){
  .hornero-con-rubro{grid-template-columns:1fr}
  .hornero-aside{display:none}
}

/* ── el aire de mas que deja Storefront ────────────────────────────── */
.woocommerce-products-header{margin-bottom:10px}
.woocommerce-products-header__title.page-title{margin-bottom:6px}
.site-content .col-full{padding-top:18px}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:14px}

/* ══════════════════════════════════════════════════════════════════════
   LA CABECERA PEGADA ARRIBA

   Son dos barras `sticky` una debajo de la otra. La de rubros no puede
   llevar un `top` fijo: tiene que pararse justo donde termina la
   cabecera, y ese alto cambia con el ancho de la pantalla y con la barra
   de administracion. Lo mide js/cabecera.js y lo deja en
   --alto-cabecera; el 60px de aca es el valor de reserva por si el
   script no llega a correr.
   ══════════════════════════════════════════════════════════════════════ */
/* 1.9.4: las curvas del tema en un solo lugar. --ease-out: respuesta fuerte
   para la interfaz; --ease-rebote: el pasado de largo de los festejos de oferta. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-rebote:cubic-bezier(.3,1.6,.5,1)}
.site-header{
  position:sticky;top:0;z-index:400;
  transition:padding .15s var(--ease-out);
}
.hornero-rubros{
  position:sticky;top:var(--alto-cabecera,60px);z-index:390;
}
/* La barra de administracion de WordPress ocupa los primeros 32 px y solo
   la ve quien esta logueado. Sin esto, la cabecera se le mete debajo. */
body.admin-bar .site-header{top:32px}
body.admin-bar .hornero-rubros{top:calc(var(--alto-cabecera,60px) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
  body.admin-bar .hornero-rubros{top:calc(var(--alto-cabecera,60px) + 46px)}
}

/* Al bajar, la cabecera se achica. El logo grande es para recibir; una
   vez que el cliente esta mirando gondola, la pantalla es suya.

   OJO SI SE TOCAN ESTOS NUMEROS: la diferencia de alto entre la cabecera
   normal y la achicada tiene que quedar MUY por debajo de la banda muerta
   de js/cabecera.js (ACHICAR_EN - AGRANDAR_EN). Si se achicara mas que
   esa banda, vuelve el tembleque: ahi esta explicado por que. */
.site-header.achicada{
  padding-top:4px;padding-bottom:4px;
  box-shadow:0 2px 12px rgba(20,24,28,.10);
}
.site-header.achicada .custom-logo-link img,
.site-header.achicada .site-logo-anchor img{
  height:32px;max-height:32px;
}

/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA
   ══════════════════════════════════════════════════════════════════════ */
.hornero-banner{
  background:linear-gradient(100deg,var(--rojo),var(--rojo-osc));
  border-radius:var(--radio);color:#fff;padding:34px;display:flex;
  align-items:center;gap:26px;margin:0 0 26px;
}
.hornero-banner h2{
  margin:0 0 6px;font:800 30px/1.15 Georgia,serif;color:#fff;
}
.hornero-banner p{margin:0;opacity:.9;font-size:15px}
.hornero-banner .sello{
  margin-left:auto;background:var(--amarillo);color:#3d3410;border-radius:50%;
  width:104px;height:104px;flex:0 0 104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font:800 13px/1.2 system-ui;
  text-align:center;transform:rotate(-8deg);
}
.hornero-banner .sello b{font-size:23px}

.hornero-sec{
  display:flex;align-items:baseline;font:700 20px/1 system-ui;
  margin:30px 0 14px;color:var(--tinta);
}
.hornero-sec small{font:400 14px system-ui;color:var(--gris);margin-left:10px}
.hornero-ver-todo{
  margin-left:auto;font:600 14px system-ui;color:var(--rojo);text-decoration:none;
}
.hornero-ver-todo:hover{text-decoration:underline}

@media(max-width:760px){
  .hornero-banner{padding:22px}
  .hornero-banner h2{font-size:23px}
  .hornero-banner .sello{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   POR QUE LA CABECERA NO SE QUEDABA ARRIBA

   Storefront trae `overflow-x:hidden` en `body` y en `.site`. Cualquier
   ancestro con overflow distinto de `visible` pasa a ser el contenedor de
   scroll de un hijo `position:sticky`; como esos dos no scrollean, el
   sticky no se activa nunca. El CSS estaba bien escrito y simplemente no
   hacia nada — no hay error, no hay aviso, no hay nada que inspeccionar.

   La respuesta no es `visible` a secas, porque ese overflow esta ahi para
   que no aparezca barra horizontal. `clip` recorta igual que `hidden`
   pero NO crea contenedor de scroll, que es exactamente lo que hace
   falta. Se declara `visible` primero como reserva: un navegador viejo
   que no entienda `clip` se queda con el sticky andando.
   ══════════════════════════════════════════════════════════════════════ */
body,.site{overflow-x:visible;overflow-x:clip}

/* ══════════════════════════════════════════════════════════════════════
   EL ROTADOR DE PROMOCIONES
   ══════════════════════════════════════════════════════════════════════ */
.hornero-promos{position:relative;margin:0 0 26px}
.promo{
  display:flex;align-items:center;gap:26px;padding:30px 34px;
  border-radius:var(--radio);min-height:190px;
}
.promo[hidden]{display:none}
.promo-texto{flex:1;min-width:0}
.promo-arriba{
  margin:0 0 6px;font:800 12px system-ui;letter-spacing:1.6px;
  text-transform:uppercase;opacity:.85;
}
.promo h2{margin:0;font:800 30px/1.15 Georgia,serif}
.promo-pie{margin:12px 0 0;font-size:13.5px;opacity:.8}
.promo-sello{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1;transform:rotate(-6deg);
}
.promo-sello b{font:900 62px/1 system-ui;letter-spacing:-3px}
.promo-sello span{
  font:800 15px system-ui;letter-spacing:2px;text-transform:uppercase;margin-top:4px;
}

/* Los tonos. Cada uno lleva su propio color de texto: el contraste se
   decide junto con el fondo, nunca se hereda. */
.promo.tono-oro{
  background:linear-gradient(100deg,var(--amarillo),var(--dorado));
  color:#2b2408;
}
.promo.tono-oro .promo-sello{color:#B0141C}
.promo.tono-azul{
  background:linear-gradient(100deg,var(--rojo),var(--rojo-osc));color:#fff;
}
.promo.tono-azul .promo-sello{color:var(--amarillo)}
.promo.tono-blanco{
  background:#fff;border:1px solid var(--linea);color:var(--tinta);
}
.promo.tono-blanco .promo-sello{color:var(--rojo)}

.promos-puntos{
  display:flex;gap:8px;justify-content:center;margin-top:12px;
}
.promos-puntos button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:#c7ccd3;cursor:pointer;transition:background .15s,transform .15s;
}
.promos-puntos button:hover{background:var(--gris)}
.promos-puntos button[aria-selected]{background:var(--rojo);transform:scale(1.25)}
.promos-puntos button:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

@media(max-width:760px){
  .promo{flex-direction:column;align-items:flex-start;gap:14px;padding:22px;
         min-height:0;text-align:left}
  .promo h2{font-size:22px}
  .promo-sello{flex-direction:row;align-items:baseline;gap:8px;transform:none}
  .promo-sello b{font-size:46px}
}

/* ══════════════════════════════════════════════════════════════════════
   EL CARRITO
   ══════════════════════════════════════════════════════════════════════ */
.woocommerce-cart table.cart th{
  background:var(--fondo);font:700 11px system-ui;color:var(--gris);
  letter-spacing:1px;text-transform:uppercase;
}
.woocommerce-cart table.cart td.product-thumbnail img{
  width:64px;height:64px;object-fit:contain;
}
.woocommerce-cart table.cart td.product-name a{
  color:#39414a;text-decoration:none;font-size:14.5px;
}
.woocommerce-cart table.cart td.product-name a:hover{color:var(--rojo)}
.woocommerce-cart .cart_totals h2{font:700 18px system-ui;margin:0 0 10px}
.woocommerce-cart .cart_totals .order-total .amount{font:800 22px system-ui}

/* Los tres botones del pie del carrito, en un renglon y en su orden de
   importancia: seguir comprando a la izquierda (lo mas probable),
   actualizar en el medio, vaciar al final y sin gritar — es destructivo,
   no se pone del color principal ni primero donde se aprieta sin mirar. */
.woocommerce-cart .actions .coupon{margin-bottom:10px}
.hornero-seguir{background:#fff !important;color:#39414a !important;
  border:1.5px solid var(--linea) !important}
@media (hover:hover) and (pointer:fine){
  .hornero-seguir:hover{border-color:var(--rojo) !important;color:var(--rojo) !important}
}
.hornero-vaciar{background:#fff !important;color:#8a4a4a !important;
  border:1.5px solid #e4cccc !important;float:right}
@media (hover:hover) and (pointer:fine){
  .hornero-vaciar:hover{background:#B0141C !important;color:#fff !important;
    border-color:#B0141C !important}
}

/* ══════════════════════════════════════════════════════════════════════
   LA FICHA DE PRODUCTO
   ══════════════════════════════════════════════════════════════════════ */
.hornero-ean{color:var(--gris);font-size:13px;margin:0 0 16px}
.single-product div.product .stock.in-stock:before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#1e7d32;margin-right:6px;vertical-align:middle;
}
.hornero-notas{
  margin:22px 0 0;padding-left:18px;color:var(--gris);font-size:14px;
}
.hornero-notas li{margin:0 0 4px}
.single-product div.product .quantity input.qty{
  border:1.5px solid var(--linea);border-radius:9px;height:48px;
}

/* ══════════════════════════════════════════════════════════════════════
   EL PIE
   ══════════════════════════════════════════════════════════════════════ */
.hornero-pie{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px;padding:34px 0 8px;font-size:14px;
}
.hornero-pie h5{color:#fff;margin:0 0 10px;font:700 14px system-ui}
.hornero-pie p{margin:0 0 5px;color:#98a1ab}
.hornero-pie a{color:#c9d1d9;text-decoration:none}
.hornero-pie a:hover{color:var(--amarillo)}
.hornero-pie-abajo{
  border-top:1px solid #2c333c;padding:16px 0 8px;
}
.hornero-pie-abajo p{margin:0;color:#6f7982;font-size:12.5px}

/* ══════════════════════════════════════════════════════════════════════
   EL CELULAR

   La mitad larga de las compras de un super entran por telefono, asi que
   esto no es un ajuste de ultimo momento.

   El minmax de 196px que sirve en escritorio deja UNA sola columna en una
   pantalla de 400px: 400 menos los margenes son 368, y no entran dos de
   196. Una gondola de una columna obliga a scrollear el triple. A 150px
   entran dos y las fotos se siguen viendo.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .woocommerce .site-main ul.products,
  .woocommerce-page .site-main ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  }
  .woocommerce .site-main ul.products li.product a img{height:132px;padding:10px}
  .woocommerce .site-main ul.products li.product .woocommerce-loop-product__title{
    padding:0 10px;font-size:12.5px;min-height:34px;
  }
  .woocommerce .site-main ul.products li.product .price{padding:0 10px;font-size:17px}
  .woocommerce .site-main ul.products li.product .button,
  .woocommerce .site-main ul.products li.product .added_to_cart{
    margin:auto 10px 10px;padding:8px;font-size:13px;
  }
  .hornero-rubros a{padding:11px 13px;font-size:13.5px}
  .site-header .col-full{gap:10px}
}

/* El pie del carrito en el celular: los botones uno debajo del otro y a
   todo el ancho. Tres botones chicos pegados en una pantalla tactil es
   como se aprieta "Vaciar" queriendo apretar "Actualizar". */
@media(max-width:600px){
  .woocommerce-cart .actions .button,
  .hornero-seguir,.hornero-vaciar{
    display:block;width:100%;float:none !important;margin:0 0 8px;
  }
}

/* "Inicio" en la barra de rubros: la salida de emergencia desde
   cualquier pantalla. Se separa del resto con una linea tenue para que
   se lea como lo que es — una cosa distinta de los rubros. */
.hornero-rubros a.inicio{
  font-weight:600;border-right:1px solid rgba(255,255,255,.18);margin-right:4px;
}

/* Las dos salidas del checkout. */
.hornero-salidas{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px;
}
.hornero-anular{
  background:#fff !important;color:#8a4a4a !important;
  border:1.5px solid #e4cccc !important;margin-left:auto;
}
.hornero-anular:hover{
  background:#B0141C !important;color:#fff !important;border-color:#B0141C !important;
}
@media(max-width:600px){
  .hornero-salidas{flex-direction:column;align-items:stretch}
  .hornero-anular{margin-left:0}
}

/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA NUEVA  (22/09/2026)

   Cuatro decisiones, y las cuatro tienen motivo:

   1. EL BANNER MIDE 62vh Y NO 100vh. Una portada que ocupa la pantalla
      entera obliga a bajar para ver el primer producto, y el que entra a
      un super online entra a ver góndola. Con 62vh se ve el banner Y
      asoma la fila de abajo: el ojo entiende que hay más.
   2. EL TEXTO VA SOBRE UN VELO OSCURO, no sobre la foto pelada. Una foto
      del local tiene zonas claras y oscuras que cambian con cada foto que
      suban; sin el velo, un título blanco desaparece sobre un techo
      blanco. El velo hace que el texto se lea SIEMPRE, sea cual sea la
      foto.
   3. LAS FOTOS ROTAN CON opacity Y NO cambiando el src: cambiar el src
      muestra un parpadeo blanco mientras baja la siguiente.
   4. EL BOTÓN DE WHATSAPP ES FIJO Y ESTÁ ABAJO A LA DERECHA, que es donde
      lo busca el pulgar y donde no tapa el precio de la ficha.
   ══════════════════════════════════════════════════════════════════════ */

.hh-hero{
  position:relative; overflow:hidden; border-radius:var(--radio);
  min-height:62vh; display:flex; align-items:flex-end;
  margin:0 0 26px; background:linear-gradient(120deg,var(--rojo),var(--rojo-osc));
  box-shadow:0 10px 30px rgba(34,52,90,.18);
}
.hh-hero-fondo{position:absolute; inset:0; z-index:0}
.hh-hero-fondo video,
.hh-hero-fondo iframe,
.hh-hero-fondo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0;
}
/* el iframe de YouTube no recorta solo: se agranda y se centra */
.hh-hero-fondo iframe{
  width:177.77vh; min-width:100%; height:56.25vw; min-height:100%;
  left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.hh-hero-fondo .hh-foto{opacity:0; transition:opacity .6s ease}   /* 1.9.4: era 1,1 s */
.hh-hero-fondo .hh-foto.es-visible{opacity:1}
/* el velo: oscuro abajo (donde va el texto) y transparente arriba */
.hh-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(18,26,45,.88) 0%,rgba(18,26,45,.55) 45%,rgba(18,26,45,.18) 100%);
}
.hh-hero-texto{position:relative; z-index:2; padding:38px 40px 34px; color:#fff; max-width:760px}
.hh-cinta{
  display:inline-block; margin:0 0 10px; padding:5px 12px; border-radius:999px;
  background:var(--amarillo); color:var(--rojo-osc);
  font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.hh-hero-texto h1{
  margin:0 0 10px; color:#fff; font-size:44px; line-height:1.08; font-weight:800;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hh-bajada{margin:0 0 20px; font-size:17px; line-height:1.5; opacity:.95; max-width:56ch}
.hh-botones{display:flex; flex-wrap:wrap; gap:10px}
.hh-boton{
  display:inline-block; padding:13px 22px; border-radius:999px;
  background:var(--amarillo); color:var(--rojo-osc) !important;
  font-weight:800; text-decoration:none; border:2px solid transparent;
  transition:transform .12s ease, background .15s ease;
}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.hh-boton:hover{transform:translateY(-2px); background:var(--dorado)}}
.hh-boton-claro{background:transparent; color:#fff !important; border-color:rgba(255,255,255,.75)}
.hh-boton-claro:hover{background:rgba(255,255,255,.14)}
.hh-boton-verde{background:#25D366; color:#0b3d20 !important}
.hh-boton-verde:hover{background:#1FBE5A}
.hh-horario{margin:16px 0 0; font-size:14px; opacity:.9}

.hh-bloque{margin:0 0 34px}

/* ── los rubros en tarjetas ─────────────────────────────────────────── */
.hh-rubros{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.hh-rubro{
  display:block; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; background:#fff; text-decoration:none; color:var(--tinta) !important;
  transition:transform .15s var(--ease-out), box-shadow .15s ease;
}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.hh-rubro:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(34,52,90,.14)}}
.hh-rubro-foto{
  display:block; height:132px; background-size:cover; background-position:center;
  background-color:var(--rojo);
  background-image:linear-gradient(135deg,var(--rojo),var(--rojo-osc));
}
.hh-rubro-txt{display:block; padding:12px 14px}
.hh-rubro-txt b{display:block; font-size:15px; line-height:1.2}
.hh-rubro-txt small{color:var(--gris); font-size:12.5px}

/* ── nosotros + mapa ────────────────────────────────────────────────── */
.hh-doble{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.hh-nosotros p{line-height:1.6; color:#333}
.hh-datos{list-style:none; margin:18px 0; padding:0}
.hh-datos li{padding:7px 0; border-bottom:1px dashed var(--linea); font-size:15px}
.hh-datos li b{color:var(--rojo-osc)}
.hh-mapa{border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:#fff}
.hh-mapa iframe{display:block; width:100%; height:420px; border:0}

/* ── las redes ──────────────────────────────────────────────────────── */
.hh-redes-caja{display:flex; gap:10px; margin:16px 0}
.hh-redes-caja a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--rojo); transition:transform .15s var(--ease-out), background .15s ease;
}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.hh-redes-caja a:hover{transform:translateY(-2px); background:var(--rojo-osc)}}
.hh-redes-caja svg{width:21px; height:21px; fill:#fff}

/* ── el botón flotante ──────────────────────────────────────────────── */
.hh-wa{
  position:fixed; right:18px; bottom:18px; z-index:999;
  display:flex; align-items:center; gap:9px; padding:12px 18px 12px 14px;
  border-radius:999px; background:#25D366; color:#08351b !important;
  font-weight:800; text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.hh-wa svg{width:23px; height:23px; fill:#08351b}
.hh-wa:hover{background:#1FBE5A}

@media(max-width:980px){
  .hh-rubros{grid-template-columns:repeat(3,1fr)}
  .hh-doble{grid-template-columns:1fr}
  .hh-mapa iframe{height:320px}
}
@media(max-width:760px){
  .hh-hero{min-height:56vh}
  .hh-hero-texto{padding:24px 20px 22px}
  .hh-hero-texto h1{font-size:30px}
  .hh-bajada{font-size:15px}
  .hh-rubros{grid-template-columns:repeat(2,1fr)}
  .hh-rubro-foto{height:104px}
  .hh-wa span{display:none}
  .hh-wa{padding:14px; right:14px; bottom:14px}
}

/* la tira de fotos del local, en "Nosotros" */
.hh-galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0}
.hh-galeria img{
  width:100%; height:92px; object-fit:cover; border-radius:10px;
  border:1px solid var(--linea);
}
@media(max-width:760px){ .hh-galeria img{height:74px} }

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTOS POR KILO (inc/pesables.php, 23/09/2026)
   ══════════════════════════════════════════════════════════════════════ */
.hornero-kilo-u { font-size: .8em; font-weight: 400; opacity: .75; }
/* tamaño FIJO, no relativo: en la ficha el precio es enorme y un .78em
   de eso seguía siendo enorme (visto el 23/09 en el queso Holanda) */
small.hornero-paso,
.single-product .summary .price small.hornero-paso {
	display: block; font-size: 14px !important; font-weight: 400 !important;
	line-height: 1.4; opacity: .75; margin-top: 4px; letter-spacing: 0;
}
.hornero-cant-peso { display: inline-block; margin: 0 .8em; font-size: .95em; vertical-align: middle; }
.hornero-cant-peso b { color: #24406e; }
.hornero-aviso-kilo {
	background: #fff7d6; border-left: 4px solid #f2c230; padding: .7em 1em;
	border-radius: 4px; font-size: .95em; margin-bottom: 1.2em;
}
/* 1.8.12: el aviso "sin pasarnos" en la ficha, más chico y pegado al botón */
.hornero-aviso-ficha { font-size: 14px; margin: .6em 0 1em; line-height: 1.45; }


/* ══════════════════════════════════════════════════════════════════════
   LA CABECERA NUEVA  (inc/cabecera.php, 24/09/2026)
   Medía 196 px en tres pisos: el carrito había quedado afuera de la fila
   y el logo se estiraba a 872 px de ancho (la imagen mide 97). Ahora es
   UNA fila de ~72 px: logo grande, buscador ancho, carrito — y arriba una
   franja fina con retiro, envío, horario y WhatsApp.
   ══════════════════════════════════════════════════════════════════════ */
.hornero-franja{background:var(--rojo-osc);color:#fff;font-size:13px}
.hornero-franja-in{
  display:flex;align-items:center;justify-content:center;gap:26px;
  padding-top:7px;padding-bottom:7px;flex-wrap:nowrap;overflow:hidden;
}
.hornero-franja .hf-item{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  color:rgba(255,255,255,.88);
}
.hornero-franja .hf-item b{color:#fff;font-weight:600}
.hornero-franja svg{width:16px;height:16px;flex:0 0 16px;color:var(--amarillo)}
.hornero-franja a.hf-wa{
  color:#fff;text-decoration:none;font-weight:600;
  background:rgba(37,211,102,.18);border-radius:99px;padding:3px 12px;
}
.hornero-franja a.hf-wa svg{color:#25d366}
.hornero-franja a.hf-wa:hover{background:rgba(37,211,102,.32)}

/* la fila: logo - buscador - carrito, sin pisos */
.site-header{padding-top:12px;padding-bottom:12px}
.site-header .col-full{flex-wrap:nowrap;gap:28px}
.site-header .col-full::before,.site-header .col-full::after{display:none}
.site-header .site-branding,
.site-header .site-branding .logo,
.site-header .custom-logo-link{
  width:auto !important;max-width:none;flex:0 0 auto;display:block;margin:0;
}
.site-header .custom-logo-link img,
.site-header .site-logo-anchor img{height:58px;max-height:58px;
  /* 1.9.4: acá y no en .achicada, para que anime al achicarse Y al volver */
  transition:height .15s var(--ease-out),max-height .15s var(--ease-out)}
.site-header .site-search{flex:1 1 auto;max-width:720px;margin:0 auto}
.site-header .widget_product_search form{border-width:2px;border-color:var(--rojo)}
.site-header .widget_product_search input[type="search"]{
  padding:12px 20px;font-size:15px;
}
.site-header .site-header-cart{margin:0;flex:0 0 auto}
.site-header .site-header-cart .cart-contents{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  border:2px solid var(--linea);border-radius:99px;background:#fff;
  font-weight:700;color:var(--tinta);text-decoration:none;
  transition:border-color .15s ease;
}
.site-header .site-header-cart .cart-contents:hover{border-color:var(--rojo)}
.site-header .site-header-cart .cart-contents::after{
  /* el icono de canasto de Storefront va a la izquierda */
  order:-1;margin:0;font-size:18px;color:var(--rojo);
}
.site-header .site-header-cart .cart-contents .count{
  background:var(--amarillo);color:var(--tinta);font-weight:800;
  font-size:12px;padding:2px 9px;opacity:1;
}
.site-header.achicada .custom-logo-link img,
.site-header.achicada .site-logo-anchor img{height:42px;max-height:42px}

@media(max-width:900px){
  .hornero-franja .hf-horario{display:none}
  .site-header .col-full{gap:14px}
}
@media(max-width:600px){
  /* en el teléfono la franja muestra lo primero y se puede deslizar */
  .hornero-franja-in{justify-content:flex-start;overflow-x:auto;gap:18px;
    scrollbar-width:none}
  .hornero-franja-in::-webkit-scrollbar{display:none}
  .site-header .col-full{flex-wrap:wrap;gap:10px}
  .site-header .custom-logo-link img,
  .site-header .site-logo-anchor img{height:40px;max-height:40px}
  .site-header .site-header-cart{margin-left:auto}
  .site-header .site-header-cart .cart-contents{padding:7px 12px}
  .site-header .site-header-cart .cart-contents .amount{display:none}
  .site-header .site-search{order:4;flex:1 1 100%;max-width:none}
}

/* Storefront le pone a la cabecera 4.2em de margen abajo (68 px): era la
   banda gris vacia entre la cabecera y la barra de rubros. */
.site-header{margin-bottom:0}
/* Storefront pinta TODOS los h1-h6 de #333, y eso le gana al color que
   heredan de la tarjeta: en las promos oscuras (Cuenta DNI) el titulo
   salia gris sobre azul. Los titulos de una promo toman el color de ella. */
.promo h1,.promo h2,.promo h3,.promo h4,
.hornero-banner h1,.hornero-banner h2,.hornero-banner h3{color:inherit}

/* ══════════════════════════════════════════════════════════════════════
   EL CELULAR  (24/09/2026, visto en una vista de 390 px)
   ══════════════════════════════════════════════════════════════════════ */
/* Storefront vuelve a poner el margen de 4.2em en la PORTADA con una regla
   mas especifica (.home.blog .site-header): la banda gris seguia ahi. */
body .site-header,
.home.blog .site-header,
.home.page .site-header,
.home.post-type-archive-product .site-header{margin-bottom:0 !important}

/* Storefront esconde el buscador en el telefono y lo deja solo en la lupa
   de la barra de abajo. En un super el buscador ES la navegacion: va
   arriba, a la vista, en su propio renglon. */
@media(max-width:767px){
  .site-header .site-search{display:block !important;order:4;flex:1 1 100%;
    max-width:none;margin:2px 0 0}
  .site-header .widget_product_search input[type="search"]{padding:10px 16px}
}

/* la barra de rubros se desliza con el dedo; la barrita gris de
   desplazamiento sobra (y en Windows se ve como un error) */
.hornero-rubros,.hornero-rubros *{scrollbar-width:none}
.hornero-rubros::-webkit-scrollbar,
.hornero-rubros *::-webkit-scrollbar{display:none;height:0}

/* la barra fija de abajo (cuenta - buscar - carrito), con la marca */
.storefront-handheld-footer-bar{
  background:#fff;border-top:1px solid var(--linea);
  box-shadow:0 -4px 16px rgba(20,24,28,.08);
}
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search{background:#fff}
.storefront-handheld-footer-bar ul li > a{color:var(--rojo)}
.storefront-handheld-footer-bar ul li > a::before{color:var(--rojo)}
.storefront-handheld-footer-bar ul li.cart .count{
  background:var(--amarillo);color:var(--tinta);border:2px solid #fff;
  font-weight:800;
}
.storefront-handheld-footer-bar ul li{border-right:1px solid var(--linea)}
.storefront-handheld-footer-bar ul li:last-child{border-right:0}

/* ══════════════════════════════════════════════════════════════════════
   EL CELULAR, SEGUNDA VUELTA  (24/09/2026, visto en el iPhone de Aníbal)
   ══════════════════════════════════════════════════════════════════════ */
/* 1) La portada se veía POR ENCIMA de la cabecera al bajar. En pantallas
   de hasta 600 px WordPress no deja fija su barra negra de administración
   (se va con el scroll), pero la cabecera seguía corrida 46 px hacia abajo
   para dejarle lugar: en ese hueco se asomaba el banner. Solo le pasa al
   que está logueado, pero es feo igual. */
@media screen and (max-width:600px){
  body.admin-bar .site-header{top:0}
  body.admin-bar .hornero-rubros{top:var(--alto-cabecera,60px)}
}

/* 2) Cabecera de UN renglón en el teléfono: logo + buscador. El carrito ya
   está en la barra fija de abajo (con su contador); repetirlo arriba
   costaba un renglón entero de pantalla. */
@media(max-width:600px){
  .site-header{padding-top:8px;padding-bottom:8px}
  .site-header .col-full{flex-wrap:nowrap;gap:10px;align-items:center}
  .site-header .site-header-cart{display:none}
  .site-header .site-search{order:2;flex:1 1 auto;margin:0}
  .site-header .custom-logo-link img,
  .site-header .site-logo-anchor img{height:38px;max-height:38px}
  .site-header.achicada .custom-logo-link img,
  .site-header.achicada .site-logo-anchor img{height:32px;max-height:32px}
  .site-header .widget_product_search input[type="search"]{
    padding:9px 12px;font-size:16px /* 16: si es menos, el iPhone hace zoom al tocar */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LOS SUB-RUBROS EN EL TELÉFONO  (24/09/2026)
   En el celular el desplegable del menú no se abre con el dedo (el toque
   va directo al rubro) y la columna de la izquierda estaba OCULTA abajo
   de 900 px: no había forma de llegar a un sub-rubro. Ahora esa misma
   columna se vuelve una tira de botones que se desliza con el dedo,
   arriba de los productos, con el sub-rubro actual marcado.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .hornero-aside{
    display:block;position:static;max-height:none;overflow:visible;
    background:none;border:0;padding:0;margin:0 0 14px;
  }
  .hornero-aside h4{display:none}
  .hornero-aside ul{
    display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .hornero-aside ul::-webkit-scrollbar{display:none}
  .hornero-aside li{flex:0 0 auto}
  .hornero-aside li a{
    display:inline-block;white-space:nowrap;padding:8px 14px;
    background:#fff;border:1.5px solid var(--linea);border-radius:99px;
    font-size:14px;color:var(--tinta);
  }
  .hornero-aside li a.act{
    background:var(--rojo);border-color:var(--rojo);color:#fff;
  }
  .hornero-aside li a.act .chico{color:rgba(255,255,255,.75)}
}

/* ══════════════════════════════════════════════════════════════════════
   EL TELÉFONO, TERCERA VUELTA  (24/09/2026, capturas del iPhone)
   ══════════════════════════════════════════════════════════════════════ */
/* 1) PRODUCTOS CORTADOS POR LA MITAD y BARRA QUE "NO SE MUEVE".
   Una sola causa: la fila de botones de sub-rubros (deslizable) está
   adentro de una grilla, y una celda de grilla por defecto se estira
   hasta el ancho de TODO su contenido. La tira de botones medía como 2000
   px, la celda también, y la página entera quedó más ancha que el
   teléfono: el dedo arrastraba la página en vez de la barra, y las
   tarjetas salían cortadas. min-width:0 le pone techo al ancho. */
.hornero-con-rubro > *,
.hornero-listado,
.hornero-aside{min-width:0;max-width:100%}
html,body{overflow-x:hidden}

/* 2) LA BARRA DE RUBROS SE DESLIZA CON EL DEDO */
@media(max-width:900px){
  .hornero-rubros>ul{
    overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;
    padding:0 6px;
  }
  .hornero-rubros a{padding:12px 13px;font-size:14px}
  .hornero-rubros a.abierto{background:var(--rojo-osc)}
  .hornero-rubros a.abierto .flecha{display:inline-block;transform:rotate(180deg)}
}

/* 3) LA FILA DE SUB-RUBROS, debajo de la barra (la arma js/rubros.js) */
.hornero-subfila{background:var(--rojo-osc);padding:8px 0}
.hornero-subfila[hidden]{display:none}
.hornero-subfila ul{
  list-style:none;margin:0;padding:0 10px;display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hornero-subfila ul::-webkit-scrollbar{display:none}
.hornero-subfila li{flex:0 0 auto;margin:0}
.hornero-subfila a{
  display:inline-block;white-space:nowrap;padding:7px 13px;
  background:rgba(255,255,255,.12);color:#fff;border-radius:99px;
  font-size:13.5px;text-decoration:none;
}
.hornero-subfila a.todo{background:var(--amarillo);color:var(--tinta);font-weight:700}
.hornero-subfila a.act{background:#fff;color:var(--rojo);font-weight:700}
.hornero-subfila .chico{opacity:.7;font-size:11.5px}

/* 4) DOS PRODUCTOS POR RENGLÓN, CUATRO POR PANTALLA */
@media(max-width:600px){
  .col-full{padding-left:12px;padding-right:12px}
  .woocommerce .site-main ul.products,
  .woocommerce-page .site-main ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  }
  .woocommerce .site-main ul.products li.product a img{height:118px;padding:10px}
  .woocommerce .site-main ul.products li.product .woocommerce-loop-product__title{
    padding:0 10px;font-size:12.5px;min-height:34px;margin-bottom:6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .woocommerce .site-main ul.products li.product .price{
    padding:0 10px;font-size:17px;margin-bottom:8px;
  }
  .woocommerce .site-main ul.products li.product .button,
  .woocommerce .site-main ul.products li.product .added_to_cart{
    margin:auto 10px 10px;padding:7px 4px;font-size:13px;
  }
  /* el orden y "Mostrando 1–24 de 445" en un solo renglón, chicos */
  .woocommerce-products-header__title,.page-title{font-size:22px !important}
  .storefront-sorting{display:flex;align-items:center;justify-content:space-between;
    gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
  .storefront-sorting .woocommerce-ordering,
  .storefront-sorting .woocommerce-result-count{margin:0}
  .storefront-sorting .woocommerce-pagination{display:none}
}

/* LA FILA DE SUB-RUBROS, VERTICAL  (24/09/2026, pedido de Aníbal)
   En vez de una tira que se desliza de costado: una lista hacia abajo de
   CINCO renglones a la vista, y si hay más, se desplaza con el dedo
   adentro de la lista (la página no se mueve). Una sombra abajo avisa que
   hay más. */
.hornero-subfila{padding:6px 0 8px}
.hornero-subfila ul{
  display:block;overflow-x:hidden;overflow-y:auto;padding:0 10px;
  max-height:calc(5 * 44px);overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(#000 calc(100% - 22px),transparent);
}
.hornero-subfila li{display:block;margin:0}
.hornero-subfila a{
  display:flex;justify-content:space-between;align-items:center;
  height:44px;padding:0 14px;border-radius:0;background:none;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hornero-subfila a.todo{
  background:none;color:var(--amarillo);font-weight:700;
}
.hornero-subfila a.act{background:rgba(255,255,255,.14);color:#fff}
.hornero-subfila .chico{flex:0 0 auto;margin-left:10px}

/* LA LISTA DE SUB-RUBROS, ANGOSTA  (24/09/2026, pedido de Aníbal)
   Ya no ocupa todo el ancho: es un desplegable del ancho de su texto,
   debajo del rubro tocado (la posición la pone js/rubros.js), flotando
   encima de la página. Letra chica, renglones bajos. */
.hornero-rubros{position:sticky}
.hornero-subfila{
  position:absolute;top:100%;left:6px;z-index:420;
  width:max-content;min-width:150px;max-width:62vw;
  padding:4px 0;border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(10,20,40,.35);
}
.hornero-subfila ul{padding:0;max-height:calc(5 * 34px)}
.hornero-subfila a{
  height:34px;padding:0 12px;font-size:12.5px;letter-spacing:0;
}
.hornero-subfila .chico{font-size:10.5px;margin-left:8px}

/* ══════════════════════════════════════════════════════════════════════
   LA FILA DE OFERTAS  (24/09/2026)
   Lo más llamativo de la portada después del banner: franja roja con el
   título, cartel amarillo "-15%" en cada tarjeta, precio viejo tachado
   arriba y el nuevo en rojo grande. En el teléfono la fila se desliza de
   costado (dos tarjetas y media a la vista: la media invita a deslizar).
   ══════════════════════════════════════════════════════════════════════ */
.hh-ofertas{
  background:linear-gradient(180deg,#fff4d6,#fff);border:1px solid #f1dc9a;
  border-radius:var(--radio);padding:0 0 16px;overflow:hidden;
}
.hh-ofertas-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(100deg,#c0141c,#e02a2a);color:#fff;
  padding:14px 20px;margin-bottom:16px;
}
.hh-ofertas-cab h3{margin:0;color:#fff;font:800 24px/1.1 Georgia,serif}
.hh-ofertas-sobre{
  display:block;font:700 11px system-ui;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--amarillo);margin-bottom:3px;
}
.hh-ofertas-todas{
  flex:0 0 auto;background:var(--amarillo);color:var(--tinta);
  font:700 13.5px system-ui;padding:8px 14px;border-radius:99px;
  text-decoration:none;white-space:nowrap;
}
.hh-ofertas-todas:hover{background:#fff;color:#c0141c}
.woocommerce .site-main .hh-ofertas ul.products{padding:0 16px;margin:0}

/* el cartel de descuento, en toda la tienda */
.woocommerce span.onsale.hornero-dto{
  background:#c0141c;color:#fff;font:900 15px/1 system-ui;
  letter-spacing:-.3px;padding:7px 9px;border-radius:8px;
  box-shadow:0 3px 8px rgba(192,20,28,.3);top:10px;left:10px;z-index:2;
}
.single-product span.onsale.hornero-dto{font-size:20px;padding:9px 12px}

/* precio de oferta: viejo tachado ARRIBA, nuevo en rojo */
.woocommerce .site-main ul.products li.product.sale .price{
  display:flex;flex-direction:column-reverse;gap:2px;
}
.woocommerce .site-main ul.products li.product.sale .price ins{color:#c0141c}
.woocommerce .site-main ul.products li.product.sale .price del{font-size:12.5px}
.woocommerce .site-main ul.products li.product.sale{border-color:#f1c9c9}

@media(max-width:600px){
  .hh-ofertas-cab{padding:12px 14px}
  .hh-ofertas-cab h3{font-size:19px}
  .hh-ofertas-todas{font-size:12px;padding:7px 11px}
  .woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira{
    display:flex;overflow-x:auto;gap:10px;padding:0 12px 4px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hh-ofertas ul.products.hh-ofertas-tira::-webkit-scrollbar{display:none}
  .woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira li.product{
    flex:0 0 40%;scroll-snap-align:start;
  }
}

/* el cartel "-15%" en la ESQUINA de la foto (Storefront lo deja en línea,
   y caía encima del precio) */
.woocommerce .site-main ul.products li.product span.onsale.hornero-dto,
.single-product div.product span.onsale.hornero-dto{
  position:absolute;top:10px;left:10px;right:auto;margin:0;
}
.single-product div.product{position:relative}

/* la fila de ofertas: UN renglón que se desliza, en todas las pantallas
   (5 a la vista en la compu, 2 y media en el teléfono) */
.woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira{
  display:flex;overflow-x:auto;gap:12px;padding:0 16px 6px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira li.product{
  flex:0 0 calc((100% - 4 * 12px) / 5);scroll-snap-align:start;
}
@media(max-width:900px){
  .woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira li.product{flex-basis:30%}
}
@media(max-width:600px){
  .woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira{scrollbar-width:none}
  .woocommerce .site-main .hh-ofertas ul.products.hh-ofertas-tira li.product{flex-basis:40%}
}

/* ══════════════════════════════════════════════════════════════════════
   LOS BANNERS "DE CINE"  (24/09/2026 — inc/promos.php + js/banner.js)
   Referencia: los carruseles de Carrefour/Coto (foto grande, número de
   descuento enorme), llevados a la cara del barrio: fotos del local, con
   movimiento lento de cámara, textos que entran, y un sello-estrella que
   rebota y "explota" en chispas al aparecer.
   ══════════════════════════════════════════════════════════════════════ */
.hornero-promos.pc{position:relative;margin:0 0 30px;--pc-espera:6500ms}
.pc .promos-pista{
  position:relative;height:320px;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px rgba(18,28,50,.28);background:#0f1a30;isolation:isolate;
}
/* todas apiladas; se ve la .activa */
.pc .promo-cine{
  position:absolute;inset:0;margin:0;min-height:0;border:0;border-radius:0;
  display:flex;align-items:center;gap:30px;padding:34px 44px;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;   /* 1.9.4: era .9 */
}
.pc .promo-cine[hidden]{display:flex}
.pc .promo-cine.activa{opacity:1;visibility:visible;transition:opacity .6s ease;z-index:2}
/* 26/09: la que se va queda QUIETA y entera debajo, mientras la nueva
   aparece encima. Antes se apagaban los textos de golpe y se veia una
   placa vacia (solo la foto) casi un segundo: "a veces no salen". */
.pc .promo-cine.saliendo{opacity:1;visibility:visible;transition:none;z-index:1}
.pc:not(.js) .promo-cine:first-child{opacity:1;visibility:visible}

/* la foto, con movimiento de cámara (Ken Burns) */
.pc .pc-fondo{
  position:absolute;inset:-4%;background-size:cover;background-position:center;
  z-index:-2;transform:scale(1.02);filter:saturate(1.1) contrast(1.05);
}
.pc .promo-cine.activa .pc-fondo{animation:pc-camara calc(var(--pc-espera) + 1.5s) ease-out forwards}
@keyframes pc-camara{
  from{transform:scale(1.02) translate(0,0)}
  to  {transform:scale(1.16) translate(-2.5%,-1.5%)}
}
/* el velo: oscuro a la izquierda (donde va el texto), del color de la placa */
.pc .pc-velo{position:absolute;inset:0;z-index:-1}
.pc .tono-azul .pc-velo{background:linear-gradient(95deg,rgba(18,32,64,.95) 0%,rgba(34,52,90,.82) 45%,rgba(34,52,90,.25) 100%)}
.pc .tono-oro .pc-velo{background:linear-gradient(95deg,rgba(60,42,4,.93) 0%,rgba(120,90,10,.75) 45%,rgba(204,180,62,.2) 100%)}
.pc .tono-blanco .pc-velo{background:linear-gradient(95deg,rgba(120,10,16,.93) 0%,rgba(170,18,28,.78) 45%,rgba(192,20,28,.2) 100%)}
.pc .promo-cine:not(.con-foto).tono-azul{background:linear-gradient(110deg,#22345a,#334b7c)}
.pc .promo-cine:not(.con-foto).tono-oro{background:linear-gradient(110deg,#8a6a08,#ccb43e)}
.pc .promo-cine:not(.con-foto).tono-blanco{background:linear-gradient(110deg,#8f0d14,#d0202a)}
/* destello que cruza la placa al entrar */
.pc .promo-cine::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);
}
.pc .promo-cine.activa::after{animation:pc-brillo 1.3s .35s ease-out}
@keyframes pc-brillo{to{transform:translateX(120%)}}

/* los textos: blancos siempre (van sobre el velo), y entran de a uno */
.pc .promo-cine .promo-texto{position:relative;z-index:2;color:#fff;max-width:620px}
.pc .promo-arriba{
  display:inline-block;background:var(--amarillo);color:#1c1f23;opacity:1;
  padding:5px 12px;border-radius:99px;font:800 12px system-ui;letter-spacing:1.5px;
}
.pc .promo-cine h2{
  color:#fff;font:900 44px/1.02 system-ui;letter-spacing:-1.2px;margin:12px 0 0;
  text-shadow:0 3px 18px rgba(0,0,0,.35);text-transform:uppercase;
}
.pc .promo-pie{color:rgba(255,255,255,.9);opacity:1;font-size:15px;margin-top:12px}
.pc-boton{
  display:inline-block;margin-top:18px;background:#fff;color:var(--tinta);
  font:800 14.5px system-ui;padding:11px 22px;border-radius:99px;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s,background .15s;
}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.pc-boton:hover{transform:translateY(-2px);background:var(--amarillo);color:var(--tinta)}}
/* 26/09: los textos son VISIBLES de base; la animacion solo los trae desde
   abajo (fill "both"). Si el navegador no anima, igual se leen. */
.pc .activa .pc-e1{animation:pc-sube .5s .2s var(--ease-out) both}
.pc .activa .pc-e2{animation:pc-sube .5s .26s var(--ease-out) both}
.pc .activa .pc-e3{animation:pc-sube .5s .32s var(--ease-out) both}
.pc .activa .pc-e4{animation:pc-sube .5s .38s var(--ease-out) both}
/* 1.9.4: escalón de 60 ms entre textos (era de 170 a 200) */
@keyframes pc-sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* EL SELLO: estrella que gira, número que rebota, explosión de chispas */
.pc .pc-sello{
  position:relative;z-index:2;flex:0 0 auto;margin-left:auto;
  width:230px;height:230px;display:grid;place-items:center;transform:none;
}
.pc .pc-estrella{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.pc .pc-estrella polygon{fill:#e1262d}
.pc .tono-azul .pc-estrella polygon{fill:var(--amarillo)}
.pc .tono-oro .pc-estrella polygon{fill:#e1262d}
.pc .tono-blanco .pc-estrella polygon{fill:var(--amarillo)}
.pc .activa .pc-estrella{animation:pc-gira 24s linear infinite}
.pc.pausado .pc-estrella{animation-play-state:paused}   /* 1.9.4: seguía girando en pausa */
@keyframes pc-gira{to{transform:rotate(360deg)}}
.pc .pc-num{
  position:relative;display:flex;flex-direction:column;align-items:center;
  transform:rotate(-8deg);color:#fff;
}
.pc .tono-azul .pc-num,.pc .tono-blanco .pc-num{color:#b0141c}
.pc .pc-num b{font:900 70px/.95 system-ui;letter-spacing:-3px}
.pc .largo .pc-num b{font-size:40px;letter-spacing:-1.5px}
.pc .pc-num span{font:800 13px system-ui;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}
.pc .activa .pc-num{animation:pc-rebote .75s .55s var(--ease-rebote) both}
@keyframes pc-rebote{
  0%{transform:rotate(-30deg) scale(.5);opacity:0}   /* 1.9.4: era scale(0): salía de la nada */
  70%{transform:rotate(-4deg) scale(1.15);opacity:1}
  100%{transform:rotate(-8deg) scale(1)}
}
.pc .activa .pc-sello{animation:pc-sello-entra .6s .45s var(--ease-rebote) both}
@keyframes pc-sello-entra{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
/* la explosión */
.pc .pc-destello{
  position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,230,120,.6) 40%,transparent 70%);
  transform:scale(0);opacity:0;
}
.pc .activa .pc-destello{animation:pc-flash .7s .55s ease-out}
@keyframes pc-flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
.pc .pc-chispa{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:2px;
  background:var(--amarillo);opacity:0;
}
.pc .pc-chispa:nth-of-type(3n){background:#fff;border-radius:50%}
.pc .pc-chispa:nth-of-type(3n+1){background:#ff5a4e}
.pc .activa .pc-chispa{animation:pc-chispa .9s calc(.6s + var(--t)) cubic-bezier(.1,.7,.3,1) forwards}
@keyframes pc-chispa{
  0%  {opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * (var(--d) + 60px))) scale(.3) rotate(220deg)}
}

/* la barra de tiempo */
.pc .pc-progreso{
  position:absolute;left:18px;right:18px;bottom:12px;height:3px;z-index:5;
  background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden;
}
/* 1.9.4: se estira con scaleX y no con width: animar width recalculaba la
   página en cada cuadro durante toda la espera, en bucle */
.pc .pc-progreso span{display:block;height:100%;width:100%;background:var(--amarillo);
  transform:scaleX(0);transform-origin:left}
.pc .pc-progreso span.corre{animation:pc-llena var(--pc-espera) linear forwards}
.pc.pausado .pc-progreso span{animation-play-state:paused}
@keyframes pc-llena{to{transform:scaleX(1)}}

/* flechas y puntos */
.pc .pc-flecha{
  position:absolute;top:160px;transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font:700 26px/1 system-ui;
  backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,background .2s;
}
.pc:hover .pc-flecha{opacity:1}
/* 1.9.4: con teclado (Tab) o en una tablet táctil quedaban invisibles pero tocables */
.pc:focus-within .pc-flecha,.pc .pc-flecha:focus-visible{opacity:1}
@media (hover:none){.pc .pc-flecha{opacity:1}}
.pc .pc-flecha:hover{background:rgba(255,255,255,.35)}
.pc .pc-ant{left:12px}.pc .pc-sig{right:12px}
.pc .promos-puntos{margin-top:14px}
.pc .promos-puntos button{width:26px;height:6px;border-radius:6px}
.pc .promos-puntos button[aria-selected]{width:44px;transform:none;background:var(--rojo)}

/* el teléfono: foto arriba con el sello, texto abajo */
@media(max-width:760px){
  .pc .promos-pista{height:360px;border-radius:14px}
  .pc .promo-cine{flex-direction:column-reverse;justify-content:flex-end;
    align-items:flex-start;gap:6px;padding:20px 20px 26px}
  .pc .promo-cine h2{font-size:28px;letter-spacing:-.6px}
  .pc .promo-pie{font-size:13.5px}
  .pc .pc-sello{width:150px;height:150px;margin:0 0 0 auto}
  .pc .pc-num b{font-size:46px}
  .pc .largo .pc-num b{font-size:25px}
  .pc .pc-num span{font-size:10.5px}
  .pc .tono-azul .pc-velo{background:linear-gradient(0deg,rgba(18,32,64,.96) 35%,rgba(34,52,90,.35) 100%)}
  .pc .tono-oro .pc-velo{background:linear-gradient(0deg,rgba(60,42,4,.95) 35%,rgba(120,90,10,.3) 100%)}
  .pc .tono-blanco .pc-velo{background:linear-gradient(0deg,rgba(120,10,16,.95) 35%,rgba(170,18,28,.3) 100%)}
  .pc .pc-flecha{display:none}
  .pc .pc-boton{margin-top:12px;padding:9px 18px;font-size:13.5px}
}

/* "reducir movimiento": todo se ve, nada se mueve */
@media (prefers-reduced-motion: reduce){
  .pc *,.pc .promo-cine::after{animation:none !important;transition:none !important}
  /* 1.9.4: pero el fundido entre promos queda (corto): sin él la promo cambiaba
     de golpe. Se saca el movimiento, no el cambio de opacidad. */
  .pc .promo-cine{transition:opacity .3s ease,visibility 0s .3s !important}
  .pc .promo-cine.activa{transition:opacity .3s ease !important}
  .pc .promo-cine.saliendo{transition:none !important}
  .pc .pc-e1,.pc .pc-e2,.pc .pc-e3,.pc .pc-e4,.pc .pc-sello{opacity:1;transform:none}
  .pc .pc-num{transform:rotate(-8deg)}
  .pc .pc-chispa,.pc .pc-destello{display:none}
}
@media(max-width:760px){
  .pc .promos-pista{height:400px}
  .pc .pc-sello{width:132px;height:132px}
  .pc .pc-num b{font-size:40px}
  .pc .largo .pc-num b{font-size:22px}
  .pc .promo-cine{padding-bottom:30px}
}


/* ══════════════════════════════════════════════════════════════════════
   LA CUENTA DEL CLIENTE (1.7.0 — 25/09/2026, inc/cuenta.php)
   ══════════════════════════════════════════════════════════════════════ */
/* el boton de la cabecera, hermano del carrito */
.site-header .hornero-cuenta{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 16px;
  border:2px solid var(--linea);border-radius:99px;background:#fff;
  font-weight:700;color:var(--tinta);text-decoration:none;
  transition:border-color .15s ease;
}
.site-header .hornero-cuenta:hover{border-color:var(--rojo)}
.site-header .hornero-cuenta svg{width:20px;height:20px;color:var(--rojo)}
/* en el telefono la cuenta ya esta en la barra fija de abajo */
@media(max-width:600px){ .site-header .hornero-cuenta{display:none} }

/* "Cliente registrado" | "Nuevo cliente" */
.woocommerce-account #customer_login{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;
  margin:0 0 40px;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after{display:none}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
  width:auto;float:none;margin:0;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 30px 30px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.woocommerce-account #customer_login h2{
  font-size:24px;font-weight:600;margin:0 0 18px;color:var(--tinta);
}
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register{
  border:0;padding:0;margin:0;
}
.woocommerce-account #customer_login label{font-weight:700;font-size:15px}
.woocommerce-account #customer_login input.input-text{
  width:100%;border:1px solid var(--linea);background:var(--fondo);
  border-radius:8px;padding:11px 14px;box-shadow:none;font-size:16px;
}
.woocommerce-account #customer_login input.input-text:focus{
  border-color:var(--rojo);background:#fff;outline:none;
}
.woocommerce-account #customer_login .button{
  background:var(--rojo);color:#fff;border-radius:10px;
  padding:12px 34px;font-weight:700;font-size:16px;
}
.woocommerce-account #customer_login .button:hover{background:var(--rojo-osc)}
.woocommerce-account #customer_login .woocommerce-form-register__submit{
  background:var(--amarillo);color:var(--tinta);
}
.woocommerce-account #customer_login .woocommerce-form-register__submit:hover{
  background:var(--dorado);
}
.woocommerce-account #customer_login .woocommerce-LostPassword a{
  color:var(--rojo);text-decoration:underline;font-size:14px;
}
@media(max-width:760px){
  .woocommerce-account #customer_login{grid-template-columns:1fr;gap:20px}
  .woocommerce-account #customer_login .u-column1,
  .woocommerce-account #customer_login .u-column2{padding:20px}
}

/* 1.7.1 (26/09/2026): en la pagina de un rubro, el desplegable de ESE
   rubro no se abre. La misma lista ya esta a la izquierda (RUBROS) y las
   dos juntas se veian como dos grillas iguales encimadas. Los demas
   rubros del menu siguen desplegando. */
.hornero-rubros>ul>li:has(> a.act) .desplegable{display:none !important}
.hornero-rubros>ul>li:has(> a.act) .flecha{display:none}

/* ══════════════════════════════════════════════════════════════════════
   1.8.0 (26/09/2026)
   A. Las placas de los PRODUCTOS en oferta dentro del banner grande
      (inc/promos.php, hornero_placas_ofertas). Salen solas de la tienda.
   B. Ajustes de celular: márgenes, portada más corta, filas que se
      deslizan de costado en vez de 5 renglones por rubro.
   ══════════════════════════════════════════════════════════════════════ */

/* la foto de la que se va queda donde terminó la cámara (sin salto) */
.pc .saliendo .pc-fondo{transform:scale(1.16) translate(-2.5%,-1.5%)}

/* ── A. placa de producto ─────────────────────────────────────────────── */
.pc .promo-prod{overflow:hidden}
.pc .tono-prod-rojo{background:radial-gradient(circle at 78% 50%,#ff4b4b 0,#d0202a 38%,#8f0d14 100%)}
.pc .tono-prod-azul{background:radial-gradient(circle at 78% 50%,#4d6fb0 0,#2a4275 40%,#14213f 100%)}
.pc .tono-prod-oro {background:radial-gradient(circle at 78% 50%,#ffe27a 0,#f0c02a 40%,#b88a06 100%)}
/* rayos suaves detrás del producto: cartel de góndola */
.pc .promo-prod .pc-velo{
  background:repeating-conic-gradient(from 0deg at 78% 50%,rgba(255,255,255,.07) 0 9deg,transparent 9deg 18deg);
}
.pc .promo-prod .promo-texto{max-width:560px}
.pc .promo-prod h2{
  text-transform:none;font:900 38px/1.08 system-ui;letter-spacing:-.8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pc .pc-precios{margin:14px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;color:#fff}
.pc .pc-precios del{font:700 19px system-ui;opacity:.8;color:#fff}
.pc .pc-precios b{
  font:900 54px/1 system-ui;letter-spacing:-1.5px;color:var(--amarillo);
  text-shadow:0 3px 14px rgba(0,0,0,.3);
}
.pc .pc-precios b .woocommerce-Price-currencySymbol{font-size:.55em;vertical-align:.55em;margin-right:2px}
.pc .pc-precios small{font:700 15px system-ui;opacity:.9}
.pc .tono-prod-oro .promo-texto,.pc .tono-prod-oro h2,.pc .tono-prod-oro .pc-precios,
.pc .tono-prod-oro .pc-precios del{color:#2a1e00;text-shadow:none}
.pc .tono-prod-oro .pc-precios b{color:#b0141c;text-shadow:none}
.pc .tono-prod-oro .promo-arriba{background:#b0141c;color:#fff}
.pc .tono-prod-oro .pc-boton{background:#1c1f23;color:#fff}

/* el producto, en un plato blanco, con el sello del descuento encima */
.pc .pc-prod{
  position:relative;z-index:2;flex:0 0 auto;margin-left:auto;
  width:290px;height:260px;display:grid;place-items:center;
}
.pc .pc-foto{
  width:240px;height:240px;border-radius:50%;background:#fff;
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 8px rgba(255,255,255,.18);
}
.pc .pc-foto img{width:78%;height:78%;object-fit:contain}
.pc .activa .pc-foto{animation:pc-plato .8s .15s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pc-plato{from{transform:scale(.5) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.pc .pc-sello.pc-sello-mini{
  position:absolute;right:-6px;top:-8px;margin:0;width:124px;height:124px;
}
.pc .pc-sello-mini .pc-num b{font-size:34px;letter-spacing:-1.5px}
.pc .tono-prod-rojo .pc-estrella polygon{fill:var(--amarillo)}
.pc .tono-prod-rojo .pc-num{color:#b0141c}
.pc .tono-prod-azul .pc-estrella polygon{fill:#e1262d}
.pc .tono-prod-oro  .pc-estrella polygon{fill:#e1262d}

/* ── A. banner: celular ───────────────────────────────────────────────── */
@media(max-width:760px){
  .pc .promos-pista{height:430px}
  .pc .promo-prod h2{font-size:23px;letter-spacing:-.4px}
  .pc .pc-precios{margin-top:8px;gap:2px 10px}
  .pc .pc-precios del{font-size:15px}
  .pc .pc-precios b{font-size:36px}
  .pc .pc-prod{width:100%;height:170px;margin:0;justify-items:start}
  .pc .pc-foto{width:160px;height:160px;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 6px rgba(255,255,255,.18)}
  .pc .pc-sello.pc-sello-mini{left:128px;right:auto;top:6px;width:96px;height:96px}
  .pc .pc-sello-mini .pc-num b{font-size:26px}
  .pc .promo-prod .pc-velo{background:repeating-conic-gradient(from 0deg at 25% 22%,rgba(255,255,255,.07) 0 9deg,transparent 9deg 18deg)}
  .pc .tono-prod-rojo{background:radial-gradient(circle at 25% 22%,#ff4b4b 0,#d0202a 38%,#8f0d14 100%)}
  .pc .tono-prod-azul{background:radial-gradient(circle at 25% 22%,#4d6fb0 0,#2a4275 40%,#14213f 100%)}
  .pc .tono-prod-oro {background:radial-gradient(circle at 25% 22%,#ffe27a 0,#f0c02a 40%,#b88a06 100%)}
  /* los puntitos: con 10 o 12 placas no entran de a 26 px */
  .pc .promos-puntos{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
  .pc .promos-puntos button{width:14px;margin:0}
  .pc .promos-puntos button[aria-selected]{width:30px}
}

/* ── B. celular: márgenes ─────────────────────────────────────────────
   Storefront suma 23-42 px de margen a cada lado ADEMÁS del relleno del
   tema: en un teléfono de 390 px quedaban 35 px vacíos por lado. */
@media(max-width:1062px){
  .col-full{margin-left:auto;margin-right:auto;padding-left:18px;padding-right:18px}
}
@media(max-width:600px){
  .col-full{padding-left:10px;padding-right:10px}
}

/* ── B. celular: portada más corta ────────────────────────────────────── */
@media(max-width:760px){
  .hh-hero{min-height:0;margin-bottom:18px}
  .hh-hero-texto{padding:84px 18px 18px}
  .hh-hero-texto h1{font-size:27px}
  .hh-bajada{font-size:14.5px;margin-bottom:14px}
  .hh-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hh-botones .hh-boton{text-align:center;padding:11px 10px;font-size:14px}
  .hh-botones .hh-boton:last-child:nth-child(odd){grid-column:1 / -1}
  .hornero-promos.pc{margin-bottom:20px}
  .hh-bloque{margin-bottom:20px}

  /* cada rubro de la portada: UNA fila que se desliza (como Ofertas),
     no 5 renglones de 2. La portada pasa de ~9.600 px a la mitad. */
  .hornero-portada .site-main > ul.products{
    display:flex !important;overflow-x:auto;gap:10px;padding:0 0 6px;margin:0 0 18px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .hornero-portada .site-main > ul.products::-webkit-scrollbar{display:none}
  .hornero-portada .site-main > ul.products > li.product{
    flex:0 0 42% !important;width:auto !important;margin:0 !important;scroll-snap-align:start;
  }
  .hornero-sec{font-size:17px}
}

/* ── B. celular: la tienda, menos aire arriba ─────────────────────────── */
@media(max-width:600px){
  .storefront-breadcrumb{margin-bottom:4px;padding-top:10px;padding-bottom:10px}
  .site-content .col-full{padding-top:8px}
  .woocommerce-products-header h1,.woocommerce-products-header .page-title{font-size:24px}
  .hornero-aside{margin-bottom:8px}
  .storefront-sorting{flex-direction:row;flex-wrap:nowrap;align-items:center;
    justify-content:space-between;gap:8px;margin-bottom:10px}
  .storefront-sorting .woocommerce-ordering{order:2;margin:0}
  .storefront-sorting .woocommerce-ordering select{max-width:170px;font-size:13px}
  .storefront-sorting .woocommerce-result-count{order:1;margin:0;font-size:12.5px}
}

/* ── 1.8.2: el selector de peso (inc/pesables.php + js/pesables.js) ────── */
.hornero-peso{display:flex;flex-direction:column;gap:3px;margin:8px 0 6px;text-align:left}
.hornero-peso span{font-size:12px;font-weight:600;color:var(--gris)}
.hornero-peso-sel{
  width:100%;padding:8px 10px;border:1.5px solid var(--rojo);border-radius:8px;
  background:#fff;color:var(--tinta);font:600 14px system-ui;cursor:pointer;
}
.hornero-peso-sel:focus{outline:2px solid var(--amarillo);outline-offset:1px}
ul.products li.product .hornero-peso{margin-top:auto}
.hornero-peso-ficha{max-width:260px;margin:0 0 12px}
.hornero-peso-ficha span{font-size:14px}
.hornero-peso-ficha .hornero-peso-sel{font-size:16px;padding:10px 12px}
/* en la ficha, el numero y el "3 = 750 g" ya no hacen falta: manda la lista */
form.cart.hornero-con-peso .quantity,
form.cart.hornero-con-peso .hornero-cant-peso{display:none !important}

/* ── 1.8.3: la cantidad  [ − ] 1 [ + ]  (inc/cantidad.php + js/cantidad.js) ── */
.hornero-cant{display:flex;align-items:stretch;justify-content:center;margin:8px auto 6px;
  width:100%;max-width:150px;border:1.5px solid var(--rojo);border-radius:8px;overflow:hidden;background:#fff}
ul.products li.product .hornero-cant{margin-top:auto}
.hornero-cant button,.quantity.hornero-cant-ficha button{
  flex:0 0 40px;border:0;background:var(--rojo);color:#fff;font:700 20px/1 system-ui;
  cursor:pointer;padding:0;min-height:38px;-webkit-tap-highlight-color:transparent}
.hornero-cant button:active,.quantity.hornero-cant-ficha button:active{background:var(--rojo-osc)}
.hornero-cant input.hornero-cant-n{flex:1 1 auto;width:40px;min-width:0;border:0;text-align:center;
  font:700 16px system-ui;color:var(--tinta);background:#fff;padding:0;box-shadow:none;-moz-appearance:textfield}
.hornero-cant input::-webkit-outer-spin-button,.hornero-cant input::-webkit-inner-spin-button,
.quantity.hornero-cant-ficha input::-webkit-outer-spin-button,
.quantity.hornero-cant-ficha input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity.hornero-cant-ficha{display:inline-flex !important;align-items:stretch;border:1.5px solid var(--rojo);
  border-radius:8px;overflow:hidden;background:#fff;vertical-align:middle}
.quantity.hornero-cant-ficha button{flex-basis:44px;width:44px;min-height:44px}
.quantity.hornero-cant-ficha input.qty{width:56px;border:0;text-align:center;font:700 17px system-ui;
  box-shadow:none;background:#fff;-moz-appearance:textfield;padding:0}

/* ── 1.8.4: si no hay stock (inc/sinstock.php) ─────────────────────────── */
.hornero-sinstock{flex-basis:100%;width:100%;margin:16px 0 4px;padding:12px 14px;border:1px solid var(--linea);
  border-radius:10px;background:#fff}
.hornero-sinstock-t{font:700 15px system-ui;margin:0 0 8px;color:var(--tinta)}
.hornero-sinstock-op{display:flex;gap:8px;align-items:center;font-size:14px;margin:4px 0;cursor:pointer}
.hornero-sinstock-op input{accent-color:var(--rojo);width:18px;height:18px}
.hornero-simil{margin-top:10px}
.hornero-simil-t{font:600 13px system-ui;color:var(--gris);margin:0 0 6px}
.hornero-simil-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.hornero-simil-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;
  border:1.5px solid var(--linea);border-radius:8px;cursor:pointer;text-align:center;font-size:12px;background:#fff}
.hornero-simil-it input{position:absolute;top:6px;left:6px;accent-color:var(--rojo)}
.hornero-simil-it:has(input:checked){border-color:var(--rojo);box-shadow:0 0 0 2px rgba(51,75,124,.15)}
.hornero-simil-img img{width:64px;height:64px;object-fit:contain}
.hornero-simil-nom{line-height:1.25;color:var(--tinta)}
.hornero-simil-pre{font-weight:700;color:var(--tinta)}
.hornero-simil-pre .hornero-paso{display:none}
.hornero-simil-cualq{justify-content:center;min-height:90px;font-weight:600}

/* ── 1.8.5: el listado sigue solo (inc/listado.php + js/listado.js) ───── */
.hornero-mas{clear:both;display:flex;align-items:center;justify-content:center;gap:10px;min-height:70px;
  margin:10px 0 30px;color:var(--gris);font:600 14px system-ui;visibility:hidden}
.hornero-mas.hornero-mas-on,.hornero-mas.hornero-mas-fin{visibility:visible}
.hornero-mas-rueda{width:20px;height:20px;border:3px solid var(--linea);border-top-color:var(--rojo);
  border-radius:50%;animation:hornero-gira .8s linear infinite}
@keyframes hornero-gira{to{transform:rotate(360deg)}}

/* ── 1.8.7: en el CELULAR, los listados (tienda, rubros, busqueda) son solo
   productos: sin la barra de abajo (ordenar / "Mostrando..." / paginas) y
   sin el pie (direccion, contacto, mapa). El pie sigue en la portada (1.8.8: body.home), la
   ficha, el carrito y Mi cuenta. ─────────────────────────────────────── */
@media (max-width: 767px){
  body:not(.home).post-type-archive-product ul.products ~ .storefront-sorting,
  .tax-product_cat ul.products ~ .storefront-sorting,
  .tax-product_tag ul.products ~ .storefront-sorting{display:none !important}
  body:not(.home).post-type-archive-product .site-footer,
  .tax-product_cat .site-footer,
  .tax-product_tag .site-footer{display:none !important}
  body:not(.home).post-type-archive-product #content,
  .tax-product_cat #content,
  .tax-product_tag #content{padding-bottom:90px}   /* aire para la barra fija de abajo */
}

/* ── 1.8.9: el carrito a la vista (inc/carrito_barra.php) ─────────────── */
.woocommerce .site-main ul.products li.product .added_to_cart{
  background:var(--rojo);color:#fff;font-weight:700}
.hornero-barra-carrito{display:none}
@media (max-width: 767px){
  .hornero-barra-carrito:not(.hornero-vacio){
    position:fixed;left:10px;right:10px;z-index:10000;
    bottom:calc(72px + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;
    background:var(--rojo);color:#fff !important;text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.25);font:500 15px system-ui}
  .hornero-barra-carrito .hbc-ico{font-size:20px;line-height:1}
  .hornero-barra-carrito .hbc-txt{flex:1 1 auto}
  .hornero-barra-carrito .hbc-total{font-weight:800;white-space:nowrap;color:var(--amarillo)}
  body.hornero-con-carrito .hh-wa{bottom:150px}
  body.hornero-con-carrito #content{padding-bottom:150px}
}

/* ── 1.8.11: la foto de cada rubro — mosaico de 4 productos o imagen propia ── */
.hh-rubro-foto.hh-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:1px;background:var(--linea);background-image:none;padding:0}
.hh-mosaico img{width:100%;height:100%;min-height:0;object-fit:contain;background:#fff;padding:6px;display:block}
.hh-mosaico-1{grid-template-columns:1fr;grid-template-rows:1fr}
.hh-mosaico-2{grid-template-rows:1fr}
.hh-mosaico-3 img:first-child{grid-row:span 2}
.hh-rubro-foto.hh-rubro-propia{background-size:cover;background-position:center}
.hh-rubro{border-color:#dfe3e8}
.hh-rubro-txt{border-top:1px solid var(--linea)}
@media(max-width:760px){
  .hh-rubro-foto.hh-mosaico{height:120px}
  .hh-mosaico img{padding:4px}
}

/* ── 1.8.19: la foto de cada rubro como VIDRIERA ─────────────────────────
   Antes era un mosaico 2x2: celdas de 140 x 66 px para fotos cuadradas, el
   producto quedaba chiquito y el sello del logo (foto_web) era una mancha.
   Ahora: 3 productos encimados sobre un estante (canto azul + cenefa amarilla)
   y el color suave del rubro (--tono, lo pone hornero_rubro_tono()).
   mix-blend-mode:multiply borra el blanco de la foto sobre el color.
   El clip-path recorta la esquina de arriba a la derecha, donde foto_web pega
   el logo (20 % del lado, 3,5 % de margen): si cambia la marca, cambiar acá. */
.hh-rubro-foto.hh-vidriera{position:relative;display:block;height:206px;overflow:hidden;padding:0;
  background:radial-gradient(ellipse 70% 90% at 50% 70%,#fff 0,var(--tono,#E9EDF3) 75%)}
.hh-vidriera .hh-prods{position:absolute;left:0;right:0;top:0;bottom:20px;
  display:flex;justify-content:center;align-items:flex-end}
.hh-vidriera img{width:66%;height:auto;margin:0 -15% -6%;mix-blend-mode:multiply;position:relative;
  clip-path:polygon(0 0,74% 0,74% 14%,100% 14%,100% 100%,0 100%);transform-origin:50% 100%}
.hh-vidriera img:nth-child(1){z-index:1;transform:scale(.86) rotate(-4deg)}
.hh-vidriera img:nth-child(2){z-index:3;transform:scale(1.04)}
.hh-vidriera img:nth-child(3){z-index:2;transform:scale(.90) rotate(4deg)}
/* 1.8.20: productos 30 % más grandes (pedido de Aníbal): más alto y más encimados;
   los de las puntas quedan apenas cortados, como una góndola que sigue.
   con 1 o 2 productos: más grandes y sin encimarse tanto */
.hh-vidriera-1 img{width:80%;margin:0 0 -6%;transform:none !important}
.hh-vidriera-2 img{width:70%;margin:0 -9% -6%}
.hh-vidriera .hh-estante{position:absolute;left:0;right:0;bottom:0;height:20px;z-index:5;
  background:linear-gradient(var(--amarillo) 0 9px,var(--rojo) 9px 100%);
  box-shadow:0 -3px 8px rgba(34,52,90,.18)}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.hh-rubro:hover .hh-vidriera img:nth-child(2){transform:scale(1.09)}}
@media(max-width:760px){
  .hh-rubro-foto.hh-vidriera{height:160px}
  .hh-vidriera .hh-prods{bottom:16px}
  .hh-vidriera .hh-estante{height:16px;background:linear-gradient(var(--amarillo) 0 7px,var(--rojo) 7px 100%)}
}

/* ── 1.8.21: rubro sin productos — el estante vacío con su color ── */
.hh-vidriera-0 .hh-prods{align-items:center}
.hh-vidriera-0 em{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rojo);opacity:.55;border:1.5px dashed currentColor;border-radius:999px;padding:6px 14px}

/* ══════════════════════════════════════════════════════════════════════
   1.9.0 (01/10/2026) — REVISIÓN VISUAL DE LA PORTADA
   ══════════════════════════════════════════════════════════════════════ */

/* ── la barra de rubros en UN renglón en la compu: con los 10 rubros del
   SAG quedaba PANADERIA sola en un segundo piso ── */
@media(min-width:981px){
  .hornero-rubros a{padding:13px 10px;font-size:13.5px;letter-spacing:.1px}
  .hornero-rubros .flecha{margin-left:4px}
}

/* ── franja de arriba: el estacionamiento solo si hay lugar (en el
   teléfono la franja se desliza, ahí sí entra) ── */
@media(min-width:601px) and (max-width:1439px){
  .hornero-franja .hf-estac{display:none}
}

/* ── banner grande: el renglón del estacionamiento ── */
.hh-hero-extra{display:inline-flex;align-items:center;gap:9px;margin:12px 0 0;
  padding:6px 14px 6px 6px;border-radius:99px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(3px);font-size:14px;font-weight:600;color:#fff}
.hh-hero-extra .hh-p{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:#2f6fd6;color:#fff;font:800 14px/1 system-ui}

/* ── LAS VENTAJAS ── */
/* 1.9.1: 3 por fila (en 6 columnas el texto quedaba cortado en 5 renglones) */
.hh-ventajas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-6px}
.hh-ventaja{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px 13px;box-shadow:0 2px 10px rgba(34,52,90,.05)}
.hh-ventaja-ico{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--rojo);color:var(--amarillo)}
.hh-ventaja-ico svg{width:24px;height:24px}
.hh-ventaja-txt b{display:block;font-size:14px;line-height:1.2;color:var(--tinta);margin-bottom:3px}
.hh-ventaja-txt small{display:block;font-size:12.5px;line-height:1.35;color:var(--gris)}
/* la primera (estacionamiento) resaltada: es lo que más pesa para venir en auto */
.hh-ventaja:first-child{background:var(--rojo);border-color:var(--rojo)}
.hh-ventaja:first-child .hh-ventaja-ico{background:var(--amarillo);color:var(--rojo-osc)}
.hh-ventaja:first-child b{color:#fff}
.hh-ventaja:first-child small{color:rgba(255,255,255,.82)}
@media(max-width:900px){.hh-ventajas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .hh-ventajas{grid-template-columns:1fr 1fr;gap:8px;margin-top:0}
  .hh-ventaja{flex-direction:column;gap:8px;padding:12px 11px}
  .hh-ventaja-ico{width:36px;height:36px;flex-basis:36px;border-radius:10px}
  .hh-ventaja-ico svg{width:21px;height:21px}
  .hh-ventaja-txt b{font-size:13.5px}
  .hh-ventaja-txt small{font-size:12px}
}

/* ── LOS ÍCONOS DE CONTACTO: cada uno con el color de su marca ── */
.hh-iconos{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.hh-ico{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none !important;color:var(--tinta)}
.hh-ico-dibujo{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.14);transition:transform .15s var(--ease-out), box-shadow .15s ease}
.hh-ico-dibujo svg{width:23px;height:23px}
/* 1.9.3: solo con mouse (en el celular el hover se pega) */
@media (hover:hover) and (pointer:fine){.hh-ico:hover .hh-ico-dibujo{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.2)}}
.hh-ico-wa .hh-ico-dibujo{background:#25D366}
.hh-ico-ig .hh-ico-dibujo{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.hh-ico-fb .hh-ico-dibujo{background:#1877F2}
.hh-ico-mail .hh-ico-dibujo{background:#EA4335}
.hh-ico-tel .hh-ico-dibujo{background:var(--rojo)}
.hh-ico-mapa .hh-ico-dibujo{background:#34A853}
.hh-iconos.con-texto{gap:14px}
.hh-iconos.con-texto .hh-ico{width:66px}
.hh-ico-nombre{font-size:12px;font-weight:600;line-height:1.15;text-align:center;color:var(--gris)}
/* en el pie: más chicos y en fila */
.hornero-pie-iconos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;
  max-width:var(--ancho);margin:6px auto 0;padding:18px 18px 4px;border-top:1px solid rgba(255,255,255,.08)}
.hornero-pie-iconos>span{color:#c9d1d9;font:600 13px system-ui}
.hh-iconos-pie{margin:0;gap:9px}
.hh-iconos-pie .hh-ico-dibujo{width:38px;height:38px;box-shadow:none}
.hh-iconos-pie .hh-ico-dibujo svg{width:19px;height:19px}

/* ── el pie: los enlaces se leían gris oscuro sobre fondo oscuro (el color
   del pie de Storefront le ganaba al nuestro) ── */
.site-footer .hornero-pie a,
.site-footer .hornero-pie a:visited{color:#e3e8ee !important;text-decoration:none}
.site-footer .hornero-pie a:hover{color:var(--amarillo) !important}
.site-footer .hornero-pie p{color:#aeb6bf}

/* ── las fotos de producto en los listados: se tapa el sello del logo que
   foto_web pega arriba a la derecha (20 % del lado, 3,5 % de margen). En
   una tarjeta de 150 px no se lee y queda una mancha dorada. En la ficha
   del producto (foto grande) se deja. Mismo recorte que la vidriera. ── */
.site-main ul.products li.product img{
  /* 1.9.1: la caja de la foto pasa a ser CUADRADA. Antes medía 218 x 172 con
     object-fit:contain: la foto quedaba centrada adentro y el recorte «en la
     esquina» caía al costado del sello. Cuadrada, la foto llena la caja y el
     recorte (sobre content-box, sin el margen interno) cae justo en el sello. */
  width:auto !important;max-width:100%;aspect-ratio:1/1;
  margin-left:auto !important;margin-right:auto !important;
  clip-path:polygon(0 0,74% 0,74% 14%,100% 14%,100% 100%,0 100%) content-box;
}

/* ══════════════════════════════════════════════════════════════════════
   1.9.2 (01/10/2026) — RUBROS Y FICHA DE PRODUCTO
   ══════════════════════════════════════════════════════════════════════ */

/* la miga de pan dejaba ~80 px vacíos abajo (margen de Storefront) */
.storefront-breadcrumb{margin-bottom:16px !important;padding-top:14px !important;padding-bottom:10px !important}

/* el título del rubro: era un «ALMACEN» suelto en 130 px de blanco; ahora una
   franja con el azul de la marca y la rayita amarilla */
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header,
.post-type-archive-product .woocommerce-products-header{
  padding:22px 28px !important;margin:0 0 22px !important;border-radius:var(--radio);
  background:linear-gradient(115deg,var(--rojo-osc) 0%,var(--rojo) 55%,#4b67a6 100%);
  text-align:left;box-shadow:0 8px 22px rgba(34,52,90,.16)}
.woocommerce-products-header .page-title{color:#fff !important;font-size:30px !important;
  letter-spacing:.3px;margin:0 !important}
.woocommerce-products-header .page-title::after{content:"";display:block;width:54px;height:4px;
  border-radius:4px;background:var(--amarillo);margin-top:9px}
.woocommerce-products-header .term-description{color:rgba(255,255,255,.85);margin:8px 0 0}
@media(max-width:600px){
  .tax-product_cat .woocommerce-products-header,
  .post-type-archive-product .woocommerce-products-header{padding:16px 18px !important;margin-bottom:14px !important}
  .woocommerce-products-header .page-title{font-size:23px !important}
}

/* ficha: las flechitas de «producto anterior / siguiente» de Storefront
   quedaban cortadas contra los bordes de la pantalla */
.storefront-product-pagination{display:none !important}
/* la lupa abajo a la derecha: arriba la tapaba el sello del logo de la foto */
.woocommerce-product-gallery__trigger{top:auto !important;bottom:12px !important;right:12px !important}
/* menos aire entre el nombre y el precio (había 57 px) */
.single-product div.product .summary .price{margin:10px 0 18px !important}
/* los reemplazos sugeridos: sin el sello del logo (fotos de 64 px) */
.hornero-simil-img img{clip-path:polygon(0 0,74% 0,74% 14%,100% 14%,100% 100%,0 100%) content-box}
/* «Productos relacionados» con el mismo estilo que los demás títulos */
.related.products > h2,.upsells.products > h2{font-weight:800 !important;font-size:22px !important;
  text-align:left !important;color:var(--tinta);margin-bottom:14px}

/* ── 1.9.3: respuesta al apretar ─────────────────────────────────────────
   En el teléfono no hay hover: al tocar «Añadir al carrito» no pasaba nada
   visible hasta que contestaba el servidor. Un achique chiquito (0,97) al
   apretar dice «te escuché» al instante. No marea: no hace falta apagarlo con
   «reducir movimiento». */
.woocommerce .site-main ul.products li.product .button,
.woocommerce .site-main ul.products li.product .added_to_cart,
.hh-boton,.hh-ofertas-todas,.pc-boton{
  transition:transform .16s var(--ease-out),background .15s ease,
             color .15s ease,border-color .15s ease}
.woocommerce .site-main ul.products li.product .button:active,
.woocommerce .site-main ul.products li.product .added_to_cart:active,
.hh-boton:active,.hh-ofertas-todas:active,.pc-boton:active{transform:scale(.97)}
.hh-rubro:active{transform:scale(.985)}
/* «Añadir al carrito» medía 33 px de alto: chico para el dedo, y es el botón
   que más plata mueve. 44 px es el mínimo cómodo para tocar. */
@media (max-width:767px){
  .woocommerce .site-main ul.products li.product .button,
  .woocommerce .site-main ul.products li.product .added_to_cart{
    min-height:44px;display:flex;align-items:center;justify-content:center}
}
/* la barra «Ver carrito» del celular: el total en bloque, para poder darle
   un toque de escala cuando cambia (js/carrito_barra.js) */
.hornero-barra-carrito .hbc-total{display:inline-block}
/* «Reducir movimiento»: los hover que todavía mueven, quietos */
@media (prefers-reduced-motion:reduce){
  .woocommerce .site-main ul.products li.product:hover,.hh-boton:hover,.hh-rubro:hover,
  .hh-redes-caja a:hover,.pc-boton:hover,.hh-ico:hover .hh-ico-dibujo,
  .hh-rubro:hover .hh-vidriera img{transform:none !important}
}

/* ── 1.9.5: LA MESA (inc/portada.php, fotos/mesa-<rubro>.webp) ─────────
   Una sola foto con 6-8 productos SIN fondo, armada como una toma: va
   entera (contain), parada sobre el estante, sobre el color del rubro.
   Pisa todo lo de las .hh-vidriera img de arriba (ancho, márgenes,
   multiply, el recorte del sello —la mesa ya viene sin sello— y los giros). */
.hh-vidriera img.hh-mesa{position:absolute;left:2%;right:2%;top:6px;bottom:20px;width:96%;height:calc(100% - 26px);
  margin:0;object-fit:contain;object-position:50% 100%;mix-blend-mode:normal;clip-path:none;
  transform:none;transform-origin:50% 100%;z-index:1;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hh-rubro:hover .hh-vidriera img.hh-mesa{transform:scale(1.035)}}
@media(max-width:760px){.hh-vidriera img.hh-mesa{bottom:16px;height:calc(100% - 20px)}}
@media (prefers-reduced-motion:reduce){.hh-rubro:hover .hh-vidriera img.hh-mesa{transform:none}}

/* ── 1.9.7 (02/10, Aníbal): la portada del CELULAR era muy larga de recorrer ──
   Afuera, solo en el celular:
   · el botón «Pedí por WhatsApp» del banner (WhatsApp ya está en la barra de abajo
     y en el pie);
   · los seis cuadros de ventajas (estacionamiento, salón, carnicería…, retiro,
     envío, pagos): repetían lo que ya dicen la franja de arriba, el banner y el pie.
   En la computadora queda todo como estaba. */
@media (max-width:760px){
  .hh-hero .hh-boton-verde{display:none}
  .hh-ventajas{display:none}
}

/* ── 1.9.8 (02/10, Aníbal): «los banners tienen que ser menos altos» (celular) ──
   Banner de arriba (459 px): se queda con la ubicación, el título y los dos botones.
   El texto de presentación, los horarios y la cápsula de estacionamiento repetían
   la franja de arriba y el pie. Menos aire arriba (84 -> 34 px).
   Promos (400 px): a 270. El sello del descuento pasa a la esquina de arriba a la
   derecha, ENCIMA de la foto (antes ocupaba su propio renglón), y el texto abajo,
   un poco más chico. */
@media (max-width:760px){
  .hh-hero .hh-bajada,.hh-hero .hh-horario,.hh-hero .hh-hero-extra{display:none}
  .hh-hero-texto{padding:34px 16px 16px}
  .hh-hero-texto h1{font-size:25px;margin-bottom:14px}

  .pc .promos-pista{height:270px}
  .pc .promo-cine{padding:14px 16px 22px;gap:4px}
  .pc .pc-sello{position:absolute;top:10px;right:10px;width:96px;height:96px;margin:0}
  .pc .pc-num b{font-size:30px}
  .pc .largo .pc-num b{font-size:17px}
  .pc .pc-num span{font-size:8.5px}
  .pc .promo-cine h2{font-size:22px;letter-spacing:-.4px}
  .pc .promo-pie{font-size:12.5px}
  .pc .pc-boton{margin-top:8px;padding:8px 16px;font-size:13px}
}

/* ── 1.9.8: «Nosotros y mapa» en el celular (era el bloque más alto: 1.269 px) ──
   Afuera la lista de datos (dirección, horarios, teléfono, mail, estacionamiento,
   salón) y la fila de íconos: el pie los tiene completos, y los íconos traían
   un segundo «Cómo llegar». Quedan el texto, las fotos, UN «Cómo llegar» y el
   mapa, más bajo. */
@media (max-width:760px){
  .hh-nosotros .hh-datos,.hh-iconos-nosotros{display:none}
  .hh-mapa iframe{height:230px}
}

/* 1.9.8: en la promo con foto de producto (el «plato») la foto ocupaba su
   propio lugar arriba y con 270 px el botón quedaba cortado abajo. La foto
   flota arriba a la izquierda (el sello, arriba a la derecha) y el texto se
   apoya ABAJO (en column-reverse, flex-start es abajo). */
@media (max-width:760px){
  .pc .promo-cine{justify-content:flex-start}
  .pc .pc-foto{position:absolute;top:10px;left:12px;width:100px;height:100px}
}

/* ── 1.9.10 (02/10, Aníbal): «sacá todas las cosas que estén repetidas» (celular) ──
   Cada dato, UNA vez:
     franja de arriba  -> retiro, envío, estacionamiento
     pie               -> dirección, contacto (tel, WhatsApp, mail, Instagram),
                          horarios, formas de pago
     Nosotros          -> el texto, las fotos, el mapa y UN «Cómo llegar»
   Afuera: el WhatsApp y el horario de la franja (están en el pie); en el pie,
   retiro/envío/estacionamiento de «Cómo comprar» (están en la franja) y la fila de
   íconos «Seguinos y escribinos» (repite Contacto); el «Cómo llegar» del banner
   (está en Nosotros, que es adonde llevaba). */
@media (max-width:760px){
  .hornero-franja .hf-wa,.hornero-franja .hf-horario{display:none}
  .hornero-pie > div:last-child p:nth-of-type(1),
  .hornero-pie > div:last-child p:nth-of-type(2),
  .hornero-pie > div:last-child p:nth-of-type(4){display:none}
  .hornero-pie-iconos{display:none}
  .hh-hero .hh-boton-claro{display:none}
  .hh-botones{grid-template-columns:1fr}

  /* las promos de PRODUCTO: la caja de la foto y el sello flota sobre la placa
     (en el flujo empujaba el texto fuera de los 270 px) */
  .pc .promo-prod .pc-prod{position:absolute;inset:0;height:auto;margin:0}
  .pc .promo-prod .pc-foto{width:66px;height:66px}
  .pc .promo-prod .pc-sello{width:66px;height:66px}
  .pc .promo-prod .pc-num b{font-size:22px}
  /* el texto apoyado ABAJO: arriba quedan la foto y el sello (hasta 76 px) */
  .pc .promo-prod .promo-texto{position:absolute;left:16px;right:16px;bottom:12px}
}

/* ── 1.9.12 (02/10, Aníbal): los rubros de a 4 por fila en el celular ──
   Eran 2 por fila de 160 px de foto: 10 rubros = 5 filas, la mitad de la portada.
   Ahora ~85 px de ancho: la mesa (contain) y el nombre; la cantidad de productos
   no entra y se saca. */
@media (max-width:760px){
  .hh-rubros{grid-template-columns:repeat(4,1fr);gap:6px}
  .hh-rubro{border-radius:10px}
  .hh-rubro-foto.hh-vidriera{height:70px}
  .hh-vidriera .hh-estante{height:7px;background:linear-gradient(var(--amarillo) 0 3px,var(--rojo) 3px 100%)}
  .hh-vidriera img.hh-mesa{top:3px;bottom:7px;height:calc(100% - 10px);left:1%;right:1%;width:98%}
  .hh-vidriera .hh-prods{bottom:7px}
  .hh-vidriera-0 em{font-size:8px;padding:3px 5px;letter-spacing:.03em}
  .hh-rubro-txt{padding:5px 3px 6px;text-align:center}
  .hh-rubro-txt b{font-size:10px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hh-rubro-txt small{display:none}
}

/* ── 1.9.13 (02/10, Aníbal): las tarjetas de «Ofertas» quedaban estiradas ──
   El pollo y el asado (pesables) suman la leyenda «Se vende de a 250 g · $ …»
   (39-59 px: tres renglones en el asado) y el selector de cantidad (60 px); como
   la tira iguala el alto de todas, las 10 tarjetas medían 405 px. En la tira de
   ofertas: afuera la leyenda (el selector ya dice los gramos y el precio) y el
   selector en un solo renglón, sin el rótulo «Cantidad». */
.hh-ofertas small.hornero-paso{display:none}
.hh-ofertas .hornero-peso{margin:6px 0 4px}
.hh-ofertas .hornero-peso span{display:none}
.hh-ofertas .hornero-peso-sel{padding:6px 8px;font-size:13px}

/* ── 1.9.14 (02/10, Aníbal): las promos un 40 % más bajas en el celular (270 -> 162) ──
   «Mucho espacio vacío.» Con 162 px no entra sello arriba + texto abajo: el texto va
   a la IZQUIERDA (centrado en alto, más chico) y el sello a la DERECHA; en las de
   producto, sello arriba a la derecha y la foto abajo a la derecha. En las de producto
   se saca la línea de arriba y el botón va más chico. */
@media (max-width:760px){
  .pc .promos-pista{height:162px}
  .pc .promo-cine{flex-direction:column;justify-content:center;align-items:flex-start;
    padding:10px 104px 10px 14px;gap:2px}
  .pc .pc-sello{top:calc(50% - 42px);right:10px;width:84px;height:84px}
  .pc .pc-num b{font-size:26px}
  .pc .largo .pc-num b{font-size:15px}
  .pc .pc-num span{font-size:7.5px}
  .pc .promo-cine h2{font-size:18px;line-height:1.1;letter-spacing:-.3px}
  .pc .promo-pie{font-size:11.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;
    -webkit-box-orient:vertical;overflow:hidden}
  .pc .pc-boton{margin-top:5px;padding:5px 12px;font-size:12px}
  .pc .promos-pista .promo-arriba{font-size:10px;padding:3px 8px;margin-bottom:2px}

  /* las de producto */
  /* la caja de foto+sello tenía ancho propio: el sello caía en el medio, encima del texto */
  .pc .promo-prod .pc-prod{left:0;right:0;top:0;bottom:0;width:auto;max-width:none;flex:none}
  .pc .promo-prod .pc-sello{top:8px;right:10px;left:auto;width:62px;height:62px}   /* left: una regla vieja lo fijaba en 128 px */
  .pc .promo-prod .pc-num b{font-size:19px}
  .pc .promo-prod .pc-foto{top:auto;bottom:8px;left:auto;right:12px;width:70px;height:70px}
  .pc .promo-prod .promo-texto{left:14px;right:96px;top:8px;bottom:8px;
    display:flex;flex-direction:column;justify-content:center}
  .pc .promo-prod .promo-arriba{display:none}
  .pc .promo-prod .pc-precios{margin:2px 0}
}

/* ── 1.9.17 (02/10, Aníbal): el banner de arriba, todavía más chico (celular) ──
   Afuera «Ver el catálogo» (llevaba a la misma portada): sin botones, queda la
   ubicación y el título, más chicos y con menos aire. */
@media (max-width:760px){
  .hh-hero .hh-botones{display:none}
  .hh-hero{margin-bottom:12px}
  .hh-hero-texto{padding:14px 14px 12px}
  .hh-hero .hh-cinta{font-size:10px;padding:3px 9px;margin:0 0 6px}
  .hh-hero-texto h1{font-size:20px;line-height:1.15;margin:0}
}

/* ── 1.9.18 (02/10, Aníbal): afuera «Merlo, Buenos Aires (1718)» del banner (celular).
   La dirección completa está en el pie. Queda solo el título sobre la foto. */
@media (max-width:760px){
  .hh-hero .hh-cinta{display:none}
}

/* ── 1.9.19 (02/10, Aníbal): «Supermercado El Hornero. Ahora online!!» arriba del
   título, solo en el celular (en la compu ese lugar es de la cinta con la zona). */
.hh-ahora{display:none}
@media (max-width:760px){
  .hh-hero .hh-ahora{display:block;margin:0 0 3px;font:900 25px/1.1 system-ui;   /* «doble altura» (Aníbal): era 12,5 px */
    
    letter-spacing:.02em;color:var(--amarillo);text-shadow:0 1px 3px rgba(0,0,0,.45)}
}

/* ── 1.9.21 (02/10, Aníbal): la barra «Ver carrito» FIJA ARRIBA DE TODO (celular) ──
   Antes flotaba abajo, encima de la barra de íconos. Ahora, en cuanto hay algo en el
   carrito (body.hornero-con-carrito, js/carrito_barra.js), queda pegada arriba, a
   todo el ancho, y la página baja 40 px para que no tape la franja ni el buscador;
   la cabecera y la barra de rubros (sticky) se corren 40 px. Vacía: no está.
   Y afuera el botón flotante de WhatsApp (está en el pie, en Contacto). */
@media (max-width:767px){
  .hornero-barra-carrito:not(.hornero-vacio){
    top:0;bottom:auto;left:0;right:0;height:40px;padding:0 14px;border-radius:0;
    z-index:10001;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
  body.hornero-con-carrito{padding-top:40px}
  body.hornero-con-carrito .site-header,
  body.admin-bar.hornero-con-carrito .site-header{top:40px}
  body.hornero-con-carrito .hornero-rubros,
  body.admin-bar.hornero-con-carrito .hornero-rubros{top:calc(var(--alto-cabecera,60px) + 40px)}
  body.hornero-con-carrito #content{padding-bottom:90px}
  .hh-wa{display:none}
}

/* ── 1.9.22: la barra del carrito, STICKY en vez de fija (celular) ──
   Fija en top:0 quedaba debajo de la barra negra de WordPress (administrador: 46 px,
   por encima de todo) y arriba de todo se veía solo el hueco de 40 px. Ahora la barra
   es el primer elemento del body (js/carrito_barra.js) y se pega arriba al bajar:
   ocupa su lugar, así que no hace falta el padding del body. */
@media (max-width:767px){
  /* (al final no: sticky no se pega porque html y body tienen overflow-x:hidden.
     Queda fija, y el JS la corre debajo de la barra negra de WordPress) */
  .hornero-barra-carrito:not(.hornero-vacio){top:var(--barra-carrito-top,0px)}
}

/* 1.9.24: el seguro — la barra del carrito POR ENCIMA de la barra negra de WordPress
   (99999). El JS la pone debajo de la negra; si algo fallara, igual se ve. */
@media (max-width:767px){
  .hornero-barra-carrito:not(.hornero-vacio){z-index:100000}
}

/* ── 1.9.25 (02/10, Aníbal): afuera la barra de íconos de abajo del celular ──
   (Storefront: Mi cuenta · Buscar · Carrito). Repetía el buscador de arriba y la
   barra «Ver carrito». Sin ella, no hace falta el aire de abajo que se le dejaba. */
@media (max-width:767px){
  .storefront-handheld-footer-bar{display:none !important}
  body, .site-footer{padding-bottom:0 !important}
  .post-type-archive-product #content,.tax-product_cat #content,.tax-product_tag #content,
  body.hornero-con-carrito #content{padding-bottom:20px}
}

/* ── 1.9.27 (02/10, Aníbal): el banner de arriba, solo «Supermercado El Hornero /
   Ahora online!!» en dos renglones; afuera «El super del barrio, desde siempre»
   (el h1 queda en la página para Google, oculto en el celular). */
@media (max-width:760px){
  .hh-hero-texto h1{display:none}
  /* 22 px y sin cortar: a 25 «Supermercado El Hornero» no entraba en un renglón */
  .hh-hero .hh-ahora{margin:0;font-size:22px;white-space:nowrap}
}

/* ── 1.9.29 (02/10, Aníbal): «Ahora online!!» con letra moderna y más grande; todo
   centrado (celular). Poppins Bold, recortada a las letras del castellano (6 KB, en
   fuentes/; sale de eCommerceuentes). Solo se descarga en el celular: el único
   lugar donde se usa está adentro del @media. */
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;
  src:url("fuentes/poppins-bold.woff") format("woff")}
@media (max-width:760px){
  .hh-hero-texto{text-align:center;max-width:none}
  .hh-hero .hh-ahora{white-space:normal;font-size:17px;line-height:1.15;letter-spacing:.03em}
  .hh-hero .hh-online{display:inline-block;margin-top:2px;white-space:nowrap;
    font:700 clamp(28px,9.5vw,38px)/1.05 "Poppins",system-ui,sans-serif;
    letter-spacing:-.01em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
}

/* ── 1.9.30 (02/10, Aníbal): «Hola, <nombre>» / «Ingresar», fijo a la IZQUIERDA de
   la franja de arriba; lleva a Mi cuenta (inc/cabecera.php). */
.hornero-franja-in{position:relative}
.hornero-franja a.hf-hola{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--amarillo);font-weight:700;text-decoration:none}
.hornero-franja a.hf-hola svg{color:var(--amarillo)}
.hornero-franja a.hf-hola:hover span{text-decoration:underline}
/* compu: la franja centrada sigue igual; el saludo, aparte a la izquierda */
@media (min-width:601px){
  .hornero-franja a.hf-hola{position:absolute;left:0;top:50%;transform:translateY(-50%)}
}
/* celular: primero y PEGADO a la izquierda mientras el resto se desliza */
@media (max-width:600px){
  .hornero-franja a.hf-hola{position:sticky;left:0;z-index:1;flex:none;
    background:var(--rojo-osc);padding-right:10px;margin-right:-8px;
    /* el de la izquierda tapa el margen de la franja, por donde asomaba el texto que pasa por detrás */
    box-shadow:-12px 0 0 var(--rojo-osc),8px 0 8px -4px var(--rojo-osc)}
}

/* ── 1.9.32 (02/10, Aníbal): la franja de arriba como BANNER, con «Hola…» fijo y
   pegado al borde izquierdo ──
   Celular: los carteles (.hf-rotan) se turnan solos de a uno, entrando desde abajo
   (js/franja.js, cada 3 s); ya no se desliza con el dedo. Compu: entran todos y
   quedan quietos como antes (.hf-rotan no existe para el diseño: display:contents). */
.hornero-franja{position:relative}
.hornero-franja .hf-rotan{display:contents}
@media (min-width:601px){
  /* el saludo, contra el borde de la PANTALLA y no del contenedor centrado */
  .hornero-franja-in{position:static}
  .hornero-franja a.hf-hola{left:0;padding-left:12px}
}
@media (max-width:600px){
  .hornero-franja-in{overflow:hidden;padding-left:0;padding-right:10px;gap:0;justify-content:flex-start}
  .hornero-franja a.hf-hola{position:static;flex:none;margin:0;padding:0 12px 0 10px;box-shadow:none;
    border-right:1px solid rgba(255,255,255,.18)}
  .hornero-franja .hf-rotan{display:block;position:relative;flex:1;min-width:0;height:20px;
    overflow:hidden;margin-left:10px}
  .hornero-franja .hf-rotan .hf-item{position:absolute;left:0;top:0;height:20px;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);
    transition:transform .4s var(--ease-out),opacity .4s ease}
  .hornero-franja .hf-rotan .hf-item.activo,
  .hornero-franja .hf-rotan:not(.rota) .hf-item:first-child{opacity:1;transform:none}
  .hornero-franja .hf-rotan .hf-item.saliendo{opacity:0;transform:translateY(-100%)}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .hornero-franja .hf-rotan .hf-item{transform:none !important;transition:opacity .3s ease}
}

/* ── 1.9.33 (03/10, Aníbal): la página de pago más clara (inc/pago.php) ─────
   «Forma de entrega»: en vez de dos botoncitos grises, dos TARJETAS una abajo de
   la otra (Retiro primero), con el nombre y lo que importa debajo; la elegida con
   borde azul y un tilde. Y el recuadro «¿Ya compraste antes? Ingresar con DNI». */
.wc-block-checkout__shipping-method-container{display:flex !important;flex-direction:column;gap:10px;
  background:none !important;padding:0 !important;border:0 !important}
.wc-block-checkout__shipping-method-option{order:2;position:relative;display:block;width:100%;min-height:0;
  margin:0 !important;padding:12px 44px 12px 14px !important;text-align:left;cursor:pointer;
  background:#fff !important;border:1.5px solid #d6dbe3 !important;border-radius:12px !important;box-shadow:none !important;
  transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out)}
.wc-block-checkout__shipping-method-option:active{transform:scale(.985)}
.wc-block-checkout__shipping-method-option.hornero-retiro{order:1}
.wc-block-checkout__shipping-method-option--selected{border:2px solid var(--rojo) !important;background:#f2f5fb !important}
.wc-block-checkout__shipping-method-option::after{content:"";position:absolute;right:14px;top:50%;
  width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--rojo) no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
.wc-block-checkout__shipping-method-option--selected::after{opacity:1;transform:none}
.wc-block-checkout__shipping-method-option-title-wrapper{display:grid !important;grid-template-columns:30px 1fr;
  column-gap:10px;align-items:center;text-align:left;justify-content:start}
.wc-block-checkout__shipping-method-option-title-wrapper svg{grid-row:1 / span 2;width:28px;height:28px;color:var(--rojo)}
.wc-block-checkout__shipping-method-option-title{font-weight:700;font-size:15.5px;color:var(--tinta);line-height:1.25}
.hornero-op-sub{grid-column:2;font-size:12.5px;line-height:1.3;color:var(--gris);font-weight:400}
.wc-block-checkout__shipping-method .wc-block-components-checkout-step__title{text-transform:uppercase;
  letter-spacing:.04em;font-size:15px}
/* el ingreso: lo reemplaza el recuadro de arriba; y la cuenta se crea sola */
.wc-block-checkout__login-prompt,.wc-block-checkout__guest-checkout-notice{display:none !important}
.hornero-pago-ingreso{background:#eef3fb;border:1.5px solid #c9d6ec;border-radius:12px;padding:14px 16px;margin:0 0 22px}
.hornero-pago-ingreso .hpi-titulo{margin:0;font-weight:800;font-size:16px;color:var(--rojo-osc)}
.hornero-pago-ingreso .hpi-texto{margin:2px 0 10px;font-size:13.5px;color:#3d4a63}
.hornero-pago-ingreso .hpi-boton{display:block;text-align:center;padding:11px;border-radius:10px;font-weight:700;
  background:var(--rojo);color:#fff !important;text-decoration:none;transition:transform .16s var(--ease-out)}
.hornero-pago-ingreso .hpi-boton:active{transform:scale(.97)}
.hornero-pago-ingreso .hpi-nuevo{margin:10px 0 0;font-size:12.5px;color:#5b6577}

/* 1.9.34: «Ubicaciones de recogida» afuera MIENTRAS haya un solo local: se tilda
   solo (verificado) y la dirección ya está en la tarjeta de Retiro. Con dos o más
   locales vuelve a aparecer para elegir. Y el botón del ingreso sin subrayado. */
fieldset.wc-block-checkout__pickup-options:not(:has(.wc-block-components-radio-control__option ~ .wc-block-components-radio-control__option)){display:none}
.hornero-pago-ingreso .hpi-boton{text-decoration:none !important}

/* ── 1.9.35 (03/10, Aníbal): «cuando añado una nota al pedido se agranda la pantalla
   y queda todo desfasado». El iPhone AGRANDA la página al tocar un campo con letra de
   menos de 16 px y no la vuelve a achicar: la nota del pedido tenía 14 px (y el
   selector de gramos de los pesables, 13-14). En el celular, todo campo, cuadro de
   texto y selector con 16 px como mínimo. */
@media (max-width:767px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  textarea,select{font-size:16px !important}
}

/* ── 1.9.36 · Los datos de la transferencia dentro de la opción de pago ───
   Alias y CBU en letra grande y con «Copiar»: es lo que la gente tiene que
   pasar al home banking sin equivocarse. El CBU no se corta en dos renglones. */
.hornero-transf{margin:10px 0 2px;padding:12px 14px;background:#f6f8fc;border:1.5px solid #c9d6ec;border-radius:12px}
.hornero-transf .htr-t{margin:0 0 6px;font-weight:800;font-size:15px;color:var(--rojo-osc)}
.hornero-transf .htr-r{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #e3e9f4}
.hornero-transf .htr-r:first-of-type{border-top:0}
.hornero-transf .htr-e{flex:0 0 58px;font-size:12.5px;color:#5b6577}
.hornero-transf .htr-v{flex:1;min-width:0;font-weight:700;font-size:15px;color:#1d2433;word-break:break-word}
.hornero-transf .htr-r:has(.htr-copiar) .htr-v{font-variant-numeric:tabular-nums;letter-spacing:.2px;word-break:break-all}
.hornero-transf .htr-copiar{flex:0 0 auto;padding:6px 12px;border:0;border-radius:8px;background:var(--rojo);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color 160ms ease}
.hornero-transf .htr-copiar:active{transform:scale(.96)}
.hornero-transf .htr-copiar.ok{background:#2f9e44}
.hornero-transf .htr-texto,.hornero-transf .htr-w{margin:8px 0 0;font-size:13px;line-height:1.4;color:#3d4a63}
/* en el teléfono el CBU (22 números) no entraba en un renglón al lado de la
   etiqueta: la etiqueta va arriba, chiquita, y el número con su botón abajo */
.hornero-transf .htr-r{flex-wrap:wrap;row-gap:1px}
.hornero-transf .htr-e{flex:0 0 100%}
.hornero-transf .htr-r:has(.htr-copiar) .htr-v{font-size:14.5px;letter-spacing:0;word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:clip}

/* ── 1.9.40 · Pesables: el cuadro de cantidad del carrito dice «2,5 kg» ───
   El número de pasos queda debajo, invisible; encima, el peso (js/pesables.js).
   El dato «hornero-paso» viaja con el renglón solo para eso: no se muestra. */
.wc-block-components-product-details__hornero-paso,
.variation-hornero-paso{display:none !important}
.wc-block-components-quantity-selector.hornero-en-kilos{position:relative}
.wc-block-components-quantity-selector.hornero-en-kilos .wc-block-components-quantity-selector__input{
  color:transparent !important;caret-color:transparent;-webkit-text-fill-color:transparent}
.hornero-cant-kilos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  font-size:15px;font-weight:600;color:#1d2433;white-space:nowrap;font-variant-numeric:tabular-nums}
/* el « / » que separa los datos queda colgando si el escondido es el último */
.wc-block-components-product-details > :has(+ .wc-block-components-product-details__hornero-paso:last-child) > [aria-hidden="true"]{display:none}
/* en el teléfono la caja mide ~107 px y «2,75 kg» pisaba el +: la de los
   pesables es más ancha (el número de los demás artículos no lo necesita) */
.wc-block-components-quantity-selector.hornero-en-kilos{width:132px !important;max-width:none !important}
.hornero-cant-kilos{font-size:14px}

/* ── 1.9.43 · Por pieza: el dato escondido del renglón y el cuadro más ancho
   («3 unidades» es más largo que «750 g») ─────────────────────────────── */
.wc-block-components-product-details__hornero-unidad,
.variation-hornero-unidad{display:none !important}
.wc-block-components-product-details > :has(+ .wc-block-components-product-details__hornero-unidad:last-child) > [aria-hidden="true"]{display:none}
.wc-block-components-quantity-selector.hornero-en-kilos:has(+ *),
.wc-block-components-quantity-selector.hornero-en-kilos{min-width:132px}
/* «3 unidades» llenaba justo el lugar entre el − y el +: un poco más de aire */
.wc-block-components-quantity-selector.hornero-en-kilos{width:150px !important}

/* ── 1.9.45 · El carrito en el teléfono se cortaba a la derecha ─────────
   El renglón del carrito de bloques usa 4 columnas fijas (80 + 132 + 54 + 70 px
   y 16 px de separación = 384 px) y en un teléfono de 375 hay 355: el total del
   renglón y el «Ahorrá $…» quedaban afuera (la página corta con overflow-x).
   Ya pasaba antes; el cuadro de kilos más ancho lo empeoró. En el teléfono: 3
   columnas, foto de 64 px, el producto se queda con lo que sobra y el total
   ocupa lo que necesita. */
@media (max-width:600px){
  table.wc-block-cart-items .wc-block-cart-items__row{
    grid-template-columns:64px minmax(0,1fr) auto !important;column-gap:10px !important}
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{grid-column:1 !important}
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2 !important}
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{grid-column:3 !important;min-width:0}
  .wc-block-cart-item__image img{width:64px !important;height:auto}
  .wc-block-cart-item__total .wc-block-components-sale-badge{white-space:normal;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════
   1.9.46 (05/10/2026) — MOVIMIENTO DONDE AYUDA (find-animation-opportunities)
   Aníbal: «implementá todo». Cuatro lugares; el resto de la web ya tenía lo
   justo. Todo con la curva --ease-out del tema, solo transform y opacity, y
   con movimiento reducido: aparecer, sin desplazarse.
   ══════════════════════════════════════════════════════════════════════ */

/* (1) LA PÁGINA DE «GRACIAS»: el único momento de festejo de la compra, y
   era la de WooCommerce tal cual. Un tilde que se dibuja y el resto que sube
   un poquito, escalonado. Se ve una vez por compra: acá sí entra el festejo.
   El tilde lo pone hornero_gracias_tilde (inc/pago.php); no sale si el pago
   falló. Todo junto dura menos de 0,7 s y no frena nada: se puede tocar
   todo desde el primer momento. */
.hornero-gracias{display:flex;justify-content:center;margin:6px 0 12px}
.hornero-gracias svg{display:block;width:64px;height:64px;overflow:visible}
.hornero-gracias .hg-circulo{fill:#e9f6ee;stroke:#2f9e44;stroke-width:2.5;
  transform-box:fill-box;transform-origin:center;animation:hg-circulo 300ms var(--ease-out) both}
.hornero-gracias .hg-tilde{fill:none;stroke:#2f9e44;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:hg-traza 450ms var(--ease-out) 150ms forwards}
@keyframes hg-circulo{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes hg-traza{to{stroke-dashoffset:0}}
@keyframes hg-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hg-aparece{from{opacity:0}to{opacity:1}}
.woocommerce-order > .woocommerce-thankyou-order-received{animation:hg-sube 350ms var(--ease-out) 200ms both}
.woocommerce-order > .woocommerce-order-overview{animation:hg-sube 350ms var(--ease-out) 260ms both}
.woocommerce-order > :not(.hornero-gracias):not(.woocommerce-thankyou-order-received):not(.woocommerce-order-overview){
  animation:hg-sube 350ms var(--ease-out) 320ms both}

/* (2) LOS BOTONES QUE CIERRAN LA COMPRA responden al dedo, como los de las
   tarjetas (que ya lo hacían): «Finalizar compra», «Realizar el pedido»,
   «Seguir comprando», «Vaciar carrito». */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.hornero-seguir,.hornero-vaciar{
  transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active,
.hornero-seguir:active,.hornero-vaciar:active{transform:scale(.97)}

/* (3) LO QUE SE ABRE AL ELEGIR UNA FORMA DE PAGO (los datos para transferir,
   lo de Mercado Pago...) aparecía de golpe y empujaba todo lo de abajo. Ahora
   entra en 200 ms. @starting-style: los navegadores viejos lo muestran como
   antes, sin romperse. */
.wc-block-components-radio-control-accordion-content,
.hornero-transf{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{
  .wc-block-components-radio-control-accordion-content,
  .hornero-transf{opacity:0;transform:translateY(-4px)}
}
/* si React vuelve a crear la tarjeta elegida, el tilde también entra suave */
@starting-style{
  .wc-block-checkout__shipping-method-option--selected::after{opacity:0;transform:scale(.6)}
}

/* los botones de bloques de WooCommerce traen su propia transición con más
   peso (solo la sombra): se le gana con más especificidad y se conserva la sombra */
html body .wc-block-components-button.wc-block-cart__submit-button,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button{
  transition:transform 160ms var(--ease-out),box-shadow .1s,background-color 160ms ease}
html body .wc-block-components-button.wc-block-cart__submit-button:active,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button:active{transform:scale(.97)}

/* movimiento reducido: todo aparece, nada se desplaza ni se dibuja */
@media (prefers-reduced-motion:reduce){
  .hornero-gracias .hg-circulo,
  .woocommerce-order > *{animation:hg-aparece 200ms ease both !important}
  .hornero-gracias .hg-tilde{animation:none;stroke-dashoffset:0}
  .wc-block-cart__submit-button:active,
  .wc-block-components-checkout-place-order-button:active,
  .hornero-seguir:active,.hornero-vaciar:active{transform:none}
  html body .wc-block-components-button.wc-block-cart__submit-button:active,
  html body .wc-block-components-button.wc-block-components-checkout-place-order-button:active{transform:none}
  .wc-block-checkout__shipping-method-option::after{transform:none}
  @starting-style{
    .wc-block-components-radio-control-accordion-content,
    .hornero-transf{transform:none}
  }
}