/* ============================================================
   FAVERA 808 — Mobile design layer
   ------------------------------------------------------------
   Loads AFTER style.css. A dedicated, mobile-first treatment
   so phones get a purpose-built UI — not a shrunk desktop.
   Desktop (>= 768px) is left completely untouched, except the
   nav drawer polish which spans the tablet range (<= 1023px)
   because that is where the drawer is used.
   ============================================================ */

/* ============================================================
   1. Nav drawer — polished mobile menu with quick contact
   (active wherever the hamburger drawer is: <= 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .mobile-nav {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .mobile-nav ul { flex: 0 0 auto; }

  /* Quick-contact block pinned to the bottom of the drawer */
  .mobile-nav-cta {
    margin-top: auto;
    padding-top: var(--space-4);
    display: grid;
    gap: 0.6rem;
  }
  .mobile-nav-cta-hint {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: 0.15rem;
  }
  /* These are <a> inside .mobile-nav, so neutralise the big nav-link look */
  .mobile-nav .mobile-nav-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 1.05rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transform: none;
  }
  .mobile-nav .mobile-nav-cta a svg { width: 20px; height: 20px; }
  .mobile-nav .mobile-nav-cta a.cta-wa {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .mobile-nav .mobile-nav-cta a.cta-wa svg { color: var(--color-on-accent); }
  .mobile-nav .mobile-nav-cta a.cta-call {
    border-color: var(--color-border-strong);
    color: var(--color-fg);
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
  }
}

/* ============================================================
   2. Phone layout (<= 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Tokens: slimmer chrome, tighter rhythm ---- */
  :root {
    --header-h: 64px;
    --header-h-scrolled: 56px;
  }

  /* ---- Global touch & overflow guards ---- */
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
  }
  body { overflow-x: hidden; }
  * { -webkit-tap-highlight-color: transparent; }

  .container { padding-inline: 18px; }
  .section { padding-block: var(--space-5); }

  /* ---- Header ---- */
  .site-header {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }
  .site-header .container { gap: var(--space-2); }
  .brand { font-size: 1.2rem; }
  .brand-reg { font-size: 0.6rem; }
  .brand-tagline { font-size: 0.6rem; letter-spacing: 0.1em; }
  .brand-lockup { gap: 0.25rem; }
  .header-actions { gap: 0.4rem; }
  .lang-toggle button {
    min-width: 30px;
    min-height: 38px;
    padding: 0.4rem 0.4rem;
    font-size: 0.7rem;
  }
  .nav-toggle { width: 42px; height: 42px; }

  /* ---- Big drawer nav links (only the list, not the CTA) ---- */
  .mobile-nav ul a { font-size: 1.9rem; padding: 0.85rem 0; }

  /* ============================================================
     Hero
     ============================================================ */
  .hero {
    padding-top: calc(var(--header-h) + var(--space-4));
    padding-bottom: var(--space-5);
  }
  .hero-grid { gap: var(--space-4); }
  /* Lead with the product photo on phones — a wall of copy before any
     image reads as heavy, so the visual is reordered ahead of the text. */
  .hero-visual { order: -1; }
  .hero-copy h1 { margin-bottom: var(--space-3); }
  .hero .lede, .lede { font-size: 1rem; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-top: var(--space-3);
  }
  .hero-actions .btn { width: 100%; }
  .hero-points {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .hero-points li { padding-top: 0.7rem; }
  .hero-visual { aspect-ratio: 4 / 5; max-height: 60vh; }

  /* Collections hero: let copy use full width, tighten phone number */
  .hero > .container > .reveal { max-width: 100%; }
  .lede-phone { font-size: 1.5rem; }
  .wholesale-note { font-size: 0.8125rem; }

  /* ============================================================
     Section headers
     ============================================================ */
  .section-head { margin-bottom: var(--space-4); }
  .section-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .section-head-row .btn { width: 100%; }

  /* ============================================================
     Collection preview cards (home) — keep 2-up, tidy labels
     ============================================================ */
  .collection-grid { gap: var(--space-2); margin-top: var(--space-4); }
  .collection-card-label .cat-name { font-size: 0.95rem; line-height: 1.2; }

  /* ============================================================
     Filter tabs — sticky, edge-to-edge, horizontal scroll
     ============================================================ */
  .filter-tabs {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0.5rem;
    margin-inline: -18px;
    padding: 0.7rem 18px;
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 40px;
    padding: 0.5rem 1.05rem;
  }

  /* ============================================================
     Product grid & cards — image-first tappable tiles.
     The whole card opens the quick-view modal (see main.js),
     so the long CTA button is hidden on phones for a clean grid.
     ============================================================ */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: var(--space-3);
  }
  .product-card {
    border-radius: 10px;
    transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
  }
  .product-card:active { transform: scale(0.975); }
  /* "+" affordance to signal the tile is tappable */
  .product-media::after {
    content: '+';
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent-dark);
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: var(--shadow-sm);
  }
  .product-body {
    padding: 0.6rem 0.7rem 0.8rem;
    min-height: 4.9rem;
  }
  .product-body .cat-tag { font-size: 0.625rem; }
  .product-body h3 {
    font-size: 1rem;
    line-height: 1.22;
    margin-block: 0.25rem 0.3rem;
  }
  .product-body .moq { font-size: 0.8125rem; }
  .product-body .btn { display: none; }

  /* ============================================================
     Product quick-view modal → bottom sheet
     ============================================================ */
  .product-modal { padding: 0; align-items: flex-end; }
  .product-modal-dialog {
    width: 100%;
    max-width: none;
    max-height: 94dvh;
    height: auto;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .product-modal[aria-hidden="false"] .product-modal-dialog { transform: translateY(0); }
  /* Grab-handle affordance at the top of the sheet */
  .product-modal-dialog::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-fg) 22%, transparent);
    z-index: 4;
  }
  .product-modal-grid { grid-template-columns: 1fr; }

  /* Swap the desktop single-image + tap-thumbnails pattern for a native,
     swipeable photo strip with dot indicators — no cropping, no tapping
     tiny thumbnails, just a finger-swipe like any mobile gallery. */
  .product-modal-main, .product-modal-thumbs { display: none; }
  .product-modal-swipe { display: block; position: relative; }
  .product-modal-swipe-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-modal-swipe-track::-webkit-scrollbar { display: none; }
  .product-modal-swipe-slide {
    flex: 0 0 100%;
    aspect-ratio: 2 / 3;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .product-modal-swipe-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-modal-dots {
    position: absolute;
    left: 50%;
    bottom: var(--space-2);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
  }
  .product-modal-dots[hidden] { display: none; }
  .product-modal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
  }
  .product-modal-dot.is-active { background: #fff; transform: scale(1.3); }
  .product-modal-close {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .product-modal-details {
    padding: var(--space-3) 18px calc(var(--space-2) + env(safe-area-inset-bottom));
  }
  .product-modal-details h3 { font-size: 1.35rem; }
  .product-modal-video-trigger { width: 100%; justify-content: center; }

  /* Bigger touch targets for colour + thumbs */
  .product-modal-colors-options button { min-height: 44px; padding: 0.6rem 1rem; }
  .product-modal-thumbs button { width: 54px; height: 68px; }

  /* Action buttons sit in normal flow at the end of the sheet — only
     revealed once the visitor scrolls down, not pinned on top of content. */
  .product-modal-actions {
    flex-direction: column;
    gap: 0.6rem;
    margin-top: var(--space-3);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .product-modal-actions .btn { width: 100%; }
  .product-modal[aria-hidden="false"] .product-modal-details > *:nth-child(7) { animation-delay: 530ms; }

  /* ============================================================
     Features / why-us — 2-up instead of a long single-column stack,
     so the section reads as a quick grid rather than four tall panels.
     ============================================================ */
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .feature-card { padding: var(--space-3); }
  .feature-icon { width: 36px; height: 36px; margin-bottom: var(--space-2); }
  .feature-icon svg { width: 18px; height: 18px; }
  .feature-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
  .feature-card p { font-size: 0.8125rem; line-height: 1.45; }

  /* ============================================================
     Stats
     ============================================================ */
  .stats-grid { gap: var(--space-3) var(--space-2); }

  /* ============================================================
     Testimonials — hidden on mobile (per request)
     ============================================================ */
  #testimonials { display: none; }

  /* ============================================================
     CTA band
     ============================================================ */
  .cta-band { padding: var(--space-5) var(--space-3); }
  .cta-band .hero-actions .btn { width: 100%; }

  /* ============================================================
     Contact page
     ============================================================ */
  .contact-info-card a[href^="tel:"],
  .contact-info-card a[href^="mailto:"] { font-size: 1.1rem; }

  /* ============================================================
     Footer — brand full-width, link groups 2-up
     ============================================================ */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-3);
  }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 0.35rem; }

  /* ============================================================
     Floating action button — respect safe area, sit tighter
     ============================================================ */
  .fab-stack {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 0.6rem;
  }
  .fab-whatsapp { padding: 4px 4px 4px 0.95rem; }
  .fab-whatsapp-label { font-size: 0.78rem; }
}

/* ============================================================
   3. Very small phones (<= 360px) — extra breathing room
   ============================================================ */
@media (max-width: 360px) {
  .brand-tagline { display: none; }
  .product-grid { gap: 0.6rem; }
  .product-body h3 { font-size: 0.95rem; }
}