/* ═══════════════════════════════════════════════════════════════════════════
   THE CANNABIS CO. — RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Viewports <= 1439px ──────────────────────── */
@media (max-width: 1439px) {
    /* Hero — scale down the giant headline */
    /* .old-hero-title {
        font-size: clamp(80px, 11vw, 140px);
        line-height: 0.88;
        white-space: normal;
    }
    .hero-title.elevated {
        font-size: clamp(60px, 8vw, 100px);
        line-height: 0.9;
        margin-top: 12px;
    }
    .old-hero-subtitle {
        font-size: clamp(60px, 8vw, 100px);
        line-height: 0.9;
        margin-bottom: 24px;
    }
    .old-eyebrow {
        font-size: clamp(18px, 2.2vw, 28px);
        letter-spacing: 5px;
    }

    /* All 74px section titles → fluid scale */
    .feeling-title,
    .category-title,
    .locals-title,
    .about-title,
    .why-title,
    .story-title,
    .testimonials-title,
    .store-title,
    .daily-deals-title,
    .rewards-title {
        font-size: clamp(44px, 5.5vw, 68px);
    }

    /* Rewards panel → single column when it gets tight */
    .rewards-panel {
        gap: clamp(36px, 5vw, 80px);
        padding: clamp(40px, 5vw, 80px);
    }
    .about-heritage-section {
        padding-top: 0px;
    }
}

/* ── Viewports <= 1200px ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    :root {
        --section-padding: 80px;
    }

    .footer-watermark-svg path {
        stroke-width: 2.5px !important;
    }

    /* Hero */
    .old-hero-title {
        font-size: clamp(72px, 10vw, 120px);
    }
    .hero-title.elevated {
        font-size: clamp(54px, 7.5vw, 90px);
    }
    .old-hero-subtitle {
        font-size: clamp(54px, 7.5vw, 90px);
    }

    /* Section titles */
    .feeling-title,
    .category-title,
    .locals-title,
    .about-title,
    .why-title,
    .story-title,
    .testimonials-title,
    .store-title,
    .daily-deals-title,
    .rewards-title {
        font-size: clamp(40px, 5vw, 62px);
    }

    /* Shells / containers */
    .daily-deals-shell {
        padding: 0 36px;
    }
    .locals-shell {
        padding: 0 36px;
    }
    .story-shell {
        padding: 0 36px;
        gap: 44px;
    }
    .store-shell {
        padding: 0 36px;
    }
    .footer-pre {
        padding-left: 36px;
        padding-right: 36px;
    }
    .category-shell {
        padding: 0 36px;
    }

    /* Testimonials */
    .testimonials-shell {
        padding: 80px 36px 0;
    }
    .testimonials-grid {
        gap: 20px;
    }

    /* About */
    .about-heritage-shell {
        padding-left: 36px;
        padding-right: 36px;
        gap: 80px;
    }
    .about-tcc-content-row {
        gap: 48px;
    }

    /* Why grid */
    .why-grid {
        gap: 18px;
    }

    /* District section */
    .district-content {
        padding: 60px 48px 40px 48px;
    }
    .district-headline-white,
    .district-headline-teal {
        font-size: clamp(48px, 6vw, 74px);
    }
    .district-tagline {
        font-size: clamp(24px, 3vw, 38px);
    }

    /* Rewards */
    .rewards-shell {
        padding: 0 36px;
    }
    .rewards-stat-value {
        font-size: clamp(36px, 4vw, 50px);
    }
    .testimonials-watermark {
        margin-top: 0;
    }
    .story-section {
        padding: 80px 0;
    }
    .testimonials-section {
        padding: 80px 0;
        padding-top: 0;
    }
    .about-heritage-section {
        padding: 80px 0;
        padding-top: 0;
    }
    .daily-deals-section {
        padding: 80px 0;
        padding-top: 0;
    }
    .daily-deals-header {
        justify-content: center;
    }
    .daily-deals-eyebrow {
        text-align: center;
    }
    .daily-deals-title {
        text-align: center;
        justify-content: center;
    }
    /* .daily-deals-heading{
        margin-bottom: 20px;
    } */
}

/* ── Viewports <= 1100px ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    /* Shells */
    .locals-shell {
        padding: 0 32px;
    }
    .story-shell {
        padding: 0 32px;
        gap: 40px;
    }
    .daily-deals-shell {
        padding: 0 32px;
    }
    .store-shell {
        padding: 0 32px;
    }
    .footer-pre {
        padding-left: 32px;
        padding-right: 32px;
    }
    .category-section {
        padding: var(--section-padding-md) 0;
    }
    .category-shell {
        padding: 0 32px;
    }

    /* Nav */
    .main-header .header-container {
        gap: 12px;
    }
    .hamburger {
        display: flex;
    }
    .main-nav {
        display: none;
    }
    .logo img {
        width: 350px;
    }
    .btn-order {
        display: none;
    }

    /* Effects / Feeling */
    .feeling-header {
        gap: 24px;
    }
    .feeling-card {
        flex: 0 0 256px;
        max-width: 400px;
        scroll-snap-align: start;
    }

    .why-card {
        width: 100%;
        height: 100%;
        padding: 24px;
    }

    /* District */
    .district-row {
        flex-direction: column;
        min-height: 0;
    }
    .district-video-panel,
    .district-content {
        flex: 0 0 auto;
    }
    .district-video-panel {
        min-height: 420px;
    }
    .district-video-overlay {
        background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 55%);
    }
    .district-content {
        align-items: center;
        text-align: center;
    }
    .district-border-graphic {
        margin-top: 20px;
    }
    /* Deals swiper */
    .deals-grid {
        display: flex;
        gap: 28px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 10px;
        scroll-padding-left: 32px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .deals-grid::-webkit-scrollbar {
        display: none;
    }
    .deals-grid .deal-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
}

/* ── Viewports <= 1024px ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Insider text */
    .insider-text,
    .promo-text {
        font-size: 14px;
        letter-spacing: 1.2px;
    }

    /* Where Locals Go */
    .locals-section {
        padding: 100px 0;
        background-image:
            linear-gradient(
                to right,
                rgba(2, 2, 2, 0.98) 0%,
                rgba(2, 2, 2, 0.9) 60%,
                rgba(2, 2, 2, 0.5) 100%
            ),
            url("../assets/images/where-locals.webp");
    }
    .locals-content {
        max-width: 540px;
    }
    .locals-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .testimonials-title {
        font-size: clamp(40px, 5.5vw, 60px);
    }

    /* Rewards */
    .rewards-panel {
        grid-template-columns: 1fr;
    }
    .rewards-copy {
        max-width: none;
    }
    .rewards-title {
        font-size: clamp(44px, 7vw, 66px);
    }

    /* Footer */
    .footer-shell {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    /* Hero */
    .old-hero-title {
        font-size: clamp(64px, 9vw, 110px);
        white-space: normal;
    }
    .hero-title.elevated {
        font-size: clamp(50px, 7vw, 85px);
    }
    .old-hero-subtitle {
        font-size: clamp(50px, 7vw, 85px);
    }
    .old-eyebrow {
        font-size: clamp(16px, 2vw, 24px);
        letter-spacing: 4px;
    }

    /* District */
    .district-content {
        padding: 48px 40px 40px;
    }
    .district-headline-white,
    .district-headline-teal {
        font-size: clamp(44px, 6vw, 68px);
    }
    .district-tagline {
        font-size: clamp(22px, 2.8vw, 34px);
    }
    .district-built {
        font-size: 18px;
    }

    /* Section titles across page */
    .feeling-title,
    .category-title,
    .about-title,
    .why-title,
    .story-title,
    .store-title,
    .daily-deals-title {
        font-size: clamp(38px, 5vw, 58px);
    }

    .testimonials-watermark-container {
        margin-top: 20px;
    }
}

/* ── Viewports <= 992px ────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* Story section */
    .story-section {
        padding: 80px 0;
    }
    .story-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .story-content {
        max-width: 600px;
    }
    .story-swiper {
        width: 100%;
        margin-right: 0;
        overflow: hidden !important;
    }
    .story-title {
        font-size: clamp(38px, 5.5vw, 56px);
    }
    .story-lead {
        font-size: 18px;
    }

    /* Store */
    .store-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .store-map-card {
        min-height: 380px;
    }
    .store-map {
        min-height: 380px;
    }
    .store-title {
        font-size: clamp(38px, 5vw, 56px);
    }

    /* About & Why Shop */
    .about-heritage-section {
        padding: 80px 0;
    }
    .about-heritage-shell {
        gap: 80px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .about-tcc-content-row {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .about-tcc-image-wrapper {
        /* aspect-ratio: 1.2 / 1; */
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        height: 100%;
        /* max-height: 400px; */
    }
    .about-title {
        font-size: clamp(38px, 5.5vw, 56px);
    }
    .about-eyebrow {
        font-size: 13px;
    }
    .about-highlight-text {
        font-size: 15px;
    }

    /* Why Shop */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .why-card {
        height: auto;
        /* min-height: 273px; */
        width: 100%;
        /* max-width: 325px; */
        margin: 0 auto;
    }
    .why-card-title {
        font-size: 24px;
    }
    .why-card-desc {
        font-size: 15px;
    }
    .why-title {
        font-size: clamp(38px, 5vw, 56px);
    }

    /* Feeling section */
    .feeling-title {
        font-size: clamp(38px, 5.5vw, 56px);
    }
    .feeling-eyebrow {
        font-size: 13px;
    }

    /* Category section */
    .category-title {
        font-size: clamp(38px, 5.5vw, 56px);
    }
    .category-eyebrow {
        font-size: 13px;
    }

    /* Rewards */
    .rewards-title {
        font-size: clamp(38px, 6vw, 56px);
    }
    .rewards-stat-value {
        font-size: 42px;
    }

    /* Testimonials */
    .testimonials-title {
        font-size: clamp(38px, 5.5vw, 56px);
    }
    .testimonials-eyebrow {
        font-size: 13px;
    }

    /* ─── Centered Layout & Reordered Sliders ──────────────────────── */

    /* Shells become flex columns to allow reordering */
    .category-shell,
    .daily-deals-shell,
    .feeling-container,
    .testimonials-shell,
    .rewards-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Headers lose their box so children become flex items of the shell */
    .category-header,
    .daily-deals-header,
    .feeling-header,
    .testimonials-header,
    .rewards-header {
        display: contents !important;
    }

    /* Title groups move to top (order 1) */
    .category-title-group,
    .feeling-title-group,
    .testimonials-heading,
    .rewards-heading {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    /* Swipers move to middle (order 2) */
    .category-swiper,
    .deals-swiper,
    .effects-swiper,
    .testimonials-swiper,
    .rewards-swiper {
        order: 2 !important;
        width: 100% !important;
    }

    /* Toolbars move to bottom (order 3) */
    .category-shell .slider-toolbar,
    .daily-deals-shell .slider-toolbar,
    .feeling-container .slider-toolbar,
    .testimonials-shell .slider-toolbar,
    .rewards-shell .slider-toolbar {
        order: 3 !important;
        display: flex !important;
        /* Put controls on top, link on bottom */
        flex-direction: column-reverse !important;
        align-items: center !important;
        margin-top: 24px !important;
        gap: 20px !important;
    }

    /* Bottom contents move to end (order 4) */
    .rewards-bottom-content {
        order: 4 !important;
        width: 100% !important;
    }

    /* 5. Brand Heritage & About Section */
    .about-tcc-text-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .about-paragraphs {
        align-items: center !important;
    }
    .about-paragraphs p {
        text-align: center !important;
    }

    /* 6. Where Locals Go Section */
    .locals-bullets {
        align-items: flex-start !important;
        margin: 0 auto 36px !important;
        text-align: left !important;
    }

    /* 7. Born in the District Section */
    .district-content {
        align-items: center !important;
        text-align: center !important;
    }
    .district-headline {
        align-items: center !important;
    }

    /* 8. Insider Rewards Section */
    .rewards-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .rewards-actions {
        align-items: center !important;
        width: 100% !important;
        align-content: center !important;
        justify-content: center !important;
    }
    .rewards-stats {
        justify-items: center !important;
    }
    .rewards-stat {
        align-items: center !important;
        text-align: center !important;
    }

    /* 9. Story Section */
    .story-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    .story-description {
        margin: 0 auto !important;
    }

    /* 10. Store Section (Visit Us) */
    .store-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .daily-deals-heading {
        margin-bottom: 20px;
    }
}

/* ── Viewports <= 768px ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Three.js canvas styles removed */
    /* Where Locals Go */
    .locals-section {
        padding: 80px 0;
        padding-top: 0px;
        background-image:
            linear-gradient(
                to bottom,
                rgba(2, 2, 2, 0.98) 0%,
                rgba(2, 2, 2, 0.85) 60%,
                rgba(2, 2, 2, 0.4) 100%
            ),
            url("../assets/images/where-locals.webp");
        background-position: center top;
        display: block;
    }
    .locals-shell {
        padding: 0 20px;
    }
    .locals-content {
        max-width: 100%;
    }
    .locals-title {
        font-size: clamp(36px, 8vw, 52px);
        margin-bottom: 28px;
    }
    .locals-bullet-text {
        font-size: 15px;
    }
    .locals-bullets {
        margin-bottom: 36px;
    }

    /* Story */
    .story-shell {
        padding: 0 20px;
    }
    .story-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    /* Testimonials */
    .testimonials-shell {
        padding: 60px 24px 0;
    }
    .testimonials-header {
        margin-bottom: 36px;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .testimonials-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    /* Store */
    .store-section {
        padding: var(--section-padding-sm) 0;
    }
    .store-shell {
        padding: 0 20px;
    }
    .store-title {
        font-size: clamp(34px, 8vw, 48px);
    }
    .store-eyebrow {
        font-size: 12px;
    }

    /* Footer */
    .footer-pre {
        padding-left: 20px;
        padding-right: 20px;
    }
    .footer-pre-text {
        font-size: 13px;
        letter-spacing: 1px;
    }

    /* About */
    .about-heritage-shell {
        padding-left: 20px;
        padding-right: 20px;
    }
    .about-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    /* Why Shop */
    .why-title {
        font-size: clamp(34px, 8vw, 48px);
    }
    .why-subtitle {
        font-size: 15px;
    }

    /* Feeling */
    .feeling-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    /* Category */
    .category-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    /* Deals */
    .daily-deals-title {
        font-size: clamp(36px, 9vw, 52px);
    }

    /* Rewards */
    .rewards-title {
        font-size: clamp(34px, 8vw, 48px);
    }
    .rewards-description {
        font-size: 15px;
    }

    /* District */
    .district-headline-white,
    .district-headline-teal {
        font-size: clamp(38px, 8vw, 56px);
    }
    .district-tagline {
        font-size: clamp(18px, 3.5vw, 26px);
    }
    .district-body {
        font-size: 15px;
    }

    .feeling-section {
        padding-bottom: 0;
    }

    /* .daily-deals-header {
        align-items: center !important;
        text-align: center !important;
    }
    .daily-deals-header .slider-toolbar {
        align-items: center !important;
    }

    .feeling-header {
        align-items: center !important;
        text-align: center !important;
    }
    .feeling-header .slider-toolbar {
        align-items: center !important;
    } */
    .locals-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .locals-badges {
        justify-content: center !important;
        width: 100% !important;
    }
    .footer-desc {
        text-align: center !important;
    }

    .footer-col {
        justify-content: center !important;
        align-items: center !important;
    }
    .footer-links {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    .footer-contact-info {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ── Viewports <= 700px ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .story-section {
        padding-bottom: 0;
    }
    /* Daily Deals */
    .daily-deals-section {
        padding: 50px 0;
    }

    .district-border-graphic {
        margin-top: 0;
    }

    .district-content {
        padding: 40px 20px 40px;
    }

    .testimonials-section {
        padding-bottom: 0;
    }
    .daily-deals-shell {
        padding: 0 22px;
    }
    .daily-deals-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
    }
    .daily-deals-title {
        font-size: clamp(34px, 10vw, 48px);
    }
    .daily-deals-link {
        font-size: 16px;
    }
    .deals-grid {
        gap: 22px;
        scroll-padding-left: 22px;
    }
    .deals-grid .deal-card {
        flex-basis: 272px;
    }
    .deal-card-main {
        /* min-height: 232px; */
        padding: 12px 10px;
    }
    .deal-card-logo-wrap {
        min-height: 104px;
        margin: 10px 0;
    }
    .deal-card-logo-shine {
        width: 132px;
    }
    .deal-card-logo-keef {
        width: 124px;
    }
    .deal-card-offer {
        font-size: 28px;
        line-height: 28px;
    }
    .deal-card-brand {
        font-size: 20px;
    }
    .deal-card-description {
        font-size: 15px;
    }

    /* Header / Top bar */
    .top-bar .header-container,
    .promo-top-bar .header-container {
        flex-direction: column;
        gap: 6px;
        align-items: center;
        text-align: center;
    }
    .insider-text,
    .promo-text {
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 1.4;
        white-space: normal;
        text-align: center;
    }
    .logo img {
        width: 290px;
    }
    .header-right {
        justify-content: flex-end;
        margin-left: auto;
    }

    /* Hero */
    .btn-order,
    .cta-group .btn {
        width: 100%;
        max-width: 340px;
    }
    .old-hero-section {
        padding-bottom: 34px;
    }
    .old-hero-content {
        margin-top: -150px;
        padding-top: 70px;
    }
    .old-hero-title {
        font-size: clamp(40px, 12vw, 72px);
        white-space: normal;
        line-height: 0.9;
    }
    .hero-title.elevated {
        font-size: clamp(30px, 9vw, 56px);
        line-height: 0.9;
        margin-top: 10px;
    }
    .old-hero-subtitle {
        font-size: clamp(30px, 7vw, 50px);
        line-height: 1;
        margin-bottom: 20px;
    }
    .old-hero-description {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 24px;
    }
    .old-eyebrow {
        font-size: clamp(14px, 3.5vw, 20px);
        letter-spacing: 4px;
    }
    .old-cta-group {
        width: 100%;
        align-items: center;
        flex-direction: column;
    }

    /* Feeling */
    .feeling-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 34px;
    }
    .feeling-menu-link {
        margin-bottom: 0;
    }
    .feeling-card {
        flex-basis: 250px;
        max-width: 400px;
        min-height: 260px;
    }
    .feeling-title {
        font-size: clamp(32px, 9vw, 48px);
        line-height: 0.9;
    }
    .feeling-eyebrow {
        font-size: 12px;
    }

    /* District */
    .district-video-panel {
        min-height: 20px;
    }
    .district-mural-credit {
        left: 12px;
        bottom: 12px;
    }
    .district-headline-white,
    .district-headline-teal {
        font-size: clamp(36px, 10vw, 52px);
    }
    .district-tagline {
        font-size: clamp(16px, 3.5vw, 24px);
    }
    .district-built {
        font-size: 18px;
    }
    .district-cta {
        width: 100%;
        max-width: 320px;
    }

      .daily-deals-section .carousel-pagination {
        max-width: 250px;
        flex-wrap: wrap;
        gap: 14px 2px;
    }
    
    /* Rewards */
    .rewards-section {
        padding: 40px 0 40px;
    }
    .rewards-panel {
        gap: 28px;
        padding: 24px 18px;
        border-radius: 24px;
    }
    .rewards-eyebrow {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: 7px;
    }
    .rewards-title {
        font-size: clamp(32px, 10vw, 48px);
    }
    .rewards-description {
        margin-bottom: 28px;
        font-size: 15px;
    }
    .rewards-actions {
        flex-direction: column;
        margin-bottom: 32px;
    }
    .rewards-btn {
        width: 100%;
        font-size: 17px;
    }
    .rewards-stats {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .rewards-stat {
        gap: 14px;
    }
    .rewards-stat-value {
        font-size: clamp(32px, 8vw, 42px);
    }
    .rewards-stat-label {
        font-size: 14px;
    }
    .rewards-tier {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }
    .rewards-tier-badge {
        width: 78px;
        height: 78px;
    }
    .rewards-tier-name {
        font-size: 24px;
    }
    .rewards-tier-text {
        font-size: 15px;
    }
    .rewards-tier-points {
        grid-column: 2;
        line-height: 1.2;
        margin-top: 8px;
        font-size: 22px;
    }

    /* Footer */
    .footer-shell {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Category */
    .category-section {
        padding: 60px 0;
    }
    .category-shell {
        padding: 0 20px;
    }
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 30px;
    }
    .category-title {
        font-size: clamp(32px, 9vw, 48px);
        line-height: 0.9;
    }
    .category-eyebrow {
        font-size: 12px;
    }

    .locals-section {
        padding: 50px 0;
    }

    .rewards-shell {
        padding: 0 20px;
    }

    .footer-watermark-svg path {
        stroke-width: 4px !important;
    }

    .rewards-tier {
        justify-items: center;
        text-align: center;
    }

    .store-info-card {
        padding: 30px 30px;
    }
    .store-info-item {
        grid-template-columns: 70px 1fr;
    }
    .store-grid {
        grid-template-columns: 1fr;
    }
    .store-map-card {
        min-height: 300px;
        max-height: 300px;
    }
}

/* ── Viewports <= 480px ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  
    .header-container {
        padding: 0 16px;
    }

    .logo img {
        width: 230px;
    }

    /* Footer */
    .footer-pre {
        margin-bottom: 40px;
        padding-bottom: 16px;
    }
    .footer-pre-text {
        text-align: center;
        font-size: 12px;
    }
    .footer-warning-badge {
        font-size: 9.5px;
        padding: 6px 14px;
        letter-spacing: 1px;
    }
    .footer-bottom {
        padding: 0 20px;
        padding-top: 16px;
    }
    .footer-copy {
        font-size: 11px;
    }

    /* About & Why */
    .about-heritage-section {
        padding: 60px 0;
    }
    .about-heritage-shell {
        gap: 60px;
    }
    .about-tcc-image-wrapper {
        /* aspect-ratio: 1.1 / 1; */
    }
    .about-title {
        font-size: clamp(30px, 9vw, 42px);
    }
    .about-paragraphs p {
        font-size: 14px;
        line-height: 1.65;
    }
    .about-highlight-text {
        font-size: 14px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .why-card {
        padding: 32px 24px;
        height: auto;
        min-height: auto;
    }
    .why-title {
        font-size: clamp(30px, 9vw, 42px);
    }
    .why-subtitle {
        font-size: 14px;
    }

    /* Hero */
    .old-hero-title {
        font-size: clamp(36px, 11vw, 54px);
    }
    .hero-title.elevated {
        font-size: clamp(28px, 8.5vw, 44px);
    }
    .old-hero-subtitle {
        font-size: clamp(26px, 7vw, 40px);
    }
    .old-hero-description {
        font-size: 14px;
    }

    /* Section titles */
    .feeling-title {
        font-size: clamp(28px, 9vw, 40px);
        line-height: 0.9;
    }
    .locals-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .story-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .rewards-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .testimonials-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .category-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .daily-deals-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .store-title {
        font-size: clamp(28px, 9vw, 40px);
    }
    .district-headline-white,
    .district-headline-teal {
        font-size: clamp(30px, 9vw, 44px);
    }

    /* BTNs */
    .btn {
        font-size: 15px;
        padding: 15px 22px;
        letter-spacing: 1.5px;
    }

    /* Feeling card */
    .feeling-card {
        flex-basis: min(290px, calc(100vw - 60px));
        max-width: min(290px, calc(100vw - 60px));
        min-height: 240px;
    }

    /* Rewards */
    .rewards-stat-value {
        font-size: clamp(28px, 8vw, 38px);
    }

    /* Insider text */
    .insider-text,
    .promo-text {
        font-size: 12px;
        white-space: normal;
    }

    .rewards-actions-centered {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
}

/* ── Viewports <= 420px ────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    /* Logo */
    .logo img {
        width: 190px;
    }

    /* Hero */
    .old-hero-title {
        font-size: clamp(30px, 10vw, 42px);
    }
    .hero-title.elevated {
        font-size: clamp(24px, 8vw, 36px);
    }
    .old-hero-subtitle {
        font-size: clamp(22px, 7vw, 34px);
    }
    .old-eyebrow {
        font-size: clamp(11px, 3vw, 14px);
        letter-spacing: 2.5px;
        margin-bottom: 5px;
    }

    /* Section titles */
    .feeling-title {
        font-size: clamp(26px, 9vw, 36px);
        line-height: 1;
    }
    .locals-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .story-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .rewards-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .district-headline-white,
    .district-headline-teal,
    .district-tagline {
        font-size: clamp(26px, 8.5vw, 36px);
    }
    .category-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .daily-deals-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .testimonials-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .about-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .why-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .store-title {
        font-size: clamp(26px, 9vw, 36px);
    }

    /* Category card */
    .category-section .category-card {
        padding: 20px;
    }

    /* BTNs */
    .btn-order,
    .cta-group .btn,
    .district-cta {
        max-width: 100%;
    }

    /* Why cards */
    .why-card {
        max-width: 100%;
        padding: 24px 16px;
    }
    .why-card-title {
        font-size: 20px;
    }
    .why-card-desc {
        font-size: 13px;
    }

    /* Deals */
    .deals-grid {
        gap: 18px;
        scroll-padding-left: 22px;
    }
    .deal-card-main {
        min-height: 0;
        padding: 12px 12px 14px;
    }
    .deals-grid .deal-card {
        flex-basis: min(320px, calc(100vw - 82px));
    }
    .deal-card-brand {
        font-size: 19px;
    }
    .deal-card-description {
        font-size: 14px;
        line-height: 1.45;
    }
    .deal-card-offer {
        font-size: 24px;
    }

    /* Misc text */
    .insider-text,
    .promo-text {
        white-space: normal;
        text-align: center;
        font-size: 11px;
    }
    .old-eyebrow {
        letter-spacing: 1.5px;
        margin-bottom: 7px;
    }

    /* Feeling card */
    .feeling-card {
        flex-basis: min(320px, calc(100vw - 60px));
        max-width: min(320px, calc(100vw - 60px));
    }

    /* Rewards tier */
    .rewards-tier {
        grid-template-columns: 1fr;
    }
    .rewards-tier-badge,
    .rewards-tier-points {
        grid-column: auto;
    }
    .rewards-tier-badge {
        width: 72px;
        height: 72px;
    }
    .rewards-tier-points {
        margin-top: 2px;
    }

    /* Stat */
    .rewards-stat-value {
        font-size: clamp(24px, 7vw, 32px);
    }

    /* Locals body text */
    .locals-bullet-text {
        font-size: 13px;
    }
}

/* ── Viewports <= 360px ────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    /* Hero */
    .old-hero-title {
        font-size: clamp(26px, 9vw, 36px);
    }
    .hero-title.elevated {
        font-size: clamp(20px, 7.5vw, 30px);
    }
    .old-hero-subtitle {
        font-size: clamp(18px, 6.5vw, 28px);
    }
    .old-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    /* Section titles */
    .feeling-title,
    .locals-title,
    .story-title,
    .rewards-title,
    .category-title,
    .daily-deals-title,
    .testimonials-title,
    .about-title,
    .why-title,
    .store-title {
        font-size: clamp(22px, 8vw, 30px);
    }
    .district-headline-white,
    .district-headline-teal,
    .district-tagline {
        font-size: clamp(22px, 7.5vw, 30px);
    }

    /* Padding tightening */
    .category-shell,
    .daily-deals-shell,
    .locals-shell,
    .story-shell,
    .store-shell,
    .about-heritage-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
    .testimonials-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
    .rewards-panel {
        padding: 20px 14px;
        border-radius: 20px;
    }

    /* BTNs */
    .btn {
        font-size: 13px;
        padding: 13px 18px;
        letter-spacing: 1px;
    }

    /* Why cards */
    .why-card-title {
        font-size: 18px;
    }
    .why-card-desc {
        font-size: 12px;
    }

    /* Deals */
    .deals-grid .deal-card {
        flex-basis: min(290px, calc(100vw - 60px));
    }
    .deal-card-brand {
        font-size: 17px;
    }
}

/* ── Interaction (Hover) Media Queries ─────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .rewards-tier:not(.is-featured):hover {
        background: rgba(126, 237, 87, 0.06);
        border-color: #7eed57;
        opacity: 1;
        transform: translateY(-1px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 0 0 1px rgba(126, 237, 87, 0.18);
    }

    .rewards-tier:hover .rewards-tier-badge {
        background: rgba(126, 237, 87, 0.12);
    }

    .rewards-tier:hover .rewards-tier-name,
    .rewards-tier:hover .rewards-tier-text,
    .rewards-tier:hover .rewards-tier-points {
        opacity: 1;
    }
}

/* ==========================================================================
   NEW HERO RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1536px), (max-height: 850px) {
    .hero-section {
        padding-top: 90px;
        padding-bottom: 60px;
    }
    .hero-title {
        font-size: 110px;
        line-height: 95px;
        letter-spacing: 0.2px;
    }
    .hero-eyebrow,
    .hero-subtitle-desktop {
        font-size: 24px;
        line-height: 20px;
    }
    .hero-subtitle-freestyle {
        font-size: 105px;
    }
    /* .hero-eyebrow {
        margin-bottom: 12px;
    } */
    .hero-main-title-wrap {
        margin-bottom: 16px;
        gap: 15px;
    }
    .hero-description {
        font-size: 15px;
        margin-bottom: 24px;
    }
    .hero-cta-group .btn {
        padding: 15px 30px;
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 0; /* Remove top padding in vertical stack */
        padding-bottom: 60px;
    }

    .hero-section::before {
        background: linear-gradient(
            to top,
            #020202 0%,
            #020202 50%,
            rgba(2, 2, 2, 0.4) 75%,
            rgba(2, 2, 2, 0) 100%
        );
    }

    .hero-mural-wrap {
        position: relative;
        width: 150%;
        height: auto;
        aspect-ratio: 1616 / 735;
        order: 1; /* mural at the top */
        margin-left: 20px;
    }

    .hero-mural-aspect-container {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100% !important;
        height: auto !important;
        margin-bottom: -150px;
        aspect-ratio: 1616 / 735;
    }

    .hero-content {
        position: relative;
        order: 2; /* text at the bottom */
        padding: 40px 40px 0;
        align-items: center;
        text-align: center;
        margin-top: -150px;
    }

    .hero-eyebrow {
        align-self: center;
        align-items: center;
        font-size: 22px;
        line-height: 20px;
        margin-bottom: 16px;
    }

    .hero-main-title-wrap {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 16px;
        width: 100%;
    }

    .hero-title {
        font-size: 90px;
        line-height: 80px;
        align-self: center;
        text-align: center;
        margin-bottom: 16px;
    }

    /* Hide desktop subtitle on mobile */
    .hero-subtitle-desktop {
        display: none;
    }

    .hero-subtitle-freestyle {
        align-self: center;
        font-size: 85px;
        line-height: 0.85;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 24px;
    }

    .hero-description {
        font-size: 15px;
        line-height: 24px;
        text-align: center;
        max-width: 600px;
        margin-bottom: 32px;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 12px;
    }

    .hero-cta-group .btn {
        width: 100%;
        max-width: 320px;
        padding: 16px 24px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .hero-content {
        padding: 40px 20px 0;
        margin-top: -100px;
    }

    .hero-title {
        font-size: clamp(48px, 15vw, 80px);
        line-height: clamp(42px, 13vw, 70px);
        gap: 10px;
    }
    .hero-eyebrow {
        font-size: 18px;
        line-height: 16px;
    }
    .hero-subtitle-freestyle {
        font-size: clamp(40px, 12vw, 75px);
        line-height: 0.85;
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .hero-description {
        font-size: 14px;
        line-height: 22px;
    }
    .hero-section {
        padding-bottom: 40px;
    }
}