/* Footer brand reset — unconditional, footer-scoped only.
   Cancels the shared .logo absolute-centering rule from site.css (line 136)
   for the footer brand name at ALL viewport widths. Matches with or without
   the footer-brand-name class, so stale cached HTML is covered too.
   The header .logo lives in <header class="site"> and is untouched. */
footer.site .footer-brand-name,
footer.site .logo {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  white-space: normal !important;
}

footer.site .footer-brand-name,
footer.site .footer-brand-tagline {
  display: block !important;
  width: 100% !important;
}

}@media (max-width: 768px) {
  footer.site .footer-grid > .footer-col:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
    gap: 0 !important;
  }

  footer.site .footer-grid > .footer-col:first-child > span.logo.footer-brand-name {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  footer.site .footer-grid > .footer-col:first-child > span.footer-brand-tagline {
    position: static !important;
    transform: none !important;
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 34ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  footer.site .footer-grid > .footer-col:first-child > div.footer-social {
    position: static !important;
    transform: none !important;
    display: flex !important;
    order: 3 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 18px 0 0 0 !important;
  }

  footer.site .footer-grid > .footer-col:first-child > div.footer-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    position: static !important;
    transform: none !important;
  }
}/* Homepage mobile layout overrides. Loaded AFTER site.css so these win on small screens.
   Nothing in this file applies above 768px — the desktop layout is untouched. */

@media (max-width: 768px) {
  /* 1. No social icons in the mobile header / announcement bar */
  .announcement .social { display: none !important; }
  .announcement .msg { flex: 1 1 100% !important; order: 1 !important; text-align: center !important; }

  /* 2. Mobile hero: no text at all, only the two CTA buttons, centered on the banner */
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy p { display: none !important; }
  .hero-inner { align-items: center !important; justify-content: center !important; padding: 20px !important; }
  .hero-copy { align-items: center !important; justify-content: center !important; gap: 0 !important; width: 100%; }
  .hero-cta { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; width: 100%; max-width: 340px; margin: 0 auto !important; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 148px; min-height: 48px; padding: 14px 18px; font-size: 13px; }

  /* 3. Brand name, tagline, then social icons — stacked, centered, never overlapping */
  .footer-grid > .footer-col:first-child { align-items: center !important; text-align: center !important; }
  .footer-col .logo,
  .footer-brand-name { display: block !important; width: 100%; line-height: 1.2 !important; font-size: 24px !important; margin: 0 0 12px !important; }
  .footer-brand-tagline { display: block !important; width: 100%; line-height: 1.6 !important; font-size: 14px !important; margin: 0 !important; }

  /* 4. Social icons live under the tagline, evenly spaced, 44px touch targets */
  .footer-grid > .footer-col:first-child .footer-social { justify-content: center !important; }
  .footer-social { display: flex !important; gap: 14px !important; margin-top: 18px !important; flex-wrap: wrap; }
  .footer-social a { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; }

  /* 5. Always two products per row on mobile */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 12px !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .grid-4 > * , .grid-3 > * { min-width: 0; }
  .grid-4 img, .grid-3 img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; }

  /* 6. WhatsApp floating button — circular, visible, clear of content */
  .whatsapp-fab { width: 56px !important; height: 56px !important; right: 16px !important; bottom: 18px !important; border-radius: 50% !important; }
  .whatsapp-fab img, .whatsapp-fab svg { width: 100% !important; height: 100% !important; display: block; }

  /* 7. Editorial pair — stack, no overflow, readable text */
  .hp-editorial .ed-pair { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ed-card, .ed-card-sm { min-height: 0 !important; aspect-ratio: 4 / 5; align-self: auto !important; }
  .ed-card-body { left: 16px !important; right: 16px !important; bottom: 16px !important; gap: 10px !important; }
  .ed-card-body h3, .ed-card-sm .ed-card-body h3 { font-size: 20px !important; }
  .ed-btn { min-width: 0 !important; width: 100%; padding: 12px 16px !important; font-size: 13px; min-height: 44px; }

  /* 8. Our Story — image above text, vertical stack, no overlap */
  .hp-story .story-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .story-media { aspect-ratio: 4 / 5 !important; }
  .story-copy { align-items: flex-start !important; gap: 12px !important; }
  .story-copy h2 { font-size: 26px !important; max-width: none !important; }
  .story-copy p { font-size: 14px !important; max-width: none !important; }
  .story-copy .btn { min-height: 46px; }

  /* 9. Lookbook — 2-up grid, no horizontal scroll, proportions kept */
  .hp-lookbook .look-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-top: 18px !important; }
  .look-card { aspect-ratio: 3 / 4 !important; }

  /* 10. Newsletter band — stacked input + full-width button */
  .hp-newsletter { padding: 48px 0 !important; }
  .hp-newsletter h2 { font-size: 22px !important; max-width: none !important; }
  .nl-form { flex-direction: column !important; gap: 10px; max-width: 100% !important; }
  .nl-form input, .nl-form button { width: 100% !important; min-height: 48px; }

  /* 11. Worn by you — 2 per row gallery */
  .hp-ugc .ugc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 18px !important; }

  /* 12. No hover-dependent behavior on touch — always show the primary product image */
  .product-card .thumb .img-alt { display: none !important; }

  /* 13. Nothing may overflow the viewport horizontally */
  html, body { overflow-x: hidden; }
  .wrap, .section { max-width: 100%; }
}

/* Keep two-per-row even on the narrowest phones (overrides site.css's 1-column rule) */
@media (max-width: 400px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px 10px !important; }
  .hero-cta .btn { min-width: 132px; font-size: 12px; padding: 13px 14px; }
  .hp-lookbook .look-grid, .hp-ugc .ugc-grid { gap: 8px !important; }
  .story-copy h2 { font-size: 23px !important; }
  .ed-card-body h3, .ed-card-sm .ed-card-body h3 { font-size: 18px !important; }
}

/* Tablet — between mobile and desktop, keep 2-up editorial/lookbook without cramping */
@media (min-width: 769px) and (max-width: 1024px) {
  .hp-editorial .ed-pair { grid-template-columns: 1fr 1fr; }
  .ed-card, .ed-card-sm { min-height: 380px; }
  .hp-story .story-grid { gap: 32px; }
  .story-copy h2 { font-size: 30px; }
  .hp-ugc .ugc-grid { grid-template-columns: repeat(3, 1fr); }
}