/* =========================================================
   CIRCULAR ECO-TIENDA — sistema de diseño del rediseño
   Paleta derivada del isotipo real (verde olivo #898C32);
   verde bosque como acento oscuro para botones/CTA/footer.
   ========================================================= */

:root{
  --bg:        #F7F3E9;   /* fondo general, crema cálido */
  --bg-alt:    #EFE7D6;   /* paneles, hero, franjas secundarias */
  --bg-card:   #FFFFFF;   /* tarjetas de producto */
  --ink:       #383A0E;   /* texto principal, verde oscuro (no negro) */
  --ink-soft:  #696A44;   /* texto secundario, etiquetas */
  --line:      #E1D9C4;   /* bordes sutiles */
  --olive:     #898C32;   /* acento de marca (isotipo) */
  --olive-dark:#6E7128;
  --forest:    #494B18;   /* botones, CTA, footer */
  --forest-dark:#2F3010;
  --cream-on-forest: #F3EEDD;
  --danger:    #8A3B2B;

  --font-display: "Gowun Batang", Georgia, "Times New Roman", serif; /* acento, uso puntual */
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  --radius: 2px;
  --shadow-card: 0 1px 2px rgba(42,42,32,0.06), 0 6px 20px rgba(42,42,32,0.05);
  --maxw: 1280px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 32px; }
@media (max-width: 720px){ .wrap{ padding: 0 20px; } }

h1,h2,h3{ font-family: var(--font-body); font-weight:700; margin:0; text-wrap: balance; }
.serif-accent{ font-family: var(--font-display); font-weight:700; }
.eyebrow{
  font-family: var(--font-body); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--olive-dark);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radius); border:1px solid transparent;
  font-weight:600; font-size:14px; letter-spacing:.01em; transition: background .15s, color .15s, border-color .15s;
}
.btn-forest{ background: var(--forest); color: var(--cream-on-forest); }
.btn-forest:hover{ background: var(--forest-dark); }
.btn-olive{ background: var(--olive); color: var(--cream-on-forest); }
.btn-olive:hover{ background: var(--olive-dark); }
.btn-outline{ background:transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--bg); }
.btn-sm{ padding: 9px 16px; font-size: 13px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-header > .wrap{ position:relative; display:flex; align-items:center; gap:28px; height:120px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:56px; width:auto; }
.brand-word{ font-family: var(--font-body); font-weight:800; letter-spacing:.06em; font-size:19px; }
.brand-sub{ display:block; font-size:9px; letter-spacing:.18em; color: var(--ink-soft); font-weight:600; }

/* Barra de categorías, debajo de la línea del logo */
.subnav{ border-top:1px solid rgba(41,34,17,.14); }
.subnav .wrap{ display:flex; align-items:center; min-height:46px; padding-top:4px; padding-bottom:4px; }

.mainnav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; row-gap:6px; column-gap:26px; width:100%; }
.mainnav > li{ position:relative; display:flex; align-items:center; }
.mainnav > li > a, .mainnav > li > button.navtop{
  background:none; border:none; font-size:13.5px; font-weight:400; color: var(--ink-soft);
  padding: 8px 2px; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.mainnav > li > a.icon-link{ padding: 8px 2px; color: var(--ink-soft); }
.mainnav > li > a.icon-link:hover{ color: var(--olive-dark); }
.mainnav > li > button.navtop svg{ transition: transform .15s; }
.mainnav > li.has-mega:hover > button.navtop svg,
.mainnav > li.has-mega.open > button.navtop svg{ transform: rotate(180deg); }
.mainnav > li > a:hover, .mainnav > li > button.navtop:hover{ color: var(--olive-dark); }

.mega{
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  background: var(--bg-card); border:1px solid var(--line); box-shadow: var(--shadow-card);
  padding: 26px 30px; display:none; gap:44px; min-width:460px;
}
.mainnav > li.has-mega:hover .mega,
.mainnav > li.has-mega.open .mega{ display:flex; }
.mega-col h4{
  font-family: var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--olive-dark); margin: 0 0 12px; font-weight:700;
}
.mega-col ul{ display:flex; flex-direction:column; gap:9px; }
.mega-col a{ font-size:14px; color: var(--ink); }
.mega-col a:hover{ color: var(--olive-dark); text-decoration: underline; text-underline-offset:3px; }

.head-icons{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.head-icons button{ background:none; border:none; color: var(--ink); position:relative; }
.nav-toggle{ display:none; background:none; border:none; }

.search-wrap{ position:relative; }
.search-form{
  position:absolute; top:calc(100% + 16px); right:0; width:300px; max-width:calc(100vw - 32px);
  background: var(--bg-card); border:1px solid var(--line); box-shadow: var(--shadow-card);
  border-radius:14px; padding:10px; z-index:50;
}
.search-form input{
  width:100%; border:1px solid var(--line); border-radius:9px; background: var(--bg); padding:9px 12px;
  font-family:inherit; font-size:13.5px; color: var(--ink);
}
.search-form input:focus{ outline:none; border-color: var(--olive-dark); }

.cart-btn-wrap{ position:relative; }
.cart-btn{ position:relative; display:flex; color: var(--ink); }
.cart-count{
  position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 3px;
  background: var(--olive-dark); color: var(--cream-on-forest); border-radius:999px;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

/* Panel del carrito: bandeja completa anclada a la derecha, con fondo oscuro detrás */
.cart-backdrop{ position:fixed; inset:0; background: rgba(41,34,17,.42); z-index:70; }

.cart-panel{
  position:fixed; top:0; right:0; height:100vh; height:100dvh; width:420px; max-width:92vw;
  background: var(--bg); z-index:80; box-shadow: -10px 0 32px rgba(42,42,32,.2);
  display:flex; flex-direction:column; overflow:hidden;
}
.cart-panel[hidden]{ display:none; }
.cart-panel-head{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid rgba(41,34,17,.14);
}
.cart-panel-head h3{ font-size:19px; font-weight:600; margin:0; }
.cart-panel-close{
  background:none; border:none; font-size:26px; line-height:1; color: var(--ink-soft); padding:2px 4px;
}
.cart-panel-close:hover{ color: var(--ink); }
.cart-scroll{ flex:1; overflow-y:auto; padding:0 24px; }
.cart-panel .cart-item{ padding:16px 0; gap:12px; }
.cart-panel .cart-item img{ width:52px; height:65px; }
.cart-panel .cart-empty{ flex:1; padding:0 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cart-footer{
  flex:none; padding:14px 24px 18px; border-top:1px solid rgba(41,34,17,.14); background: var(--bg-alt);
}
.cart-footer .cart-delivery{ margin-top:0; }
.cart-footer .cart-summary{ margin-top:10px; padding-top:12px; }
.cart-footer .cart-summary-actions .btn{ min-width:0; }
.cart-add-more{
  display:block; text-align:center; font-size:12.5px; color: var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px; margin:10px 0 2px;
}
.cart-add-more:hover{ color: var(--ink); }
.cart-wa-btn{ width:100%; justify-content:center; margin-top:6px; }
@media (max-width: 480px){ .cart-panel{ width:100vw; max-width:100vw; } }

/* Botón "+" de agregar rápido sobre la miniatura de la tarjeta de producto */
.addbtn{
  position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:999px;
  background: var(--bg-card); color: var(--ink); border:1px solid var(--line);
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: background .15s, color .15s, transform .15s;
}
.addbtn:hover{ background: var(--olive-dark); color: var(--cream-on-forest); border-color: var(--olive-dark); }
.addbtn.added{
  background: var(--olive-dark); color: var(--cream-on-forest); border-color: var(--olive-dark);
  animation: addbtnPop .4s ease;
}
@keyframes addbtnPop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.35); }
  100%{ transform: scale(1.08); }
}

/* Botón "Agregar al carrito" del producto: dos estados via CSS, sin JS de texto */
.pdp-actions .btn-label-added{ display:none; }
.pdp-actions button[data-add-cart].added .btn-label{ display:none; }
.pdp-actions button[data-add-cart].added .btn-label-added{ display:inline; }

@media (max-width: 900px){
  .subnav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:45;
    background: var(--bg); border-top:1px solid rgba(41,34,17,.14);
    box-shadow: var(--shadow-card); max-height: calc(100vh - 100px); overflow-y:auto;
  }
  .site-header.mobile-nav-open .subnav{ display:block; }
  .nav-toggle{ display:block; }
  .subnav .wrap{ display:block; padding-top:10px; padding-bottom:14px; }
  .mainnav{ flex-direction:column; align-items:stretch; row-gap:0; }
  .mainnav > li{ display:block; border-bottom:1px solid rgba(41,34,17,.1); }
  .mainnav > li > a, .mainnav > li > button.navtop{ width:100%; justify-content:space-between; padding:13px 2px; }
  .mega{ position:static; transform:none; width:100%; padding:6px 2px 16px 14px; box-shadow:none; border:none; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
  padding: 36px 0 44px;
}
/* Ancho de pantalla completo hasta el límite de --maxw, siempre centrada:
   .hero no tiene padding lateral, así que el 100% ya es el ancho completo
   de la pantalla, y el margin:auto la centra en cuanto llega al tope. */
.hero-media{
  position:relative; width:100%; max-width: var(--maxw); margin:0 auto;
  border-radius:16px; overflow:hidden;
  background: var(--bg-card);
}
.hero-media img{ display:block; width:100%; height:auto; }
.hero-copy{
  position:absolute; left:44px; top:50%; transform: translateY(-50%); z-index:2; max-width:420px;
}
.hero-copy .eyebrow{
  margin-bottom:10px; color: var(--olive-dark); font-size:12px;
}
.hero-copy h1{
  font-size: 38px; line-height:1.1;
}
.hero-copy h1 em{
  font-style:normal; font-weight:700;
  color: var(--olive-dark);
}
.hero-copy p{
  margin: 14px 0 34px; color: var(--ink-soft); font-size:15px; max-width:38ch;
}
.hero-copy .btn{ padding:14px 28px; font-size:14.5px; }

@media (max-width: 860px){
  .hero{ padding: 24px 0 32px; }
  .hero-copy{ left:24px; max-width:280px; }
  .hero-copy h1{ font-size:24px; }
  .hero-copy p{ font-size:13px; margin:10px 0 22px; }
  .hero-copy .btn{ padding:12px 22px; font-size:13px; }
}
@media (max-width: 560px){
  .hero-copy{ left:18px; max-width:210px; }
  .hero-copy h1{ font-size:19px; }
  .hero-copy p{ display:none; }
  .hero-copy .btn{ padding:9px 16px; font-size:12.5px; }
}

/* ---------- Secciones home ---------- */
.section{ padding: 64px 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom: 30px; border-bottom:1px solid var(--line); padding-bottom:18px;
}
.section-head h2{ font-size:24px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; }
.section-head .see-all{ font-size:13px; font-weight:600; color: var(--olive-dark); white-space:nowrap; }

.see-more-wrap{ display:flex; justify-content:center; margin-top:36px; }

.cat-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:14px; }
.cat-tile{ text-align:center; }
.cat-tile .thumb{
  background: var(--bg-card); border:1px solid var(--line);
  overflow:hidden; margin-bottom:12px; line-height:0;
}
.cat-tile img{ display:block; width:100%; height:auto; }
.cat-tile span{ font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width: 900px){ .cat-grid{ grid-template-columns: repeat(3,1fr); } }

/* Grilla de productos: caja blanca continua (foto + info), todas las fotos
   en proporción vertical uniforme, líneas finas entre tarjetas. */
/* Las líneas divisorias van en cada card (box-shadow interno), no en el
   fondo del contenedor: así una celda vacía al final de una fila incompleta
   no queda pintada — se ve el fondo de la página, como corresponde. */
/* Cada tarjeta lleva su propio borde completo (no box-shadow): así el
   rectángulo siempre queda entero alrededor del producto, sin cortes, sin
   depender de bordes del contenedor que se pierden en filas incompletas. */
.prod-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; align-items:stretch; }
.prod-card{ position:relative; display:flex; flex-direction:column; background: var(--bg-card); border:1px solid rgba(137,140,50,.28); }

.prod-card .photo{ background: var(--bg-card); padding: 16px 16px 0; flex:none; }
.prod-card .thumb{
  aspect-ratio: 4/5; background: var(--bg-card);
  overflow:hidden; position:relative;
}
.prod-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.prod-card:hover .thumb img{ transform: scale(1.035); }

.prod-card .info{ background: var(--bg-card); padding: 22px 16px 18px; flex:none; }
.prod-card .name{ font-size:13.5px; font-weight:400; margin:0 0 2px; color: var(--ink); line-height:1.3; }
.prod-card .price{ font-size:13.5px; font-weight:500; margin:0 0 4px; color: var(--ink); }
.prod-card .price .old{ font-weight:400; color: var(--ink-soft); text-decoration:line-through; margin-right:6px; font-size:12px; }
.prod-card .meta{ font-size:11px; color: var(--ink-soft); opacity:.8; line-height:1.4; margin:0; }
.prod-card .meta-brand{ font-size:11px; color: var(--ink-soft); opacity:.8; line-height:1.4; margin:0; }

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

/* ---------- Banda de marca (verde bosque) ---------- */
/* La foto va sin márgenes, del mismo alto que la sección completa; el
   color de fondo queda solo del lado del texto. */
.brandband{
  background: var(--forest); color: var(--cream-on-forest);
}
.brandband .wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:0; align-items:stretch; padding:0;
}
.brandband .eyebrow{ color:#C7CC8E; }
.brandband h2{ font-size:34px; color:#fff; margin:14px 0 20px; }
.brandband .btn-outline{ border-color: rgba(243,238,221,.5); color: var(--cream-on-forest); }
.brandband .btn-outline:hover{ background: var(--cream-on-forest); color: var(--forest-dark); }
.brandband-photo{ overflow:hidden; height:100%; }
.brandband-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.brandband-text{ padding: 48px 48px 48px 44px; }
@media (max-width: 860px){
  .brandband .wrap{ grid-template-columns:1fr; }
  .brandband-photo{ aspect-ratio: 4/3; height:auto; }
  .brandband-photo img{ height:100%; }
  .brandband-text{ padding:28px 20px; }
}

.values{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px; padding-top:46px; padding-bottom:46px; }
.value-item{ display:flex; gap:12px; align-items:flex-start; }
.value-item .ico{ color: var(--olive-dark); flex:none; }
.value-item b{ display:block; font-size:14px; }
.value-item span{ font-size:13px; color: var(--ink-soft); }
@media (max-width: 860px){ .values{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top: 40px; padding-bottom: 40px; }
.site-footer .wrap{ display:flex; flex-direction:column; gap:22px; }
.footer-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-footer .brand{ margin:0; }
.site-footer .brand-word{ font-size:16px; }
.footer-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; font-size:13px; color: var(--ink-soft); border-top:1px solid rgba(41,34,17,.14); padding-top:22px; }
.footer-links a:hover{ color: var(--ink); }
.footer-social{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.footer-social .icons{ display:flex; gap:14px; }
.footer-social .icons a{ color: var(--ink-soft); }
.footer-social .icons a:hover{ color: var(--olive-dark); }
.footer-tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); text-align:right; }

@media (max-width: 720px){
  .footer-top{ flex-direction:column; align-items:center; text-align:center; }
  .footer-social{ align-items:center; }
  .footer-links{ justify-content:center; text-align:center; }
}

/* ---------- Catálogo ---------- */
.catalog-head{ padding-top: 32px; padding-bottom: 30px; border-bottom:1px solid var(--line); }
.catalog-head h1{ font-size:30px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; margin:14px 0 22px; }
.catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-top:0; }
.catalog-count{ font-size:13px; color: var(--ink-soft); }
.sortbox{ font-size:13px; display:flex; align-items:center; gap:8px; color: var(--ink-soft); }
.sortbox select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:none; border-bottom:1px solid var(--ink); background:transparent;
  padding:2px 18px 4px 0; font-family:inherit; font-size:13px; color: var(--ink); cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23383A0E' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right center; background-size:12px;
  border-radius:0;
}

.catalog-body{ display:grid; grid-template-columns: 240px 1fr; gap:36px; padding-top: 28px; padding-bottom: 70px; align-items:start; }
/* Sticky, pero con su propio scroll: si los acordeones abiertos la hacen más
   alta que la pantalla, se desplaza sola en vez de "atrapar" el scroll de
   toda la página hasta que aparezca el final de los productos. */
.filters{
  position:sticky; top:178px; display:flex; flex-direction:column; gap:0;
  max-height: calc(100vh - 194px); overflow-y:auto;
}
.filter-group{ border-bottom:1px solid var(--line); padding: 16px 0; }
.filter-group summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color: var(--ink); cursor:pointer;
}
.filter-group summary::-webkit-details-marker{ display:none; }
.filter-group[open] summary{ margin-bottom:12px; }
.filter-opt{ display:flex; align-items:center; gap:9px; font-size:13.5px; padding:5px 0; color: var(--ink-soft); }
.filter-opt input{ accent-color: var(--olive); }
.filter-opt:hover{ color: var(--ink); }
.filter-opt .n{ margin-left:auto; font-size:11.5px; color: var(--ink-soft); }

.filter-opt.cat-parent .chev-btn{
  background:none; border:none; padding:2px; margin-left:2px; color: var(--ink-soft);
  display:flex; align-items:center; flex:none;
}
.filter-opt.cat-parent .chev{ transition: transform .15s; }
.filter-opt.cat-parent.open .chev{ transform: rotate(180deg); }
.subcat-list{ display:none; }
.filter-opt.cat-parent.open + .subcat-list{ display:block; }

.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; }
.pagination a, .pagination span, .pagination button{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:13px; border-radius:50%; background:none; border:none; font-family:inherit;
  color: var(--ink); cursor:pointer;
}
.pagination button.prevnext{ width:auto; padding:0 14px; border-radius:20px; gap:4px; }
.pagination button:disabled{ opacity:.35; cursor:default; }
.pagination .current{ background: var(--forest); color: var(--cream-on-forest); font-weight:700; }
.pagination a:hover, .pagination button:not(:disabled):not(.current):hover{ background: var(--bg-alt); }

@media (max-width: 900px){
  .catalog-body{ grid-template-columns: 1fr; }
  .filters{ position:static; }
}

.back-to-top{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background: var(--forest); color: var(--cream-on-forest); border:none;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-card);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s;
  z-index: 30;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--forest-dark); }

/* ---------- Ficha de producto ---------- */
.pdp{ padding-top: 40px; padding-bottom: 70px; }
.pdp-crumb{ font-size:12.5px; color: var(--ink-soft); margin-bottom:22px; }
.pdp-crumb a:hover{ text-decoration:underline; }
.pdp-grid{ display:grid; grid-template-columns: 1fr 440px; gap:56px; align-items:start; }

.pdp-gallery{ display:flex; flex-direction:column-reverse; gap:14px; }
.pdp-thumbs{ display:flex; flex-direction:row; gap:10px; width:auto; }
.pdp-thumbs button{
  border:1px solid var(--line); padding:0; background: var(--bg-card); width:78px; aspect-ratio:1;
  overflow:hidden; flex:none;
}
.pdp-thumbs button.active{ border-color: var(--forest); }
.pdp-main{
  aspect-ratio: 4/5; background: var(--bg-card); border:1px solid var(--line);
  overflow:hidden; position:relative;
}
.pdp-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-count{
  position:absolute; right:12px; bottom:12px; background: rgba(42,42,32,.75); color:#fff;
  font-size:11px; padding:4px 9px; border-radius: 20px;
}
.pdp-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px;
  background: rgba(255,255,255,.85); border:1px solid var(--line); color: var(--ink);
  display:flex; align-items:center; justify-content:center; transition: background .15s;
}
.pdp-arrow:hover{ background: #fff; }
.pdp-arrow-prev{ left:12px; }
.pdp-arrow-next{ right:12px; }

.pdp-info .cat-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); font-weight:600; }
.pdp-info h1{
  font-family: var(--font-body); font-weight:500; font-size:22px; letter-spacing:-.01em;
  margin: 7px 0 6px; text-transform: none;
}
.pdp-info .price{ font-size:19px; font-weight:500; margin-bottom:8px; font-family: var(--font-body); letter-spacing:.01em; }
.pdp-info .subline{ font-size:12.5px; color: var(--ink-soft); margin-bottom:16px; letter-spacing:.02em; }
.pdp-info .price .old{ font-size:14px; font-weight:500; color: var(--ink-soft); text-decoration:line-through; margin-right:10px; }
.pdp-actions{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.pdp-actions .btn{ width:100%; font-size:13px; padding:12px 24px; }

.pdp-badges{ display:flex; gap:18px; padding:14px 0; border-top:1px solid var(--line); }
.pdp-badges .b{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; font-size:10.5px; letter-spacing:.01em; color: var(--ink-soft); }
.pdp-badges .b svg{ color: var(--olive-dark); width:17px; height:17px; }

.spec-list{
  display:grid; grid-template-columns: 1fr auto; gap:8px 20px; margin:12px 0 0;
  padding-top:12px; border-top:1px solid var(--line); font-size:13.5px;
}
.spec-list dt{ color: var(--ink-soft); }
.spec-list dd{ margin:0; text-align:right; font-weight:600; }
.pdp-tabs .content .measures-list{ max-width:360px; margin-top:18px; padding-top:0; border-top:none; }

.pdp-tabs{ margin-top:56px; display:grid; grid-template-columns:200px 1fr; gap:40px; }
.pdp-tabs nav{ display:flex; flex-direction:column; gap:2px; }
.pdp-tabs nav a{ padding:11px 0; font-size:14px; border-bottom:1px solid var(--line); }
.pdp-tabs nav a.active{ font-weight:700; border-bottom-color: var(--ink); }
.pdp-tabs .content p{ margin:0 0 16px; color: var(--ink); font-size:14.5px; line-height:1.7; }
.pdp-tabs .content h3{ font-size:16px; margin: 22px 0 10px; }
.pdp-tabs .content a{ color: var(--olive-dark); text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 980px){
  .pdp-grid{ grid-template-columns:1fr; }
  .pdp-tabs{ grid-template-columns:1fr; }
}

/* ---------- Páginas de contenido (Nosotros, Envíos, políticas, Contacto) ---------- */
.static-page{ max-width:720px; padding-top:48px; padding-bottom:90px; }
.static-page .pdp-crumb{ margin-bottom:18px; }
.static-page h1{
  font-family: var(--font-body); font-weight:500; font-size:30px; letter-spacing:-.01em;
  margin: 0 0 10px;
}
.static-page .lede{ font-size:15px; color: var(--ink-soft); margin:0 0 36px; line-height:1.6; }
.static-content h2{ font-family: var(--font-body); font-size:17px; font-weight:600; margin: 34px 0 12px; }
.static-content h2:first-child{ margin-top:0; }
.static-content p{ margin:0 0 15px; color: var(--ink); font-size:14.5px; line-height:1.75; }
.static-content ul{ margin:0 0 15px; padding-left:20px; color: var(--ink); font-size:14.5px; line-height:1.75; }
.static-content li{ margin-bottom:6px; }
.static-content a{ color: var(--olive-dark); text-decoration:underline; text-underline-offset:3px; }
.static-content .fine{ font-size:12.5px; color: var(--ink-soft); margin-top:36px; padding-top:18px; border-top:1px solid var(--line); }

.contact-cards{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin: 28px 0 8px; }
.contact-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:22px 20px;
  border:1px solid var(--line); background: var(--bg-card); font-size:13.5px; color: var(--ink-soft);
}
.contact-card svg{ color: var(--olive-dark); }
.contact-card strong{ color: var(--ink); font-size:14.5px; font-weight:600; }
.contact-card a{ color: var(--olive-dark); text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 480px){ .contact-cards{ grid-template-columns:1fr; } }

/* ---------- Carrito (canasta de selección → WhatsApp) ---------- */
.cart-page{ max-width:760px; padding-top:48px; padding-bottom:90px; }
.cart-page .pdp-crumb{ margin-bottom:18px; }
.cart-page h1{ font-family: var(--font-body); font-weight:500; font-size:30px; letter-spacing:-.01em; margin:0 0 10px; }
.cart-page .lede{ font-size:13px; color: var(--ink-soft); margin:0 0 30px; line-height:1.6; }

.cart-empty{ padding:50px 0; text-align:center; color: var(--ink-soft); }
.cart-empty p{ margin:0 0 18px; font-size:15px; }

.cart-list{ display:flex; flex-direction:column; border-top:1px solid rgba(41,34,17,.14); }
.cart-item{
  display:flex; align-items:center; gap:16px; padding:18px 4px; box-shadow: inset 0 -1px 0 rgba(41,34,17,.14);
}
.cart-item img{
  width:64px; height:80px; object-fit:cover; background: var(--bg-card); flex:none;
  border:1px solid rgba(41,34,17,.14);
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-title{ font-size:13.5px; color: var(--ink); margin-bottom:2px; font-weight:400; }
.cart-item-price{ font-size:13.5px; color: var(--ink); margin-bottom:8px; }
.cart-item-qty{ display:inline-flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:999px; padding:4px 14px; }
.cart-item-qty button{ background:none; border:none; font-size:15px; color: var(--ink); line-height:1; width:16px; }
.cart-item-qty span{ font-size:13.5px; min-width:14px; text-align:center; font-variant-numeric: tabular-nums; }
.cart-item-remove{
  background:none; border:none; color: var(--ink-soft); font-size:20px; line-height:1; padding:6px; flex:none;
}
.cart-item-remove:hover{ color: var(--ink); }

.cart-nudge{
  margin-top:16px; padding:10px 14px; background: rgba(137,140,50,.12); border:1px solid rgba(137,140,50,.3);
  font-size:12.5px; color: var(--olive-dark); line-height:1.5;
}
.cart-nudge-ok{ color: var(--olive-dark); background: rgba(137,140,50,.18); border-color: var(--olive-dark); }

.cart-delivery{ margin-top:16px; }
.cart-delivery-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:4px; font-weight:600; }
.cart-radio{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--ink);
  padding:6px 0; cursor:pointer;
}
.cart-radio input{ accent-color: var(--olive-dark); }
.cart-radio .tag-free{ font-size:10.5px; color: var(--olive-dark); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

.cart-summary{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(41,34,17,.14); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; margin-bottom:12px; }
.cart-total strong{ font-size:19px; font-weight:600; }
.cart-summary-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cart-summary-actions .btn{ flex:1; min-width:200px; justify-content:center; }

@media (max-width: 560px){
  .cart-item img{ width:52px; height:65px; }
  .cart-summary-actions .btn{ min-width:100%; }
}

/* ---------- Loader de carga (isotipo girando) ---------- */
.page-loader{
  position:fixed; inset:0; z-index:9999; background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .45s ease, visibility .45s ease;
}
.page-loader img{ width:42px; height:42px; animation: loader-spin 1s linear infinite; }
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .page-loader img{ animation: none; } }