/* ── 1100px ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .container  { padding: 0 20px; }
}

/* ── 960px — tablet landscape ──────────────────────────── */
@media (max-width: 960px) {
    /* Layout grids */
    .hero-grid, .checkout-grid { grid-template-columns: 1fr; }
    .hero-visual  { display: none; }
    .hero-title   { font-size: 38px; }
    .hero-stats   { flex-wrap: wrap; }
    .hero-stat    { min-width: 50%; }
    .order-detail-grid { grid-template-columns: 1fr; }
    .form-row          { grid-template-columns: 1fr; }

    /* New pages */
    .story-grid,
    .about-story-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .gallery-grid    { columns: 2; column-gap: 14px; }
    .landing-title   { font-size: 46px; }
    .story-img-block { height: 300px; }
    .about-hero h1   { font-size: 36px; }

    /* Admin */
    .admin-tabs { flex-wrap: wrap; gap: 6px; }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 768px — tablet portrait ───────────────────────────── */
@media (max-width: 768px) {
    /* Navbar: show hamburger, hide links */
    .nav-links     { display: none !important; }
    .nav-hamburger { display: flex; }

    /* Drawer shown on mobile */
    .mobile-drawer { display: block; }

    /* Nav actions: keep view-cart visible, hide Order Now btn */
    .nav-actions .btn-primary { display: none; }

    /* Hero */
    .landing-title   { font-size: 40px; }
    .landing-subtitle { font-size: 15px; }
    .hero-band        { padding: 48px 0 100px; }
    .hero-title       { font-size: 34px; }
    .about-hero h1    { font-size: 30px; }
    .about-hero p     { font-size: 14px; }
    .about-hero-eyebrow { font-size: 11px; }

    /* Section headers */
    .section-title    { font-size: 28px; }
    .section-subtitle { font-size: 14px; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-image-wrap { height: 160px; }
    .product-name  { font-size: 15px; }
    .product-price { font-size: 19px; }
    .product-body  { padding: 14px 16px 14px; }

    /* Category tabs — horizontal scroll */
    .category-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
    .cat-tab { white-space: nowrap; flex-shrink: 0; }

    /* Cart sidebar full-width */
    .cart-sidebar { width: 100%; max-width: 100vw; border-left: none; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Checkout */
    .checkout-grid { gap: 24px; }

    /* Order confirmation */
    .confirmation-title { font-size: 28px; }

    /* Story section */
    .story-grid        { gap: 32px; }
    .story-img-block   { height: 240px; font-size: 80px; }
    .story-content h2  { font-size: 28px; }
    .story-highlights  { gap: 12px; }
    .story-highlight   { padding: 10px 14px; min-width: 120px; }

    /* Flavour grid */
    .flavour-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .flavour-card-img   { height: 140px; }

    /* About story */
    .about-story-grid { gap: 28px; }
    .about-story-img  { aspect-ratio: 16/9; }
    .about-story-content h2 { font-size: 26px; }

    /* Gallery */
    .gallery-grid   { columns: 2; column-gap: 12px; }
    .gallery-item   { margin-bottom: 12px; }

    /* Footer */
    .footer-top    { grid-template-columns: 1fr; gap: 24px; }
    .footer-brand p { max-width: 100%; }
    .footer-bottom-bar { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* CTA section */
    .landing-cta-section h2 { font-size: 28px; }
    .landing-cta-section p  { font-size: 14px; }

    /* Social buttons */
    .social-buttons-grid  { flex-direction: column; align-items: stretch; }
    .social-btn           { justify-content: center; }

    /* Map */
    .map-container { height: 280px; }

    /* Admin */
    .admin-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .admin-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .form-row { grid-template-columns: 1fr; }
}

/* ── 640px — large phone landscape ────────────────────── */
@media (max-width: 640px) {
    /* Container tighter */
    .container { padding: 0 16px; }

    /* Navbar */
    .logo { font-size: 20px; }

    /* Hero */
    .landing-hero  { padding: 60px 0 90px; }
    .landing-title { font-size: 32px; line-height: 1.12; }
    .landing-cta-group { flex-direction: column; align-items: center; gap: 12px; }
    .landing-cta-group .btn-hero-primary,
    .landing-cta-group .btn-hero-secondary { width: 100%; max-width: 320px; justify-content: center; }

    /* Products: still 2 cols but tighter */
    .products-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-image-wrap { height: 140px; }
    .product-body    { padding: 12px 12px 10px; }
    .product-name    { font-size: 14px; }
    .product-desc    { font-size: 12px; margin-bottom: 10px; }
    .product-price   { font-size: 17px; }
    .btn-add-cart    { width: 34px; height: 34px; font-size: 14px; }

    /* Flavours */
    .flavour-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Checkout form */
    .section-card { padding: 20px 18px; }
    .order-summary-item { gap: 10px; }

    /* Stats strip */
    .hero-stats { gap: 0; }
    .hero-stat  { min-width: 50%; padding: 18px 12px; }
    .hero-stat-value { font-size: 26px; }

    /* Sections */
    .flavours-section,
    .story-section,
    .gallery-page,
    .about-story-section,
    .contact-map-section,
    .social-links-section { padding: 48px 0; }

    /* Gallery */
    .gallery-page { padding: 32px 0 60px; }

    /* Confirmation */
    .confirmation-title { font-size: 26px; }
    .order-code-value   { font-size: 26px; letter-spacing: 2px; }

    /* Login */
    .login-card { padding: 32px 24px; }

    /* Admin form full-width product grid */
    .admin-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card  { padding: 18px 16px; }

    /* Admin table — horizontal scroll always */
    .data-table { min-width: 600px; }

    /* About section titles */
    .about-hero h1 { font-size: 26px; }
}

/* ── 480px — phone portrait ────────────────────────────── */
@media (max-width: 480px) {
    /* Products: 1 column */
    .products-grid       { grid-template-columns: 1fr; gap: 14px; }
    .product-image-wrap  { height: 200px; }
    .product-body        { padding: 16px 18px 14px; }
    .product-name        { font-size: 16px; }
    .product-price       { font-size: 20px; }
    .btn-add-cart        { width: 38px; height: 38px; }

    /* Flavours: 1 col */
    .flavour-cards-grid  { grid-template-columns: 1fr; }

    /* Gallery: 1 col */
    .gallery-grid        { columns: 1; }

    /* Landing hero */
    .landing-title       { font-size: 28px; }
    .landing-subtitle    { font-size: 14px; }

    /* Stats: 2 cols still but smaller */
    .hero-stat-value     { font-size: 24px; }
    .hero-stat-label     { font-size: 11px; }

    /* Checkout sticky no longer sticky on small */
    .checkout-grid > div:last-child .glass-panel { position: static; }

    /* Section headers */
    .section-title { font-size: 24px; }

    /* Admin gallery: 2 col */
    .admin-gallery-grid  { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-social { gap: 8px; }
    .footer-social a { width: 32px; height: 32px; font-size: 13px; }
}

/* ── 380px — small phone ─────────────────────────────── */
@media (max-width: 380px) {
    .container       { padding: 0 12px; }
    .logo            { font-size: 18px; }
    .landing-title   { font-size: 26px; }
    .hero-title      { font-size: 26px; }
    .section-title   { font-size: 22px; }
    .products-grid   { gap: 10px; }
    .flavour-cards-grid { grid-template-columns: 1fr; }
    .stats-grid      { grid-template-columns: 1fr 1fr; }
    .stat-card       { padding: 14px 12px; }
    .stat-value      { font-size: 26px; }
    .nav-hamburger   { width: 38px; height: 38px; }
    .admin-gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Touch: prevent 300ms tap delay ───────────────────── */
a, button { touch-action: manipulation; }

/*
   NOTE: The @supports env(safe-area-inset-bottom) block has been
   removed. Most modern browsers (Chrome, Firefox, desktop Safari)
   pass that @supports check even on non-iPhone devices, which caused
   unwanted extra padding everywhere. iPhone notch safe-area padding
   is handled instead by the viewport-fit=cover meta tag below if needed.
*/

/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL – Mobile Responsive Styles
   ══════════════════════════════════════════════════════════ */

/* Product form: 2-col → 1-col on tablet/mobile */
@media (max-width: 900px) {
    .product-form-grid {
        grid-template-columns: 1fr !important;
    }
    .product-form-grid > div:last-child {
        position: static !important;
    }
}

/* Admin: table-wrapper always scrollable */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Admin panel main layout responsive */
@media (max-width: 768px) {
    /* Stats grid: 2 cols on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Admin tabs: horizontal scroll */
    .admin-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 6px;
        scrollbar-width: none;
        gap: 4px !important;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* Admin glass panel padding */
    .glass-panel { padding: 16px !important; }

    /* Admin data table min-width for scrolling */
    .data-table { min-width: 700px; }

    /* Admin page header */
    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Admin nav links: hide on mobile, show hamburger */
    .admin-nav-links { display: none !important; }

    /* Form sections full width */
    .form-section { padding: 16px !important; }

    /* Order detail grid */
    .order-detail-grid { grid-template-columns: 1fr !important; }

    /* Variant rows wrap */
    .variant-row { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
    /* Stats: 1 col on small phone */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stat-card { padding: 14px 12px !important; }
    .stat-value { font-size: 26px !important; }

    /* Data table even smaller min-width */
    .data-table { min-width: 580px; }

    /* Admin glass panel minimal padding */
    .glass-panel { padding: 12px !important; }

    /* Filter/sort bars wrap */
    .filter-sort-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Buttons in admin: full width */
    .admin-action-bar {
        flex-direction: column;
        gap: 8px;
    }
}


/* ── iOS Safari 100vh fix for cart sidebar ────────────────── */
.cart-sidebar {
    height: 100vh;
    height: 100dvh; /* dynamic viewport height — fixes iOS Safari address bar */
}

/* Cart footer always visible — safe area for iPhone home indicator */
@media (max-width: 768px) {
    .cart-footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    /* Ensure cart items don't overflow and hide footer */
    .cart-sidebar {
        display: flex;
        flex-direction: column;
    }

    .cart-items {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cart-footer {
        flex-shrink: 0; /* never shrink — always visible */
    }
}