/*
Theme Name: La Casa de la Calabaza
Theme URI: https://lacasadelacalabaza.com/
Author: La Casa de la Calabaza
Author URI: https://lacasadelacalabaza.com/
Description: Tema a medida para La Casa de la Calabaza. Reproduce exactamente la web estatica original (Light Editorial Cream) sobre WordPress y WooCommerce: portada por secciones, tienda con filtros, ficha de producto con venta por kilo, cajon de carrito, cuenta de cliente y diario de campo. Sin dependencias externas ni compilacion.
Version: 3.78.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casa-calabaza
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================
   La Casa de la Calabaza — Tienda online
   Sistema visual: Light Editorial Cream (continúa la landing v1)
   Sin dependencias, sin build. Vanilla CSS.
   ========================================================== */

:root{
  --cream:#faf3e6;
  --cream-2:#f3e8d4;
  --cream-3:#efe2c9;
  --paper:#fffdf8;
  --ink:#2a2620;
  --ink-soft:#5a5347;
  --green:#234a3f;
  --green-2:#4a6b4f;
  --sage:#8fa377;
  --terracotta:#d9722f;
  --terracotta-dark:#b45a1e;
  --orange:#e69b64;
  --mustard:#f1db7d;
  --line:rgba(35,74,63,.14);
  --line-strong:rgba(35,74,63,.26);
  --danger:#a8412a;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;

  --container:1240px;
  --radius:22px;
  --radius-sm:14px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --header-h:112px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0 0 .5em;color:var(--green);letter-spacing:-.01em;}
p{margin:0 0 1em;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:6px;}

.section-inner{max-width:var(--container);margin:0 auto;padding:0 28px;}
.narrow{max-width:900px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:var(--terracotta);font-weight:500;margin-bottom:.9em;
}
.eyebrow.center,.center{text-align:center;}
h2.center{max-width:760px;margin-left:auto;margin-right:auto;}
.lead{max-width:660px;color:var(--ink-soft);font-size:1.05rem;}
.lead.center{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:3rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.92em 1.9em;border-radius:100px;font-size:.92rem;font-weight:500;
  border:1px solid transparent;white-space:nowrap;text-align:center;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s,border-color .3s;
}
.btn-primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 24px -10px rgba(217,114,47,.55);}
.btn-primary:hover{transform:translateY(-2px);background:var(--terracotta-dark);box-shadow:0 16px 30px -12px rgba(217,114,47,.6);}
.btn-green{background:var(--green);color:var(--cream);}
.btn-green:hover{transform:translateY(-2px);background:#1b3a31;}
.btn-outline{border-color:var(--green);color:var(--green);background:transparent;}
.btn-outline:hover{background:var(--green);color:#fff;}
.btn-light{background:var(--paper);color:var(--green);border-color:var(--line);}
.btn-light:hover{border-color:var(--green);transform:translateY(-2px);}
.btn-ghost{color:var(--green);border-bottom:1px solid var(--green);border-radius:0;padding:.3em 0;background:none;}
.btn-ghost:hover{color:var(--terracotta);border-color:var(--terracotta);}
.btn.full{width:100%;}
.btn.small{padding:.65em 1.3em;font-size:.84rem;}
.btn[disabled]{opacity:.45;pointer-events:none;}
/* "Realizar el pedido" pide un gris de verdad mientras falten las casillas
   legales, no solo el naranja atenuado de .btn[disabled] de arriba (que
   sigue aplicandose, pero el color de fondo de aqui manda por ir despues).
   Vuelve a su naranja normal solo, sin transicion que retrasar, en cuanto
   assets/js/theme.js (initBotonPedidoLegal) quita el atributo disabled. */
#place_order[disabled]{background:#b9b2a4 !important;color:#fff !important;box-shadow:none !important;opacity:1 !important;}
#place_order[disabled]:hover{background:#b9b2a4 !important;transform:none !important;}

/* ---------- Animaciones de entrada ---------- */
.hero-anim{opacity:0;animation:heroIn .9s var(--ease) forwards;animation-delay:.1s;}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

/* Progresivo: el contenido se ve por defecto; el fade sólo si hay JS */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}
.reveal[data-delay="5"]{transition-delay:.4s;}
/* Defensivo: los títulos partidos nunca se quedan invisibles */
.js .reveal[data-split]{opacity:1;transform:none;}

/* ============ BARRA SUPERIOR ============ */
.topbar{
  background:var(--green);color:rgba(250,243,230,.9);
  font-size:.78rem;letter-spacing:.04em;
}
.topbar-inner{
  max-width:var(--container);margin:0 auto;padding:8px 28px;
  display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
}
.topbar-inner span{display:inline-flex;align-items:center;gap:.5em;}
.topbar svg{width:14px;height:14px;color:var(--mustard);flex-shrink:0;}
.topbar a:hover{color:var(--mustard);}

/* ============ CABECERA ============ */
/* Cabecera blanca: el logotipo de la marca lleva su propio fondo blanco,
   así que el blanco puro es el único fondo en el que encaja sin recortes. */
.site-header{
  position:sticky;top:0;z-index:90;background:#fff;
  border-bottom:2px solid var(--green);
  transition:box-shadow .4s ease,padding .3s ease;
  padding:14px 0;
}
.site-header.scrolled{
  box-shadow:0 10px 30px -22px rgba(35,74,63,.55);padding:8px 0;
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:22px;
}
.brand{flex-shrink:0;}
.brand-logo{height:52px;width:auto;transition:height .3s ease;}
.site-header.scrolled .brand-logo{height:42px;}
.main-nav{display:flex;gap:30px;margin-left:auto;}
.main-nav a{font-size:.92rem;color:var(--green);position:relative;padding:6px 0;font-weight:500;}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--terracotta);
  transition:width .3s var(--ease);
}
.main-nav a:hover::after,.main-nav a.is-active::after{width:100%;}
.main-nav a.is-active{color:var(--terracotta);}

.header-tools{display:flex;align-items:center;gap:6px;margin-left:auto;}
.main-nav + .header-tools{margin-left:0;}
.tool-btn{
  position:relative;display:inline-flex;align-items:center;gap:.45em;
  background:none;border:1px solid transparent;border-radius:100px;
  padding:.5em .8em;color:var(--green);font-size:.84rem;
  transition:background .3s,border-color .3s,color .3s;
}
.tool-btn:hover{background:var(--cream);border-color:var(--line);color:var(--terracotta);}
.tool-btn svg{width:19px;height:19px;flex-shrink:0;}
.tool-label{display:none;}
.cart-count{
  position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 5px;
  background:var(--terracotta);color:#fff;border-radius:100px;
  font-size:.66rem;font-weight:600;line-height:18px;text-align:center;
  transform:scale(0);transition:transform .3s var(--ease);
}
.cart-count.on{transform:scale(1);}
.cart-btn.bump{animation:bump .45s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}

.nav-toggle{display:none;background:none;border:none;width:32px;height:22px;position:relative;flex-shrink:0;padding:0;}
.nav-toggle span{position:absolute;left:0;right:0;height:2px;background:var(--green);border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:10px;}
.nav-toggle span:nth-child(3){top:20px;}
.nav-toggle.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* ============ HERO PORTADA ============ */
.hero{
  position:relative;min-height:78vh;display:flex;align-items:center;
  padding:90px 0 70px;overflow:hidden;background:var(--cream-2);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 78%;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(250,243,230,.95) 0%,rgba(250,243,230,.82) 38%,rgba(250,243,230,.15) 70%,transparent 100%);
}
.hero .section-inner{position:relative;z-index:1;}
.hero-content{max-width:620px;}
.hero-title{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.04;margin-bottom:.42em;}
.hero-title span{display:block;}
.hero-title .accent{font-style:italic;color:var(--terracotta);font-weight:400;}
.hero-sub{font-size:1.06rem;max-width:520px;color:var(--ink-soft);}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:1.7em;flex-wrap:wrap;}

/* ============ HERO PÁGINAS INTERIORES ============ */
/* La banda de la cabecera de pagina, ajustada: con 70px arriba y un titulo de
   hasta 3,2rem sobraba casi medio pantallazo de crema en las paginas que solo
   llevan titulo (la tienda, por ejemplo). Se recorta el aire y el titulo, pero
   sin quedarse corta: en "Nosotros" ahi debajo va un parrafo de tres lineas y
   sigue respirando. */
.page-hero{padding:42px 0 32px;background:var(--cream-2);border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:.25em;}
.page-hero .lead{margin-bottom:0;}
.breadcrumb{display:flex;gap:.5em;font-size:.78rem;color:var(--ink-soft);margin-bottom:1.2em;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--terracotta);}
.breadcrumb span{opacity:.5;}

/* ============ TIRA DE CONFIANZA ============ */
.trust{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.trust-item{display:flex;gap:14px;align-items:flex-start;}
.trust-item svg{width:26px;height:26px;color:var(--terracotta);flex-shrink:0;margin-top:2px;}
.trust-item h3{font-size:.98rem;margin:0 0 .15em;font-family:var(--sans);font-weight:600;color:var(--green);}
.trust-item p{font-size:.84rem;color:var(--ink-soft);margin:0;line-height:1.45;}

/* ============ CATEGORÍAS ============ */
.categorias{padding:100px 0 20px;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  color:#fff;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.cat-card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(35,74,63,.5);}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease);}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,38,32,.88) 0%,rgba(20,38,32,.35) 48%,rgba(20,38,32,.08) 100%);}
.cat-card h3{color:#fff;font-size:1.35rem;margin-bottom:.15em;}
.cat-card p{font-size:.85rem;opacity:.85;margin:0 0 .8em;}
.cat-card .cat-count{
  display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mustard);
}
.cat-card.is-flat{background:var(--green);}
.cat-card.is-flat::after{background:radial-gradient(70% 60% at 80% 10%,rgba(143,163,119,.35),transparent 65%);}

/* ============ REJILLA DE PRODUCTOS ============ */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.prod-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.prod-card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.prod-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 26px 44px -28px rgba(35,74,63,.4);}
.prod-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream-2);}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.prod-card:hover .prod-media img{transform:scale(1.05);}
/* z-index 3 y no 2: el enlace que envuelve la foto (.prod-card .prod-media a,
   mas abajo) tambien esta en el 2 y va despues en el HTML, asi que con el
   mismo numero ganaba el, y las pastillas se pintaban DEBAJO de la foto. Se
   veian solo mientras la imagen no habia cargado, que es lo que despistaba.
   El pointer-events:none deja que el clic las atraviese: la tarjeta entera
   sigue llevando a la ficha, tambien en esa esquina. */
.prod-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:3;pointer-events:none;}
.badge{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.4em .75em;border-radius:100px;background:var(--paper);color:var(--green);
  box-shadow:0 4px 12px -6px rgba(35,74,63,.4);
}
.badge.halloween{background:var(--terracotta);color:#fff;}
.badge.lote{background:var(--green);color:var(--mustard);}
.badge.deco{background:var(--mustard);color:#5c4a12;}
/* Verde salvia con tinta muy oscura: 5,4:1 de contraste, legible al tamaño
   pequeño de la pastilla, y distinto de un vistazo de los otros tres. */
.badge.cocina{background:var(--sage);color:#1e2b16;}
/* Tinta oscura sobre crema: no compite con ninguna de las otras cuatro y se
   lee como lo que es, un aviso de "todavia no", no un reclamo. */
.badge.proximamente{background:var(--ink);color:var(--cream);}
.prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.prod-species{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sage);margin-bottom:.4em;font-style:italic;}
.prod-name{font-size:1.02rem;line-height:1.25;margin:0 0 .5em;}
.prod-name a:hover{color:var(--terracotta);}
/* Toda la tarjeta lleva al producto. El enlace del titulo se estira por encima
   de ella, asi que da igual donde se pinche; el boton de anadir se queda por
   delante para que siga siendo un boton y no un enlace mas. */
.prod-name a::after{content:"";position:absolute;inset:0;z-index:1;}
.prod-card .prod-media a,.prod-card .prod-foot{position:relative;z-index:2;}
.prod-card .prod-media a::after{content:"";position:absolute;inset:0;}
.prod-add{position:relative;z-index:3;}
.prod-meta{font-size:.78rem;color:var(--ink-soft);margin:0 0 .9em;}
.prod-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.prod-price{font-family:var(--serif);font-size:1.22rem;color:var(--green);line-height:1.1;}
.prod-price small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:2px;}
.prod-add{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--green);
  background:transparent;color:var(--green);display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .3s,color .3s,transform .3s var(--ease);
}
.prod-add svg{width:18px;height:18px;}
.prod-add:hover{background:var(--green);color:var(--mustard);transform:scale(1.08);}
.prod-add.done{background:var(--sage);border-color:var(--sage);color:#fff;}

/* ============ SECCIÓN DESTACADOS ============ */
.destacados{padding:90px 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px;flex-wrap:wrap;}
.sec-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:0;}
.sec-head .eyebrow{margin-bottom:.5em;}

/* ============ ESTADÍSTICAS ============ */
.stats{background:var(--green);color:var(--cream);padding:66px 0;}
.stats-inner{
  max-width:var(--container);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
}
.stat{display:flex;flex-direction:column;align-items:center;}
.stat-num{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.1rem);font-weight:500;line-height:1;}
.stat-suffix{font-family:var(--serif);font-size:1.5rem;color:var(--mustard);margin-left:2px;}
.stat-label{font-size:.82rem;opacity:.75;margin-top:.6em;max-width:170px;}

/* ============ HISTORIA / DOS COLUMNAS ============ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.two-col.wide-left{grid-template-columns:1.05fr .95fr;}
.historia{padding:110px 0;}
.historia h2{font-size:clamp(2rem,3.4vw,2.8rem);}
.col-text p{color:var(--ink-soft);}
.quote-card{
  background:var(--paper);border-left:3px solid var(--terracotta);
  padding:1.4em 1.6em;border-radius:0 14px 14px 0;font-style:italic;color:var(--green);
  font-family:var(--serif);font-size:1.05rem;margin-top:1.6em;
}
.quote-card cite{display:block;font-style:normal;font-family:var(--sans);font-size:.78rem;color:var(--terracotta);margin-top:.7em;letter-spacing:.04em;}
.photo-frame{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:0 34px 60px -40px rgba(35,74,63,.6);}
.photo-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.photo-frame.landscape img{aspect-ratio:4/3;}
/* Foto de José Carlos: al ser una foto apaisada metida en un marco vertical,
   el recorte centrado dejaba a la persona fuera. Desplazamos el encuadre
   hacia la derecha, que es donde está él. */
.photo-frame.focus-right img{object-position:88% center;}
.photo-caption{
  position:absolute;left:16px;bottom:16px;right:16px;background:rgba(255,253,248,.93);
  backdrop-filter:blur(6px);border-radius:14px;padding:.9em 1.1em;font-size:.82rem;color:var(--green);
}

/* ============ MILPA ============ */
.cultivo{padding:100px 0;background:var(--cream-2);}
.cultivo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px;}
.cultivo-card{
  background:var(--paper);border-radius:var(--radius);padding:2.2em 2em;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.cultivo-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(35,74,63,.34);}
.cultivo-icon{width:46px;height:46px;margin-bottom:1em;color:var(--green);}
.cultivo-card h3{font-size:1.22rem;margin-bottom:.35em;}
.cultivo-card p{color:var(--ink-soft);font-size:.94rem;margin:0;}

/* ============ FRANJA CABELLO DE ÁNGEL ============ */
.franja{position:relative;padding:110px 0;overflow:hidden;background:var(--green);color:var(--cream);}
.franja-bg{position:absolute;inset:0;opacity:.32;}
.franja-bg img{width:100%;height:100%;object-fit:cover;}
.franja .section-inner{position:relative;z-index:1;}
.franja-box{max-width:560px;}
.franja h2{color:var(--cream);font-size:clamp(2rem,3.6vw,2.9rem);}
.franja .eyebrow{color:var(--mustard);}
.franja p{color:rgba(250,243,230,.86);}

/* ============ BLOG TEASER / LISTA ============ */
.blog-sec{padding:100px 0;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.post-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.post-card:hover{transform:translateY(-6px);box-shadow:0 26px 44px -28px rgba(35,74,63,.4);}
.post-media{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2);}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post-card:hover .post-media img{transform:scale(1.05);}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.post-date{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.6em;}
.post-card h3{font-size:1.14rem;line-height:1.3;margin-bottom:.5em;}
.post-card p{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.2em;}
.post-card .btn-ghost{margin-top:auto;align-self:flex-start;font-size:.84rem;}

/* Artículo abierto */
.post-full{padding:60px 0 100px;}
.post-full article{max-width:760px;margin:0 auto;}
.post-full .post-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:38px;}
.post-full .post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.post-full h2{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.post-full p{color:var(--ink-soft);font-size:1.02rem;line-height:1.75;}
.post-full p:first-of-type{font-size:1.14rem;color:var(--green);font-family:var(--serif);line-height:1.6;}

/* ============ CTA FINAL ============ */
.cta-band{padding:0 0 100px;}
.cta-box{
  background:var(--green);color:var(--cream);border-radius:var(--radius);
  padding:3.4em 2.4em;text-align:center;position:relative;overflow:hidden;
}
.cta-box::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 85% 15%,rgba(241,219,125,.22),transparent 62%),
             radial-gradient(50% 60% at 10% 90%,rgba(143,163,119,.28),transparent 62%);
}
.cta-box > *{position:relative;}
.cta-box h2{color:var(--cream);font-size:clamp(1.8rem,3.2vw,2.5rem);max-width:620px;margin-left:auto;margin-right:auto;}
.cta-box p{color:rgba(250,243,230,.82);max-width:520px;margin:0 auto 1.8em;}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ============ TIENDA: LAYOUT ============ */
.shop{padding:36px 0 100px;}
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:40px;align-items:start;}
/*
 * Sin scroll propio: los grupos vienen plegados y solo hay uno abierto a la
 * vez (vease assets/js/shop.js), asi que la columna nunca pasa del alto de la
 * pantalla y no hace falta.
 */
.shop-side{position:sticky;top:calc(var(--header-h) + 12px);}
.searchbox{position:relative;margin-bottom:22px;}
.searchbox input{
  width:100%;padding:.9em 1em .9em 2.8em;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);font-size:.92rem;color:var(--ink);transition:border-color .3s,box-shadow .3s;
}
.searchbox input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);}
.searchbox svg{position:absolute;left:1em;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--sage);}

.filter-group{border-bottom:1px solid var(--line);padding:16px 0;}
.filter-group:first-of-type{border-top:1px solid var(--line);}
.filter-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;padding:4px 0;color:var(--green);
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
}
.filter-head svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.filter-group.closed .filter-head svg{transform:rotate(-90deg);}
/* En columna estrecha (barra lateral de escritorio) queda en una sola columna;
   en cuanto hay sitio para una segunda de ~130px, se reparte en varias:
   así se aprovecha el ancho en vez de dejar cada opción en su propia fila. */
/*
 * Se despliega con el mismo truco que el buscador: la envoltura pasa de 0fr a
 * 1fr y eso anima exactamente el alto del contenido, sin tener que adivinar un
 * maximo. Con display:none no habia forma de animarlo.
 */
.filter-caja{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .32s var(--ease),opacity .24s ease;
}
.filter-group.closed .filter-caja{grid-template-rows:0fr;opacity:0;}

.filter-body{
  padding:12px 12px 4px 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px 18px;max-height:280px;
  overflow:hidden;min-height:0;
  visibility:visible;
  transition:padding .32s var(--ease),visibility 0s;
}
/*
 * El relleno hay que anularlo tambien: con la fila a 0fr el contenido se
 * recorta, pero el relleno seguia ocupando 16 px y el grupo plegado no llegaba
 * a cerrarse del todo.
 *
 * Y la visibilidad se apaga solo al terminar de plegarse (de ahi el retardo),
 * para que mientras se cierra siga viendose y para que despues no se pueda
 * tabular dentro de lo que esta escondido.
 */
.filter-group.closed .filter-body{
  padding-top:0;padding-bottom:0;
  visibility:hidden;
  transition:padding .32s var(--ease),visibility 0s .32s;
}
.filter-group:not(.closed) .filter-body{overflow-y:auto;}
@media (prefers-reduced-motion:reduce){
  .filter-caja,.filter-body{transition-duration:.01ms !important;}
}
.filter-body::-webkit-scrollbar{width:6px;}
.filter-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;}
.f-opt{display:flex;align-items:center;gap:.6em;font-size:.87rem;color:var(--ink-soft);cursor:pointer;min-width:0;}
.f-opt input{width:16px;height:16px;accent-color:var(--terracotta);flex-shrink:0;cursor:pointer;}
.f-opt:hover{color:var(--green);}
.f-opt span:not(.n){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.f-opt .n{margin-left:auto;font-size:.75rem;opacity:.55;flex-shrink:0;}

.shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:24px;flex-wrap:wrap;
}
.chips{display:flex;gap:9px;flex-wrap:wrap;}
.chip{
  padding:.55em 1.15em;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);color:var(--green);font-size:.85rem;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--green);}
.chip.on{background:var(--green);color:var(--cream);border-color:var(--green);}
.chip .n{opacity:.55;font-size:.78rem;margin-left:.35em;}
.shop-sort{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-soft);}
.shop-sort select{
  padding:.55em 2em .55em .9em;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);color:var(--green);font-size:.85rem;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23234a3f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:11px;
}
.shop-count{font-size:.85rem;color:var(--ink-soft);}
.shop-count b{color:var(--green);font-weight:600;}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.pill-x{
  display:inline-flex;align-items:center;gap:.45em;padding:.35em .5em .35em .9em;
  border-radius:100px;background:var(--cream-2);border:1px solid var(--line);
  font-size:.78rem;color:var(--green);
}
.pill-x button{background:none;border:none;color:var(--terracotta);font-size:1rem;line-height:1;padding:0 .25em;}
.empty-state{text-align:center;padding:80px 20px;color:var(--ink-soft);}
.empty-state svg{width:56px;height:56px;color:var(--line-strong);margin:0 auto 18px;}
.load-more{display:flex;justify-content:center;margin-top:46px;}
/* Con JavaScript las siguientes se cargan solas al llegar abajo: el boton se
   guarda (sigue ahi para quien no tenga JavaScript) y deja un aviso discreto. */
.load-more.is-auto .btn{display:none;}
.load-more.is-auto::after{
  content:attr(data-cargando);font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
  padding:.6em 0;
}
.filters-toggle{display:none;}

/* ============ FICHA DE PRODUCTO ============ */
.pdp{padding:36px 0 100px;}
/* La foto es cuadrada y la columna de datos (título, precio, compra) es más
   alta: sin esto quedaba un hueco vacío bajo la foto. La ficha técnica se
   coloca debajo de la foto para ocupar ese espacio en vez de dejarlo en
   blanco; en móvil (una sola columna) pasa al final, tras el botón de compra. */
.pdp-layout{
  display:grid;grid-template-columns:1.05fr 1fr;column-gap:60px;row-gap:2em;
  grid-template-areas:"media info" "specs info";align-items:start;
}
.pdp-media{grid-area:media;border-radius:var(--radius);overflow:hidden;background:var(--cream-2);position:relative;}
.pdp-media img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pdp-media .prod-badges{top:18px;left:18px;}
.pdp-info{grid-area:info;}
.pdp-info h1{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:.2em;}
.pdp-species{font-style:italic;color:var(--sage);font-size:.92rem;letter-spacing:.04em;margin-bottom:1.2em;}
.pdp-price{display:flex;align-items:baseline;gap:.5em;margin-bottom:.3em;}
.pdp-price .amount{font-family:var(--serif);font-size:2.2rem;color:var(--green);}
.pdp-price .unit{font-size:.9rem;color:var(--ink-soft);}
.pdp-note{font-size:.83rem;color:var(--ink-soft);margin-bottom:1.6em;}
.pdp-desc{color:var(--ink-soft);margin-bottom:1.8em;}
.buy-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.8em;}
.field{margin-bottom:1.2em;}
.field > label{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:.7em;}
.kilo-opts{display:flex;flex-wrap:wrap;gap:8px;}
.kilo-opt{
  padding:.55em 1em;border-radius:12px;border:1px solid var(--line);background:var(--cream);
  color:var(--green);font-size:.86rem;transition:all .28s var(--ease);
}
.kilo-opt:hover{border-color:var(--green);}
.kilo-opt.on{background:var(--green);color:var(--cream);border-color:var(--green);}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--cream);overflow:hidden;}
.qty button{width:38px;height:40px;background:none;border:none;color:var(--green);font-size:1.15rem;line-height:1;}
.qty button:hover{background:var(--cream-2);color:var(--terracotta);}
.qty input{width:44px;height:40px;border:none;background:none;text-align:center;font-size:.95rem;color:var(--ink);-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.buy-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:1em 0 1.2em;border-top:1px dashed var(--line);margin-top:.4em;
}
.buy-total .label{font-size:.85rem;color:var(--ink-soft);}
.buy-total .amount{font-family:var(--serif);font-size:1.75rem;color:var(--green);}
.pdp-specs{grid-area:specs;border-top:1px solid var(--line);}
.spec-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:.85em 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.spec-row dt{color:var(--ink-soft);letter-spacing:.04em;}
.spec-row dd{margin:0;color:var(--green);}
.tag-list{display:flex;flex-wrap:wrap;gap:7px;}
.tag{font-size:.76rem;padding:.3em .8em;border-radius:100px;background:var(--cream-2);color:var(--green);border:1px solid var(--line);}
.related{padding:0 0 40px;}

/* ============ CAJÓN DEL CARRITO ============ */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(35,74,63,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;z-index:110;
}
.drawer-backdrop.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--cream);
  z-index:120;transform:translateX(102%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(35,74,63,.6);
}
.cart-drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.drawer-head h2{margin:0;font-size:1.25rem;}
.drawer-close{background:none;border:none;color:var(--green);width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.drawer-close:hover{background:var(--cream-2);color:var(--terracotta);}
.drawer-close svg{width:18px;height:18px;}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px;}
.drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--line);background:var(--paper);flex-shrink:0;}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4em;}
.drawer-total .amount{font-family:var(--serif);font-size:1.5rem;color:var(--green);}
.drawer-ship{font-size:.78rem;color:var(--sage);margin-bottom:1.1em;display:flex;align-items:center;gap:.45em;}
.drawer-ship svg{width:15px;height:15px;}
.drawer-actions{display:flex;flex-direction:column;gap:10px;}

.cart-line{
  display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);overflow:hidden;
  transition:opacity .3s ease,transform .3s ease,max-height .38s ease,
    padding .38s ease,margin .38s ease,border-color .38s ease;
}
/* Quitar una linea del cajon: se desvanece y colapsa hasta cero, en vez de
   desaparecer de golpe cuando WooCommerce sustituye el cajon entero
   (assets/js/theme.js, quitarLineaCarrito). */
.cart-line.is-saliendo{
  opacity:0;transform:translateX(18px);max-height:0 !important;
  padding-top:0;padding-bottom:0;margin:0;border-color:transparent;pointer-events:none;
}
.cart-line:last-child{border-bottom:none;}
.cart-line img{width:74px;height:74px;border-radius:12px;object-fit:cover;background:var(--cream-2);}
.cart-line h4{font-size:.94rem;margin:0 0 .2em;line-height:1.25;}
.cart-line .variant{font-size:.78rem;color:var(--ink-soft);margin:0 0 .5em;}
.cart-line .line-price{font-family:var(--serif);color:var(--green);font-size:1rem;}
.cart-line .line-tools{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px;}
.mini-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--paper);}
.mini-qty button{width:26px;height:26px;background:none;border:none;color:var(--green);font-size:.95rem;line-height:1;}
.mini-qty button:hover{color:var(--terracotta);}
.mini-qty span{min-width:22px;text-align:center;font-size:.82rem;}
.line-remove{background:none;border:none;color:var(--ink-soft);font-size:.74rem;text-decoration:underline;padding:0;}
.line-remove:hover{color:var(--danger);}
.cart-empty{text-align:center;padding:60px 10px;color:var(--ink-soft);}
.cart-empty svg{width:52px;height:52px;color:var(--line-strong);margin:0 auto 16px;}

/* ============ PÁGINA DE CARRITO / CHECKOUT ============ */
/* section.checkout, no ".checkout" a secas: el mismo motivo que la regla de
   mas abajo (.woocommerce-checkout section.checkout) - el <form> del pago
   (marcado propio de WooCommerce) tambien lleva la clase "checkout", asi que
   sin este matiz esta regla de base le sumaba OTRO padding-top de mas a la
   columna izquierda, aparte del de esa otra regla. Por eso "Resumen" seguia
   sin coincidir en altura con "Dirección de envío" aunque aquella ya estaba
   corregida: quedaba esta, que pisaba por debajo. */
section.checkout{padding:36px 0 100px;}
/* En el carrito y en el pago se viene a terminar, no a leer: la cabecera y la
   seccion llevan menos aire que en el resto de paginas. */
.woocommerce-cart .page-hero,.woocommerce-checkout .page-hero{padding:34px 0 26px;}
/* section.checkout, no ".checkout" a secas: el <form> del formulario de pago
   (marcado propio de WooCommerce) tambien lleva la clase "checkout", y sin
   este matiz esta misma regla se le aplicaba tambien a el ademas de a la
   seccion. Sumaba un padding-top de mas solo en la columna izquierda, que por
   eso empezaba mas abajo que el Resumen de la derecha. */
.woocommerce-cart section.checkout,.woocommerce-checkout section.checkout{padding-top:26px;}
.checkout-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:44px;align-items:start;}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2em 2.2em;margin-bottom:24px;}
.panel h2{font-size:1.3rem;display:flex;align-items:center;gap:.5em;}
.panel h2 .step{
  width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--mustard);
  font-family:var(--sans);font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-table{width:100%;}
.cart-table .cart-line{grid-template-columns:88px 1fr auto auto;align-items:center;}
.cart-table .cart-line img{width:88px;height:88px;}
.summary{position:sticky;top:calc(var(--header-h) + 12px);}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:.55em 0;font-size:.92rem;color:var(--ink-soft);}
.summary-row.total{
  border-top:1px solid var(--line);margin-top:.6em;padding-top:1em;
  font-family:var(--serif);font-size:1.35rem;color:var(--green);
}
.summary-row .free{color:var(--sage);font-weight:500;}

/* ---------- Formularios ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row.thirds{grid-template-columns:1fr 1fr 1fr;}
.f-label{display:flex;flex-direction:column;gap:.5em;font-size:.8rem;color:var(--green);margin-bottom:1.1em;font-weight:500;letter-spacing:.03em;}
.f-label input,.f-label textarea,.f-label select{
  font-size:.95rem;padding:.85em 1em;border-radius:12px;border:1px solid var(--line);
  background:var(--cream);color:var(--ink);resize:vertical;
  transition:border-color .3s,box-shadow .3s;width:100%;
}
.f-label input:focus,.f-label textarea:focus,.f-label select:focus{
  outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);
}
.f-label input.invalid,.f-label select.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(168,65,42,.12);}
.f-error{font-size:.76rem;color:var(--danger);font-weight:400;min-height:0;}
.check-row{
  display:flex;align-items:flex-start;gap:.65em;font-size:.83rem;color:var(--ink-soft);
  margin-bottom:1.1em;line-height:1.5;cursor:pointer;
}
.check-row input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--terracotta);}
.check-row a{color:var(--terracotta);text-decoration:underline;}
/* Las dos casillas legales del pago (terminos y privacidad): mismo estilo que
   .check-row, con el asterisco de obligatorio en el mismo tono que el resto
   del formulario y algo mas de aire antes del boton de pagar. */
.cc-legal-check{margin-bottom:.9em;}
.cc-legal-check .required{color:var(--terracotta);text-decoration:none;margin-left:.15em;}
#payment .place-order .cc-legal-check:first-of-type{margin-top:.4em;}
#payment .place-order > button.btn{margin-top:.3em;}
.pay-opts{display:flex;flex-direction:column;gap:10px;}
.pay-opt{
  display:flex;align-items:flex-start;gap:.8em;padding:1em 1.1em;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--cream);cursor:pointer;transition:border-color .3s,background .3s;
}
.pay-opt:hover{border-color:var(--green);}
.pay-opt input{margin-top:3px;accent-color:var(--terracotta);flex-shrink:0;}
.pay-opt.on{border-color:var(--terracotta);background:var(--paper);box-shadow:0 0 0 3px rgba(217,114,47,.1);}
.pay-opt strong{display:block;font-size:.92rem;color:var(--green);font-weight:600;}
.pay-opt span{font-size:.8rem;color:var(--ink-soft);}
.note{
  font-size:.82rem;color:var(--ink-soft);background:var(--cream-2);border-radius:var(--radius-sm);
  padding:1em 1.2em;border-left:3px solid var(--sage);
}
.note b{color:var(--green);}
.form-msg{margin-top:1em;padding:.9em 1.1em;border-radius:var(--radius-sm);font-size:.88rem;display:none;}
.form-msg.ok{display:block;background:rgba(143,163,119,.18);color:var(--green);border-left:3px solid var(--sage);}
.form-msg.err{display:block;background:rgba(168,65,42,.1);color:var(--danger);border-left:3px solid var(--danger);}

/* ---------- Pedido confirmado ---------- */
.order-done{text-align:center;padding:70px 20px;max-width:640px;margin:0 auto;}
.order-done .tick{
  width:74px;height:74px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 26px;
}
.order-done .tick svg{width:34px;height:34px;}
.order-ref{
  display:inline-block;font-family:var(--serif);font-size:1.3rem;color:var(--green);
  background:var(--cream-2);border-radius:100px;padding:.4em 1.4em;margin-bottom:1.4em;
}

/* ============ CUENTA ============ */
.account{padding:20px 0 100px;}
.auth-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;max-width:1000px;margin:0 auto;}
/* Cuando solo hay una tarjeta (recuperar/elegir contraseña, sin la de crear
   cuenta al lado): con las dos columnas de siempre se quedaba pegada a la
   izquierda y la mitad derecha del ancho maximo vacia. Una sola columna,
   mas estrecha que las dos juntas y centrada, en vez de ancha del todo. */
.auth-layout.cc-auth-solo{grid-template-columns:minmax(0,480px);justify-content:center;}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2.4em;}
.auth-card h2{font-size:1.45rem;}
.auth-card > p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.8em;}
.auth-aside{padding-top:1em;}
.perk{display:flex;gap:14px;margin-bottom:1.6em;}
.perk svg{width:24px;height:24px;color:var(--terracotta);flex-shrink:0;margin-top:2px;}
.perk h3{font-size:1rem;margin:0 0 .2em;font-family:var(--sans);font-weight:600;}
.perk p{font-size:.86rem;color:var(--ink-soft);margin:0;}
.pw-meter{height:4px;border-radius:4px;background:var(--cream-2);overflow:hidden;margin-top:.5em;}
.pw-meter i{display:block;height:100%;width:0;background:var(--danger);transition:width .35s var(--ease),background .35s;}
.pw-meter.mid i{background:var(--orange);}
.pw-meter.good i{background:var(--sage);}
.pw-hint{font-size:.74rem;color:var(--ink-soft);margin-top:.35em;font-weight:400;}
/* El aviso de envio y plazo bajo el boton de comprar: es de las pocas cosas
   que se leen de verdad antes de decidir, asi que un punto mas grande que el
   resto de avisos menores. Clase propia y no .pw-hint a secas para no tocar
   los otros sitios donde se usa (la pista del peso, la de la contraseña). */
.pw-hint.cc-aviso-plazo{font-size:.86rem;text-align:center;margin-top:.9em;}

.dash-layout{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;}
.dash-side{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2.2em;position:sticky;top:calc(var(--header-h) + 12px);}
.dash-user{display:flex;align-items:center;gap:16px;padding-bottom:1.6em;border-bottom:1px solid var(--line);margin-bottom:1.4em;}
.avatar{
  width:60px;height:60px;border-radius:50%;background:var(--green);color:var(--mustard);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;flex-shrink:0;
}
.dash-user strong{display:block;font-size:1.1rem;color:var(--green);line-height:1.35;}
.dash-user > div span{font-size:.88rem;color:var(--ink-soft);word-break:break-all;line-height:1.5;}
.dash-nav{display:flex;flex-direction:column;gap:4px;}
.dash-nav button{
  text-align:left;background:none;border:none;padding:.9em 1.1em;border-radius:12px;
  color:var(--ink-soft);font-size:1.02rem;display:flex;align-items:center;gap:.8em;transition:background .25s,color .25s;
}
.dash-nav button svg{width:17px;height:17px;flex-shrink:0;}
.dash-nav button:hover{background:var(--cream-2);color:var(--green);}
.dash-nav button.on{background:var(--green);color:var(--cream);}
.dash-nav .logout{color:var(--danger);margin-top:.5em;}
.dash-panel{display:none;}
.dash-panel.on{display:block;}
.order-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.5em 1.7em;margin-bottom:16px;}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:1em;}
.order-head .ref{font-family:var(--serif);font-size:1.1rem;color:var(--green);}
.order-head .when{font-size:.78rem;color:var(--ink-soft);}
.status{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;padding:.35em .8em;border-radius:100px;background:rgba(143,163,119,.2);color:var(--green-2);font-weight:600;}
.order-items{font-size:.87rem;color:var(--ink-soft);}
.order-items li{padding:.2em 0;}
.order-foot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);margin-top:1em;padding-top:.9em;}
.order-foot .amount{font-family:var(--serif);font-size:1.2rem;color:var(--green);}

/* ============ CONTACTO ============ */
.contacto{padding:60px 0 90px;}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:56px;}
.contact-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:2em 1.8em;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(35,74,63,.36);}
.contact-card svg{width:30px;height:30px;color:var(--terracotta);margin:0 auto 1em;}
.contact-card h3{font-size:1.05rem;margin-bottom:.4em;}
.contact-card p{font-size:.92rem;color:var(--ink-soft);margin:0;}
.contact-card a{color:var(--green);font-weight:500;}
.contact-card a:hover{color:var(--terracotta);}

.faq{padding:0 0 100px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:none;text-align:left;padding:1.3em 2.5em 1.3em 0;
  font-family:var(--serif);font-size:1.08rem;color:var(--green);position:relative;
}
.faq-q::after{
  content:"";position:absolute;right:.3em;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--terracotta);border-bottom:1.6px solid var(--terracotta);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(-135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-item.open .faq-a{max-height:620px;}
.faq-a div{padding:0 0 1.4em;color:var(--ink-soft);font-size:.95rem;}
.faq-a ul{list-style:disc;padding-left:1.2em;margin:.6em 0;}
.faq-a li{margin-bottom:.35em;}

/* ============ GALERÍA ============ */
.galeria{padding:0 0 100px;}
.galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px;}
.galeria-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;position:relative;}
.galeria-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
/* La foto de estudio tiene el motivo abajo: sin esto el recorte deja fondo vacío. */
.galeria-grid figure.focus-low img{object-position:center 88%;}
.galeria-grid figure:hover img{transform:scale(1.07);}
.galeria-grid .tall{grid-row:span 2;}
.galeria-grid .wide{grid-column:span 2;}

/* ============ PIE ============ */
.site-footer{background:var(--green);color:rgba(250,243,230,.82);padding:66px 0 30px;margin-top:auto;}
.footer-grid{
  max-width:var(--container);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;
}
/* Sobre verde oscuro el logotipo se presenta en una placa clara:
   así se respeta el original sin invertir ni recortar sus colores. */
.footer-logo{
  height:46px;width:auto;margin-bottom:1.2em;display:block;
  background:#fff;border-radius:12px;padding:8px 14px;box-sizing:content-box;
}
.footer-brand p{font-size:.86rem;opacity:.7;max-width:280px;}
.footer-col h4{color:var(--mustard);font-family:var(--sans);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.2em;font-weight:600;}
.footer-col li{margin-bottom:.6em;}
.footer-col a{font-size:.86rem;opacity:.82;transition:opacity .25s,color .25s;}
.footer-col a:hover{opacity:1;color:var(--mustard);}
.footer-col address{font-style:normal;font-size:.86rem;opacity:.82;line-height:1.7;}
.footer-col address a:hover{color:var(--mustard);}
.social{display:flex;gap:12px;margin-top:1.2em;}
.social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(250,243,230,.28);
  display:inline-flex;align-items:center;justify-content:center;opacity:.8;
  transition:background .3s,border-color .3s,opacity .3s,transform .3s var(--ease);
}
.social a:hover{background:var(--mustard);border-color:var(--mustard);color:var(--green);opacity:1;transform:translateY(-3px);}
.social svg{width:16px;height:16px;}
.footer-bottom{
  max-width:var(--container);margin:46px auto 0;padding:22px 28px 0;
  border-top:1px solid rgba(250,243,230,.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.76rem;opacity:.55;
}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap;}

/* ============ AVISO FLOTANTE ============ */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  background:var(--green);color:var(--cream);padding:.9em 1.5em;border-radius:100px;
  font-size:.88rem;z-index:130;box-shadow:0 18px 40px -18px rgba(35,74,63,.7);
  display:flex;align-items:center;gap:.6em;transition:transform .45s var(--ease);max-width:calc(100vw - 40px);
}
.toast.show{transform:translate(-50%,0);}
.toast svg{width:17px;height:17px;color:var(--mustard);flex-shrink:0;}

/* ============ RESPONSIVE ============ */
@media (max-width:1120px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px;}
}
@media (max-width:980px){
  :root{--header-h:96px;}
  .two-col,.two-col.wide-left{grid-template-columns:1fr;gap:40px;}
  .col-art,.two-col .photo-frame{max-width:460px;margin:0 auto;}
  .cultivo-grid,.blog-grid,.contact-cards{grid-template-columns:1fr;}
  .stats-inner{grid-template-columns:repeat(2,1fr);row-gap:34px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .pdp-layout{grid-template-columns:1fr;grid-template-areas:"media" "info" "specs";gap:34px;}
  .checkout-layout{grid-template-columns:1fr;gap:28px;}
  .summary,.shop-side,.dash-side{position:static;}
  .auth-layout{grid-template-columns:1fr;}
  .cc-direcciones{grid-template-columns:1fr;gap:22px;}
  .auth-aside{order:-1;}
  .dash-layout{grid-template-columns:1fr;}
  .galeria-grid{grid-template-columns:repeat(2,1fr);}
  /* Filtros de tienda: panel desplegable */
  .shop-layout{grid-template-columns:1fr;gap:20px;}
  .filters-toggle{
    display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.3em;border-radius:100px;
    border:1px solid var(--green);background:var(--paper);color:var(--green);font-size:.88rem;
  }
  .filters-toggle svg{width:16px;height:16px;}
  .shop-side .filters-wrap{display:none;}
  .shop-side.open .filters-wrap{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.4em 1.4em 1.2em;margin-top:14px;}
}
@media (max-width:860px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:4px;
    background:var(--paper);padding:18px 28px 24px;box-shadow:0 22px 34px -24px rgba(0,0,0,.35);
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:.7em 0;font-size:1rem;border-bottom:1px solid var(--line);}
  .main-nav a:last-child{border-bottom:none;}
  .header-inner{position:relative;}
  /* En escritorio ".main-nav + .header-tools" cancela el empuje a la derecha
     porque el menú ya ocupó ese hueco. Aquí el menú está oculto (no ocupa
     hueco), así que hay que recuperar el empuje; con más especificidad que
     esa regla para que gane. */
  #siteHeader .header-tools{margin-left:auto;}
  .nav-toggle{display:block;order:5;}
  .topbar-inner{gap:16px;font-size:.72rem;}
  .topbar-inner span:nth-child(3){display:none;}
  .prod-grid,.prod-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .hero{min-height:auto;padding:70px 0 60px;}
  .hero-bg::after{background:linear-gradient(160deg,rgba(250,243,230,.96) 0%,rgba(250,243,230,.86) 52%,rgba(250,243,230,.35) 100%);}
  .form-row,.form-row.thirds{grid-template-columns:1fr;}
  .panel{padding:1.6em 1.4em;}
  .cart-table .cart-line{grid-template-columns:70px 1fr;gap:12px;}
  .cart-table .cart-line img{width:70px;height:70px;}
  .cart-table .cart-line .line-tools{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
  .cart-table .cart-line .line-price{grid-column:2;}
  .galeria-grid{grid-auto-rows:160px;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .section-inner{padding:0 20px;}
  .header-inner{padding:0 20px;gap:12px;}
  .brand-logo{height:42px;}
  .cat-grid{grid-template-columns:1fr;}
  .stats-inner{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .galeria-grid{grid-template-columns:1fr;}
  .galeria-grid .wide{grid-column:span 1;}
  .cart-drawer{width:100%;}
  .spec-row{grid-template-columns:1fr;gap:2px;padding:.7em 0;}
  .auth-card,.panel{padding:1.5em 1.3em;}
  .hero-actions{gap:16px;}
  .hero-actions .btn{width:100%;}
}
@media (min-width:1240px){
  .tool-label{display:inline;}
}
@media print{
  .site-header,.topbar,.site-footer,.cart-drawer,.drawer-backdrop,.toast{display:none !important;}
}

/* ==========================================================================
   CAPA DE INTEGRACION WORDPRESS + WOOCOMMERCE
   Todo lo de arriba es el diseno original, intacto. Lo de aqui abajo solo
   existe para que el marcado que generan WordPress y WooCommerce adopte ese
   mismo diseno, sin que haya que reescribir sus plantillas.
   ========================================================================== */

/* ---------- WordPress: clases del nucleo ---------- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--paper);color:var(--green);padding:.8em 1.4em;border-radius:100px;
  box-shadow:0 14px 30px -18px rgba(35,74,63,.6);
}
/* La cabecera es sticky: la barra de administracion no debe taparla. */
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px;}}
.alignleft{float:left;margin:.4em 1.6em 1em 0;}
.alignright{float:right;margin:.4em 0 1em 1.6em;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.alignwide{width:min(100%,1100px);margin-left:auto;margin-right:auto;}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);}
.wp-caption{max-width:100%;}
.wp-caption-text,figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:.6em;text-align:center;}
.sticky .post-card{border-color:var(--line-strong);}

/* ---------- Contenido editable (paginas y entradas) ---------- */
.entry-content > *{max-width:100%;}
.entry-content h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.6em;}
.entry-content h3{font-size:1.25rem;margin-top:1.4em;}
.entry-content h4{font-size:1.05rem;margin-top:1.2em;}
.entry-content ul,.entry-content ol{list-style:disc;padding-left:1.3em;margin:0 0 1.4em;color:var(--ink-soft);}
.entry-content ol{list-style:decimal;}
.entry-content li{margin-bottom:.4em;}
.entry-content a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px;}
.entry-content a:hover{color:var(--terracotta-dark);}
.entry-content img,.entry-content figure{border-radius:var(--radius-sm);}
.entry-content blockquote{
  margin:1.8em 0;background:var(--paper);border-left:3px solid var(--terracotta);
  padding:1.4em 1.6em;border-radius:0 14px 14px 0;font-style:italic;
  color:var(--green);font-family:var(--serif);
}
.entry-content blockquote p:last-child{margin-bottom:0;}
.entry-content table{width:100%;border-collapse:collapse;margin-bottom:1.6em;font-size:.92rem;}
.entry-content th,.entry-content td{border-bottom:1px solid var(--line);padding:.7em .6em;text-align:left;}
.entry-content code,.entry-content kbd{background:var(--cream-2);border-radius:6px;padding:.15em .45em;font-size:.9em;}
.entry-content pre{background:var(--green);color:var(--cream);padding:1.2em 1.4em;border-radius:var(--radius-sm);overflow-x:auto;}
.entry-content hr{border:none;border-top:1px solid var(--line);margin:2.6em 0;}

/* ---------- Paginacion ---------- */
.cc-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:52px;}
.cc-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 .8em;border-radius:100px;border:1px solid var(--line);background:var(--paper);
  color:var(--green);font-size:.88rem;transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease);
}
.cc-pagination .page-numbers:hover{border-color:var(--green);transform:translateY(-2px);}
.cc-pagination .page-numbers.current{background:var(--green);color:var(--cream);border-color:var(--green);}
.cc-pagination .page-numbers.dots{border-color:transparent;background:none;}

/* ---------- Avisos de WooCommerce ----------
   WooCommerce les pone una franja de color arriba y un icono con su propia
   tipografia, colocado en absoluto para SU relleno. Con el relleno de este
   diseno el icono cae encima del texto y quedan dos bordes de colores
   distintos. Aqui se le quita todo eso y se le pone el icono del tema. */
.woocommerce-notices-wrapper:empty{display:none;}
.woocommerce-message,.woocommerce-info,.woocommerce-error,
ul.woocommerce-error,.wc-block-components-notice-banner{
  list-style:none;margin:0 0 24px;padding:1.15em 1.5em 1.15em 3.4em;
  border-radius:var(--radius-sm);font-size:.9rem;
  background:var(--paper);color:var(--green);
  border:1px solid var(--line);border-top:1px solid var(--line);
  border-left:3px solid var(--sage);
  box-shadow:0 14px 30px -26px rgba(35,74,63,.5);
  display:flex;align-items:center;gap:1em;flex-wrap:wrap;
  position:relative;
  animation:ccAviso .45s var(--ease) both;
}
@keyframes ccAviso{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

/* El icono propio, en vez del de la tipografia de WooCommerce. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
ul.woocommerce-error::before{
  content:"";position:absolute;left:1.2em;top:50%;transform:translateY(-50%);
  width:19px;height:19px;margin:0;padding:0;font-family:inherit;color:inherit;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.woocommerce-message::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa377' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.woocommerce-info::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9722f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.8'/%3E%3C/svg%3E");
}
.woocommerce-error::before,ul.woocommerce-error::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8412a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16v.8'/%3E%3C/svg%3E");
}
.woocommerce-info{border-left-color:var(--terracotta);}
.woocommerce-error,ul.woocommerce-error{border-left-color:var(--danger);color:var(--danger);background:rgba(168,65,42,.07);}
.woocommerce-error li{margin:0;list-style:none;}
.woocommerce-message .button,.woocommerce-info .button{
  margin-left:auto;padding:.6em 1.3em;font-size:.84rem;box-shadow:none;
}
/* "¿Deshacer?", "Haz clic aquí para introducir tu código"... son enlaces y
   tienen que parecerlo: sin esto heredaban el color del texto del aviso y no
   habia forma de saber que se podia pinchar. */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button){
  color:var(--terracotta);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  padding:.15em .1em;border-radius:4px;
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover{color:var(--terracotta-dark);}

/* El formulario del cupon, dentro de la caja y con el aire del resto. */
.checkout_coupon{margin:0 0 24px;padding:1.4em 1.6em;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-sm);}
.checkout_coupon .form-row{margin-bottom:.8em;}

/* ---------- Botones de WooCommerce con el aspecto del tema ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.wc-block-components-button,
a.button,button.button,input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.92em 1.9em;border-radius:100px;font-size:.92rem;font-weight:500;font-family:var(--sans);
  border:1px solid transparent;background:var(--terracotta);color:#fff;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(217,114,47,.55);cursor:pointer;line-height:1.2;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s,border-color .3s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
a.button:hover,button.button:hover,input.button:hover{
  transform:translateY(-2px);background:var(--terracotta-dark);color:#fff;
  box-shadow:0 16px 30px -12px rgba(217,114,47,.6);
}
.woocommerce a.button.disabled,.woocommerce button.button:disabled,
.woocommerce button.button.disabled,.woocommerce input.button:disabled{
  opacity:.45;pointer-events:none;transform:none;
}
/* Variantes que ya existen en el diseno */
.woocommerce a.button.btn-light,.woocommerce button.button.btn-light{
  background:var(--paper);color:var(--green);border-color:var(--line);box-shadow:none;
}
.woocommerce a.button.btn-outline,.woocommerce button.button.btn-outline{
  background:transparent;color:var(--green);border-color:var(--green);box-shadow:none;
}
.woocommerce a.button.btn-outline:hover{background:var(--green);color:#fff;}

/* ---------- Campos de formulario de WooCommerce ---------- */
.woocommerce form .form-row{
  display:flex;flex-direction:column;gap:.5em;margin:0 0 1.1em;padding:0;
  font-size:.8rem;color:var(--green);font-weight:500;letter-spacing:.03em;
}
.woocommerce form .form-row label{font-size:.8rem;color:var(--green);font-weight:500;letter-spacing:.03em;}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox{
  display:flex;align-items:flex-start;gap:.65em;font-size:.83rem;color:var(--ink-soft);
  font-weight:400;line-height:1.5;cursor:pointer;
}
.woocommerce form .form-row .woocommerce-form__label-for-checkbox input{
  width:17px;height:17px;flex-shrink:0;margin:2px 0 0;accent-color:var(--terracotta);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.cc-field input,.cc-field textarea,.cc-field select{
  font-family:var(--sans);font-size:.95rem;padding:.85em 1em;border-radius:12px;
  border:1px solid var(--line);background:var(--cream);color:var(--ink);
  width:100%;resize:vertical;line-height:1.4;height:auto;
  transition:border-color .3s,box-shadow .3s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.cc-field input:focus,.cc-field textarea:focus,.cc-field select:focus{
  outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{
  border-color:var(--danger);box-shadow:0 0 0 3px rgba(168,65,42,.12);
}
.woocommerce form .form-row .required{color:var(--terracotta);text-decoration:none;border:none;}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none;margin-right:0;}
.woocommerce .col2-set,.woocommerce-page .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;width:100%;}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%;float:none;padding:0;}
@media (max-width:860px){.woocommerce .col2-set,.woocommerce-page .col2-set{grid-template-columns:1fr;}}
/* Nombre/apellidos y similares en dos columnas: lo reparte la rejilla del
   contenedor (mas abajo), no un ancho calculado a mano. */
.woocommerce .select2-container--default .select2-selection--single{
  display:flex;align-items:center;padding:0 1em;min-height:48px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink);line-height:1.4;padding:0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:8px;}
.select2-dropdown{border-color:var(--line);border-radius:12px;overflow:hidden;font-family:var(--sans);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--green);}
.woocommerce-input-wrapper{width:100%;display:block;}
abbr.required{border:none;}

/* ---------- Cantidad ---------- */
.woocommerce .quantity{display:inline-flex;}
.woocommerce .quantity .qty{
  width:44px;height:40px;border:none;background:none;text-align:center;
  font-size:.95rem;color:var(--ink);-moz-appearance:textfield;
}

/* ---------- Selector de peso (atributo de variacion) ---------- */
.cc-variations{margin:0;}
.cc-variations .reset_variations{
  display:inline-block;font-size:.78rem;color:var(--terracotta);
  text-decoration:underline;margin-top:.6em;
}
.kilo-opt[disabled]{opacity:.35;pointer-events:none;text-decoration:line-through;}
.woocommerce-variation-price{display:none;}
.woocommerce-variation-availability p{margin:0;font-size:.82rem;color:var(--ink-soft);}
.woocommerce-variation-description p{margin:0 0 .8em;font-size:.86rem;color:var(--ink-soft);}
.woocommerce-variation.single_variation{margin-bottom:.4em;}

/* ---------- Ficha de producto ---------- */
.pdp .stock.out-of-stock{color:var(--danger);font-size:.86rem;}
.pdp .cc-outofstock{
  background:rgba(168,65,42,.08);border-left:3px solid var(--danger);color:var(--danger);
  border-radius:var(--radius-sm);padding:1em 1.2em;font-size:.88rem;
}
.pdp-gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.pdp-gallery-thumbs button{
  width:66px;height:66px;padding:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--cream-2);cursor:pointer;
  transition:border-color .3s,transform .3s var(--ease);
}
.pdp-gallery-thumbs button:hover{transform:translateY(-2px);}
.pdp-gallery-thumbs button.on{border-color:var(--green);}
.pdp-gallery-thumbs img{width:100%;height:100%;object-fit:cover;}

/* ---------- Rejilla de la tienda: WooCommerce usa <ul class="products"> ---------- */
.woocommerce ul.products,.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;}
.woocommerce ul.products li.product{width:auto;margin:0;float:none;clear:none;padding:0;}
.woocommerce ul.products li.product .prod-card{height:100%;}
@media (max-width:1120px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr;}}
.prod-card .added_to_cart{display:none;}
.prod-add.loading{opacity:.55;pointer-events:none;}
.prod-add.loading svg{animation:ccSpin .8s linear infinite;}
@keyframes ccSpin{to{transform:rotate(360deg);}}
/* El boton nativo de WooCommerce, mientras se envia por detras. */
.single_add_to_cart_button.loading{opacity:.6;pointer-events:none;}

/* ---------- Carrito y finalizar compra ---------- */
.woocommerce .cart-collaterals,.woocommerce-cart .cart-collaterals{width:100%;}
.cart-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1.4em;}
.cart-actions .coupon{display:flex;gap:10px;flex:1;min-width:260px;}
.cart-actions .coupon input{
  flex:1;font-size:.92rem;padding:.8em 1em;border-radius:100px;
  border:1px solid var(--line);background:var(--cream);color:var(--ink);
}
.cart-actions .coupon input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);}
.woocommerce-shipping-totals .woocommerce-shipping-methods{list-style:none;padding:0;margin:0;text-align:right;}
.woocommerce-shipping-totals .woocommerce-shipping-methods li{margin-bottom:.3em;}
.woocommerce-shipping-destination{font-size:.78rem;color:var(--ink-soft);}
.shipping-calculator-button{font-size:.78rem;color:var(--terracotta);text-decoration:underline;}
.wc-proceed-to-checkout{margin-top:1.4em;}
#order_review_heading{font-family:var(--serif);font-size:1.3rem;color:var(--green);margin:0 0 .7em;}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.woocommerce-checkout-review-order-table th{
  text-align:left;font-weight:500;color:var(--ink-soft);font-size:.85rem;
  padding:.55em 0;border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table td{padding:.55em 0;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right;}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  font-family:var(--serif);font-size:1.25rem;color:var(--green);border-bottom:none;padding-top:1em;
}
.woocommerce-checkout-review-order-table .product-name{color:var(--green);}
/* Foto de cada linea del Resumen, junto al nombre. Reaprovecha el hueco que
   ya daba .cc-quitar (el aspa) en vez de ensanchar la fila: en esta columna
   ya no sobra sitio. */
.woocommerce-checkout-review-order-table td.cc-con-foto{display:flex;align-items:flex-start;gap:12px;padding-top:.7em;padding-bottom:.7em;}
.woocommerce-checkout-review-order-table .cc-foto-producto{flex-shrink:0;display:block;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--cream-2);}
.woocommerce-checkout-review-order-table .cc-foto-producto img{width:100%;height:100%;object-fit:cover;display:block;}
.woocommerce-checkout-review-order-table .cc-info-producto{flex:1;min-width:0;}
#payment ul.payment_methods{list-style:none;margin:0 0 1.4em;padding:0;display:flex;flex-direction:column;gap:10px;border:none;}
#payment ul.payment_methods li{
  padding:1em 1.1em;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--cream);transition:border-color .3s,background .3s;
}
#payment ul.payment_methods li:hover{border-color:var(--green);}
#payment ul.payment_methods li input[type=radio]{margin-right:.7em;accent-color:var(--terracotta);}
#payment ul.payment_methods li label{font-size:.92rem;color:var(--green);font-weight:600;cursor:pointer;}
#payment ul.payment_methods li .payment_box{
  font-size:.82rem;color:var(--ink-soft);background:none;padding:.8em 0 0;margin:0;
}
#payment ul.payment_methods li .payment_box::before{content:none;}
#payment .place-order{margin:0;}
#payment div.form-row{padding:0;}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:1.2em;}
.woocommerce-privacy-policy-text{font-size:.82rem;color:var(--ink-soft);}
/* Fila de datos del pedido (numero, fecha, total, forma de pago).
   En flex y no en rejilla: con repeat(auto-fit,minmax(150px,1fr)) el navegador
   creaba seis carriles en un panel ancho y las cuatro cajas se quedaban
   estrechas y apelotonadas a la izquierda, con medio panel vacio a la derecha.
   Con flex crecen hasta llenar la fila sean tres o cuatro, y bajan solas
   cuando no caben. */
.woocommerce-thankyou-order-details{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:18px;margin:1.6em 0 2em;}
/* Por debajo de este ancho, rejilla fija de 2 columnas en vez de flex-wrap.
   Con flex-wrap, cuantas cajas entran en cada fila depende de decimales de
   ancho: en un movil caben 2 y 2, en otro justo no cabe la segunda y se
   queda sola, con la fila siguiente ya desincronizada (2 y 1, o 1 y 2 y 1).
   Con la rejilla siempre son 2 y 2, sea cual sea el movil. Por encima de este
   ancho se deja el flex de siempre: ahi las cuatro caben holgadas en una sola
   fila y no hay nada que pueda descuadrarse. */
@media (max-width:700px){
  .woocommerce-thankyou-order-details{display:grid;grid-template-columns:1fr 1fr;}
  /*
   * La colocacion automatica de la rejilla (dejar que cada caja caiga sola en
   * la siguiente casilla libre) daba aqui un resultado sin sentido y
   * reproducible: la 1ª caja se iba a la columna 2 de la fila 1 (dejando la
   * columna 1 vacia), la 2ª y 3ª ocupaban la fila 2, y la 4ª se quedaba sola
   * en la fila 3 -tres filas para cuatro cajas, en vez de las dos que tocan-.
   * Comprobado en directo: no habia ningun grid-column, grid-row ni order
   * puesto en ningun sitio que lo explicase, asi que en vez de perseguir la
   * causa se fija la posicion de cada caja a mano, que no depende de que el
   * navegador acierte por su cuenta.
   */
  .woocommerce-thankyou-order-details li:nth-child(1){grid-column:1;grid-row:1;}
  .woocommerce-thankyou-order-details li:nth-child(2){grid-column:2;grid-row:1;}
  .woocommerce-thankyou-order-details li:nth-child(3){grid-column:1;grid-row:2;}
  .woocommerce-thankyou-order-details li:nth-child(4){grid-column:2;grid-row:2;}
  /*
   * "Ver pedido" (myaccount/view-order.php) trae una caja mas que "Pedido
   * recibido" -el Estado del pedido-, asi que aqui puede haber una quinta:
   * sola, ocupando las dos columnas, en su propia fila.
   */
  .woocommerce-thankyou-order-details li:nth-child(5){grid-column:1 / -1;grid-row:3;}
}
.woocommerce-thankyou-order-details li{
  flex:1 1 150px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1em 1.2em;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  /* Las cajas de una fila miden todas lo mismo (lo que ocupe la mas alta,
     cuando "Fecha" o "Método de pago" necesitan dos lineas). Sin este centrado
     vertical, el texto de las de una sola linea se quedaba pegado arriba con
     un hueco debajo: misma caja, texto a distinta altura. */
  display:flex;flex-direction:column;justify-content:center;
}
/*
 * La hoja de estilos de WooCommerce trae lo suyo para ul.order_details -clase
 * que este listado tambien lleva, para que la reconozcan las pasarelas- y le
 * mete float, un margen a la derecha y, sobre todo, "border:none" a la ultima:
 * por eso la caja de "Método de pago" salia sin recuadro y la fila descuadrada.
 * Estas reglas tienen la misma especificidad que las suyas y van despues, asi
 * que mandan estas.
 */
.woocommerce ul.woocommerce-thankyou-order-details li{float:none;width:auto;margin:0;padding:1em 1.2em;border:1px solid var(--line);}
.woocommerce ul.woocommerce-thankyou-order-details li:last-of-type{border:1px solid var(--line);}
.woocommerce-thankyou-order-details li strong{
  display:block;font-family:var(--serif);font-size:1.05rem;color:var(--green);
  letter-spacing:0;text-transform:none;margin-top:.3em;
}
/* Las dos direcciones del justificante, una al lado de la otra. */
.cc-direcciones{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.cc-direcciones h3,
.cc-direcciones h4{font-size:1rem;color:var(--green);margin:0 0 .6em;}
/* Las direcciones dentro de "Mis datos" (woocommerce/myaccount/form-edit-account.php). */
.cc-direcciones-cuenta{border-top:1px solid var(--line);margin-top:2em;padding-top:1.6em;}
.cc-direcciones-cuenta > h3{font-family:var(--serif);font-size:1.05rem;color:var(--green);margin-bottom:1em;}
.cc-direcciones-cuenta .btn{margin-top:.9em;}
.cc-direcciones address{font-style:normal;font-size:.92rem;color:var(--ink-soft);line-height:1.7;}
.cc-direcciones .cc-dato{font-size:.92rem;color:var(--ink-soft);margin:.5em 0 0;}
.woocommerce-order-details,.woocommerce-customer-details{margin-top:2.4em;}
.woocommerce-table--order-details,.woocommerce-table--customer-details{width:100%;border-collapse:collapse;font-size:.92rem;}
.woocommerce-table--order-details th,.woocommerce-table--order-details td{
  padding:.7em 0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink-soft);
}
.woocommerce-table--order-details td:last-child,.woocommerce-table--order-details th:last-child{text-align:right;}

/* Salvavidas para el carrito y el pago.
   Si el atajo [woocommerce_cart] o [woocommerce_checkout] se pega en un bloque
   "Preformateado" en vez de en uno de "Código corto", TODO lo que pinta el
   atajo queda dentro de un <pre>: hereda la letra monoespaciada y respeta cada
   salto de linea del HTML, asi que la pantalla sale con letra de maquina de
   escribir y huecos enormes entre lineas. Lo que hay que hacer es cambiar el
   bloque, pero mientras tanto esto deja la pantalla usable. */
pre > .woocommerce{
  white-space:normal;font-family:var(--sans);font-size:1rem;line-height:1.65;
  color:var(--ink);text-align:left;
}
pre:has(> .woocommerce){background:none;padding:0;border:0;overflow:visible;}

/* ---------- Mi cuenta ---------- */
.woocommerce-MyAccount-content > h2:first-child{font-size:1.6rem;}
.woocommerce-MyAccount-content .woocommerce-Address{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6em 1.8em;margin-bottom:16px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3{font-size:1.1rem;margin-bottom:.5em;}
.woocommerce-MyAccount-content address{font-style:normal;font-size:.9rem;color:var(--ink-soft);line-height:1.7;}
/* Aspa para quitar una linea del resumen del pago. El SVG necesita medida
   propia: sin width ni height ocupa todo el ancho que le den. */
.woocommerce-checkout-review-order-table .cc-quitar{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:.4em;vertical-align:middle;
  border-radius:50%;color:var(--ink-soft);
  transition:color .2s,background-color .2s;
}
.woocommerce-checkout-review-order-table .cc-quitar svg{width:15px;height:15px;display:block;}
.woocommerce-checkout-review-order-table .cc-quitar:hover{color:var(--danger);background:var(--cream-2);}

/* Direcciones. WooCommerce las saca con float y anchos en porcentaje
   (.col-1{float:left;width:48%}), que con el relleno de nuestras tarjetas se
   salen de la caja. Al ser rejilla, los float se ignoran; lo que hay que
   anular son los anchos, que si cuentan. */
.woocommerce-Addresses,
.woocommerce-MyAccount-content .addresses{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
/*
 * Solo se anulan el ancho y el float que impone WooCommerce. El relleno NO:
 * es el que separa el texto del borde de la tarjeta, y ponerlo a cero dejaba
 * las direcciones pegadas al filo, como si no hubiera recuadro.
 */
.woocommerce-Addresses > .col-1,
.woocommerce-Addresses > .col-2{width:auto;float:none;margin:0;}
/*
 * La tarjeta lleva las dos clases a la vez, col-1 y woocommerce-Address, y la
 * regla de .col2-set de mas arriba (para el pago) le ponia padding:0. De ahi
 * que las direcciones salieran pegadas al borde del recuadro. Este selector
 * tiene la misma especificidad y va despues, asi que manda.
 */
.woocommerce-Addresses .woocommerce-Address{width:auto;float:none;margin:0;}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address{
  padding:1.6em 1.8em;
}
.woocommerce-MyAccount-content .woocommerce-Address{
  display:flex;flex-direction:column;height:100%;
}
/*
 * Titulo y enlace en columna, no uno al lado del otro. En una fila caben
 * "Dirección de envío / Editar", pero no "Dirección de facturación / Añadir
 * Dirección de facturación": ese se partia y la tarjeta izquierda quedaba
 * descuadrada respecto a la derecha. Apilados salen las dos iguales, diga lo
 * que diga el enlace.
 */
.woocommerce-Address-title{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3em;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{margin:0;}
.woocommerce-Address-title .edit{
  float:none;margin:0;font-size:.82rem;color:var(--terracotta);
  text-decoration:underline;text-underline-offset:3px;
}
.woocommerce-MyAccount-content .woocommerce-Address address{margin-top:.8em;}
@media (max-width:860px){
  .woocommerce-Addresses,
  .woocommerce-MyAccount-content .addresses{grid-template-columns:1fr;}
}
.woocommerce-orders-table{width:100%;border-collapse:collapse;}
.woocommerce-pagination ul{display:flex;gap:8px;justify-content:center;list-style:none;margin-top:2em;}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  border-radius:100px;border:1px solid var(--line);background:var(--paper);color:var(--green);font-size:.86rem;
}
.woocommerce-pagination .current{background:var(--green);color:var(--cream);border-color:var(--green);}
/* Los iconos del panel de ayuda no tenian medida propia y salian enormes: un
   SVG sin width ni height se estira a todo el ancho que le den. */
.cc-ayuda-lista{list-style:none;margin:1.2em 0;padding:0;display:flex;flex-direction:column;gap:.7em;}
.cc-ayuda-lista li{display:flex;align-items:center;gap:.7em;font-size:.9rem;color:var(--ink-soft);}
.cc-ayuda-lista svg{width:17px;height:17px;flex-shrink:0;color:var(--terracotta);}

/* Direcciones y datos de la cuenta: los campos iban en linea con un ancho
   calculado, y el espacio entre etiquetas los desbordaba a la linea siguiente.
   Con rejilla no hay calculo que falle. */
.woocommerce-address-fields__field-wrapper,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-EditAccountForm{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start;
}
/*
 * Todo ocupa la fila entera salvo lo que WooCommerce marca como primera o
 * segunda mitad. Se hace asi, y no listando las clases que van anchas, porque
 * cada plugin de facturacion mete sus propios campos: al que no reconozcamos
 * le toca fila completa, que nunca descuadra.
 */
.woocommerce-address-fields__field-wrapper > *,
.woocommerce-billing-fields__field-wrapper > *,
.woocommerce-shipping-fields__field-wrapper > *,
.woocommerce-EditAccountForm > *{grid-column:1 / -1;min-width:0;width:auto;float:none;}
/*
 * Se apunta al contenedor y no a "form .form-row-first" porque esa otra forma
 * exige que haya un <form> por encima, y no siempre lo hay (el formulario de
 * direcciones de Mi cuenta ES el contenedor). Asi la regla no depende de como
 * este anidado el marcado.
 */
.woocommerce-address-fields__field-wrapper > .form-row-first,
.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-EditAccountForm > .form-row-first{grid-column:1;}
.woocommerce-address-fields__field-wrapper > .form-row-last,
.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last,
.woocommerce-EditAccountForm > .form-row-last{grid-column:2;}
.woocommerce form .form-row-first{grid-column:1;}
.woocommerce form .form-row-last{grid-column:2;}
.woocommerce .woocommerce-EditAccountForm legend{
  font-family:var(--serif);font-size:1.05rem;color:var(--green);margin-bottom:.8em;
}
.woocommerce .woocommerce-EditAccountForm fieldset{border:0;padding:1.4em 0 0;margin:.6em 0 0;border-top:1px solid var(--line);}
/*
 * OJO, fallo real que estuvo aqui: esta media query colapsaba el contenedor
 * a una sola columna (grid-template-columns:1fr), pero "Apellidos"
 * (form-row-last, un poco mas abajo) seguia pidiendo sin condicion la
 * columna 2. Con una sola columna definida, el navegador creaba de todos
 * modos una columna extra "de sobra" (implicita, del ancho justo para
 * "Apellidos") para poder colocarlo ahi -eso hace CSS Grid cuando un hijo
 * pide una columna que no existe-, y esa columna de mas le quitaba ancho a
 * "1fr" y, con ello, a TODOS los demas campos (calle, poblacion, provincia,
 * telefono...), que se quedaban estrechos y pegados a la izquierda con hueco
 * en blanco a la derecha. Nombre/Apellidos se veian bien porque eran
 * justo el par que causaba el problema.
 *
 * La rejilla de dos columnas se deja igual que en el resto de anchos -asi
 * "Apellidos" tiene columna de verdad donde encajar y ya no hace falta
 * ninguna de mas- y en vez de aplanarlo todo a una columna, se emparejan a
 * proposito los campos que tiene sentido ver juntos en una pantalla estrecha
 * (valores cortos): Codigo postal con Poblacion, y Provincia con Telefono.
 * El resto (Pais, Direccion de la calle, Apartamento, Correo) ya vienen
 * marcados por WooCommerce como "form-row-wide" (ocupan las dos columnas),
 * asi que con la rejilla correcta se ven a lo ancho de verdad, no solo a lo
 * ancho de lo que sobraba.
 */
@media (max-width:700px){
  #billing_postcode_field,#shipping_postcode_field{grid-column:1;}
  #billing_city_field,#shipping_city_field{grid-column:2;}
  #billing_state_field,#shipping_state_field{grid-column:1;}
  #billing_phone_field{grid-column:2;}
}

.cc-lost-password{font-size:.82rem;color:var(--ink-soft);margin-top:1em;}
.cc-lost-password a{color:var(--terracotta);text-decoration:underline;}

/* ---------- Resultados de busqueda del sitio ---------- */
.search-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:980px){.search-list{grid-template-columns:1fr;}}

/* ---------- Formulario de contacto del tema ---------- */
.cc-field{display:flex;flex-direction:column;gap:.5em;font-size:.8rem;color:var(--green);margin-bottom:1.1em;font-weight:500;letter-spacing:.03em;}
.cc-honey{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* ---------- Cajon del carrito: estados de WooCommerce ---------- */
.cart-drawer.loading .drawer-body{opacity:.5;transition:opacity .2s;}
.drawer-body .woocommerce-mini-cart__empty-message{text-align:center;padding:60px 10px;color:var(--ink-soft);}

/* ---------- Bloque de tienda vacia ---------- */
.woocommerce-no-products-found{grid-column:1/-1;}

/* El contenedor que WooCommerce reemplaza al vuelo tiene que comportarse como
   si no existiera: el cuerpo crece y el pie queda abajo, igual que antes. */
.cart-drawer .widget_shopping_cart_content{display:flex;flex-direction:column;flex:1;min-height:0;}

/* Las pastillas y las aspas eran <button> en la version estatica; aqui son
   enlaces, para que funcionen sin JavaScript. Mismo aspecto. */
.chips a.chip{display:inline-flex;align-items:center;text-decoration:none;}
.pill-x a{color:var(--terracotta);font-size:1rem;line-height:1;padding:0 .25em;text-decoration:none;}
a.pill-x{text-decoration:none;}
.load-more .btn{text-decoration:none;}

/* La foto de la ficha y sus miniaturas comparten la celda "media" de la
   rejilla; la columna de datos sigue a su derecha, como en el original. */
.pdp-media-col{grid-area:media;}
.pdp-media-col .pdp-media{grid-area:auto;}

/* Selector de peso.
   De partida se ve el desplegable normal de WooCommerce, que funciona siempre.
   Si el JavaScript arranca, construye los botones del diseno original a partir
   de las opciones de ese mismo desplegable y lo esconde. Asi nunca queda una
   ficha sin manera de elegir el peso. */
.cc-variations .cc-attr-select{
  font-size:.95rem;padding:.85em 1em;border-radius:12px;border:1px solid var(--line);
  background:var(--cream);color:var(--ink);width:100%;font-family:var(--sans);
}
.cc-variations .cc-attr-select:focus{
  outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);
}
.cc-campo-variacion.cc-con-botones .cc-attr-select,
.cc-campo-variacion.cc-campo-unico .cc-attr-select{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Un atributo con un solo valor no es una eleccion: se enseña el dato y se
   quita el desplegable, que con una sola linea parecia estar roto. */
.cc-valor-unico{
  font-family:var(--serif);color:var(--green);font-size:1.05rem;margin:0;
}

/* WooCommerce pone la clase .qty en el propio <input>, y en el diseno original
   .qty era la cajita que lo envuelve. Para no pisarse, el contenedor pasa a
   llamarse .qty-box y aqui se devuelve al input su aspecto de siempre. */
.qty-box{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--cream);overflow:hidden;}
.qty-box button{width:38px;height:40px;background:none;border:none;color:var(--green);font-size:1.15rem;line-height:1;padding:0;}
.qty-box button:hover{background:var(--cream-2);color:var(--terracotta);}
input.qty{
  display:inline-block;width:44px;height:40px;padding:0;border:none;border-radius:0;
  background:none;text-align:center;font-size:.95rem;color:var(--ink);
  -moz-appearance:textfield;box-shadow:none;
}
input.qty:focus{outline:none;box-shadow:none;}
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.quantity.hidden{display:none;}

/* El menu de la cuenta eran <button> en la maqueta; en WordPress son enlaces
   de verdad, para que cada apartado tenga su propia direccion. */
.dash-nav a{
  text-align:left;background:none;border:none;padding:.9em 1.1em;border-radius:12px;
  color:var(--ink-soft);font-size:1.02rem;display:flex;align-items:center;gap:.8em;
  text-decoration:none;transition:background .25s,color .25s;
}
.dash-nav a svg{width:19px;height:19px;flex-shrink:0;}
.dash-nav a:hover{background:var(--cream-2);color:var(--green);}
.dash-nav a.on{background:var(--green);color:var(--cream);}
.dash-nav a.logout{color:var(--danger);margin-top:.5em;}
.dash-nav a.logout:hover{background:rgba(168,65,42,.08);color:var(--danger);}
.order-card .order-items{list-style:none;padding:0;margin:0;}

/* En la entrada abierta el titulo es un <h1>; en la maqueta era un <h2>. */
.post-full h1{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.post-full .entry-content > p:first-of-type{font-size:1.14rem;color:var(--green);font-family:var(--serif);line-height:1.6;}

/* ============ BUSCADOR GENERAL ============ */
.search-panel{
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 22px 34px -28px rgba(35,74,63,.45);
  /* De 0fr a 1fr despliega exactamente la altura del contenido, sin tener que
     adivinar un maximo. La curva es suave a proposito: la del resto del tema
     arranca tan rapido que el movimiento no se llegaba a ver. */
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1),opacity .26s ease;
}
.search-panel > .section-inner{overflow:hidden;min-height:0;}
.search-panel.open{grid-template-rows:1fr;opacity:1;}
.search-panel[hidden]{display:none;}
/* Con la pagina desplazada, el panel se ancla debajo de la cabecera en vez de
   quedarse arriba del todo, donde no se veia. El z-index va por debajo del de
   la cabecera (90) para que salga de debajo de ella al desplegarse. */
.search-panel.is-flotante{
  position:fixed;left:0;right:0;top:var(--cc-top-buscador,var(--header-h));z-index:89;
}
.search-panel form{padding:26px 0 24px;max-width:720px;margin:0 auto;}
.search-panel .searchbox{margin-bottom:14px;}
.search-panel .searchbox input{padding:1.05em 1.2em 1.05em 3em;font-size:1rem;}
.search-panel .searchbox svg{left:1.15em;width:19px;height:19px;}
.search-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.search-foot p{font-size:.82rem;color:var(--ink-soft);margin:0;}
@media (max-width:560px){
  .search-panel form{padding:20px 0;}
  .search-foot{justify-content:stretch;}
  .search-foot .btn{width:100%;}
}

/* ============ AVISO DE COOKIES ============ */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:125;
  background:var(--green);color:rgba(250,243,230,.92);
  border-radius:var(--radius);padding:1.2em 1.6em;
  box-shadow:0 26px 50px -24px rgba(35,74,63,.75);
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.cookie-bar[hidden]{display:none;}
.cookie-bar.show{transform:translateY(0);}
.cookie-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.cookie-bar p{margin:0;font-size:.86rem;max-width:62ch;line-height:1.55;}
.cookie-bar a{color:var(--mustard);text-decoration:underline;text-underline-offset:3px;}
.cookie-bar a:hover{color:#fff;}
.cookie-bar .btn{flex-shrink:0;}
@media (max-width:560px){
  .cookie-bar{left:12px;right:12px;bottom:12px;padding:1.2em 1.3em;}
  .cookie-inner{gap:14px;}
  .cookie-bar .btn{width:100%;}
}

/* ============ GALERÍA AMPLIABLE ============ */
.galeria-grid figure img{cursor:zoom-in;}
.galeria-grid figure img:focus-visible{outline:2px solid var(--terracotta);outline-offset:-4px;}
.cc-lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(20,38,32,.94);
  display:flex;align-items:center;justify-content:center;padding:4vmin;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.cc-lightbox.open{opacity:1;visibility:visible;}
.cc-lightbox img{
  max-width:100%;max-height:88vh;border-radius:var(--radius);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.cc-lightbox figcaption{
  position:absolute;left:0;right:0;bottom:2vmin;text-align:center;
  color:rgba(250,243,230,.86);font-size:.86rem;padding:0 4vmin;
}
.cc-lb-btn{
  position:absolute;background:rgba(250,243,230,.12);border:1px solid rgba(250,243,230,.3);
  color:var(--cream);width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.cc-lb-btn:hover{background:var(--mustard);border-color:var(--mustard);color:var(--green);transform:scale(1.06);}
.cc-lb-btn svg{width:20px;height:20px;}
.cc-lb-cerrar{top:3vmin;right:3vmin;}
.cc-lb-ant{left:3vmin;top:50%;transform:translateY(-50%);}
.cc-lb-sig{right:3vmin;top:50%;transform:translateY(-50%);}
.cc-lb-ant:hover,.cc-lb-sig:hover{transform:translateY(-50%) scale(1.06);}
@media (max-width:560px){
  .cc-lb-ant{left:1vmin;}
  .cc-lb-sig{right:1vmin;}
  .cc-lb-btn{width:40px;height:40px;}
}

/* ---------- Filtro de precio ---------- */
.filter-body.cc-precio{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  grid-template-columns:none;max-height:none;overflow:visible;
}
.cc-precio label{flex:1;min-width:72px;margin:0;}
.cc-precio input{
  width:100%;font-size:.86rem;padding:.55em .7em;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  -moz-appearance:textfield;
}
.cc-precio input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,114,47,.15);}
.cc-precio input::-webkit-outer-spin-button,
.cc-precio input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cc-precio-sep{color:var(--ink-soft);flex-shrink:0;}
.cc-precio-moneda{color:var(--ink-soft);font-size:.86rem;flex-shrink:0;}
.cc-precio-ok{width:100%;margin-top:.4em;}

/* ---------- Variedades: las familias cuelgan de su especie ---------- */
.filter-body.cc-variedades{grid-template-columns:1fr;}
.cc-variedades .f-opt.is-hijo{padding-left:1.5em;font-size:.83rem;opacity:.9;}
.cc-variedades .f-opt.is-hijo::before{
  content:"";position:absolute;margin-left:-1.05em;margin-top:.55em;
  width:6px;height:1px;background:var(--line-strong);
}
.cc-variedades .f-opt{position:relative;}

/* ---------- Cuenta: entrar y registrarse, a la misma altura ---------- */
.auth-layout.cc-auth-par{align-items:stretch;}
.auth-layout.cc-auth-par .auth-card{margin-bottom:0;display:flex;flex-direction:column;}
.auth-layout.cc-auth-par .auth-card > form{display:flex;flex-direction:column;flex:1;}
/* El boton queda pegado al fondo de su tarjeta, aunque un formulario tenga un
   campo mas que el otro: asi los dos botones caen a la misma altura. */
.auth-layout.cc-auth-par .auth-card > form > .btn{margin-top:auto;}
.auth-layout.cc-auth-par .auth-card > form > .cc-lost-password{margin-bottom:0;}
/* Bajo el boton de "entrar" va el enlace de contraseña olvidada. Se reserva ese
   mismo hueco en la tarjeta de al lado para que los dos botones queden
   exactamente a la misma altura. */
.auth-layout.cc-auth-par .woocommerce-form-register::after{
  content:"";display:block;font-size:.82rem;margin-top:1em;height:1.25em;
}

.auth-ventajas{max-width:1000px;margin:64px auto 0;}
.auth-ventajas .perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.auth-ventajas .perk{margin-bottom:0;}
.auth-ventajas .note{max-width:760px;margin-left:auto;margin-right:auto;}
@media (max-width:860px){
  .auth-ventajas{margin-top:48px;}
  .auth-ventajas .perks-grid{grid-template-columns:1fr;gap:22px;}
}

/* ---------- Cajon del carrito: lo que trae WooCommerce de serie ----------
   WooCommerce convierte cualquier a.remove en un circulito de 1em de ancho y
   texto rojo. Con la palabra "Eliminar" dentro, el texto se sale de la caja y
   se corta contra el borde del cajon. Aqui vuelve a ser un enlace normal. */
/*
 * Lo mismo en la pagina del carrito: alli la palabra "Eliminar" no cabia en el
 * circulo de 1em que impone WooCommerce y salia cortada. Ahora es una papelera,
 * que a esa medida si se lee.
 */
.cart-table a.remove.cc-quitar{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;min-width:0;font-size:1rem;padding:0;
  border:0;border-radius:50%;background:none;
  color:var(--ink-soft) !important;text-decoration:none;
  transition:color .2s,background-color .2s;
}
.cart-table a.remove.cc-quitar svg{width:17px;height:17px;display:block;}
.cart-table a.remove.cc-quitar:hover{color:var(--danger) !important;background:var(--cream-2);}
.cart-table a.remove.cc-quitar::before,
.cart-table a.remove.cc-quitar::after{content:none !important;}

.cart-drawer a.remove,
.cart-drawer .line-remove{
  display:inline;width:auto;height:auto;min-width:0;
  font-size:.74rem;font-weight:400;line-height:1.4;text-align:right;
  border:0;border-radius:0;padding:0;background:none;
  color:var(--ink-soft) !important;text-decoration:underline;
}
.cart-drawer a.remove:hover,
.cart-drawer .line-remove:hover{color:var(--danger) !important;background:none;}
.cart-drawer .line-tools{min-width:0;}

/* Y los botones del pie se quedan del tamano que les toca, sin estirarse. */
.cart-drawer .drawer-actions{align-items:stretch;}
.cart-drawer .drawer-actions .btn{
  flex:0 0 auto;width:100%;height:auto;min-height:0;
  font-size:.92rem;line-height:1.2;padding:.92em 1.9em;margin:0;
}

/* Quien prefiera menos movimiento, menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .search-panel,.cart-drawer,.drawer-backdrop,.toast,.cookie-bar,.cc-lightbox{transition-duration:.01ms !important;}
  .cc-lightbox img,.prod-card,.cat-card,.cart-line{transition-duration:.01ms !important;}
  .cc-legal .faq-a{transition-duration:.01ms !important;}
  .woocommerce-message,.woocommerce-info,.woocommerce-error{animation:none;}
  .hero-anim{animation:none;opacity:1;}
}

/* Los apartados legales son mucho más largos que las preguntas frecuentes:
   con un tope de altura fijo, las condiciones de venta se cortaban por la
   mitad. Con grid-template-rows la altura de destino es la real del texto, sea
   la que sea, y se sigue desplegando con animación. */
.cc-legal .faq-a{
  display:grid;grid-template-rows:0fr;max-height:none;
  transition:grid-template-rows .45s var(--ease);
}
.cc-legal .faq-item.open .faq-a{grid-template-rows:1fr;max-height:none;}
/* El relleno inferior tiene que salir del hijo que colapsa: con padding, la
   fila nunca llega a cero y se veia una linea de texto con el apartado
   cerrado. El aire de abajo lo pone el margen del ultimo parrafo, que queda
   dentro y se recorta al plegarse. */
.cc-legal .faq-a > div{min-height:0;overflow:hidden;padding-bottom:0;}
.cc-legal .faq-a > div > *:first-child{margin-top:0;}
.cc-legal .faq-a > div > *:last-child{margin-bottom:1.6em;}
.cc-legal .faq-a h4{
  font-family:var(--serif);color:var(--green);font-size:1.02rem;
  margin:1.7em 0 .5em;line-height:1.3;
}
.cc-legal .faq-a p{margin-bottom:1em;}
/* La ficha de identificación de la empresa, arriba del aviso legal. */
.cc-legal .legal-ficha{
  background:var(--cream-2);border-radius:var(--radius-sm);
  padding:1em 1.2em;line-height:1.9;font-size:.88rem;
}

/* ---------- Cuenta: formularios ----------
   WooCommerce enmarca form.login y form.register en su propia caja gris. Dentro
   de nuestras tarjetas sobra, porque la tarjeta ya es la caja: se veia un
   rectangulo suelto alrededor de los campos. */
.woocommerce .auth-card form.login,
.woocommerce .auth-card form.register,
.auth-card form.login,
.auth-card form.register{
  border:0;padding:0;margin:0;border-radius:0;background:none;
}

/* El ojo de "ver contraseña" lo dibuja WooCommerce con su tipografia de
   iconos; si no llega a cargar sale un rectangulo vacio. Aqui va un SVG
   propio, que no depende de ninguna fuente. */
/* Sin acotar a una pantalla concreta: el mismo formulario de acceso sale
   tambien desplegado dentro de "Finalizar compra" (¿Ya eres cliente?), y alli
   no valia ninguno de los dos sitios de antes: el ojo se quedaba sin estilo y
   caia debajo del campo como un rectangulo vacio. */
.password-input{display:block;position:relative;width:100%;}
.password-input input{width:100%;padding-right:3.2em;}
.show-password-input{
  position:absolute;right:.35em;top:50%;transform:translateY(-50%);
  width:34px;height:34px;margin:0;padding:0;cursor:pointer;
  border-radius:50%;background-color:transparent;
  background-repeat:no-repeat;background-position:center;background-size:19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5347' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.04 12.32a1 1 0 0 1 0-.64C3.42 7.51 7.36 4.5 12 4.5c4.64 0 8.57 3.01 9.96 7.18.07.21.07.43 0 .64C20.58 16.49 16.64 19.5 12 19.5c-4.64 0-8.57-3.01-9.96-7.18Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  transition:background-color .2s,transform .2s;
}
.show-password-input::before,
.show-password-input::after{content:none !important;}
.show-password-input:hover,
.show-password-input:focus-visible{background-color:var(--cream-2);}
.show-password-input:active{transform:translateY(-50%) scale(.92);}
.show-password-input.display-password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234a3f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.98 8.22A10.45 10.45 0 0 0 1.93 12C3.23 16.34 7.24 19.5 12 19.5c1 0 1.96-.14 2.86-.4M6.23 6.23A10.45 10.45 0 0 1 12 4.5c4.76 0 8.77 3.16 10.07 7.5a10.52 10.52 0 0 1-4.3 5.77M6.23 6.23 3 3m3.23 3.23 3.65 3.65m7.89 7.89L21 21m-3.23-3.23-3.65-3.65m0 0a3 3 0 1 0-4.24-4.24m4.24 4.24L9.88 9.88'/%3E%3C/svg%3E");
}

/* Y el medidor de fuerza de la contraseña, con la letra del tema. */
.auth-card .woocommerce-password-strength,
.auth-card .woocommerce-password-hint{
  display:block;border:0;background:none;text-align:left;padding:.4em 0 0;
  font-size:.74rem;font-weight:400;color:var(--ink-soft);
}
.auth-card .woocommerce-password-strength.strong{color:var(--green-2);}
.auth-card .woocommerce-password-strength.short,
.auth-card .woocommerce-password-strength.bad{color:var(--danger);}
.auth-card .woocommerce-password-strength.good{color:var(--terracotta);}

/* ---------- Carrito y pago, mas compactos ----------
   Va al final del archivo a proposito: estas reglas tienen que ganar a las de
   los campos de WooCommerce que hay mas arriba, y con la misma especificidad
   manda la ultima. Puesto antes, no hacia absolutamente nada. */
/* Y los campos van mas juntos: en un formulario de pago cada hueco de mas es
   un scroll de mas antes de poder pagar. */
.woocommerce-checkout .panel,.woocommerce-cart .panel{padding:1.6em 1.8em;margin-bottom:18px;}
.woocommerce-checkout .checkout-layout,.woocommerce-cart .checkout-layout{gap:32px;}
.woocommerce-checkout .panel > h2,.woocommerce-cart .panel > h2{margin-bottom:.8em;}
.woocommerce-checkout form .form-row,
.woocommerce-cart form .form-row{margin-bottom:.75em;gap:.35em;}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single{padding:.7em .9em;}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{gap:0 14px;}
.woocommerce-checkout .col2-set,.woocommerce-checkout-page .col2-set{gap:0 28px;}
.woocommerce-checkout .panel .note{margin-top:1em;}

/* ---------- Existencias: solo se dice cuando NO hay ----------
   El numero de unidades disponibles no aporta nada a quien compra una calabaza
   y en cambio delata el inventario. La linea la inyecta el JavaScript de
   WooCommerce al elegir peso, asi que hace falta taparla tambien desde aqui. */
.woocommerce .stock.in-stock,
.woocommerce p.stock.in-stock,
.woocommerce .stock.available-on-backorder,
.single_variation_wrap .stock.in-stock{display:none !important;}
.woocommerce .stock.out-of-stock,
.single_variation_wrap .stock.out-of-stock{
  display:block;margin:.6em 0 0;font-size:.86rem;font-weight:500;color:var(--danger);
}

/* ---------- Pago: los campos en filas, no en una columna larga ----------
   Los datos de facturacion ocupan el ancho entero del panel y se emparejan de
   dos en dos. "Informacion adicional" (la nota del pedido) tambien va a todo
   el ancho, debajo: antes se quedaba encajada en la mitad derecha, con la
   izquierda en blanco, porque .col-2 pedia la columna 2 sin pedir tambien la
   1. */
.woocommerce-checkout #customer_details{
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
}
.woocommerce-checkout #customer_details > .col-1,
.woocommerce-checkout #customer_details > .col-2{grid-column:1 / -1;}
@media (max-width:860px){
  .woocommerce-checkout #customer_details{grid-template-columns:1fr;}
}