/* ============================================================
       MOBILE RESPONSIVE — 768px and below
    ============================================================ */
    @media(max-width:768px){

      /* NAV — hide text links, keep logo + waitlist only */
      .nav{padding:16px 20px;}
      .nav-logo .oana-logo{width:100px;}
      .nav-links span:not(.nav-cta){display:none;}
      .nav-cta{font-size:11px;padding:7px 16px;}

      /* CAROUSEL — stack layout: image behind, text over */
      .carousel{height:520px;}
      .slide{align-items:flex-end;padding-bottom:60px;}
      .slide-img{width:100%;left:0;right:0;}
      .slide-img::before{background:linear-gradient(90deg,rgba(26,26,46,0.92) 0%,rgba(26,26,46,0.6) 60%,transparent 100%);}
      .slide-text{padding:0 24px;max-width:100%;}
      .slide-headline{font-size:clamp(32px,8vw,48px);}
      .slide-sub{display:none;}
      .slide-cta{padding:13px 28px;font-size:13px;}
      .dots{left:24px;bottom:20px;}
      .counter{right:24px;bottom:20px;}

      /* LINEUP SLIDE */
      .slide-lineup{padding:20px;}
      .lineup-img-wrap{max-width:100%;margin-bottom:16px;}
      .lineup-headline{font-size:28px;}
      .lineup-sub{font-size:13px;}

      /* s0 specific — pour image */
      #s0 .slide-img{width:100%;}

      /* FLAVOUR TABS */
      .flavours-section{padding:60px 16px;}
      .flavour-tabs{gap:8px;}
      .ftab{padding:10px 16px;font-size:12px;}
      .product-card{padding:24px 16px;gap:24px;}
      .gallery-main{min-height:220px;}
      .product-name{font-size:24px;}
      .product-stats{gap:16px;}
      .stat-num{font-size:28px;}

      /* OUR STORY */
      .story-section{padding:60px 20px;}
      .story-inner{grid-template-columns:1fr;gap:36px;}
      .story-aside{position:static;}
      .story-img-placeholder{min-height:260px;aspect-ratio:4/3;}
      .story-body{font-size:15px;}

      /* BENEFITS */
      .benefits-section{padding:60px 20px;}
      .benefits-grid{grid-template-columns:1fr 1fr;gap:16px;}
      .benefit-card{padding:24px 20px;}

      /* PROBLEM SECTION */
      .problem-section{padding:60px 20px;}
      .problem-inner{grid-template-columns:1fr;gap:32px;}

      /* JOURNEY */
      .journey-section{padding:60px 20px;}
      .journey-steps{grid-template-columns:1fr 1fr;gap:24px;}
      .jstep-circle{width:100px;height:100px;}
      .jstep-title{font-size:14px;}

      /* CTA */
      .cta-section{padding:60px 20px;}
      .cta-title{font-size:clamp(28px,7vw,42px);}

      /* FOOTER */
      footer{padding:40px 20px;}
      .footer-cols{grid-template-columns:1fr;gap:24px;text-align:center;}
      .footer-logo .oana-logo{margin:0 auto;}
    }

    /* ============================================================
       SMALL PHONES — 480px and below
    ============================================================ */
    @media(max-width:480px){
      .carousel{height:480px;}
      .slide-headline{font-size:clamp(28px,9vw,40px);}
      .benefits-grid{grid-template-columns:1fr;}
      .journey-steps{grid-template-columns:1fr 1fr;}
      .ftab{padding:9px 12px;font-size:11px;}
      .product-card{padding:20px 14px;}
      .story-inner{gap:28px;}
    }


    /* Combo gallery — landscape image, no portrait crop */
    .combo-gallery{aspect-ratio:16/9 !important;background:#f7f4ee;min-height:200px;}
    @media(max-width:768px){
      .combo-gallery{aspect-ratio:4/3 !important;min-height:180px;}
      #panel-combo .product-card{overflow:hidden;}
      #panel-combo .product-gallery{width:100%;max-width:100%;}
      #panel-combo .product-info{width:100%;max-width:100%;overflow-wrap:break-word;word-break:break-word;}
    }


    /* ============================================================
       SMALL ANDROID — 360px (Samsung Galaxy S25, S24, many mid-range)
    ============================================================ */
    @media(max-width:390px){
      /* Nav */
      .nav{padding:12px 16px;}
      .nav-logo .oana-logo{width:88px;}
      .nav-cta{font-size:10px;padding:6px 13px;}

      /* Carousel */
      .carousel{height:460px;}
      .slide-text{padding:0 16px;}
      .slide-headline{font-size:clamp(26px,9vw,36px);line-height:1.0;}
      .slide-eyebrow{font-size:9px;padding:5px 10px;}
      .slide-cta{padding:11px 22px;font-size:12px;}
      .dots{left:16px;}
      .counter{right:16px;}

      /* Pills */
      .pills-bar{padding:12px 12px;gap:8px;}
      .pill{font-size:11px;padding:7px 13px;}

      /* Flavours */
      .flavours-section{padding:48px 14px;}
      .flavours-inner .sec-title{font-size:26px;}
      .ftab{padding:8px 11px;font-size:10px;}
      .product-card{padding:16px 14px;border-radius:20px;}
      .product-name{font-size:20px;}
      .product-tagline{font-size:13px;}
      .product-desc{font-size:13px;}
      .stat-num{font-size:24px;}
      .stat-label{font-size:9px;}
      .product-badges span{font-size:10px;padding:4px 8px;}
      .atc-btn{font-size:12px;padding:13px;}

      /* Benefits */
      .benefits-section{padding:48px 14px;}
      .benefits-grid{grid-template-columns:1fr;gap:12px;}
      .benefit-card{padding:20px 16px;}
      .benefit-title{font-size:16px;}

      /* Our Story */
      .story-section{padding:48px 14px;}
      .story-inner{gap:24px;}
      .sec-title{font-size:26px;}
      .story-body{font-size:14px;}
      .story-quote{font-size:15px;padding:20px 22px;}

      /* Problem */
      .problem-section{padding:48px 14px;}

      /* Journey */
      .journey-section{padding:48px 14px;}
      .journey-steps{grid-template-columns:1fr 1fr;gap:16px;}
      .jstep-circle{width:88px;height:88px;}
      .jstep-title{font-size:12px;}
      .jstep-label{font-size:10px;}

      /* CTA */
      .cta-section{padding:48px 14px;}
      .cta-title{font-size:clamp(24px,8vw,36px);}

      /* Footer */
      footer{padding:32px 14px;}
    }


    .fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:32px;}
    .fgrid-card{background:white;border-radius:20px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:transform 0.18s,border-color 0.18s;position:relative;display:flex;flex-direction:column;}
    .fgrid-card:hover{transform:translateY(-4px);}
    .fgrid-card.active{border-color:var(--card-accent,#1A1A2E);transform:translateY(-4px);}
    .fgrid-img{aspect-ratio:3/4;background:#f7f4ee;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .fgrid-body{padding:14px 14px 10px;flex:1 1 auto;}
    .fgrid-name{font-family:'Fraunces',serif;font-weight:900;font-size:15px;color:#1A1A2E;margin-bottom:4px;}
    .fgrid-tag{font-size:12px;color:rgba(26,26,46,0.55);font-weight:600;line-height:1.4;margin-bottom:8px;}
    .fgrid-price{font-size:12px;font-weight:800;color:rgba(26,26,46,0.4);}
    .fgrid-pip{height:4px;width:100%;}
    .fdetail-panel{display:none;}
    .fdetail-panel.active{display:block;}
    @media(max-width:768px){
      .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
      .fgrid-name{font-size:13px;}
      .fgrid-tag{display:none;}
    }
    @media(max-width:390px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}}


    /* ── FAQ SECTION ── */
    .faq-section{background:var(--dark);padding:96px 24px;}
    .faq-inner{max-width:720px;margin:0 auto;}
    .faq-list{margin-top:48px;display:flex;flex-direction:column;gap:0;}
    .faq-item{border-bottom:1px solid rgba(255,255,255,0.08);}
    .faq-item:first-child{border-top:1px solid rgba(255,255,255,0.08);}
    .faq-q{width:100%;background:none;border:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Fraunces',serif;font-weight:700;font-size:18px;color:white;text-align:left;gap:16px;transition:color 0.2s;}
    .faq-q:hover{color:var(--lime);}
    .faq-q.open{color:var(--lime);}
    .faq-arrow{font-size:18px;color:var(--lime);transition:transform 0.3s;flex-shrink:0;}
    .faq-q.open .faq-arrow{transform:rotate(180deg);}
    .faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease, padding 0.3s ease;font-size:15px;font-weight:600;color:rgba(255,255,255,0.6);line-height:1.8;padding:0;}
    .faq-a.open{max-height:600px;padding:0 0 22px;}
    @media(max-width:768px){
      .faq-section{padding:60px 20px;}
      .faq-q{font-size:16px;padding:18px 0;}
    }
    @media(max-width:390px){
      .faq-q{font-size:15px;}
    }

    /* ── PRIVACY SECTION ── */
    .privacy-section{background:var(--off-white);padding:80px 24px;}
    .privacy-inner{max-width:680px;margin:0 auto;}
    .privacy-meta{font-size:13px;color:rgba(26,26,46,0.45);font-weight:700;margin-bottom:32px;letter-spacing:0.04em;}
    .privacy-body p{font-size:15px;color:rgba(26,26,46,0.7);line-height:1.8;font-weight:600;margin-bottom:16px;}
    .privacy-body a{color:var(--dark);font-weight:800;text-decoration:underline;}

    /* ── FOOTER COPYRIGHT ── */
    .footer-copyright{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
    .footer-copyright span{font-size:12px;color:rgba(255,255,255,0.3);font-weight:600;}
    .footer-copyright a{font-size:12px;color:rgba(255,255,255,0.4);font-weight:700;text-decoration:none;transition:color 0.2s;}
    .footer-copyright a:hover{color:var(--lime);}
    @media(max-width:768px){.footer-copyright{justify-content:center;text-align:center;}}


    /* ── MOBILE FIXES ── */

    /* Flavour detail panel — stack image above info on mobile */
    @media(max-width:768px){
      .fdetail-inner{display:grid;grid-template-columns:1fr;gap:24px;padding:24px 20px;border-radius:20px;}
      .fdetail-img{aspect-ratio:4/3;max-height:280px;}
    }
    @media(max-width:390px){
      .fdetail-inner{padding:18px 14px;}
    }

    /* Journey — 2x3 grid on mobile, smaller circles, hide connector line */
    @media(max-width:768px){
      .journey-steps{grid-template-columns:repeat(2,1fr);gap:24px;}
      .journey-steps::before{display:none;}
      .jstep-circle{width:100px;height:100px;}
    }
    @media(max-width:390px){
      .journey-steps{grid-template-columns:repeat(2,1fr);gap:16px;}
      .jstep-circle{width:84px;height:84px;}
      .jstep-title{font-size:12px;}
    }

    /* FAQ — increase max-height so long answers never get cut */
    @media(max-width:768px){
      .faq-a.open{max-height:500px;}
    }

    /* Gallery thumbs — horizontal scroll on very small screens */
    @media(max-width:390px){
      .gallery-thumbs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;}
      .thumb{width:58px;height:58px;flex-shrink:0;}
    }

    /* Nav — ensure 5 items don't overflow before hiding on mobile */
    @media(max-width:900px) and (min-width:769px){
      .nav-links{gap:18px;}
      .nav-links span{font-size:12px;}
    }

    /* Product stats and badges wrap cleanly */
    @media(max-width:480px){
      .product-stats{gap:10px;}
      .stat-num{font-size:24px;}
      .product-badges{flex-wrap:wrap;gap:6px;}
      .product-badges span{font-size:10px;}
    }

    /* Privacy section */
    @media(max-width:768px){
      .privacy-section{padding:60px 20px;}
    }

    /* Footer copyright */
    @media(max-width:480px){
      .footer-copyright{flex-direction:column;gap:6px;text-align:center;}
    }


    .shipping-banner{background:var(--dark);border-bottom:1px solid rgba(255,255,255,0.08);padding:9px;text-align:center;font-size:12px;font-weight:700;color:rgba(255,255,255,0.65);}
    .shipping-banner strong{color:var(--lime);}

    @media(max-width:768px){
      .shipping-banner{font-size:11px;padding:8px 12px;}
    }

    /* Delivery banner — prevent the unbreakable pickup note from forcing
       horizontal overflow on narrow phones, and grow the close button's tap area */
    @media(max-width:768px){
      .delivery-banner{padding:8px 16px;}
      .delivery-top-row{flex-wrap:wrap;row-gap:6px;}
      .delivery-pickup{white-space:normal;flex-basis:100%;font-size:0.75rem;}
      .delivery-close{padding:8px;margin:-8px;}
    }
    @media(max-width:390px){
      .delivery-question{font-size:0.8rem;}
    }