/* =========================================================
   ICOFFEE — MOBILE LAYER  (loads last, wins everything)
   Targets ≤ 720 px unless noted.
   ========================================================= */


/* ----------------------------------------------------------
   1. ANNOUNCEMENT BAR
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .announcement {
        height: 34px !important;
        padding: 0 16px !important;
        font-size: 11px !important;
        letter-spacing: .06em !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .announcement-right,
    .announcement-mid { display: none !important; }

    .announcement span:first-child {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* ----------------------------------------------------------
   2. NAV — brand | Shop Now pill | ☰
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .nav {
        height: 64px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .brand {
        gap: 7px !important;
        flex-shrink: 0 !important;
    }

    .brand-indus {
        font-size: 11px !important;
        letter-spacing: .08em !important;
    }

    .brand-divider {
        height: 14px !important;
        width: 1px !important;
    }

    .brand-icoffee {
        font-size: 20px !important;
        letter-spacing: .01em !important;
    }

    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .shop-nav-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
        line-height: 1 !important;
    }

    .mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Dropdown sits just below 34px announcement + 64px nav */
    .nav-links {
        top: 98px !important;
        padding: 12px 20px 20px !important;
        gap: 0 !important;
        z-index: 100 !important;
    }

    .nav-links a {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        padding: 10px 0 !important;
        font-size: 15px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .nav-links a:last-child { border-bottom: none !important; }
}


/* ----------------------------------------------------------
   3. HERO
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .hero {
        /* Announcement bar (34px) + nav (64px) float on top of the hero, so the
           copy has to start below them or the headline is hidden behind the nav. */
        --hero-header: 98px;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        /* The mobile artwork is 941x1671 (1.776 tall); staying at or under that
           ratio means `cover` never crops the sides. */
        height: min(calc(100vw * 1.75), 700px) !important;
        min-height: 560px !important;
        overflow: hidden !important;
        background: #29160e !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hero-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../assets/images/hero/icoffee-mobile-hero.webp') !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        transform: none !important;
    }

    /* Gradient: readable text top-left, art shows clearly bottom-right */
    .hero-vignette {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background:
            linear-gradient(135deg, rgba(18,6,2,.68) 0%, rgba(18,6,2,.28) 45%, rgba(18,6,2,0) 70%),
            linear-gradient(180deg, rgba(18,6,2,.40) 0%, rgba(18,6,2,0) 40%) !important;
    }

    /* Copy sits top-left in the negative space */
    .hero-copy {
        position: absolute !important;
        z-index: 4 !important;
        top: calc(var(--hero-header, 98px) + 22px) !important;
        left: clamp(16px, 5vw, 40px) !important;
        width: min(56vw, 260px) !important;
        margin: 0 !important;
        color: #fff !important;
    }

    .hero-copy .eyebrow {
        font-size: 10px !important;
        letter-spacing: .18em !important;
        margin-bottom: 8px !important;
        opacity: .85 !important;
        white-space: nowrap !important;   /* keep "BREW WITH A PURPOSE" on one line */
    }

    .hero-copy .eyebrow i { min-width: 0 !important; flex: 1 1 0 !important; }

    .hero h1 {
        font-size: clamp(34px, 9vw, 50px) !important;
        line-height: .91 !important;
        margin: 0 0 10px !important;
        letter-spacing: -.01em !important;
    }

    .hero-copy > p {
        font-size: clamp(12px, 2.8vw, 15px) !important;
        line-height: 1.42 !important;
        margin: 0 0 16px !important;
        opacity: .9 !important;
    }

    .hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .hero-ctas .btn {
        padding: 10px 16px !important;
        font-size: 11px !important;
        letter-spacing: .1em !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        border-radius: 999px !important;
    }

    .hero-trust {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-top: 14px !important;
    }

    .hero-trust span {
        font-size: 10px !important;
        letter-spacing: .08em !important;
        opacity: .8 !important;
    }

    .scroll-cue,
    .hero-pagination { display: none !important; }
}


/* ----------------------------------------------------------
   4. BENEFITS MARQUEE
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .icoffee-smarter-section {
        padding: 48px 0 40px !important;
        overflow: hidden !important;
    }

    .icoffee-smarter-header {
        padding: 0 20px !important;
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    .icoffee-smarter-eyebrow {
        font-size: 10px !important;
        letter-spacing: .2em !important;
        margin-bottom: 10px !important;
    }

    .icoffee-smarter-header h2 {
        font-size: clamp(26px, 7vw, 36px) !important;
        line-height: 1.1 !important;
    }

    /* Slightly bigger tiles — easier to read while scrolling */
    .icoffee-feature {
        min-width: 110px !important;
        padding: 18px 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }

    .icoffee-feature-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .icoffee-feature-icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    .icoffee-feature span {
        font-size: 10px !important;
        letter-spacing: .1em !important;
        line-height: 1.4 !important;
    }
}


/* ----------------------------------------------------------
   5. PRODUCT CARDS — full-width stacked, taller art
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .iv-product-showcase {
        padding: 48px 14px 40px !important;
    }

    .iv-product-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .iv-product-card {
        min-height: 240px !important;
        grid-template-columns: 48% 52% !important;
        border-radius: 16px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .iv-product-content {
        padding: 24px 8px 24px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .iv-product-eyebrow {
        font-size: 10px !important;
        letter-spacing: .14em !important;
        margin-bottom: 8px !important;
    }

    .iv-product-content h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.05 !important;
        margin: 0 0 8px !important;
    }

    .iv-product-content p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        opacity: .8 !important;
        margin-bottom: 14px !important;
    }

    .iv-product-button {
        padding: 10px 14px !important;
        font-size: 11px !important;
        letter-spacing: .08em !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        align-self: flex-start !important;
    }

    .iv-product-button span { font-size: 13px !important; }

    .iv-product-visual {
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .iv-product-image {
        width: 88% !important;
        height: auto !important;
        max-height: 230px !important;
        object-fit: contain !important;
        object-position: bottom center !important;
    }
}


/* ----------------------------------------------------------
   6. IMMERSIVE (ritual) SECTION
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .immersive-section {
        min-height: 380px !important;
        background-attachment: scroll !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 60px 24px !important;
    }

    .immersive-copy {
        margin: 0 !important;
        text-align: center !important;
        max-width: 280px !important;
    }

    .immersive-copy h2 {
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .95 !important;
    }
}


/* ----------------------------------------------------------
   7. INGREDIENTS GRID
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .icoffee-ingredients {
        padding: 56px 14px 64px !important;
    }

    .ingredients-heading {
        margin-bottom: 32px !important;
        text-align: center !important;
    }

    .ingredients-heading h2 {
        font-size: clamp(34px, 9vw, 48px) !important;
        letter-spacing: -.02em !important;
    }

    .ingredients-eyebrow {
        font-size: 10px !important;
        letter-spacing: .2em !important;
    }

    /* 2-col grid — each panel is a tall card */
    .ingredient-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ingredient-panel {
        min-height: 200px !important;
        border-radius: 14px !important;
    }

    .panel-inner {
        min-height: 200px !important;
        padding: 14px !important;
    }

    .panel-main h3 {
        font-size: clamp(18px, 5vw, 24px) !important;
        letter-spacing: .04em !important;
    }

    .panel-top span {
        font-size: 10px !important;
    }

    .latin-name {
        font-size: 11px !important;
        opacity: .7 !important;
    }

    .ingredient-benefits {
        gap: 6px !important;
    }

    .ingredient-benefits p,
    .ingredient-benefits label {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    /* Formula panel — full-width below the 2-col ingredients */
    .panel-formula {
        grid-column: 1 / -1 !important;
        min-height: 160px !important;
    }

    .formula-main h3 {
        font-size: clamp(18px, 5vw, 26px) !important;
    }

    .formula-open-button {
        padding: 10px 18px !important;
        font-size: 11px !important;
        margin-top: 14px !important;
        border-radius: 999px !important;
    }
}


/* ----------------------------------------------------------
   8. BRAND BANNER / STORY VIDEO
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .brand-banner-section {
        padding: 0 !important;
    }

    .banner-frame {
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .banner-accessible-copy {
        padding: 20px !important;
    }

    .banner-accessible-copy h2 {
        font-size: clamp(28px, 8vw, 40px) !important;
    }
}


/* ----------------------------------------------------------
   9. WHY ICOFFEE
   ---------------------------------------------------------- */
@media (max-width: 760px) {

    .iv-why-section {
        padding: 56px 16px 64px !important;
    }

    .iv-why-heading {
        margin-bottom: 32px !important;
    }

    .iv-why-heading h2 {
        font-size: clamp(30px, 8.5vw, 46px) !important;
        line-height: 1.05 !important;
    }

    .iv-section-label {
        font-size: 10px !important;
        letter-spacing: .2em !important;
        margin-bottom: 10px !important;
    }

    /* Stack into single column.
       Desktop is 01+03 | video | 02+04, so a plain stack read 01, 03, video, 02, 04.
       Flatten the two columns and re-order: video first, then 01 → 04
       (same pattern as the benefits block on the product pages). */
    .iv-why-layout,
    .iv-why-layout--three {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .iv-why-column,
    .iv-why-column--left,
    .iv-why-column--right {
        display: contents !important;
    }

    .iv-why-layout--three > .iv-why-video                     { order: -1 !important; }
    .iv-why-column--left  > .iv-why-item:nth-child(1)          { order: 1 !important; } /* 01 */
    .iv-why-column--right > .iv-why-item:nth-child(1)          { order: 2 !important; } /* 02 */
    .iv-why-column--left  > .iv-why-item:nth-child(2)          { order: 3 !important; } /* 03 */
    .iv-why-column--right > .iv-why-item:nth-child(2)          { order: 4 !important; } /* 04 */

    .iv-why-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* The column wrappers no longer draw the shared outline, so each card owns a full border */
    .iv-why-item,
    .iv-why-column .iv-why-item,
    .iv-why-column .iv-why-item + .iv-why-item {
        min-height: 0 !important;
        padding: 22px 20px !important;
        border: 1px solid rgba(88, 57, 37, .18) !important;
        border-radius: 14px !important;
    }

    .iv-why-number {
        font-size: 11px !important;
        letter-spacing: .18em !important;
        margin-bottom: 10px !important;
    }

    .iv-why-item h3 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        margin-bottom: 8px !important;
    }

    .iv-why-item p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        opacity: .85 !important;
        max-width: none !important;
    }

    .iv-heading-line,
    .iv-small-line { display: none !important; }

    /* Video panel — the film is a 9:16 portrait with its own text baked in, so show the
       whole frame. (A fixed 220px height cropped it to a letterbox and sliced the
       on-screen headlines in half.) */
    .iv-why-video,
    .iv-why-layout--three > .iv-why-video {
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 auto 8px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* The film already carries its own logo and headlines; on the full frame the
       overlay labels landed on top of them. Desktop keeps the labels. */
    .iv-why-video .iv-video-top,
    .iv-why-video .iv-video-bottom { display: none !important; }
}


/* ----------------------------------------------------------
   10. GEO / CUSTOMER REVIEW + AEO VIDEO
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    /* Geo (customer testimonial) section */
    .geo-section,
    [class*="geo-section"] {
        padding: 48px 16px 40px !important;
    }

    .geo-heading,
    #geo-home-title {
        font-size: clamp(26px, 7.5vw, 38px) !important;
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    .geo-intro {
        font-size: 13px !important;
        text-align: center !important;
        opacity: .75 !important;
        margin-bottom: 24px !important;
    }

    .geo-video-wrap,
    .aeo-video-wrap {
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 0 auto 20px !important;
    }

    .geo-explain-video,
    .aeo-explain-video {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    /* AEO "What is iCoffee" section */
    .aeo-answer-section {
        padding: 48px 16px 40px !important;
        text-align: center !important;
    }

    .aeo-answer-section h2 {
        font-size: clamp(26px, 7.5vw, 38px) !important;
        margin-bottom: 20px !important;
    }

    /* Sound button on video */
    .video-sound-btn {
        width: 36px !important;
        height: 36px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}


/* ----------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .footer {
        padding: 48px 20px 32px !important;
    }

    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .footer-logo {
        font-size: 38px !important;
    }

    .footer-top p {
        font-size: 13px !important;
        margin-top: 10px !important;
        line-height: 1.55 !important;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        font-size: 13px !important;
    }

    .footer-links a {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .newsletter label {
        font-size: 11px !important;
        letter-spacing: .16em !important;
        margin-bottom: 10px !important;
    }

    .newsletter input {
        font-size: 14px !important;
    }

    .footer-contact-item {
        font-size: 13px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
        margin-top: 40px !important;
        font-size: 12px !important;
    }
}


/* ----------------------------------------------------------
   12. GLOBAL — section spacing, tap targets, typography
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    /* Consistent section breathing room */
    .section { padding: 56px 16px !important; }

    /* All headings a bit tighter */
    h2 { letter-spacing: -.02em !important; }

    /* All primary CTAs — pill-shaped, comfortable tap target */
    .btn {
        min-height: 42px !important;
        border-radius: 999px !important;
    }

    /* Page eyebrow labels — consistent small caps */
    .page-eyebrow,
    [class*="eyebrow"] {
        font-size: 10px !important;
        letter-spacing: .2em !important;
    }

    /* No horizontal overflow anywhere */
    body { overflow-x: hidden !important; }
    .section,
    main > section { max-width: 100vw !important; overflow-x: hidden !important; }

    /* FAQ accordion — the row spacing lives on <summary> only.
       (<details> used to add 24px of its own on top, which made each question
       sit in ~120px of empty space.) */
    .faq-section { padding: 64px 20px 72px !important; }

    .faq-list { margin-top: 28px !important; }

    .faq-list details { padding: 0 !important; }

    .faq-list summary {
        padding: 18px 0 !important;
        font-size: 19px !important;
        line-height: 1.3 !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .faq-list p {
        margin-top: 0 !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        padding-bottom: 20px !important;
    }

    /* Medical disclaimer modal */
    .disclaimer-modal {
        padding: 24px 20px !important;
        border-radius: 16px 16px 0 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .disclaimer-accept {
        margin-top: 16px !important;
        width: 100% !important;
        padding: 14px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
    }
}


/* ----------------------------------------------------------
   13a. PRODUCT PAGES — science cards, yoga cards, directions
   The page-level stylesheet sizes these for desktop (20px copy, 30px
   padding). On a phone that leaves ~35px of text width per card, so the
   type and padding come down and the grids are single column.
   ---------------------------------------------------------- */
@media (max-width: 720px) {

    .science-section,
    .yoga-section,
    .directions-section { padding-left: 20px !important; padding-right: 20px !important; }

    /* ---- Science ---- */
    .science-heading h2,
    .yoga-inner h2,
    .directions-heading h2 {
        font-size: clamp(30px, 8.5vw, 38px) !important;
        line-height: 1.12 !important;
    }

    .science-heading p {
        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    .science-heading p span { font-size: inherit !important; }

    .science-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    .science-card {
        padding: 26px 22px !important;
        border-radius: 18px !important;
    }

    .science-card h3 { font-size: 28px !important; }

    .science-card .sci-latin {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }

    .science-card p,
    .science-card ul {
        font-size: 16.5px !important;
        line-height: 1.65 !important;
    }

    .science-card .sci-ref {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* ---- Yoga ---- */
    .yoga-inner > p {
        font-size: 17px !important;
        line-height: 1.7 !important;
        margin-bottom: 28px !important;
    }

    .yoga-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

    .yoga-card { padding: 22px 20px !important; border-radius: 16px !important; }

    .yoga-card h4 { font-size: 24px !important; margin-bottom: 8px !important; }

    .yoga-card p { font-size: 16.5px !important; line-height: 1.6 !important; }

    /* ---- Directions ---- */
    .directions-heading { margin-bottom: 32px !important; }

    .directions-steps { gap: 14px !important; }

    .directions-steps li { padding: 22px 20px !important; }

    .directions-steps p {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
}


/* ----------------------------------------------------------
   13. 360 px and below — extra tight
   ---------------------------------------------------------- */
@media (max-width: 360px) {

    .brand-indus { font-size: 10px !important; }
    .brand-icoffee { font-size: 17px !important; }
    .shop-nav-btn { padding: 7px 10px !important; font-size: 10px !important; }

    .hero-copy {
        width: min(54vw, 195px) !important;
        top: calc(var(--hero-header, 98px) + 18px) !important;
        left: 14px !important;
    }

    .hero h1 { font-size: clamp(30px, 8.5vw, 38px) !important; }
    .hero-copy > p { font-size: 11px !important; }
}

/* very narrow phones (≤340px): keep the CTA clear of the product boxes */
@media (max-width: 340px) {
    .hero-copy > p { margin-bottom: 10px !important; }
    .hero-ctas .btn {
        padding: 10px 14px !important;
        font-size: 10px !important;
        letter-spacing: .06em !important;
    }
}

@media (max-width: 360px) {

    .iv-product-card { min-height: 200px !important; }
    .iv-product-content h2 { font-size: 20px !important; }
    .iv-product-content p { display: none !important; }

    .ingredient-grid { grid-template-columns: 1fr !important; }
    .ingredient-panel { min-height: 180px !important; }
}