/* ============================================
   YouGood Foods: Mobile fixes (shared)
   Applied to all pages via <link>
   ============================================ */

@media (max-width: 768px) {

  /* ── GLOBAL ── */
  html, body { overflow-x: hidden; }
  * { box-sizing: border-box; }

  /* Ocultar imagen de fondo del hero solo en home (logo grande detrás del video) */
  .scroll-video-sticky .hero-img-bg { opacity: 0 !important; }
  .scroll-video-sticky { background: #f8f9fb !important; }

  /* ── NAV ── */
  nav { padding: 0 16px !important; }
  .nav-logo img {
    height: 38px !important;
    max-width: 110px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* ── PAGE HEROES (páginas interiores) ── */
  .page-hero {
    padding: 100px 20px 60px !important;
    min-height: auto !important;
    background-position: center center !important;
  }
  .page-hero::before {
    background: rgba(248,249,251,.82) !important;
  }
  .page-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .page-sub   { font-size: .92rem !important; max-width: 100% !important; }

  /* ── PRODUCT HERO (páginas de producto) ── */
  .product-hero {
    padding: 100px 20px 60px !important;
    min-height: auto !important;
    background-position: center bottom !important;
  }
  /* Overlay más fuerte en mobile para tapar el logo del fondo */
  .product-hero .hero-img-bg { object-position: center bottom !important; }
  .product-hero .hero-video-overlay {
    background: rgba(248,249,251,.78) !important;
  }
  .product-hero .fade-in { max-width: 100% !important; }
  .product-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .product-desc  { font-size: .95rem !important; }
  .product-badges { gap: 8px !important; }

  /* ── FORMAT / QUANTITY CARDS: 2 columnas compactas en móvil ── */

  /* Falafel: fmt-cards */
  .fmt-cards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .fmt-card { padding: 13px 11px !important; border-radius: 14px !important; }
  .fmt-card-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 10px !important; }
  .fmt-card-size { font-size: 1.3rem !important; white-space: nowrap !important; }
  .fmt-card-tag { margin-top: 0 !important; font-size: .54rem !important; }
  .fmt-card-desc { font-size: .71rem !important; margin-bottom: 8px !important; }
  .fmt-card-meta { font-size: .7rem !important; margin-bottom: 5px !important; }
  .fmt-pill { font-size: .62rem !important; padding: 3px 7px !important; }

  /* Muesli / Fruit Puree: var-cards */
  .pi-var-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .var-card { padding: 14px 12px 12px !important; border-radius: 12px !important; }
  .var-card-name { font-size: .88rem !important; margin-bottom: 5px !important; }
  .var-card-desc { font-size: .7rem !important; margin-bottom: 8px !important; line-height: 1.5 !important; }
  .var-size-num { font-size: 1.3rem !important; }
  .var-size-label { font-size: .52rem !important; }
  .var-sizes { gap: 12px !important; padding-top: 8px !important; }

  /* Rice Pudding: rp-qty-cards */
  .rp-qty-card { padding: 13px 12px 12px !important; border-radius: 14px !important; gap: 6px !important; }
  .rp-qty-num { font-size: 1.5rem !important; }
  .rp-qty-tag { font-size: .52rem !important; padding: 3px 7px !important; }
  .rp-qty-meta { font-size: .71rem !important; }
  .rp-qty-pills { gap: 4px !important; }
  .rp-qty-pill { font-size: .67rem !important; padding: 3px 8px !important; }

  /* ── PRODUCT DETAILS GRID (pd-grid) ── */
  .pd-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pd-card { padding: 14px 16px !important; }
  .pd-sub  { white-space: normal !important; overflow: visible !important; }

  /* ── PRODUCT BANNER: imagen vertical específica para móvil ── */
  .product-banner {
    margin: 0 !important;
    padding: 0 16px !important;
    height: auto !important;
    overflow: visible !important;
  }
  .product-banner img {
    height: auto !important;
  }
  .banner-full { display: none !important; }
  .banner-split { display: none !important; }
  .banner-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }

  /* ── RELATED PRODUCTS ── */
  .related { padding: 48px 20px !important; }
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ── PRODUCT INFO SECTION (pi-grid) ── */
  .pi-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-info-section { padding: 32px 20px !important; }
  .pi-ingredients,
  .rp-ing-box,
  .about-ing-box { margin-top: 12px !important; }

  /* ── FLAVOURS / VARIANT CARDS (fl-cs-grid) ── */
  .fl-cs-grid,
  .fl-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .fl-card { flex: none !important; min-width: auto !important; width: 100% !important; min-height: auto !important; }

  /* Nuts fl-cs-card: layout horizontal, imagen izquierda, texto derecha */
  .fl-cs-card {
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas: "img header" "img footer" !important;
    min-height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .fl-cs-img {
    grid-area: img !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 130px !important;
    width: 140px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
  }
  .fl-cs-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
  }
  .fl-cs-card-header {
    grid-area: header !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 14px 14px 4px !important;
  }
  .fl-cs-card-footer {
    grid-area: footer !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    padding: 0 14px 14px !important;
  }
  .fl-cs-name { font-size: 1rem !important; }
  .fl-cs-size { font-size: .75rem !important; padding: 3px 9px !important; }
  .fl-cs-desc { font-size: .75rem !important; margin-bottom: 8px !important; }
  .fl-cs-pill { font-size: .68rem !important; padding: 3px 9px !important; }

  /* ── ABOUT PAGE ── */
  .about   { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-photos { aspect-ratio: 4/3 !important; width: 100% !important; overflow: hidden !important; border-radius: 18px !important; }
  .hero-photo-main { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; border-radius: 18px; display: block !important; }
  .values-grid,
  .certifs-grid { grid-template-columns: 1fr 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }

  /* ── CONTACT PAGE ── */
  /* Banner Private Label: full-bleed, sin márgenes laterales ni bordes redondeados */
  .pl-banner {
    margin: 24px 0 0 !important;
    border-radius: 0 !important;
    padding: 28px 24px !important;
    background: #fff !important;
  }
  .pl-banner-text h3 { color: var(--dark) !important; }
  .pl-banner-text p { color: var(--gray) !important; }
  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 48px 20px !important;
    padding-top: 24px !important;
  }
  .chatbot-card { height: 500px !important; }

  /* ── FAQS ── */
  .faqs { padding: 60px 20px !important; }
  .faq-grid { grid-template-columns: 1fr !important; }

  /* ── WHERE TO BUY ── */
  .stockists-grid,
  .stores-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ── RECIPES ── */
  .featured-grid,
  .recipes-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .page-hero .hero-content { max-width: 100% !important; }

  /* ── FOOTER: diseño premium mobile ── */
  footer { padding: 36px 20px 20px !important; }

  /* Grid: todo en columna única */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
  }

  /* Marca: logo + texto en horizontal, ancho completo */
  .footer-brand {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .footer-brand img {
    height: 42px !important;
    width: auto !important;
    max-width: 80px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .footer-brand p {
    font-size: .76rem !important;
    max-width: none !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.55) !important;
  }

  /* Products, Company, Contact: cada uno ocupa ancho completo, links en horizontal */
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3),
  .footer-grid > .footer-col:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  /* Products + Company: links en fila horizontal con separador · */
  .footer-grid > .footer-col:nth-child(2) ul,
  .footer-grid > .footer-col:nth-child(3) ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .footer-grid > .footer-col:nth-child(2) li,
  .footer-grid > .footer-col:nth-child(3) li {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .footer-grid > .footer-col:nth-child(2) li:not(:last-child)::after,
  .footer-grid > .footer-col:nth-child(3) li:not(:last-child)::after {
    content: '·' !important;
    color: rgba(255,255,255,.25) !important;
    margin: 0 6px !important;
    font-size: .9rem !important;
  }

  /* Contact Us: cada dato en su propia línea, centrado */
  .footer-grid > .footer-col:nth-child(5) {
    text-align: center !important;
  }
  .footer-grid > .footer-col:nth-child(5) h5 {
    text-align: center !important;
  }
  .footer-grid > .footer-col:nth-child(5) ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .footer-grid > .footer-col:nth-child(5) li {
    margin: 0 !important;
    text-align: center !important;
    font-size: .78rem !important;
    line-height: 1.5 !important;
  }
  .footer-grid > .footer-col:nth-child(5) li a,
  .footer-grid > .footer-col:nth-child(5) li span {
    font-size: .78rem !important;
  }

  /* Follow Us: ancho completo, iconos grandes solo sin texto */
  .footer-grid > .footer-col:nth-child(4) {
    grid-column: 1 / -1 !important;
    border-top: none !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .footer-grid > .footer-col:nth-child(4) h5 {
    margin-bottom: 0 !important;
    text-align: center !important;
  }
  .footer-grid > .footer-col:nth-child(4) ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .footer-grid > .footer-col:nth-child(4) li { margin-bottom: 0 !important; }
  /* Iconos sociales: solo icono, más grande, sin texto */
  .footer-grid > .footer-col:nth-child(4) .social-link {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important; /* oculta texto "Instagram", "Facebook", etc. */
    transition: background .2s !important;
  }
  .footer-grid > .footer-col:nth-child(4) .social-link:hover {
    background: rgba(255,255,255,.18) !important;
  }
  .footer-grid > .footer-col:nth-child(4) .social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .footer-grid > .footer-col:nth-child(4) .social-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Títulos de columna */
  .footer-col h5 {
    font-size: .65rem !important;
    letter-spacing: .10em !important;
    margin-bottom: 12px !important;
    color: rgba(255,255,255,.45) !important;
  }
  .footer-col li { margin-bottom: 7px !important; }
  .footer-col a  { font-size: .76rem !important; }

  /* Footer bottom: centrado */
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: .7rem !important;
    flex-wrap: wrap !important;
  }

  /* ── CHATBOT WIDGET ── */
  #ygw-box {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 80px !important;
    max-height: 75vh !important;
  }
  #ygw-btn {
    right: 16px !important;
    bottom: 16px !important;
  }
  #ygw-greet {
    right: 70px !important;
    bottom: 24px !important;
  }

  /* ── FOOTER LOGO ── */
  .footer-brand img { height: 36px !important; width: auto !important; max-width: 130px !important; }

  /* ── GENERIC OVERFLOW PREVENTION ── */
  img { max-width: 100% !important; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr !important; }
  .values-grid,
  .certifs-grid { grid-template-columns: 1fr !important; }
  .hero-milestones { flex-direction: column !important; }
  .fl-cs-size { font-size: .85rem !important; }
}