/* ================================================
   FlavorQuest — Mobile Responsiveness & PWA Layer
   ================================================
   Created: 2026-04-02
   Purpose: Solves 4 classic mobile web traps + safe area insets
   ================================================ */

/* ─────────────────────────────────────────────────
   1. VIEWPORT HEIGHT — iOS Safari 100vh Fix
   Uses progressive enhancement: dvh → fill-available → vh
   ───────────────────────────────────────────────── */
:root {
    --vh-full: 100vh; /* Fallback for all browsers */
}

@supports (height: 100dvh) {
    :root {
        --vh-full: 100dvh;
    }
}

/* iOS Safari < 15.4 fallback */
@supports (-webkit-touch-callout: none) and (not (height: 100dvh)) {
    :root {
        --vh-full: -webkit-fill-available;
    }
}

/* ─────────────────────────────────────────────────
   2. HOVER TRAP — Pointer-device-only hover effects
   Wraps all :hover transforms so touches don't "stick"
   ───────────────────────────────────────────────── */

/* Default: no hover effects (mobile-first) */
.card-hover,
.gallery-card,
.recipe-card-shadow,
.btn-magnetic {
    /* Base transition is always present for smooth feel */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Only apply hover lifts on devices with a fine pointer (mouse/trackpad) */
@media (hover: hover) and (pointer: fine) {
    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
    }

    .dark .card-hover:hover {
        box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    }

    .gallery-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }

    .recipe-card-shadow:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .btn-magnetic:hover {
        transform: scale(1.02);
    }

    /* data-tip tooltip — only on hover devices */
    [data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: #1e293b;
        color: white;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
        z-index: 99;
        pointer-events: none;
        animation: tooltipIn 0.15s ease-out;
    }

    /* Streak tooltip — only on pointer devices */
    .streak-indicator:hover .streak-tooltip {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Register page option cards & allergen chips */
    .option-card:hover {
        border-color: #D97706;
        box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
    }

    .allergen-chip:hover {
        border-color: #D97706;
    }
}

/* Touch-activated tooltip (toggled via JS) */
.streak-indicator.tooltip-active .streak-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Touch-activated data-tip tooltip */
[data-tip].tooltip-active::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 99;
    pointer-events: none;
    animation: tooltipIn 0.15s ease-out;
}

/* ─────────────────────────────────────────────────
   3. INPUT ZOOM — Prevent iOS Safari auto-zoom
   iOS zooms when input font-size < 16px
   ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────────────
   4. i18n HORIZONTAL OVERFLOW — Multi-language safety
   Prevents horizontal scroll from long German/Arabic strings
   ───────────────────────────────────────────────── */

/* Layer 1: Body-level overflow guard */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Layer 2: Safe word-breaking for all text elements */
h1, h2, h3, h4, h5, h6,
p, span, a, button, label,
li, td, th, figcaption {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Layer 3: Text truncation utility classes */
.text-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────
   5. SAFE AREA INSETS — Notched phones & PWA
   Handles iPhone notch, home indicator, and
   landscape safe areas for true native feel
   ───────────────────────────────────────────────── */

/* Ensure viewport-fit=cover is respected */
@supports (padding: env(safe-area-inset-top)) {
    /* Sticky nav: respect top safe area (notch in landscape) */
    nav.glass-nav,
    .glass-nav {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    /* Footer: respect bottom safe area (home indicator) */
    footer {
        padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
    }

    /* Full-height pages: bottom safe area for cooking mode */
    .cook-main,
    .fullscreen-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Landscape safe areas (left/right for rotated iPhones) */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Mobile menu: respect safe areas */
    #mobile-menu {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ─────────────────────────────────────────────────
   6. MOBILE-SPECIFIC LAYOUT FIXES
   ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hide desktop nav actions on mobile — hamburger menu provides these */
    #search-btn,
    #planner-nav-wrap,
    #nav-support-btn,
    nav button[onclick="toggleDarkMode()"],
    nav button[onclick*="favourites"],
    nav button[onclick*="my-favourites"],
    #lang-selector-header,
    #auth-nav-widget,
    #xp-nav-widget {
        display: none !important;
    }

    /* Also hide the favourites button (no ID, matched by aria-label) */
    nav button[aria-label="My Favourites"] {
        display: none !important;
    }

    /* Hide the support/help button by various selectors */
    nav a[aria-label*="Support"],
    nav a[aria-label*="Help"],
    nav button[aria-label*="Support"],
    nav button[aria-label*="Help"],
    nav a[href*="support"],
    nav .relative > a[title*="Support"],
    nav .relative > a[title*="Help"] {
        display: none !important;
    }

    /* Ensure nav buttons container doesn't overflow */
    nav .flex.items-center.gap-4 {
        gap: 0.375rem;
        flex-wrap: nowrap;
    }

    /* Shrink XP widget text on small screens */
    #xp-nav-widget .text-xs,
    #xp-nav-widget .text-\[10px\] {
        font-size: 9px;
    }

    /* Hero section: reduce height for mobile */
    section.relative.h-\[600px\] {
        height: 400px;
    }

    /* Gallery cards: ensure proper touch scrolling */
    .gallery-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 1rem;
    }

    /* Diet plans grid: stack on small screens */
    #diet-plans-preview {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gamification section: reduce padding */
    section[aria-label="Gamification Profile"] .p-12 {
        padding: 1.5rem;
    }

    /* Gamification CTA: stack vertically */
    section[aria-label="Gamification Profile"] .flex.items-center.gap-6 {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Footer: stack columns */
    footer .grid {
        gap: 2rem;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 374px) {
    /* Hide XP progress bar details */
    #xp-nav-widget .hidden.sm\:block {
        display: none !important;
    }

    /* Further reduce hero */
    section.relative.h-\[600px\] {
        height: 320px;
    }

    section.relative.h-\[600px\] h1 {
        font-size: 2rem;
    }
}

/* ─────────────────────────────────────────────────
   7. PAGE-SPECIFIC: COOKING PAGE (cooking.html)
   COMPLETE MOBILE REDESIGN — minimal header, single
   column, fixed RTL buttons, compact footer
   ───────────────────────────────────────────────── */

/* Fix .cook-main height — uses --vh-full instead of 100vh */
.cook-main {
    height: calc(var(--vh-full) - 56px);
}

@media (max-width: 767px) {
    /* ── HEADER: Strip to recipe name + exit button ── */
    /* Hide logo + brand name (cooking only) */
    #cook-brand {
        display: none !important;
    }

    /* Hide desktop XP/level display */
    #cook-xp-desktop {
        display: none !important;
    }

    /* Hide dark mode toggle in cooking mode */
    #cook-darkmode {
        display: none !important;
    }

    /* Recipe name: un-center, make it flow naturally */
    #cook-name-wrap {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        text-align: start;
        flex: 1;
        min-width: 0;
    }

    #cook-recipe-name {
        font-size: 0.8125rem !important;
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.3;
    }

    #cook-step-indicator {
        font-size: 0.6875rem;
    }

    /* Exit button: compact */
    #cook-exit-btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem;
    }

    #cook-exit-btn span:first-child {
        font-size: 1rem;
    }

    /* Reduce header padding (cooking only) */
    .page-cooking header {
        padding: 0.375rem 0.75rem !important;
    }

    /* ── LAYOUT: Force single-column ── */
    .cook-main {
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(var(--vh-full) - 48px);
        overflow: visible !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    .cook-main > section,
    .cook-main > aside {
        width: 100% !important;
    }

    /* ── Step instruction: readable font ── */
    #cook-instruction {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }

    /* ── Step card: reduce padding ── */
    .cook-main > section > div {
        padding: 1rem !important;
    }

    /* ── Active Task label: smaller ── */
    .cook-main .font-bold.uppercase.tracking-widest.text-xs {
        font-size: 0.625rem;
    }

    /* ── Step image: reasonable height ── */
    #cook-step-image {
        max-height: 160px !important;
    }

    /* ── Timer: compact on mobile ── */
    #cook-timer-display {
        font-size: 2rem !important;
    }

    #cook-timer-btn {
        padding: 0.625rem !important;
    }

    #cook-timer-label {
        font-size: 0.625rem !important;
    }

    /* Timer glow: reduce */
    #cook-timer-block .absolute.-inset-1 {
        display: none;
    }

    /* ── Prev/Next buttons: fix RTL wrapping ── */
    #cook-prev-btn,
    #cook-next-btn {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
        gap: 0.25rem !important;
        min-width: 0 !important;
    }

    /* Icon inside buttons: don't shrink */
    #cook-prev-btn .material-symbols-outlined,
    #cook-next-btn .material-symbols-outlined {
        font-size: 1rem !important;
        flex-shrink: 0;
    }

    /* Button text: don't wrap */
    #cook-prev-btn span[data-i18n],
    #cook-next-btn span[data-i18n] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }

    /* ── Ingredients sidebar: full width, dense ── */
    .cook-tab {
        font-size: 0.6875rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* Ingredient rows: denser for mobile */
    .ing-row {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.8125rem !important;
        gap: 0.25rem !important;
    }

    .ing-row input[type='checkbox'] {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Tip text: smaller */
    #cook-tip {
        font-size: 0.75rem !important;
    }

    /* ── FOOTER: Completely re-layout for mobile ── */
    footer .max-w-\[1440px\] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.375rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* XP badge: inline pill, not floating */
    #cook-xp-badge-wrap {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 auto 0.25rem !important;
    }

    .xp-glow {
        padding: 0.125rem 0.5rem !important;
        font-size: 0.6875rem !important;
        gap: 0.25rem !important;
    }

    .xp-glow .material-symbols-outlined {
        font-size: 0.875rem !important;
    }

    /* Progress text: compact single row */
    footer .flex.items-center.gap-4 {
        gap: 0.375rem !important;
    }

    footer [data-i18n="cooking.globalProgress"] {
        font-size: 0.6875rem !important;
    }

    #cook-progress-pct {
        font-size: 0.625rem !important;
        padding: 0.125rem 0.375rem !important;
    }

    #cook-time-remaining {
        font-size: 0.6875rem !important;
        white-space: nowrap;
    }

    /* Progress bar: thinner */
    footer .h-2 {
        height: 3px;
    }

    /* Completion overlay: mobile optimized */
    #cook-complete-overlay > div {
        padding: 1.5rem !important;
        max-width: 100% !important;
        margin: 0 0.5rem;
    }

    #cook-complete-overlay h2 {
        font-size: 1.5rem !important;
    }

    #cook-complete-overlay button {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* ─────────────────────────────────────────────────
   8. PAGE-SPECIFIC: EXPLORE PAGE (explore.html)
   Fixes sidebar 100vh, collapses filter sidebar on
   mobile, optimizes search bar and result cards
   ───────────────────────────────────────────────── */

/* Fix explore sidebar max-height — use --vh-full */
.explore-sidebar {
    max-height: calc(var(--vh-full) - 7rem);
}

@media (max-width: 767px) {
    /* Collapse sidebar: show below results on mobile */
    .explore-sidebar {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Explore hero: reduce padding and text on mobile */
    section.mb-8.rounded-3xl {
        padding: 1.5rem;
    }

    section.mb-8.rounded-3xl h1 {
        font-size: 1.75rem;
    }

    section.mb-8.rounded-3xl p {
        font-size: 0.9375rem;
    }

    /* Search bar: reduce vertical padding on mobile */
    #explore-search-input {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        font-size: 1rem;
    }

    /* Filter grid: single column on mobile */
    #explore-mood-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Result cards: single column on mobile */
    .explore-result-card {
        width: 100%;
    }

    /* Fridge input section: reduce padding */
    [class*="bg-amber-50"] {
        padding: 1rem;
    }
}

/* ─────────────────────────────────────────────────
   9. PAGE-SPECIFIC: KITCHEN PAGE (kitchen.html)
   Badge text-clamp, profile hero stacking,
   planner grid responsiveness, stats cards
   ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Badge grid: titles must clamp to prevent overflow */
    #badges-grid .badge-card h3,
    #badges-grid .badge-card .font-bold,
    #badges-grid .badge-card [class*="font-bold"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Badge grid: descriptions clamp to 2 lines */
    #badges-grid .badge-card p,
    #badges-grid .badge-card .text-xs {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Profile hero: stack avatar + info vertically */
    [class*="rounded-2xl"][class*="p-8"] {
        padding: 1.25rem;
    }

    /* Stats cards: 2-column grid on mobile */
    .flex.flex-wrap.gap-4.mt-6 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        width: 100%;
    }

    .flex.flex-wrap.gap-4.mt-6 > div {
        min-width: unset !important;
    }

    /* Planner grid: 2 columns on mobile */
    #planner-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Daily quests grid: single column on mobile */
    #daily-quests-list {
        grid-template-columns: 1fr !important;
    }

    /* Kitchen 3-column layout: stack on mobile */
    .grid.grid-cols-1[class*="grid-cols-3"] {
        gap: 1.5rem;
    }

    /* Saved recipes grid: single column on mobile */
    #saved-list {
        grid-template-columns: 1fr !important;
    }

    /* XP progress section: reduce padding */
    [class*="rounded-2xl"][class*="p-6"][class*="mb-8"] {
        padding: 1rem;
    }

    /* Sync banner: stack on mobile */
    #sync-banner .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ─────────────────────────────────────────────────
   10. PAGE-SPECIFIC: REGISTER PAGE (register.html)
   Form spacing, option card grid, step-wizard
   optimizations for mobile
   ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Registration wizard: reduce padding on mobile */
    .flex-1.overflow-y-auto.custom-scrollbar {
        padding: 1rem !important;
    }

    /* Option cards (diet selection): 2-column grid */
    .grid.grid-cols-2[class*="grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    /* Allergen chips: ensure proper wrapping */
    .flex.flex-wrap.gap-2 {
        gap: 0.375rem;
    }

    /* Step panel headings: smaller on mobile */
    .step-panel h2 {
        font-size: 1.375rem;
    }

    .step-panel p {
        font-size: 0.875rem;
    }

    /* Progress dots: slightly smaller */
    .step-dot {
        width: 0.625rem;
        height: 0.625rem;
    }

    /* Social login buttons: stack on very small */
    .flex.gap-3 button {
        font-size: 0.8125rem;
    }
}

/* ─────────────────────────────────────────────────
   11. TOUCH INTERACTION ENHANCEMENTS
   ───────────────────────────────────────────────── */

/* Active state feedback for touch (replaces hover) */
@media (hover: none) {
    .card-hover:active,
    .gallery-card:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    .btn-magnetic:active {
        transform: scale(0.97);
        transition-duration: 0.1s;
    }

    /* Increase touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exception: inline text links don't need large targets */
    p a, span a, li a,
    footer a {
        min-height: auto;
        min-width: auto;
    }
}

/* ─────────────────────────────────────────────────
   12. PAGE-SPECIFIC: RECIPE DETAIL (recipe.html)
   Hero compaction, title scaling, nutrition grid,
   snap-scroll related recipes
   ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Hero image: reduce height from 400px to 220px */
    .h-\[400px\] {
        height: 220px !important;
    }

    /* Recipe info panel: compact padding */
    .grid.grid-cols-1 > div.p-8,
    [class*="p-8"][class*="rounded-b"] {
        padding: 1.25rem !important;
    }

    /* Recipe title: scale down 4xl → 1.5rem */
    .text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    /* Cuisine tag text: smaller */
    .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Meta grid (prep/cook/servings): tighter */
    #recipe-meta {
        gap: 0.75rem !important;
        padding: 0.75rem 0 !important;
    }

    #recipe-meta .text-sm {
        font-size: 0.75rem;
    }

    #recipe-meta .text-2xl {
        font-size: 1rem !important;
    }

    /* Tags: smaller pills */
    #recipe-tags span,
    #recipe-tags a {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* CTA buttons: slightly shorter, full width stack */
    #start-cooking-btn,
    #save-recipe-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Nutrition grid: 2 columns with compact style */
    #recipe-nutrition {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    #recipe-nutrition > div {
        padding: 0.625rem !important;
    }

    /* Ingredients list: tighter spacing */
    #recipe-ingredients li {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.875rem;
    }

    /* Step cards: compact */
    #recipe-steps [class*="flex"][class*="gap-6"] {
        gap: 0.5rem !important;
    }

    /* Step number circle: smaller */
    #recipe-steps .w-12 {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.6875rem !important;
    }

    #recipe-steps .h-12 {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.6875rem !important;
    }

    /* Step card padding: reduce */
    #recipe-steps .p-6 {
        padding: 0.75rem !important;
    }

    /* Step instruction text: readable */
    #recipe-steps .text-stone-700,
    #recipe-steps .dark\:text-stone-300 {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }

    /* Related recipes: snap-scroll horizontal carousel */
    #related-recipes {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.75rem !important;
        padding-bottom: 0.75rem;
    }

    #related-recipes > * {
        min-width: 260px !important;
        max-width: 280px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Hide scrollbar for cleaner look */
    #related-recipes::-webkit-scrollbar {
        display: none;
    }
    #related-recipes {
        scrollbar-width: none;
    }

    /* Section headings: smaller on mobile */
    main h2.text-3xl {
        font-size: 1.375rem !important;
    }

    main h3.text-2xl {
        font-size: 1.125rem !important;
    }

    /* Section padding: tighter */
    main > .max-w-4xl,
    main > .max-w-6xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Footer: compact grid on recipe page */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    footer .pt-16 {
        padding-top: 2rem !important;
    }

    footer .pb-8 {
        padding-bottom: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────
   13. PAGE-SPECIFIC: DIET DETAIL (diet-detail.html)
   Calendar grid, hero height, and mobile compaction
   ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Hero: reduce min-height */
    .hero-editorial {
        min-height: 350px !important;
    }

    /* Calendar section: reduce padding */
    section.py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Snack cards: single column */
    .snack-card {
        width: 100% !important;
    }

    /* Medical disclaimer: compact */
    .max-w-4xl.mx-auto.px-6.my-12 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}