/*
Theme Name: Ellui Online
Theme URI: https://www.ellui.com.ar
Author: Ellui
Description: Tema a medida para Ellui Line. Diseño editorial de moda, sin constructor de páginas y sin frameworks de terceros: todas las opciones viven en el Personalizador de WordPress, así que nada se rompe al actualizar plugins o el núcleo.
Version: 1.5.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ellui-online
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* Los colores se inyectan desde el Personalizador (ver inc/customizer.php). */
:root{
  --ink:#15171B;
  --wall:#F2F1EE;
  --hair:#E2E0DB;
  --brass:#A17C3F;
  --brass-soft:#C9A96A;
  --paper:#FFFFFF;
  --muted:#6E6E6B;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(16px,3vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;background:#fff;padding:10px 16px}

/* ---------- top strip ---------- */
.strip{background:var(--ink);color:#fff;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 12px}
.strip span{color:var(--brass-soft)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.hbar{display:flex;align-items:center;gap:var(--gut);padding:0 var(--gut);height:62px}
.logo{font-family:var(--serif);font-size:25px;letter-spacing:.24em;text-transform:uppercase;padding-right:6px;white-space:nowrap}
.logo em{font-style:italic;letter-spacing:.06em;color:var(--brass);font-size:.62em;text-transform:none;margin-left:2px;vertical-align:.32em}
.logo img{max-height:38px;width:auto}
nav.main{display:flex;gap:26px;flex:1}
nav.main ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav.main a{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:22px 0;border-bottom:2px solid transparent;transition:border-color .18s;display:block}
nav.main a:hover,nav.main .current-menu-item>a{border-bottom-color:var(--ink)}
.tools{display:flex;gap:16px;align-items:center}
.tools a,.tools button{background:none;border:0;padding:6px;color:var(--ink);display:flex}
.bag{position:relative}
.bag i{position:absolute;top:-1px;right:-3px;background:var(--brass);color:#fff;font-style:normal;font-size:9px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;display:grid;place-items:center;font-weight:600}
.burger{display:none}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:150;background:#fff;transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:18px var(--gut) 60px;overflow-y:auto}
.drawer.open{transform:none}
.drawer .x{align-self:flex-end;background:none;border:0;padding:8px;margin-bottom:22px}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer a{font-family:var(--serif);font-size:30px;padding:11px 0;border-bottom:1px solid var(--hair);display:block}
.drawer .meta{margin-top:28px;font-size:12px;color:var(--muted);line-height:1.9}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(540px,92vh,940px);overflow:hidden;background:var(--wall)}
.hero>img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.30) 0%,rgba(10,11,13,0) 38%,rgba(10,11,13,.52) 100%)}
.hero .copy{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(30px,6vw,62px);color:#fff}
.hero .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.9;margin-bottom:10px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8.4vw,108px);line-height:.94;margin:0 0 20px;letter-spacing:-.01em;max-width:13ch}
.hero h1 em{font-style:italic;color:var(--brass-soft)}

.btn{display:inline-block;background:#fff;color:var(--ink);padding:13px 30px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;border:1px solid #fff;transition:background .18s,color .18s}
.btn:hover{background:transparent;color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,7vw,92px) var(--gut)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,38px);flex-wrap:wrap}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,52px);margin:0;line-height:1;letter-spacing:-.01em}
.shead .link{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* ---------- product grid ---------- */
ul.products,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.6vw,26px) clamp(10px,1.2vw,18px);list-style:none;margin:0;padding:0}
.grid.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.grid.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid.five{grid-template-columns:repeat(2,1fr)}}
ul.products::before,ul.products::after{content:none!important}
/* isolation:isolate encierra a la tarjeta en su propio contexto de apilado:
   cualquier z-index de adentro (las etiquetas del tema, el botón, o una
   chapa que agregue un plugin o un fragmento de código — la del 2x1 usa
   z-index:99) queda confinado a la tarjeta y ya no puede taparle la
   ventana de Categorías, que vive en .catbar con z-index:70. Sin esto,
   cualquier chapa con un z-index alto vuelve a pisar el desplegable. */
li.product{position:relative;isolation:isolate;width:auto!important;margin:0!important;float:none!important;clear:none!important}
.card-ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wall);margin-bottom:11px}
/* El selector lleva .woocommerce ul.products li.product adelante a propósito:
   WooCommerce trae `.woocommerce ul.products li.product a img{height:auto}`,
   que con menos clases igual le ganaba a un `.card-ph img` suelto. Con
   height:auto la foto medía 334px dentro de una caja de 356 y quedaba una
   franja de 22px sin cubrir al pie de cada tarjeta. */
.card-ph img,.woocommerce ul.products li.product .card-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);margin:0}
li.product:hover .card-ph img{transform:scale(1.045)}
.card-tag{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding:4px 9px;z-index:2}
/* La etiqueta SALE usa la misma caja blanca que "Nuevo". */
.card-tag.sale{background:#fff;color:var(--ink)}
li.product .ttl{font-size:12.5px;font-weight:500;margin:0 0 3px;letter-spacing:.02em;color:var(--ink)}
li.product .cat{font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin-bottom:5px}
li.product .price{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
li.product .price del{color:var(--muted);font-weight:400;margin-right:7px}
li.product .price ins{text-decoration:none;color:var(--brass)}
li.product .button,li.product .added_to_cart{position:absolute;left:8px;right:8px;top:calc(75% - 46px);background:#fff;color:var(--ink);text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:11px;opacity:0;transform:translateY(6px);transition:.22s;border:0;z-index:2}
li.product:hover .button,li.product:hover .added_to_cart{opacity:1;transform:none}
li.product .onsale,.woocommerce span.onsale{display:none!important}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);padding:0 var(--gut)}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--wall);display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tile:hover img{transform:scale(1.04)}
.tile .on{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2.6vw,34px);background:linear-gradient(180deg,transparent,rgba(10,11,13,.6));color:#fff}
.tile h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,40px);margin:0 0 9px;line-height:1}
.tile .u{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;border-bottom:1px solid #fff;padding-bottom:2px}

/* ---------- band ---------- */
.band{background:var(--ink);color:#fff;padding:clamp(40px,6vw,76px) var(--gut);text-align:center}
.band p{font-family:var(--serif);font-size:clamp(24px,3.6vw,46px);line-height:1.18;margin:0 auto 22px;max-width:20ch}
.band p em{font-style:italic;color:var(--brass-soft)}
.band .sub{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9d9d9a;margin-bottom:26px}

/* ---------- service row ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,44px);border-top:1px solid var(--hair);padding-top:clamp(30px,4vw,52px)}
.svc h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 7px}
.svc p{margin:0;color:var(--muted);font-size:13px;max-width:34ch}

/* ---------- footer ---------- */
.site-footer{background:var(--wall);padding:clamp(44px,6vw,76px) var(--gut) 30px;border-top:1px solid var(--hair)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-bottom:44px}
.fgrid h5{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;margin:0 0 14px}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid a,.fgrid p{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.fgrid a:hover{color:var(--ink)}
.flogo{font-family:var(--serif);font-size:30px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}
.fbot{border-top:1px solid var(--hair);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);letter-spacing:.04em}

/* ---------- shop / archive head ---------- */
.plphead{padding:clamp(28px,4vw,52px) 0 0}
.plphead h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,68px);margin:0 0 8px;line-height:1}
.plphead .cnt{color:var(--muted);font-size:12.5px;letter-spacing:.05em;margin-bottom:18px}

/* ---------- single product ---------- */
/* La ficha va a lo ancho de la pantalla, sin tope: se probó acotarla a 1280px
   en la 1.2.8 y a Eze le gustaba más ancha, así que volvió como estaba.
   El tamaño de la foto principal se regula con la proporción de acá abajo,
   NO con un max-width: flexslider mide la columna al cargar y arma la
   diapositiva con ese número. Era 1.25fr 1fr (foto 902px en una pantalla
   de 1760); con 1fr 1fr queda en 811, un 10% menos. Subir el primer número
   agranda la foto, bajarlo la achica. */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);padding:clamp(24px,4vw,50px) 0 clamp(50px,7vw,90px)}
.woocommerce div.product div.images{width:auto!important;float:none!important;margin:0!important}
.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important;padding-top:clamp(10px,2vw,30px)}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,46px);margin:0 0 12px;line-height:1.02}
.woocommerce div.product p.price{font-size:20px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.ellui-minimo{font-size:12px;color:var(--brass);margin-bottom:26px}
.woocommerce div.product form.cart{margin-bottom:26px}
.woocommerce div.product .quantity input{height:48px;border:1px solid var(--hair);width:64px;text-align:center}
.woocommerce div.product .single_add_to_cart_button{background:var(--ink)!important;color:#fff!important;border-radius:0!important;padding:16px 34px!important;font-size:11px!important;letter-spacing:.17em;text-transform:uppercase;font-weight:600}
.woocommerce div.product .single_add_to_cart_button:hover{background:var(--brass)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0!important;margin:0!important;border:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none!important;border:0!important;border-top:1px solid var(--hair)!important;border-radius:0!important;margin:0!important;padding:0!important;display:block;width:100%}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:16px 0!important;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.woocommerce .product .related,.woocommerce .product .up-sells{grid-column:1/-1;padding:0 0 clamp(40px,6vw,80px)}
.woocommerce .product .related h2,.woocommerce .product .up-sells h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,40px);margin:0 0 26px}

/* ---------- cart / checkout / generic woo ---------- */
.woocommerce-cart .content-area,.woocommerce-checkout .content-area,.woocommerce-account .content-area,.ellui-page{padding:clamp(28px,4vw,54px) var(--gut) clamp(50px,7vw,90px);max-width:1280px;margin:0 auto}
.ellui-page h1,.woocommerce-cart h1,.woocommerce-checkout h1,.woocommerce-account h1,.entry-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,56px);margin:0 0 22px;line-height:1.02}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--ink);color:#fff;border-radius:0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;padding:14px 26px}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--brass);color:#fff}
.woocommerce .button.alt,.woocommerce #place_order{background:var(--ink)!important;color:#fff!important}
.woocommerce table.shop_table{border-radius:0;border-color:var(--hair)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--brass);background:var(--wall)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--brass)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container .select2-selection--single{border:1px solid var(--hair);border-radius:0;padding:12px;min-height:46px}

/* ---------- checkout en dos columnas ---------- */
.woocommerce-checkout #customer_details{display:block}
.woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2{float:none;width:100%;margin:0}
.ellui-checkout-aside{margin:34px 0 0;background:var(--wall);border:1px solid var(--hair);padding:clamp(18px,2.4vw,28px)}
.ellui-checkout-aside #order_review_heading{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,26px);margin:0 0 16px;line-height:1.1}
.ellui-checkout-aside table.shop_table{background:transparent;border:0;margin:0;width:100%}
.ellui-checkout-aside table.shop_table th,.ellui-checkout-aside table.shop_table td{padding:10px 0;border-color:var(--hair)}
.ellui-checkout-aside #payment{background:transparent;border-radius:0;padding:0}
.ellui-checkout-aside #payment .place-order{padding:0;margin:18px 0 0}
.ellui-checkout-aside #place_order{width:100%}
@media(min-width:981px){
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:clamp(28px,4vw,56px);row-gap:0;align-items:start}
  .woocommerce-checkout form.checkout>*{grid-column:1;min-width:0}
  .woocommerce-checkout form.checkout>.ellui-checkout-aside{grid-column:2;grid-row:1/span 40;margin:0}
}

/* ---------- galeria del producto: lupa ----------
   El zoom al pasar el mouse y la vista a pantalla completa ya venían activados
   (wc-product-gallery-zoom / -lightbox en functions.php), pero el botón que
   abre la pantalla completa era el emoji 🔍 suelto de WooCommerce y no se veía
   contra una foto clara. Se le da forma de botón redondo y la lupa se dibuja
   con CSS para que combine con el resto. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img{cursor:zoom-in}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  box-sizing:border-box;width:40px;height:40px;border-radius:50%;padding:0;line-height:0;text-indent:0;
  background:rgba(255,255,255,.92);border:1px solid var(--hair);box-shadow:0 4px 14px rgba(0,0,0,.10);
  display:grid;place-items:center;top:14px;right:14px;
  transition:background .16s,border-color .16s;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover{background:#fff;border-color:var(--ink)}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger span{font-size:0;line-height:0;display:block;position:relative;width:16px;height:16px}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger span::before{content:"";position:absolute;inset:0 4px 4px 0;border:1.6px solid var(--ink);border-radius:50%}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger span::after{content:"";position:absolute;right:0;bottom:1px;width:7px;height:1.6px;background:var(--ink);transform:rotate(45deg);transform-origin:right center}

/* ---------- galeria del producto: tira de miniaturas ----------
   WooCommerce las maqueta con float y width:25%, sin separacion, y estira la
   imagen a un cuadrado. Al pasar la fuente a woocommerce_thumbnail (3:4) hay
   que poner object-fit o se deforma. Grid en lugar de float para tener un
   espacio real entre miniaturas. */
.woocommerce div.product div.images .flex-control-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
@media(max-width:700px){.woocommerce div.product div.images .flex-control-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;float:none;clear:none!important}
.woocommerce div.product div.images .flex-control-thumbs li img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;opacity:.62;transition:opacity .18s}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,.woocommerce div.product div.images .flex-control-thumbs li img:hover{opacity:1}

/* ---------- pagination ---------- */
.woocommerce nav.woocommerce-pagination ul{border:0;margin:40px 0 0}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{padding:10px 14px;font-size:12px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:#fff}

@media(max-width:900px){
  .woocommerce div.product{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  nav.main{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr}
  .hero h1{max-width:100%}
}
@media(max-width:560px){
  ul.products,.grid{grid-template-columns:1fr 1fr;gap:14px 10px}
  .fgrid{grid-template-columns:1fr}
  .logo{font-size:21px;letter-spacing:.18em}
}

/* ---------- pop-ups ---------- */
.paywrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.paywrap[hidden]{display:none}
.payback{position:absolute;inset:0;background:rgba(10,11,13,.68);backdrop-filter:blur(3px)}
.paybox{position:relative;z-index:1;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.payphoto{display:block}
.payphoto img{width:100%;height:auto}
.payx{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.92);border:0;width:34px;height:34px;display:grid;place-items:center;color:var(--ink);border-radius:50%}
.paybody{padding:clamp(20px,3.5vw,32px) clamp(20px,3.5vw,32px) 0}
.paylist{list-style:none;margin:0 0 16px;padding:0}
.paylist li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)}
.paylist .m{font-size:13.5px;line-height:1.35}
.paylist .r{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--brass);white-space:nowrap}
.payfoot{font-size:12px;color:var(--muted);margin:0 0 4px}
.payok{display:block;width:calc(100% - 2*clamp(20px,3.5vw,32px));margin:clamp(20px,3.5vw,32px);text-align:center}
.paybox.has-img .payok{margin-top:0}

/* ---------- Contact Form 7 ---------- */
.wpcf7{max-width:720px;margin:0 auto}
.wpcf7 p{margin:0 0 24px}
.wpcf7 label{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:9px}
.wpcf7 .wpcf7-form-control{width:100%;border:1px solid var(--hair);border-radius:0;padding:17px 18px;font-family:var(--sans);font-size:16px;background:#fff;color:var(--ink)}
.wpcf7 .wpcf7-form-control:focus{outline:none;border-color:var(--ink)}
.wpcf7 textarea.wpcf7-form-control{min-height:220px;resize:vertical}
.wpcf7 input.wpcf7-submit{display:block;margin:0 auto;width:auto;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:18px 52px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:background .18s,color .18s}
.wpcf7 input.wpcf7-submit:hover{background:transparent;color:var(--ink)}
.wpcf7 .wpcf7-not-valid-tip{color:#b3261e;font-size:12.5px;margin-top:7px}
.wpcf7 .wpcf7-response-output{border:1px solid var(--hair);border-left:3px solid var(--brass);margin:24px 0 0;padding:16px 18px;font-size:14px}
.wpcf7 .wpcf7-spinner{margin-left:10px}

/* WooCommerce deja el botón "Actualizar carrito" deshabilitado hasta que
   cambiás una cantidad, y hereda el color del texto: quedaba tinta sobre
   tinta, es decir un bloque gris con el texto invisible. */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled{
  background:var(--ink);
  color:#fff;
  opacity:.4;
  cursor:default;
}

/* ---------- submenús del menú principal ---------- */
nav.main li{position:relative}
nav.main .sub-menu{
  position:absolute;top:100%;left:-18px;min-width:210px;
  background:#fff;border:1px solid var(--hair);border-top:0;
  padding:8px 0;margin:0;display:block;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
  box-shadow:0 14px 34px rgba(10,11,13,.09);z-index:20;
}
nav.main li:hover>.sub-menu,nav.main li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
nav.main .sub-menu li{display:block}
nav.main .sub-menu a{padding:9px 18px;border:0;letter-spacing:.11em;font-size:11px;white-space:nowrap}
nav.main .sub-menu a:hover{background:var(--wall);border:0}
nav.main .menu-item-has-children>a::after{content:"";display:inline-block;width:4px;height:4px;margin-left:7px;vertical-align:2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}

/* submenús dentro del cajón móvil */
.drawer .sub-menu{list-style:none;margin:0 0 10px;padding:0 0 0 16px;border-left:1px solid var(--hair)}
.drawer .sub-menu a{font-family:var(--sans);font-size:15px;letter-spacing:.04em;padding:9px 0;border-bottom:0}

/* ---------- mínimo de compra ---------- */
.ellui-min-box{
  background:var(--wall);border-left:3px solid var(--brass);
  padding:16px 18px;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);
}

/* ---------- ancho del catálogo ----------
   La tienda usaba todo el ancho de la pantalla. Ahora respira por los costados. */
.post-type-archive-product .site-main,
.tax-product_cat .site-main,
.tax-product_tag .site-main,
.single-product .site-main,
.woocommerce-shop .site-main{
  max-width:none;
  margin:0 auto;
  /* prácticamente a todo el ancho: apenas un respiro a los costados */
  padding:0 clamp(14px,1.5vw,26px) clamp(50px,7vw,90px);
}

/* ---------- barra del listado: categorias + filtros ----------
   Acompana el scroll. Si preferis que no lo haga, cambia position:sticky
   por position:static en .catbar y listo. */
.catbar{
  position:sticky;top:62px;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin:0 calc(-1 * clamp(14px,1.5vw,26px)) clamp(22px,3vw,34px);
  padding:12px clamp(14px,1.5vw,26px);
}

/* ---------- ventanas desplegables ---------- */
.dd{position:relative}
.ddb{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--hair);border-radius:100px;
  padding:10px 18px;color:var(--ink);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:border-color .16s;
}
.ddb:hover,.dd.open .ddb{border-color:var(--ink)}
.ddb-short{display:none}
.ddb em{font-style:normal;background:var(--brass);color:#fff;border-radius:100px;min-width:17px;height:17px;padding:0 5px;display:grid;place-items:center;font-size:9.5px;letter-spacing:0}
.ddc{width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.dd.open .ddc{transform:translateY(1px) rotate(-135deg)}
.ddp{
  position:absolute;top:calc(100% + 10px);left:0;z-index:80;
  background:#fff;border:1px solid var(--hair);box-shadow:0 20px 54px rgba(0,0,0,.10);
  padding:20px 22px;min-width:250px;
  max-height:min(68vh,560px);overflow:auto;
}
.ddp[hidden]{display:none}
.ddp-right{left:auto;right:0}
.ddp-wide{width:min(720px,calc(100vw - 32px))}
.ddall{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--hair);padding-bottom:13px;margin-bottom:17px}
.ddall:hover,.ddall.on{color:var(--brass)}
.ddcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:20px 26px}
.ddcol a.h{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:9px}
.ddcol a.h:hover,.ddcol a.h.on{color:var(--brass)}
.ddcol ul{list-style:none;margin:0;padding:0 0 0 1px;display:grid;gap:6px}
.ddcol ul a{font-size:13px;color:var(--muted)}
.ddcol ul a:hover,.ddcol ul a.on{color:var(--ink)}

/* ---------- filtros dentro del desplegable ---------- */
.filters{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.fsel{display:flex;flex-direction:column;gap:6px}
.fsel span{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fsel select{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--hair);background:#fff;color:var(--ink);
  border-radius:0;padding:11px 38px 11px 14px;font-family:var(--sans);font-size:13px;min-width:170px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.fsel select:focus{outline:none;border-color:var(--ink)}
.fact{display:flex;align-items:center;gap:18px;flex-basis:100%;border-top:1px solid var(--hair);padding-top:16px;margin-top:2px}
.fgo{background:var(--ink);color:#fff;border:0;padding:12px 26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.fgo:hover{background:var(--brass)}
.fclear{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:3px}
.fclear:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- buscador ---------- */
.srch{border-top:1px solid var(--hair);background:#fff}
.srch[hidden]{display:none}
.srchin{display:flex;align-items:center;gap:16px;padding:16px var(--gut) 20px}
.srchform{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.srchform input[type=search]{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  border:0;border-bottom:1px solid var(--hair);background:none;color:var(--ink);
  font-family:var(--serif);font-size:clamp(19px,2.6vw,30px);padding:9px 0;
}
.srchform input[type=search]::placeholder{color:var(--muted);opacity:.7}
.srchform input[type=search]:focus{outline:none;border-bottom-color:var(--ink)}
.srchform button{background:none;border:0;padding:6px;color:var(--ink);display:flex}
.srchx{background:none;border:0;padding:6px;color:var(--muted);display:flex}
.srchx:hover{color:var(--ink)}
.dsrch{margin:4px 0 20px}
.dsrch .srchform input[type=search]{font-size:20px}

@media(max-width:700px){
  .catbar{top:62px;gap:10px}
  .ddb{padding:9px 14px;gap:7px}
  .catdd,.filtdd{flex:1 1 calc(50% - 5px)}
  .catdd .ddb,.filtdd .ddb{width:100%;justify-content:center}
  .ddp{left:0;right:0;width:auto;min-width:0}
  .filters{gap:12px}
  .fsel{flex:1 1 100%}
  .fsel select{min-width:0;width:100%}
}

/* Este tema no usa barra lateral. */
.woocommerce-page .widget-area,
.site-main > .widget-area,
#secondary{display:none}

/* ============================================================
 * ESTE BLOQUE VA AL FINAL DEL ARCHIVO, A PROPÓSITO.
 *
 * Redefine .catbar, que es un selector de una sola clase igual que la
 * regla base .catbar{position:sticky;top:62px}. Con la misma
 * especificidad gana la que va después, y los @media NO suman
 * especificidad. En la 1.4.1 este bloque estaba más arriba que la regla
 * base: la barra se quedaba pegada arriba en el celular mientras el
 * panel (selector de dos clases, ése sí ganaba) se abría hacia arriba y
 * se salía de la pantalla. Si alguien mueve esto, vuelve el mismo bug.
 * ============================================================ */

/* ---------- móvil y tablet: la barra de la tienda va al pie ----------
   En teléfonos y tablets la barra de Categorías / Filtros deja de estar
   arriba y pasa a ser una barra fija al pie, con los dos botones uno al lado
   del otro. Las ventanas son las MISMAS del escritorio, sólo que se abren
   hacia arriba.

   El truco es que .catbar pasa a position:fixed, así que ella misma es el
   bloque contenedor de lo que tenga adentro posicionado en absoluto: por eso
   .dd vuelve a position:static y el panel se ancla con bottom:100%, que es
   justo el borde de arriba de la barra. Sin ese position:static el panel se
   colgaría de su .dd y quedaría a mitad de la barra.

   El corte son los 900px que ya usa el resto del tema: es el mismo ancho al
   que el menú pasa a hamburguesa y la ficha de producto a una columna, así
   que la barra al pie aparece justo cuando el sitio se vuelve móvil. Se probó
   en 1024 (tablets en vertical incluidas) y Eze prefirió que la tablet se vea
   como el escritorio. */
@media(max-width:900px){
  .catbar{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin:0;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--hair);border-bottom:0;
    box-shadow:0 -10px 30px rgba(10,11,13,.10);
  }
  .catbar .dd{position:static}
  .catbar .ddb{width:100%;justify-content:center;padding:13px 10px;font-size:10.5px;letter-spacing:.1em}
  .catbar .ddb-long{display:none}
  .catbar .ddb-short{display:inline}
  .catbar .ddp,.catbar .ddp-wide,.catbar .ddp-right{
    position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 10px);
    width:auto;min-width:0;max-width:none;
    max-height:min(64vh,520px);overflow:auto;
    border-left:0;border-right:0;
    box-shadow:0 -22px 60px rgba(10,11,13,.18);
  }
  .catbar .ddcols{grid-template-columns:1fr 1fr;gap:18px 20px}
  .catbar .filters{flex-direction:column;align-items:stretch;gap:14px}
  .catbar .fsel{width:100%}
  .catbar .fsel select{width:100%}
  /* Que la barra no tape ni la última fila de productos ni el pie. */
  body.woocommerce-shop,body.tax-product_cat,body.tax-product_tag,body.post-type-archive-product,body.search-results{padding-bottom:80px}
  body:has(.catbar){padding-bottom:80px}
  /* El botón de WhatsApp lo pone el plugin WP Sticky Button con
     position:fixed;bottom:30px y z-index de siete cifras, así que quedaba
     encima de la barra. Se lo sube sólo en las páginas que tienen barra. */
  body:has(.catbar) #okapi-wasb-button{bottom:98px}
  body.woocommerce-shop #okapi-wasb-button,body.tax-product_cat #okapi-wasb-button,body.post-type-archive-product #okapi-wasb-button{bottom:98px}
}
@media(max-width:420px){
  .catbar{gap:8px;padding-left:10px;padding-right:10px}
  .catbar .ddb{padding:13px 6px;font-size:10px;gap:6px}
  .catbar .ddcols{grid-template-columns:1fr}
}

/* ---------- botón "Categorías" destacado ----------
   Venía del CSS adicional del staging (provisorio) y pasa al tema en la 1.5.0.
   Es la acción principal de la tienda: lleno en tinta, ícono en dorado; al
   pasar el mouse o abrirlo se pone dorado. "Filtrar y ordenar" queda como
   secundario. El padding grande sólo en escritorio: en el celular manda el
   de la barra al pie. Va después del bloque de móvil a propósito (mismo
   motivo: que ninguna regla base posterior lo pise). */
.catbar .catdd .ddb{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(21,23,27,.18)}
.catbar .catdd .ddb svg{stroke:var(--brass);width:16px;height:16px}
.catbar .catdd .ddb:hover,.catbar .catdd.open .ddb{background:var(--brass);border-color:var(--brass);color:#fff}
@media(min-width:901px){
  .catbar .catdd .ddb{padding:13px 24px;font-size:11.5px;letter-spacing:.16em}
  .catbar .filtdd .ddb{padding:12px 20px}
}

/* ---------- botón de WhatsApp del plugin, detrás de los desplegables ----------
   WP Sticky Button le pone z-index:9999999 y se dibujaba encima de las
   ventanas de Categorías y Filtros. Con 60 queda debajo de la barra de la
   tienda (70 / 120 en móvil), la cabecera (100), el cajón (150) y el pop-up
   (300), pero encima del contenido normal. También venía del CSS adicional. */
#okapi-wasb-button{z-index:60 !important}