/* ============================================================
   STOREFRONT — PHONE  (≤ 767px)
   Single-handed thumb-zone layout. Bottom nav prominent.
   2-col product grid, full-screen cart, bottom-sheet detail.
   ============================================================ */

@media (max-width: 767px) {

    /* ── Body padding for bottom nav ────────────────────────── */
    body.storefront.has-bottom-nav {
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom));
    }

    /* ── Header ─────────────────────────────────────────────── */
    .sf-header {
        position: sticky;
        top: 0;
        z-index: 100;
        height: var(--sf-header-height);
        background: rgba(250,249,247,0.92);
        border-bottom: 1px solid var(--sf-border);
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .sf-header-logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: var(--sf-shadow-sm);
    }

    .sf-header-title {
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
        letter-spacing: -0.1px;
    }

    .sf-header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
    }

    .sf-header-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        color: var(--sf-text);
        font-size: 19px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        transition: var(--sf-transition);
        -webkit-tap-highlight-color: transparent;
    }
    .sf-header-btn:hover  { background: var(--sf-bg-secondary); }
    .sf-header-btn:active { background: var(--sf-border); transform: scale(0.94); }

    /* ── Bottom navigation ──────────────────────────────────── */
    .sf-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom));
        padding-bottom: var(--sf-safe-bottom);
        background: rgba(250,249,247,0.95);
        border-top: 1px solid var(--sf-border);
        display: flex;
        z-index: 100;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .sf-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: none;
        color: var(--sf-text-muted);
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        position: relative;
        transition: color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0.2px;
    }
    .sf-nav-item i        { font-size: 22px; line-height: 1; }
    .sf-nav-item.active   { color: var(--sf-accent); }
    .sf-nav-item:active   { transform: scale(0.92); }

    /* ── Hero ───────────────────────────────────────────────── */
    .sf-hero-full {
        position: relative;
        width: 100%;
        min-height: 440px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-size: cover;
        background-position: center;
        color: #fff;
        overflow: hidden;
    }

    .sf-hero-full::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.35) 40%,
            rgba(0,0,0,.82) 100%);
        z-index: 1;
    }

    .sf-hero-full-inner {
        position: relative;
        z-index: 2;
        padding: 28px 20px 36px;
        max-width: 100%;
    }

    .sf-hero-full-logo {
        width: 72px;
        height: 72px;
        border-radius: 18px;
        object-fit: cover;
        margin-bottom: 18px;
        box-shadow: 0 6px 28px rgba(0,0,0,.45);
        border: 2px solid rgba(255,255,255,.22);
        display: block;
    }

    .sf-hero-full h1 {
        font-size: 30px;
        font-weight: 800;
        margin: 0 0 8px;
        line-height: 1.12;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 16px rgba(0,0,0,.35);
    }

    .sf-hero-subtitle {
        font-size: 15px;
        opacity: .88;
        margin: 0 0 22px;
        line-height: 1.5;
        text-shadow: 0 1px 6px rgba(0,0,0,.25);
        font-weight: 400;
    }

    .sf-hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 24px;
    }

    .sf-hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        letter-spacing: 0.2px;
    }
    .sf-hero-chip i { font-size: 13px; }

    .sf-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

    .sf-hero-order-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 15px 28px;
        background: var(--sf-accent-gradient);
        color: #fff;
        border: none;
        border-radius: var(--sf-radius);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--sf-transition);
        box-shadow: 0 6px 24px rgba(255,107,53,.40);
        font-family: inherit;
        letter-spacing: -0.1px;
        -webkit-tap-highlight-color: transparent;
    }
    .sf-hero-order-btn:active { transform: scale(0.97); opacity: .92; }

    /* ── Info strip (scroll-x cards) ────────────────────────── */
    .sf-info-strip {
        display: flex;
        gap: 10px;
        padding: 14px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        background: var(--sf-surface);
        border-bottom: 1px solid var(--sf-border-light);
    }
    .sf-info-strip::-webkit-scrollbar { display: none; }

    .sf-info-card {
        flex-shrink: 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        background: var(--sf-bg);
        border-radius: var(--sf-radius-sm);
        min-width: 130px;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--sf-border-light);
        transition: var(--sf-transition);
    }
    .sf-info-card:active { transform: scale(0.97); }
    .sf-info-card > i {
        font-size: 18px;
        color: var(--sf-accent);
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* ── Featured carousel ──────────────────────────────────── */
    .sf-featured-section {
        padding: 22px 0 26px;
        background: var(--sf-surface);
        border-bottom: 8px solid var(--sf-bg-secondary);
    }

    .sf-featured-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 14px;
    }

    .sf-featured-title {
        font-size: 17px;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--sf-text);
        letter-spacing: -0.2px;
    }

    .sf-featured-see-all {
        font-size: 13px;
        color: var(--sf-accent);
        background: none;
        border: none;
        cursor: pointer;
        font-weight: 600;
        padding: 0;
        font-family: inherit;
    }

    .sf-featured-row {
        display: flex;
        gap: 12px;
        padding: 4px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sf-featured-row::-webkit-scrollbar { display: none; }

    .sf-featured-card {
        flex-shrink: 0;
        width: 162px;
        background: var(--sf-surface);
        border-radius: var(--sf-radius);
        overflow: hidden;
        box-shadow: var(--sf-shadow);
        border: 1px solid var(--sf-border-light);
        cursor: pointer;
        transition: var(--sf-transition);
        -webkit-tap-highlight-color: transparent;
    }
    .sf-featured-card:active { transform: scale(0.97); }

    .sf-featured-img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
        background: var(--sf-bg-secondary);
    }

    .sf-featured-img-placeholder {
        width: 100%;
        height: 120px;
        background: linear-gradient(135deg, var(--sf-bg-secondary), var(--sf-border-light));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sf-text-muted);
        font-size: 30px;
    }

    .sf-featured-card-body  { padding: 10px 12px 12px; }
    .sf-featured-card-name {
        font-size: 13px;
        font-weight: 600;
        margin: 0 0 5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--sf-text);
    }
    .sf-featured-card-name-sub {
        font-size: 11px;
        font-weight: 500;
        margin: -3px 0 5px;
        line-height: 1.25;
        color: var(--sf-text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sf-featured-card-price { font-size: 14px; font-weight: 700; color: var(--sf-accent); }

    /* ── Hours / landing browse ─────────────────────────────── */
    .sf-hours-section {
        padding: 22px 16px 26px;
        background: var(--sf-surface);
        border-bottom: 8px solid var(--sf-bg-secondary);
    }
    .sf-hours-title {
        font-size: 17px;
        font-weight: 800;
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: -0.2px;
    }

    .sf-landing-browse {
        padding: 22px 16px 32px;
        background: var(--sf-surface);
    }

    /* ── Menu body (single column on phone) ─────────────────── */
    .sf-menu-body {
        display: block;
        min-height: calc(100vh - var(--sf-header-height));
    }

    /* ── Category pills (horizontal scroll, sticky) ─────────── */
    .sf-categories {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 12px 14px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        background: var(--sf-surface);
        border-bottom: 1px solid var(--sf-border-light);
        position: sticky;
        top: var(--sf-header-height);
        z-index: 90;
    }
    .sf-categories::-webkit-scrollbar { display: none; }

    .sf-category-pill {
        flex-shrink: 0;
        padding: 8px 16px;
        border-radius: 22px;
        border: 1.5px solid var(--sf-border);
        background: var(--sf-surface);
        color: var(--sf-text-secondary);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--sf-transition);
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0.1px;
    }
    .sf-category-pill.active {
        background: var(--sf-accent);
        color: #fff;
        border-color: var(--sf-accent);
        box-shadow: 0 3px 10px rgba(255,107,53,.30);
    }
    .sf-category-pill:active { transform: scale(0.95); }

    /* Sidebar + cart panel hidden on phone */
    .sf-cat-sidebar { display: none; }
    .sf-cart-panel  { display: none; }

    /* ── Product grid: 2 cols ───────────────────────────────── */
    .sf-product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 14px;
        background: var(--sf-bg);
    }

    /* ── Product card ───────────────────────────────────────── */
    .sf-product-card {
        background: var(--sf-surface);
        border-radius: var(--sf-radius);
        overflow: hidden;
        box-shadow: var(--sf-shadow-sm);
        cursor: pointer;
        transition: var(--sf-transition);
        border: 1px solid var(--sf-border-light);
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .sf-product-card:active { transform: scale(0.97); }

    .sf-product-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--sf-bg-secondary);
    }
    .sf-product-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sf-product-img-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--sf-bg-secondary) 0%, var(--sf-border-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sf-text-muted);
        font-size: 28px;
    }

    .sf-product-ribbon {
        position: absolute;
        top: 10px;
        left: 10px;
        background: var(--sf-accent);
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 5px;
        letter-spacing: .6px;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(255,107,53,.45);
        z-index: 2;
    }

    .sf-product-add-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--sf-accent);
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(255,107,53,.45);
        transition: var(--sf-transition);
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
    }
    .sf-product-add-btn:active { transform: scale(0.92); }
    .sf-product-add-btn.added  { background: #059669; }

    .sf-product-info { padding: 11px 12px 13px; }

    .sf-product-cat-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 6px;
        margin-bottom: 5px;
        background: var(--sf-bg-secondary);
        color: var(--sf-text-muted);
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    .sf-product-name {
        font-size: 13px;
        font-weight: 700;
        margin: 0 0 3px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--sf-text);
        letter-spacing: -0.1px;
    }

    .sf-product-name-sub {
        font-size: 11px;
        font-weight: 500;
        margin: -1px 0 4px;
        line-height: 1.3;
        color: var(--sf-text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sf-product-desc {
        font-size: 11px;
        color: var(--sf-text-muted);
        margin: 0 0 7px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .sf-product-price {
        font-size: 15px;
        font-weight: 800;
        color: var(--sf-accent);
        letter-spacing: -0.2px;
    }

    /* ── Product detail bottom sheet ────────────────────────── */
    .sf-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92vh;
        max-height: 92dvh;
        background: var(--sf-surface);
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 201;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .sf-bottom-sheet.open { transform: translateY(0); }

    .sf-sheet-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sf-sheet-img-wrap {
        position: relative;
        width: 100%;
        background: var(--sf-bg-secondary);
        max-height: 260px;
        overflow: hidden;
    }

    .sf-sheet-img {
        width: 100%;
        max-height: 260px;
        object-fit: cover;
        display: block;
    }

    .sf-sheet-img-placeholder {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, var(--sf-bg-secondary), var(--sf-border-light));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sf-text-muted);
        font-size: 44px;
    }

    .sf-sheet-content { padding: 18px 18px 4px; }

    .sf-sheet-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .sf-sheet-title {
        font-size: 20px;
        font-weight: 800;
        margin: 0;
        line-height: 1.2;
        letter-spacing: -0.3px;
        flex: 1;
    }

    .sf-sheet-price {
        font-size: 22px;
        font-weight: 800;
        color: var(--sf-accent);
        letter-spacing: -0.4px;
        flex-shrink: 0;
    }

    .sf-sheet-desc {
        font-size: 14px;
        color: var(--sf-text-secondary);
        line-height: 1.55;
        margin: 0 0 18px;
    }

    .sf-sheet-footer {
        padding: 14px 18px;
        padding-bottom: calc(14px + var(--sf-safe-bottom));
        border-top: 1px solid var(--sf-border-light);
        flex-shrink: 0;
        background: var(--sf-surface);
    }
}