/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Mad Pasta Company — CSS global del theme                                ║
   ║                                                                          ║
   ║  Reemplaza al CSS del preview (que usaba Tailwind CDN). Incluye:        ║
   ║   1) Fuentes (Anton + Inter + Space Grotesk + Manrope)                   ║
   ║   2) Tokens de marca (cream/ink/mustard/bronze/olive)                    ║
   ║   3) Componentes (.label-kicker, .display, .btn-*, .olive-stripe, etc.) ║
   ║   4) Subset de utilidades estilo Tailwind que usan los HTMLs del preview║
   ║                                                                          ║
   ║  Todas las clases mantienen los nombres del preview para no tener que    ║
   ║  reescribir el HTML. El theme estándar de TN sigue funcionando porque   ║
   ║  no chocamos con sus clases (.col-md-*, .row, .container-fluid, etc.).  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink: #0E0E0E;
  --ink-2: #1a1a1a;
  --cream: #F5F0E8;
  --cream-2: #EDE7D9;
  --mustard: #F5C518;
  --bronze: #7A6E4E;
  --olive: #4F5D47;
  --body: #3A3A3A;
}

/* ─── Body / typo base ───────────────────────────────────────────────────── */
body.template-home,
body.template-category,
body.template-product,
body.template-page {
  font-family: 'Inter', 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--cream);
  color: var(--body);
  margin: 0;
}

/* ─── V2 helpers (usados por el HTML V2 portado del mockup) ───────────── */
/* Container central con padding fluido — V2 PDP usa max-c en TODA section */
.max-c {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 767px) {
  .max-c { padding-left: 20px; padding-right: 20px; }
}

/* Marquee track (animación trust strip horizontal en ediciones futuras) */
.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 40s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Grid divider — separa columnas de un grid con un border-left fino */
.grid-divider > * + * { border-left: 1px solid rgba(14,14,14,0.12); }
.dark-divider > * + * { border-left: 1px solid rgba(255,255,255,0.08); }

html { scroll-behavior: smooth; }

img { display: block; max-width: 100%; }

/* ─── Componentes de marca ───────────────────────────────────────────────── */
.label-kicker {
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.display {
  font-family: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}

.olive-stripe {
  background-color: #4F5D47;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(212,175,99,0.35) 0%, rgba(212,175,99,0) 55%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 14px);
}

/* Mobile (default): imagen de categoría oculta + divider oculto.
   Las clases mp-home-cat-img y mp-home-cat-divider solo aparecen en desktop. */
.mp-home-cat-img { display: none; }
.mp-home-cat-divider { display: none; }

.btn-mustard {
  background: var(--mustard);
  color: var(--ink);
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  text-decoration: none;
}
.btn-mustard:hover { color: var(--ink); text-decoration: none; }

.btn-ink {
  background: var(--ink);
  color: #fff;
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  text-decoration: none;
}
.btn-ink:hover { color: #fff; text-decoration: none; }

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { scrollbar-width: none; }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  HEADER V2 — burger+MENÚ izq, logo center, CARRITO der                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* El header outer (TN le aplica display:flex), forzamos al inner a ocupar
   todo el ancho para que los items (menu/logo/cart) queden distribuidos.
   Sin esto, el inner shrink-to-content y los items quedan apelmazados al centro. */
.mp-header { display: block !important; }
.mp-header-inner {
  width: 100% !important;
  box-sizing: border-box;
}

.mp-header-menu-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
}
.mp-header-menu-btn:hover { color: var(--mustard); border-color: rgba(255,255,255,0.25); }
.mp-header-menu-label { font-weight: 500; letter-spacing: 0.22em; }

.mp-header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 70%;
}
/* Los contenedores internos del component('logos/logo') de TN deben centrarse
   y no estirarse — TN les aplica sus propios estilos que pueden romper el centrado. */
.mp-header-logo > *,
.mp-header-logo .logo-img-container,
.mp-header-logo .logo-text-container,
.mp-header-logo .mp-header-logo-tn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.mp-header-link { padding: 6px 0; transition: opacity 150ms ease; }
.mp-header-link:hover { opacity: 1 !important; color: var(--mustard) !important; }

.mp-header-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--mustard);
}
.mp-header-cart:hover { color: var(--mustard); }
.mp-header-cart-label { font-weight: 500; letter-spacing: 0.22em; }
.mp-header-cart-badge {
  background: var(--mustard);
  color: var(--ink);
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  margin-left: 2px;
}

/* En mobile el header es más compacto: ocultar BUSCAR y ES, label CARRITO */
@media (max-width: 767px) {
  .mp-header-inner { height: 64px !important; }
  .mp-header-menu-btn { padding: 6px 10px !important; border: 0 !important; }
  .mp-header-menu-label { display: none; }
  .mp-header-link { display: none; }
  .mp-header-right { gap: 8px !important; }
  .mp-header-cart { padding: 8px !important; border: 0 !important; background: transparent !important; }
  .mp-header-cart-label { display: none; }
  .mp-header-logo img { height: 48px !important; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PDP V2 — Galería con thumbs verticales + main image con tags overlay   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Mobile (default): thumbs en fila debajo del hero */
.mp-pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
.mp-pdp-thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  background: var(--ink);
  padding: 12px 16px;
  order: 2;
}
.mp-pdp-thumb {
  width: 52px; height: 52px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline-color 120ms;
  flex-shrink: 0;
}
.mp-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-pdp-thumb-active { outline-color: var(--mustard); }
.mp-pdp-thumb-more {
  width: 52px; height: 52px;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Anton','Impact',sans-serif;
  font-size: 16px;
  flex-shrink: 0;
}
.mp-pdp-hero { order: 1; }
.mp-pdp-hero-img { width: 100%; height: 360px; object-fit: cover; display: block; }

/* Tags overlay sobre la foto del hero (V2) */
.mp-pdp-tag-top-left {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--mustard);
  color: var(--ink);
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mp-pdp-tag-bottom-left {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(14,14,14,0.6);
  color: #fff;
  padding: 5px 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-pdp-tag-dot {
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--mustard);
  display: inline-block;
}
.mp-pdp-tag-bottom-right {
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(14,14,14,0.6);
  color: #fff;
  padding: 5px 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Stock indicator (V2): punto amarillo + texto debajo del CTA */
.mp-pdp-stock-line { line-height: 1.5; }

/* ─── PDP dual-markup toggle ──────────────────────────────────────────────
   product.tpl tiene 2 bloques: <div class="mp-mobile-only"> (HTML del mobile
   aprobado por Clara, copiado de mobile/pdp.html) y <div class="mp-desktop-only">
   (HTML del V2 desktop). Mostramos uno u otro según el viewport. */
.mp-mobile-only { display: block; }
.mp-desktop-only { display: none; }
@media (min-width: 1024px) {
  .mp-mobile-only { display: none; }
  .mp-desktop-only { display: block; }
}

/* Desktop overrides para galería V2 */
@media (min-width: 1024px) {
  .mp-pdp-gallery {
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
  }
  .mp-pdp-thumbs {
    flex-direction: column;
    background: transparent;
    padding: 0;
    order: 1;
    width: 80px;
    flex-shrink: 0;
  }
  .mp-pdp-thumb,
  .mp-pdp-thumb-more {
    width: 80px;
    height: 80px;
  }
  .mp-pdp-thumb-more { font-size: 22px; }
  .mp-pdp-hero {
    order: 2;
    flex: 1;
    min-width: 0;
  }
  .mp-pdp-hero-img { height: 720px !important; }

  /* Hero photo del PDP (img con clase mp-pdp-hero-photo): reducir altura en desktop.
     El inline style tiene height:620px (default mobile). En desktop bajamos a 460px. */
  .mp-pdp-hero-photo { height: 460px !important; }

  /* Imagen "Como en un restaurante" (storefront de Martínez en PDP):
     reducir altura en desktop. Inline default 560px → 380px. */
  .mp-pdp-restaurante-photo { height: 380px !important; }

  /* Tags más grandes en desktop */
  .mp-pdp-tag-top-left,
  .mp-pdp-tag-bottom-left,
  .mp-pdp-tag-bottom-right {
    font-size: 11px;
    padding: 7px 14px;
  }
  .mp-pdp-tag-top-left { top: 20px; left: 20px; }
  .mp-pdp-tag-bottom-left { bottom: 20px; left: 20px; }
  .mp-pdp-tag-bottom-right { bottom: 20px; right: 20px; }

  /* PDP info col — V2 typography (mucho más grande) */
  body.template-product .mp-pdp-h1 {
    font-size: 84px !important;
    line-height: 0.88 !important;
    margin-top: 18px !important;
  }
  body.template-product .mp-pdp-kicker { font-size: 11px !important; }
  body.template-product .mp-pdp-desc { font-size: 15px !important; line-height: 1.6 !important; }
  body.template-product .mp-pdp-callout { padding: 14px 18px !important; }
  body.template-product .mp-pdp-callout > div:first-child { font-size: 16px !important; }
  body.template-product .mp-pdp-price { font-size: 52px !important; }
  body.template-product .mp-pdp-price-compare { font-size: 18px !important; }
  body.template-product .mp-pdp-cta {
    font-size: 14px !important;
    padding: 16px 28px !important;
  }
  body.template-product .mp-pdp-stock-line {
    font-size: 12px !important;
  }
  body.template-product .mp-pdp-reviews-count { font-size: 13px !important; }

  /* ─── V2 sizes — Cómo se prepara: H2 88px, step n 56px, title 16px ──── */
  body.template-product [data-mp-cooking-section] [data-mp-cooking-title] {
    font-size: 88px !important;
    line-height: 0.88 !important;
    margin-top: 18px !important;
  }
  body.template-product [data-mp-cooking-section] [data-mp-cooking-subtitle] {
    font-size: 14px !important;
    margin-top: 18px !important;
    max-width: 480px;
  }
  body.template-product [data-mp-cooking-steps] {
    margin-top: 40px !important;
    gap: 28px !important;
  }
  body.template-product [data-mp-cooking-steps] .mp-step-n {
    font-size: 56px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
  }
  body.template-product [data-mp-cooking-steps] .mp-step-title {
    font-size: 16px !important;
  }
  body.template-product [data-mp-cooking-steps] .mp-step-desc {
    font-size: 13px !important;
    margin-top: 6px !important;
  }

  /* ─── V2 sizes — Combo amarillo (col derecha sticky) ───────────────── */
  body.template-product [data-mp-combo-block].mp-combo-card {
    padding: 40px !important;
  }
  body.template-product [data-mp-combo-block] .label-kicker {
    font-size: 11px !important;
  }
  body.template-product [data-mp-combo-block] .mp-combo-title-text {
    font-size: 44px !important;
    line-height: 0.92 !important;
    margin-top: 16px !important;
  }
  body.template-product [data-mp-combo-block] [data-mp-add-to-cart] {
    font-size: 14px !important;
    padding: 14px 22px !important;
  }

  /* ─── HowTo grid 2-col en desktop (steps IZQ + combo DER sticky) ───── */
  .mp-howto-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: start !important;
  }
  .mp-howto-combo {
    position: sticky;
    top: 100px;
  }
}

/* ─── Page wrapper (mobile 390px → desktop 1200px) ──────────────────────── */
.page {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  background: var(--cream);
  position: relative;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .page { max-width: 720px; }
}
@media (min-width: 1024px) {
  .page { max-width: 1200px; }
}

/* ─── FAQ accordion ──────────────────────────────────────────────────────── */
.faq-item { border-top: 1px solid rgba(122,110,78,0.25); }
.faq-item:last-child { border-bottom: 1px solid rgba(122,110,78,0.25); }
.faq-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.faq-answer {
  display: none;
  padding: 12px;
  background: rgba(245,197,24,0.12);
  margin-bottom: 12px;
  margin-top: -4px;
}
.faq-item[data-open="true"] .faq-answer { display: block; }

/* ─── Drawers (carrito + menú custom) ────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.menu-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  max-width: 320px;
  background: var(--ink);
  color: #fff;
  z-index: 80;
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.menu-panel.open { transform: translateX(0); }

/* ────────────────────────────────────────────────────────────────────────
   Subset de utilidades estilo Tailwind (las que usan los HTMLs del preview)
   ──────────────────────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-ink     { background-color: var(--ink); }
.bg-cream   { background-color: var(--cream); }
.bg-cream2  { background-color: var(--cream-2); }
.bg-mustard { background-color: var(--mustard); }
.bg-white   { background-color: #fff; }

/* Text colors */
.text-white   { color: #fff; }
.text-ink     { color: var(--ink); }
.text-mustard { color: var(--mustard); }
.text-bronze  { color: var(--bronze); }

/* Layout / display */
.relative      { position: relative; }
.absolute      { position: absolute; }
.fixed         { position: fixed; }
.sticky        { position: sticky; }
.inset-0       { inset: 0; }
.inset-x-5     { left: 20px; right: 20px; }
.top-3         { top: 12px; }
.right-3       { right: 12px; }
.bottom-3      { bottom: 12px; }
.bottom-5      { bottom: 20px; }
.left-3        { left: 12px; }
.z-10          { z-index: 10; }
.z-50          { z-index: 50; }

.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }

.flex-col      { flex-direction: column; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0       { min-width: 0; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }
.items-stretch   { align-items: stretch; }
.self-start      { align-self: flex-start; }
.self-center     { align-self: center; }
.self-end        { align-self: flex-end; }
.self-stretch    { align-self: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Sizing */
.w-full      { width: 100%; }
.h-full      { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Gaps */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-7 { gap: 28px; }
.gap-8 { gap: 32px; }

/* Margin */
.m-0 { margin: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-7 { margin-top: 28px; }
.mt-8 { margin-top: 32px; }
.-mt-1 { margin-top: -4px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-7 { margin-bottom: 28px; }
.mb-8 { margin-bottom: 32px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }

.mt-auto { margin-top: auto; }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-7  { padding: 28px; }
.p-8  { padding: 32px; }

.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

.py-1  { padding-top: 4px; padding-bottom: 4px; }
.py-2  { padding-top: 8px; padding-bottom: 8px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }
.py-5  { padding-top: 20px; padding-bottom: 20px; }
.py-6  { padding-top: 24px; padding-bottom: 24px; }
.py-7  { padding-top: 28px; padding-bottom: 28px; }
.py-8  { padding-top: 32px; padding-bottom: 32px; }
.py-9  { padding-top: 36px; padding-bottom: 36px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }
.pt-8 { padding-top: 32px; }

.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-7 { padding-bottom: 28px; }
.pb-8 { padding-bottom: 32px; }
.pb-9 { padding-bottom: 36px; }

.pl-3 { padding-left: 12px; }
.pr-0 { padding-right: 0; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }

/* Text */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }
.text-uppercase  { text-transform: uppercase; }
.text-lowercase  { text-transform: lowercase; }

.text-\[9px\]    { font-size: 9px; }
.text-\[10px\]   { font-size: 10px; }
.text-\[10\.5px\]{ font-size: 10.5px; }
.text-\[11px\]   { font-size: 11px; }
.text-\[11\.5px\]{ font-size: 11.5px; }
.text-\[12px\]   { font-size: 12px; }
.text-\[12\.5px\]{ font-size: 12.5px; }
.text-\[13px\]   { font-size: 13px; }
.text-\[13\.5px\]{ font-size: 13.5px; }
.text-\[14px\]   { font-size: 14px; }
.text-\[15px\]   { font-size: 15px; }
.text-\[16px\]   { font-size: 16px; }

.font-weight-bold  { font-weight: 700; }
.font-weight-light { font-weight: 300; }
.italic            { font-style: italic; }

.line-through { text-decoration: line-through; }

/* Borders & rounded */
.rounded-full { border-radius: 9999px; }
.border-t     { border-top: 1px solid; }

/* Overflow & misc */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-clip { overflow-x: clip; }

.cursor-pointer    { cursor: pointer; }
.cursor-not-allowed{ cursor: not-allowed; }

.transition-all { transition: all 200ms ease; }

/* ─── Helper: para que el header sticky no tape los anchors ──────────────── */
[id^="pdp-"] { scroll-margin-top: 80px; }

/* ─── PDP — sticky bar inferior ──────────────────────────────────────────── */
.mp-sticky-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.mp-sticky-bar {
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.mp-sticky-bar.mp-sticky-visible {
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
}
body.template-product { padding-bottom: 92px; }
@media (min-width: 768px) {
  .mp-sticky-wrap { display: none; }
  body.template-product { padding-bottom: 0; }
}

/* ─── Reset agregados que TN no maneja bien con clases custom ────────────── */
.btn-mustard,
.btn-ink {
  /* Fix: Bootstrap default button styles del theme TN tenían padding raro */
  line-height: 1;
}

/* En PDP, preservamos cierta legibilidad del template-product general */
body.template-product main.page,
body.template-home main.page,
body.template-category main.page,
body.template-page main.page {
  padding-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP STYLES (>= 1024px)
   El mobile-first del preview se mantiene; estas reglas son OVERRIDES
   que adaptan el layout a pantallas anchas sin reescribir el HTML.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ─── PAGE: full-width fluido. Las secciones llenan toda la pantalla,
     pero el contenido se centra a un máximo virtual de 1200px gracias al
     padding lateral fluido (más padding cuanto más ancha la pantalla). ── */
  .page {
    max-width: none !important;
    background: transparent !important;
  }

  /* Padding lateral fluido en todas las secciones/divs hijos del .page.
     Mínimo 60px, y a partir de viewport 1320px crece para limitar el
     contenido a ~1200px centrado. Solo afecta padding-inline (left+right):
     vertical sigue lo que define la propia sección (py-N). */
  body.template-home .page > section,
  body.template-home .page > div,
  body.template-category .page > section,
  body.template-category .page > div,
  body.template-product .page > section,
  body.template-product .page > div,
  body.template-product .page > .mp-pdp-top {
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
  }

  /* Excepción full-bleed: hero del home + sección de la frase amarilla
     llevan la imagen edge-to-edge. El overlay/card interior pone su padding. */
  body.template-home .page > section:first-of-type,
  body.template-home .page > section:nth-of-type(4) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ─── HEADER: hide burger, show nav horizontal ──────────────────────── */
  .mp-header-burger { display: none !important; }
  .mp-header-nav-desktop {
    display: flex !important;
    align-items: center;
    gap: 28px;
  }
  .mp-header-nav-desktop a {
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 0;
    transition: color 150ms ease;
  }
  .mp-header-nav-desktop a:hover { color: var(--mustard); text-decoration: none; }

  /* ─── HOME — hero ──────────────────────────────────────────────────── */
  body.template-home .page > section:first-of-type {
    height: 780px !important;
  }
  body.template-home .page > section:first-of-type h1 {
    font-size: 110px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em;
    max-width: 1100px;
  }
  body.template-home .page > section:first-of-type p {
    max-width: 540px;
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-top: 24px !important;
  }
  body.template-home .page > section:first-of-type .btn-mustard {
    margin-top: 28px !important;
    padding: 18px 32px !important;
    font-size: 14px !important;
  }
  /* El overlay interior del hero usa padding fluido para alinear el texto
     con el resto del contenido del sitio. */
  body.template-home .page > section:first-of-type .absolute {
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-bottom: 80px !important;
  }

  /* ─── HOME — experiencias (combos) ─────────────────────────────────── */
  body.template-home .page > section:nth-of-type(2) {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  body.template-home .page > section:nth-of-type(2) h2 { font-size: 48px !important; }

  .mp-home-combos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 36px;
  }
  .mp-home-combos > article { margin: 0 !important; }
  .mp-home-combos > article img { height: 360px !important; }

  /* ─── HOME — categorías grid 5-col tiles ──────────────────────────── */
  body.template-home .page > section:nth-of-type(3) {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  body.template-home .page > section:nth-of-type(3) h2 {
    font-size: 56px !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em;
  }
  body.template-home .page > section:nth-of-type(3) > div:first-child {
    padding-bottom: 24px !important;
  }
  body.template-home .page > section:nth-of-type(3) > div:first-child a {
    font-size: 13px !important;
  }

  .mp-home-categories {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    flex-direction: row !important;
    margin-top: 48px !important;
  }
  /* Cada link se vuelve un tile cuadrado tipo card del mockup. */
  .mp-home-categories > a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 26px !important;
    aspect-ratio: 1 / 1.06;
    background: #fff;
    border: 1px solid rgba(122, 110, 78, 0.18);
    position: relative;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .mp-home-categories > a:hover {
    background: var(--ink);
    color: var(--mustard);
    border-color: var(--ink);
  }
  /* Número arriba a la izquierda — vía pseudo-element con counter() */
  .mp-home-categories { counter-reset: cat-tile; }
  .mp-home-categories > a {
    counter-increment: cat-tile;
  }
  .mp-home-categories > a::before {
    content: "0" counter(cat-tile);
    font-family: 'Inter','Manrope',sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--bronze);
    align-self: flex-start;
  }
  .mp-home-categories > a:hover::before { color: rgba(245,197,24,0.65); }
  /* CTA "VER COLECCIÓN" abajo en lugar del chevron */
  .mp-home-categories > a::after {
    content: "VER COLECCIÓN →";
    font-family: 'Inter','Manrope',sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(122,110,78,0.85);
    margin-top: 16px;
  }
  .mp-home-categories > a:hover::after { color: var(--mustard); }
  /* El nombre crece y se posiciona al medio del tile */
  .mp-home-categories > a > .display {
    font-size: 22px !important;
    line-height: 0.95 !important;
    margin: 16px 22px 0 22px !important;
    text-align: left !important;
    letter-spacing: -0.015em;
  }
  /* Ocultamos el chevron del mobile en desktop (CTA "VER COLECCIÓN" lo reemplaza) */
  .mp-home-categories > a > [data-icon="chev"] { display: none !important; }

  /* ─── Tile con foto: la imagen se muestra arriba, los textos abajo ──── */
  .mp-home-categories > a {
    padding: 0 !important;
    aspect-ratio: 1 / 1.5 !important;
    overflow: hidden;
    position: relative;
  }
  .mp-home-cat-img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 280ms ease;
  }
  .mp-home-categories > a:hover .mp-home-cat-img {
    transform: scale(1.04);
  }
  /* "01" / "02" etc — overlay arriba a la izq sobre la foto */
  .mp-home-categories > a::before {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(245,240,232,0.94);
    padding: 4px 10px;
    align-self: auto !important;
    color: var(--ink) !important;
  }
  .mp-home-categories > a:hover::before {
    background: var(--mustard);
    color: var(--ink) !important;
  }
  /* "VER COLECCIÓN →" abajo, alineado con el nombre */
  .mp-home-categories > a::after {
    margin: 10px 22px 22px 22px !important;
  }

  /* ─── Divider al final de las categorías ────────────────────────────── */
  .mp-home-cat-divider {
    display: block;
    height: 1px;
    background: rgba(122, 110, 78, 0.22);
    max-width: 1200px;
    margin: 80px auto 0;
  }

  /* ─── HOME · 4. FOUNDERS + REVOLUCIONANDO (grid 2-col en desktop) ────
     Estructura nueva: la sección tiene 2 hijos directos:
       · .mp-home-founders-photo  → foto + cuadro amarillo overlay
       · .mp-home-founders-text   → texto Revolucionando
     En desktop van lado a lado. En mobile, stack vertical (default flow). */
  body.template-home .page > section:nth-of-type(4) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 96px max(60px, calc((100vw - 1200px) / 2)) !important;
    background: var(--cream-2);
  }
  /* Columna 1 — foto */
  body.template-home .mp-home-founders-photo {
    position: relative;
    width: 100%;
  }
  body.template-home .mp-home-founders-img {
    width: 100% !important;
    height: auto !important;
    max-height: 720px !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
  }
  /* Cuadro amarillo overlay bottom-right de la foto */
  body.template-home .mp-home-founders-card-wrap {
    position: absolute !important;
    inset: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    width: auto !important;
    max-width: 420px;
  }
  body.template-home .mp-home-founders-card {
    padding: 32px 36px !important;
    box-shadow: 0 12px 32px rgba(14,14,14,0.18);
  }
  body.template-home .mp-home-founders-card .display {
    font-size: 26px !important;
    line-height: 0.96 !important;
  }

  /* Columna 2 — texto Revolucionando (era sección 5) */
  body.template-home .mp-home-founders-text {
    background: transparent !important;
    padding: 0 !important;
    text-align: left;
    max-width: 520px;
  }
  body.template-home .mp-home-founders-text h2 {
    font-size: 56px !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em;
    margin-top: 18px !important;
  }
  body.template-home .mp-home-founders-text p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  body.template-home .mp-home-founders-text a {
    margin-top: 28px !important;
    font-size: 12px !important;
  }

  /* ─── CATÁLOGO ─────────────────────────────────────────────────────── */
  .mp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
    padding-bottom: 60px !important;
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
    row-gap: 56px;
  }
  .mp-product-grid .mp-product-card {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .mp-product-grid .mp-product-img { aspect-ratio: 1 / 1; }

  /* Header del catálogo: kicker + título grande */
  body.template-category .page > section:first-of-type {
    padding-top: 96px !important;
    padding-bottom: 24px !important;
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
  }
  .mp-catalog-kicker {
    display: block !important;
    margin-bottom: 18px;
  }
  body.template-category .page > section:first-of-type h1 {
    font-size: 110px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em;
    max-width: 1100px;
  }
  body.template-category .page > section:first-of-type p {
    margin-top: 18px !important;
    font-size: 15px !important;
    max-width: 540px;
    line-height: 1.6 !important;
  }

  /* Filter section: ocultar dropdown mobile, mostrar tabs */
  body.template-category .page > section:nth-of-type(2) {
    padding-bottom: 24px !important;
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
  }
  body.template-category .mp-catalog-filter { display: none !important; }
  .mp-catalog-tabs {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid rgba(122,110,78,0.22);
    padding-bottom: 0;
    gap: 24px;
  }
  .mp-catalog-tabs-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
  }
  .mp-catalog-tab {
    display: inline-block;
    padding: 14px 22px;
    font-family: 'Inter','Manrope',sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7A6E4E;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
  }
  .mp-catalog-tab:hover { color: var(--ink); text-decoration: none; }
  .mp-catalog-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }
  .mp-catalog-count {
    font-family: 'Inter','Manrope',sans-serif;
    font-size: 12px;
    color: #7A6E4E;
    padding: 14px 0;
    flex-shrink: 0;
  }

  /* ─── PDP — top section: hero LEFT, info RIGHT ─────────────────────── */
  .mp-pdp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    padding-top: 0 !important;
    padding-bottom: 60px !important;
  }
  /* El media (foto + thumbs) NO sticky en V2 — es estática y la info corre. */
  /* Right column = info producto. Sin padding lateral propio (el grid ya tiene gap). */
  body.template-product .mp-pdp-top .bg-cream {
    padding: 0 !important;
  }
  /* h1 y hero ya tienen reglas específicas más arriba (.mp-pdp-h1, .mp-pdp-hero-img) */

  /* PDP — secciones grandes (cooking, pairings) tienen padding-block ── */
  body.template-product [data-mp-cooking-section] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  body.template-product [data-mp-pairings] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  /* Pairings = 3 columnas en desktop (V2) */
  [data-mp-pairings-list] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* ─── PDP V2 — TRUST STRIP grande con iconos generosos ─────────────── */
  .mp-trust-strip {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    gap: 24px !important;
  }
  .mp-trust-item { gap: 12px !important; }
  .mp-trust-icon svg { width: 28px !important; height: 28px !important; }
  .mp-trust-label { font-size: 13px !important; line-height: 1.35 !important; }

  /* ─── PDP V2 — HOWTO + COMBO 2-col side by side, combo sticky ──────── */
  .mp-howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .mp-howto-grid .mp-step-n { font-size: 56px !important; }
  .mp-howto-grid .mp-step-title { font-size: 16px !important; }
  .mp-howto-grid .mp-step-desc { font-size: 13px !important; }
  /* El combo amarillo se vuelve más grande en desktop y queda sticky */
  .mp-howto-combo .mp-combo-card {
    padding: 40px !important;
    position: sticky;
    top: 100px;
  }
  .mp-howto-combo .mp-combo-title-text { font-size: 32px !important; line-height: 0.95 !important; }

  /* ─── HACÉ LA CUENTA — 2-col en desktop ────────────────────────────── */
  .mp-cuenta-inner {
    padding: 64px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .mp-cuenta-text { grid-column: 1 / 2; }
  .mp-cuenta-vs { grid-column: 2 / 3; margin-top: 0 !important; }
  .mp-cuenta-bottom { grid-column: 1 / -1; margin-top: 24px !important; }
  .mp-cuenta-title { font-size: 64px !important; line-height: 0.95 !important; }

  /* ─── SPECS 4-col en desktop ───────────────────────────────────────── */
  .mp-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .mp-specs-grid > div {
    border-right: 1px solid rgba(122,110,78,0.18);
    border-bottom: 0 !important;
  }
  .mp-specs-grid > div:last-child { border-right: 0; }

  /* ─── STORY — 2-col image LEFT + text RIGHT ────────────────────────── */
  .mp-story-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .mp-story-image { position: relative; }
  .mp-story-img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
  }
  .mp-story-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--mustard);
    color: var(--ink);
    padding: 8px 14px;
    font-family: 'Anton','Impact',sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .mp-story-text h2 { font-size: 60px !important; line-height: 0.92 !important; }
  .mp-story-text p { font-size: 15px !important; line-height: 1.65 !important; }

  /* ─── FAQ — 2-col (header IZQ + items DER, 1fr 2fr) ────────────────── */
  .mp-faq-section {
    display: grid !important;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: start;
  }
  .mp-faq-header h2 { font-size: 64px !important; line-height: 0.92 !important; }
  .mp-faq-header .mp-faq-subtext { display: block; }
  .mp-faq-list { margin-top: 0 !important; }
  .mp-faq-list .faq-item button span:first-child {
    font-family: 'Anton','Impact',sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    letter-spacing: 0.005em !important;
  }
  .mp-faq-list .faq-item .faq-sign {
    color: var(--mustard) !important;
    font-size: 28px !important;
  }

  /* ─── ARMÁ TU FREEZER — 4-col en desktop ───────────────────────────── */
  .mp-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .mp-related-grid .mp-related-img {
    height: 260px !important;
  }
  .mp-related-grid .mp-related-card {
    background: #1a1a1a !important;
    color: #fff;
  }
  /* Pero solo si estamos en sección oscura. La sección "armá tu freezer"
     en mobile está en cream — en desktop la convertimos a oscura V2 style. */
  body.template-product .page > section:has(.mp-related-grid) {
    background: var(--ink) !important;
    color: #fff;
  }
  body.template-product .page > section:has(.mp-related-grid) .text-ink {
    color: #fff !important;
  }
  body.template-product .page > section:has(.mp-related-grid) .label-kicker {
    color: var(--mustard) !important;
  }

  /* PDP — manifiesto, hacé la cuenta, specs, story, FAQ, freezer ─── */
  body.template-product .page > section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* ─── FOOTER: contenido centrado más angosto ───────────────────────── */
  body footer {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: max(60px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1200px) / 2)) !important;
  }
  body footer > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sticky bar PDP nunca visible en desktop */
  .mp-sticky-wrap { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET (>= 768px y < 1024px) — grids 2 columnas como puente
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .mp-home-combos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .mp-home-combos > article { margin: 0 !important; }
  .mp-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .mp-product-grid .mp-product-card {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Mad Pasta — HEADER + FOOTER desktop (≥ 1024px)                          ║
   ║                                                                          ║
   ║  Solo afecta a > 1024px. Mobile queda 100% intacto.                      ║
   ║  Estructura aprobada: header con padding amplio + carrito como pill,     ║
   ║  footer en grid 3 columnas (brand+address | club+social | legal).        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 1024px) {

  /* ─── HEADER ──────────────────────────────────────────────────────────── */
  .mp-header-inner {
    height: 88px !important;
    padding-left: 32px;
    padding-right: 32px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .mp-header-logo img { height: 64px !important; }
  .mp-header-menu-btn { gap: 14px; }
  .mp-header-menu-label { font-size: 12px !important; letter-spacing: 0.22em; }
  .mp-header-right { gap: 28px !important; }
  .mp-header-link { font-size: 12px !important; opacity: 0.85 !important; }
  .mp-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(245,197,24,0.06);
    border: 1px solid rgba(245,197,24,0.25);
    text-decoration: none;
  }
  .mp-header-cart-label { font-size: 12px !important; }

  /* ─── FOOTER · grid 3 columnas ──────────────────────────────────────────
     IMPORTANTE: el footer outer es FULL-WIDTH (fondo negro de borde a borde).
     El contenido se centra en max 1400px usando padding asimétrico:
     padding-side = max(64px, (vw - 1272px) / 2) — en pantallas anchas el
     padding crece para mantener el contenido visualmente centrado. */
  .mp-footer {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    column-gap: 56px;
    row-gap: 0;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 28px !important;
    padding-left: max(64px, calc((100vw - 1272px) / 2)) !important;
    padding-right: max(64px, calc((100vw - 1272px) / 2)) !important;
    box-sizing: border-box !important;
  }

  /* Columna 1 — Brand + tagline + ubicación + zona */
  .mp-footer-brand    { grid-column: 1; align-items: flex-start !important; text-align: left !important; }
  .mp-footer-tagline  { grid-column: 1; text-align: left !important; max-width: 320px; margin-top: 16px !important; }
  .mp-footer-info     { grid-column: 1; margin-top: 24px !important; max-width: 360px; }
  .mp-footer-zone     { grid-column: 1; margin-top: 16px !important; max-width: 360px; }

  /* Columna 2 — Newsletter + redes */
  .mp-footer-newsletter { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .mp-footer-social     { grid-column: 2; grid-row: 2; justify-content: flex-start !important; margin-top: 24px !important; }

  /* Columna 3 — Legal */
  .mp-footer-legal {
    grid-column: 3;
    grid-row: 1 / span 4;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    text-align: right;
  }
  .mp-footer-legal::before {
    content: "LEGAL";
    display: block;
    font-family: 'Inter','Manrope',sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #F5C518;
    margin-bottom: 14px;
  }

  /* Bottom row (copyright + powered + payments) — span las 3 columnas */
  .mp-footer-copyright,
  .mp-footer-powered,
  .mp-footer-payments {
    grid-column: 1 / -1;
  }
  .mp-footer-copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 56px !important;
    padding-top: 24px;
    text-align: left !important;
    font-size: 11px !important;
  }
  .mp-footer-powered { text-align: left !important; margin-top: 8px !important; }
  .mp-footer-payments { text-align: left !important; }

}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Mad Pasta — Página HISTORIA (template-page handle: historia)            ║
   ║  Desktop overrides — el HTML está cargado en TN admin (page editor) y    ║
   ║  usa clases mp-historia-* para que estos selectores apliquen.            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 1024px) {

  /* ─── 1. HERO ─────────────────────────────────────────────────────────── */
  body.template-page .mp-historia-hero {
    height: 720px !important;
  }
  body.template-page .mp-historia-hero img {
    object-position: center 30% !important;
  }
  body.template-page .mp-historia-hero > div {
    padding: 0 max(60px, calc((100vw - 1200px) / 2)) 80px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, rgba(14,14,14,0.85) 100%) !important;
  }
  body.template-page .mp-historia-hero h1 {
    font-size: 132px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em;
    margin-top: 18px !important;
  }

  /* ─── 2. INTRO 2020 — número arriba en negro, texto debajo justificado a todo lo ancho ── */
  body.template-page .mp-historia-intro {
    padding: 120px max(60px, calc((100vw - 1200px) / 2)) !important;
    display: block !important;
    max-width: none;
  }
  body.template-page .mp-historia-intro .display {
    font-size: 160px !important;
    line-height: 0.85 !important;
    letter-spacing: -0.05em;
    color: var(--ink) !important;
    display: block;
    margin-bottom: 32px;
  }
  body.template-page .mp-historia-intro p {
    font-size: 17px !important;
    line-height: 1.7 !important;
    max-width: none;
    margin-top: 18px !important;
    color: var(--body) !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
  body.template-page .mp-historia-intro p:first-of-type {
    font-size: 32px !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    font-weight: 500;
    max-width: none;
    margin-top: 0 !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
  }

  /* ─── 3. MICRO-NARRATIVA — quote centrado, más grande ────────────────── */
  body.template-page .mp-historia-quote {
    padding: 96px max(60px, calc((100vw - 1200px) / 2)) !important;
    text-align: center;
  }
  body.template-page .mp-historia-quote p {
    font-size: 22px !important;
    line-height: 1.5 !important;
    max-width: 800px;
    margin: 0 auto !important;
  }
  body.template-page .mp-historia-quote p + p {
    margin-top: 24px !important;
  }

  /* ─── 4. MANIFIESTO — split: foto izq + (kicker+h2 + 3 pilares 3-col) der */
  body.template-page .mp-historia-manifesto {
    padding: 120px max(60px, calc((100vw - 1200px) / 2)) !important;
    display: grid !important;
    grid-template-columns: 0.85fr 2fr;
    column-gap: 64px;
    align-items: start;
  }
  body.template-page .mp-historia-manifesto-photo {
    position: sticky;
    top: 100px;
  }
  body.template-page .mp-historia-manifesto-photo img {
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100% !important;
  }
  body.template-page .mp-historia-manifesto-text > .label-kicker { margin-top: 0 !important; }
  body.template-page .mp-historia-manifesto h2 {
    font-size: 56px !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em;
    margin-top: 18px !important;
    margin-bottom: 48px !important;
  }
  /* Los 3 pilares en grid horizontal — entran al lado de la foto */
  body.template-page .mp-historia-pilares {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    margin-top: 40px !important;
    flex-direction: unset !important;
  }
  body.template-page .mp-historia-pilares > div {
    border-top: 2px solid var(--mustard);
    padding-top: 22px;
  }
  body.template-page .mp-historia-pilares > div .display:first-child {
    font-size: 36px !important;
    margin-bottom: 6px;
  }
  body.template-page .mp-historia-pilares > div .display:nth-child(2) {
    font-size: 18px !important;
    margin-top: 8px !important;
    letter-spacing: 0.005em;
    line-height: 1.05 !important;
  }
  body.template-page .mp-historia-pilares > div p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
  }

  /* ─── 7. CTA FINAL ───────────────────────────────────────────────────── */
  body.template-page .mp-historia-cta {
    padding: 120px max(60px, calc((100vw - 1200px) / 2)) !important;
  }
  body.template-page .mp-historia-cta::before {
    content: "Una caja, una cena. Cero pretensiones.";
    display: block;
    font-family: 'Anton','Impact','Arial Narrow',sans-serif;
    font-size: 80px;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--cream);
    text-transform: uppercase;
    margin: 24px auto 32px;
    max-width: 1000px;
  }
  body.template-page .mp-historia-cta a {
    font-size: 18px !important;
    padding: 22px 36px !important;
  }

  /* Saca page-header default si TN lo inyecta — no aplica para custom pages */
  body.template-page.template-page-historia .page-header { display: none !important; }
}

/* ─── Sticky bar mobile PDP — clases del block aprobado en mobile/pdp.html.
   El `<style>` original de mobile/pdp.html no se incluyó al portear el body
   al theme TN, así que estos selectores no tenían reglas — el sticky bar
   quedaba `position: static` y aparecía al final del scroll. */
body.template-product .mp-mobile-only .sticky-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  z-index: 60;
  pointer-events: none;
}
body.template-product .mp-mobile-only .sticky-bar {
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body.template-product .mp-mobile-only .sticky-bar.visible {
  transform: translateY(0);
  pointer-events: auto;
}
body.template-product .mp-mobile-only.has-sticky-padding {
  padding-bottom: 90px;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PDP mobile — fixes específicos para producción TN                       ║
   ║  Los siguientes overrides resuelven 4 bugs visuales reportados:         ║
   ║  - Bug 1: logo header tapa hamburguesa                                  ║
   ║  - Bug 2: "Hacé la cuenta" comprimida lateralmente                       ║
   ║  - Bug 3: grilla specs con padding excesivo + comprimida                ║
   ║  - Bug 4: mp-desktop-only no se ocultaba en mobile                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ─── Bug 4: forzar toggle dual-markup con !important ──────────────────────
   TN podría tener un wrapper o un theme css con specificity más alta que
   nuestras reglas base. Usamos !important para garantizar el toggle. */
body.template-product .mp-mobile-only { display: block !important; }
body.template-product .mp-desktop-only { display: none !important; }
@media (min-width: 1024px) {
  body.template-product .mp-mobile-only { display: none !important; }
  body.template-product .mp-desktop-only { display: block !important; }
}

/* ─── Bug 1: logo del header (TN component) no debe tapar el botón hamburguesa ──
   El logo se renderiza dentro del span class="logo-img-container" de TN.
   Aplicamos size limits agresivos en mobile para que no se solape. */
@media (max-width: 767px) {
  .mp-header-logo {
    max-width: 130px !important;
    z-index: 1 !important;
  }
  .mp-header-logo .mp-header-logo-tn,
  .mp-header-logo .logo-img-container,
  .mp-header-logo .logo-text-container {
    display: flex !important;
    align-items: center !important;
    max-width: 130px !important;
    max-height: 44px !important;
    overflow: hidden;
  }
  .mp-header-logo img,
  .mp-header-logo .mp-header-logo-img {
    max-height: 40px !important;
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .mp-header-menu-btn {
    position: relative !important;
    z-index: 5 !important;
    padding: 8px 10px !important;
  }
  .mp-header-right {
    position: relative !important;
    z-index: 5 !important;
  }
  .mp-header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ─── Bug 8: Home mobile angosto/comprimido ──────────────────────────────
   Mismo tratamiento que mp-mobile-only del PDP — forzar full-width en
   mobile para neutralizar el container/row de TN. */
@media (max-width: 1023px) {
  body.template-home {
    overflow-x: hidden;
  }
  body.template-home main,
  body.template-home [data-store="page-content"],
  body.template-home .container,
  body.template-home .container-fluid,
  body.template-home .row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ─── Bug 6: Salsas/mantecas — ocultar cooking section cuando no aplica ──
   El bloque [data-pdp-cooking-no-data] se agrega via JS si MAD_PASTA no
   tiene datos de cocción para el producto (salsas, mantecas, quesos, etc) */
body.template-product .mp-mobile-only [data-pdp-cooking-no-data] {
  display: none !important;
}

/* ─── Bugs 2 y 3: sección "Hacé la cuenta" + grilla Specs en mobile ────────
   En TN, el contenedor de template_content puede tener max-width y padding
   lateral (.container, .row, etc). Eso comprimía estas secciones dejando
   márgenes laterales beige. Forzamos los wrappers mobile a edge-to-edge
   vía calc(-50vw + 50%) — técnica clásica para romper containers padres. */
@media (max-width: 1023px) {
  /* Reset full-width sobre todas las secciones del mobile block */
  body.template-product .mp-mobile-only {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
  }
  body.template-product .mp-mobile-only > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Bug 3: grilla Specs — reducir padding interno de cada celda.
     El markup mobile original usa class="p-5" (20px) en cada celda.
     Reducimos a 14px para que las celdas no sean tan altas verticalmente. */
  body.template-product .mp-mobile-only .grid.grid-cols-2 > div > .p-5 {
    padding: 14px !important;
  }
  /* También bajamos el tamaño del número grande en cada spec celda */
  body.template-product .mp-mobile-only .grid.grid-cols-2 .display {
    font-size: 24px !important;
  }

  /* Bug 2: sección "Hacé la cuenta" — outer cream debe ser edge-to-edge.
     El inner ink box compresses content. Reducimos su padding y damos más
     espacio al contenido. */
  body.template-product .mp-mobile-only .bg-cream.px-5.py-8 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.template-product .mp-mobile-only .bg-cream.px-5.py-8 > .bg-ink.p-5 {
    padding: 18px 14px !important;
  }
  body.template-product .mp-mobile-only .bg-cream.px-5.py-8 .grid.gap-2 {
    grid-template-columns: 1fr 22px 1fr !important;
    gap: 6px !important;
  }
  body.template-product .mp-mobile-only .bg-cream.px-5.py-8 .grid.gap-2 > div.p-4 {
    padding: 12px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Notificación cart-fly de TN — OCULTAR (reforzado).
   La notificación chica al agregar al carrito queda vacía/rota porque
   nuestro flow no llena los placeholders de TN. En su lugar abrimos
   automáticamente el modal-fullscreen-cart grande desde el JS.
   Cubrimos múltiples variantes para asegurar que no se vea ni siquiera
   por flash durante los 800ms del setTimeout.
   ═══════════════════════════════════════════════════════════════════════ */
.js-alert-added-to-cart,
.notification-cart-container,
.notification-cart,
.notification-floating.notification-cart-container,
.js-cart-notification,
[data-store="cart-notification-item"],
.notification-cart-msg,
.notification-cart-message,
/* Cross-selling modal: TN lo abre automáticamente con modalOpen() al agregar
   un producto que tiene related products configurados. Es el pop up
   "¡AGREGADO AL CARRITO! · Total · VER CARRITO · Sumá a tu compra". */
#related-products-notification,
.js-related-products-notification,
.js-related-products-notification-container,
[data-component="related-products-notification"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* ─── Logo del drawer (menú hamburguesa) y footer — usan component('logos/logo')
   de TN que carga el logo configurado en admin → Personalizar → Logo. Los
   límites de tamaño replican los del header para que el logo se vea consistente. */
.mp-drawer-logo,
.mp-drawer-logo .mp-drawer-logo-tn,
.mp-drawer-logo .logo-img-container,
.mp-drawer-logo .logo-text-container {
  display: flex !important;
  align-items: center !important;
  max-height: 52px !important;
}
.mp-drawer-logo img,
.mp-drawer-logo .mp-drawer-logo-img {
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.mp-footer-logo,
.mp-footer-logo .mp-footer-logo-tn,
.mp-footer-logo .logo-img-container,
.mp-footer-logo .logo-text-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 90px !important;
}
.mp-footer-logo img,
.mp-footer-logo .mp-footer-logo-img {
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}