/* =========================================================
   PATAS & CAOS — producto.css
   Se carga DESPUES de site.css. Contiene SOLO lo especifico
   de las fichas de producto (layout, tabs, override de header).
   ========================================================= */

/* --- layout base de la ficha de producto --- */
.product-page-main{max-width:1180px;margin:0 auto;padding:38px 5% 80px;background:var(--cream)}
.product-breadcrumb{font-size:.78rem;color:#6b5a4e;margin-bottom:1.5rem}.product-breadcrumb a{color:#6b5a4e;text-decoration:none}.product-breadcrumb a:hover{color:var(--terracota)}
.product-page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:55px;align-items:start}
.product-gallery{background:#fff;border-radius:22px;padding:22px;position:static;overflow:hidden;align-self:start}
.product-gallery-main{width:100%;aspect-ratio:4/5;object-fit:contain;display:block}
.product-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto}.product-thumbs img{width:72px;height:72px;object-fit:cover;background:#fff;border:1px solid #e5d9c7;border-radius:10px;cursor:pointer}.product-thumbs img.active{border:2px solid var(--terracota)}
.product-tag{display:inline-block;background:#fff;border:1px solid #e3d4bf;border-radius:99px;padding:6px 12px;font-size:12px;color:#6b5a4e}
.product-info h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:18px 0 12px;font-weight:900}.product-price{font-size:1.9rem;font-weight:900;color:var(--terracota);margin:10px 0 20px}.product-description{line-height:1.75;color:#40342c;font-size:1rem}
.product-buy{display:flex;gap:12px;align-items:center;margin:24px 0;flex-wrap:wrap}.product-buy button{border:0;border-radius:50px;padding:15px 28px;background:var(--terracota);color:#fff;font:700 15px Poppins;cursor:pointer}.product-buy button:hover{background:#a8501f}.product-buy .view-cart{border:2px solid #4A7C59;border-radius:50px;padding:13px 22px;text-decoration:none;color:#4A7C59;font-weight:700;font-size:14px}.product-msg{font-size:13px;color:#4A7C59;font-weight:700;min-height:20px}
.product-details{border-top:1px solid #dfd2c0;padding-top:20px;margin-top:25px}.product-details h2{font-size:18px}.product-details ul{padding-left:20px;line-height:1.9;color:#4b4037}.product-details p{line-height:1.75;color:#4b4037}
@media(max-width:768px){.product-page-grid{grid-template-columns:1fr;gap:28px}.product-gallery{position:static}.product-page-main{padding-top:24px}.product-info h1{font-size:2rem}}

/* --- AJUSTES FICHAS DE PRODUCTO 2026-08 (fondo, header al hacer scroll, boton Ver carrito) --- */
/* NOTA: este bloque incluye reglas .product-accordion-* que no encontre
   usadas en el HTML de la ficha de ejemplo (caldo-de-huesos). Parecen
   CSS heredado de una version anterior con acordeones, reemplazada por
   las pestanas de abajo. Las dejo por seguridad (no rompen nada si no se
   usan) pero valdria la pena confirmar si TODAS las 102 fichas ya usan
   pestanas antes de eliminarlas. */
/* === AJUSTES FICHAS DE PRODUCTO 2026-08 === */
body { background: var(--cream) !important; }
.product-page-main { max-width: none !important; width: 100%; margin: 0 !important; background: var(--cream) !important; }
.product-page-main > .product-breadcrumb,
.product-page-main > .product-page-grid { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Header translúcido visible al hacer scroll */
.site-header { background: var(--cream) !important; }
.site-header nav { background: var(--cream); transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled { background: transparent !important; }
.site-header.scrolled nav {
  background: rgba(245,236,215,.68) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 26px rgba(28,16,7,.10);
}
.site-header.scrolled .nav-top,
.site-header.scrolled .nav-bottom { background: transparent !important; }

/* Botón Ver carrito */
.product-buy .view-cart {
  background: var(--cream) !important;
  color: #4A7C59 !important;
  border: 2px solid #4A7C59 !important;
  padding: 13px 22px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.product-buy .view-cart:hover {
  background: #4A7C59 !important;
  color: #fff !important;
  border-color: #4A7C59 !important;
}

/* Acordeones de características e ingredientes */
.product-details.product-accordion {
  border-top: 1px solid #dfd2c0;
  padding: 0;
  margin-top: 0;
}
.product-details.product-accordion:first-of-type { margin-top: 26px; }
.product-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.product-accordion-toggle:hover { color: var(--terracota); }
.product-accordion-icon {
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(28,16,7,.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .25s ease, border-color .2s ease;
}
.product-accordion-toggle[aria-expanded="true"] .product-accordion-icon {
  transform: rotate(45deg);
  border-color: var(--terracota);
}
.product-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.product-accordion-content > div { overflow: hidden; }
.product-accordion-toggle[aria-expanded="true"] + .product-accordion-content { grid-template-rows: 1fr; }
.product-accordion-inner { padding: 0 2px 18px; }
.product-accordion-inner ul { padding-left: 20px; line-height: 1.9; color: #4b4037; }
.product-accordion-inner p { line-height: 1.75; color: #4b4037; }

@media (max-width: 768px) {
  .product-page-main > .product-breadcrumb,
  .product-page-main > .product-page-grid { max-width: 100%; }
}

/* --- pestanas Caracteristicas / Ingredientes (version actual en uso) --- */
/* Pestañas de información del producto */
.product-info-tabs{margin-top:28px;border-top:1px solid #dfd2c0;}
.product-tabs-nav{display:flex;align-items:flex-end;gap:0;padding-top:14px;border-bottom:1px solid #d7cab7;overflow-x:auto;}
.product-tab-btn{appearance:none;border:1px solid #d7cab7;border-bottom:none;background:#eee8f0;color:#1A1A1A;padding:11px 18px;font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0;transition:background .2s,color .2s,border-color .2s;}
.product-tab-btn+ .product-tab-btn{margin-left:-1px;}
.product-tab-btn:hover{color:#C4622D;background:#fff8ec;}
.product-tab-btn.activo{background:#F5ECD7;color:#4A7C59;border-color:#cdbfa9;position:relative;z-index:2;}
.product-tabs-panels{padding:20px 8px 4px;}
.product-tab-panel{display:none;color:#4b4037;line-height:1.75;}
.product-tab-panel.activo{display:block;}
.product-tab-panel ul{padding-left:22px;line-height:1.9;}
.product-tab-panel li{margin-bottom:8px;}
.product-tab-panel p{line-height:1.75;}
@media(max-width:600px){.product-tab-btn{padding:10px 13px;font-size:.76rem}.product-tabs-panels{padding:16px 2px 2px}}