/* =========================================================
   INFLUHKS — Mobile-App Enhanced CSS
   Scope: @media (max-width:768px) and .pwa-standalone
   Desktop layout is completely unaffected.
   ========================================================= */

/* ── PWA Onboarding / Splash Screen ──────────────────────── */
.pwa-ob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #F4F2ED;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 40px) 28px
             max(env(safe-area-inset-bottom, 28px), 28px) 28px;
    overflow: hidden;
}
.pwa-ob-overlay.pwa-ob-visible {
    display: flex;
    animation: pwaObIn 0.45s cubic-bezier(.22,.68,0,1.2) both;
}
.pwa-ob-overlay.pwa-ob-exit {
    animation: pwaObOut 0.38s ease-in forwards;
}
@keyframes pwaObIn  { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@keyframes pwaObOut { to   { opacity:0; transform:scale(.97); } }

/* Organic SVG background (replaces circles for accurate reference match) */
.pwa-ob-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* Skip button top-right */
.pwa-ob-skip {
    position: absolute;
    top: calc(env(safe-area-inset-top, 14px) + 14px);
    right: 20px;
    z-index: 2;
    border: none;
    background: transparent;
    color: #666;
    font-size: .7rem;
    letter-spacing: .15em;
    font-family: var(--sf-font-body, 'Sora', sans-serif);
    font-weight: 500;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pwa-ob-skip:active { color: #0C0C0C; }

/* Body / brand section */
.pwa-ob-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    position: relative;
    z-index: 1;
    width: 100%;
}
.pwa-ob-brand {
    text-align: center;
}
.pwa-ob-logo {
    font-family: 'Playfair Display', var(--sf-font-heading, 'Bebas Neue'), serif;
    font-weight: 500;
    font-size: clamp(2.2rem, 9.5vw, 2.8rem);
    letter-spacing: .18em;
    color: #0C0C0C;
    line-height: 1;
    margin-bottom: 20px;
    text-indent: .18em; /* compensate for letter-spacing centering */
}
.pwa-ob-tagline {
    font-size: .68rem;
    letter-spacing: .22em;
    color: #555;
    font-family: var(--sf-font-body, 'Sora', sans-serif);
    font-weight: 500;
    text-transform: uppercase;
    text-indent: .22em;
}

/* Dots */
.pwa-ob-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pwa-ob-dot {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #ccc;
    transition: all .3s;
    width: 22px;
}
.pwa-ob-dot--active {
    background: #0C0C0C;
    width: 32px;
}

/* Footer CTAs */
.pwa-ob-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
    padding: 0 4px;
}
.pwa-ob-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    background: #0C0C0C;
    color: #fff;
    text-align: center;
    padding: 20px 24px;
    border-radius: 40px;       /* pill-shape matches reference */
    font-size: .74rem;
    letter-spacing: .22em;
    font-weight: 600;
    font-family: var(--sf-font-body, 'Sora', sans-serif);
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
    text-indent: .22em;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.pwa-ob-btn-primary:active { transform: scale(.97); }
.pwa-ob-btn-primary:hover { color: #fff; }
.pwa-ob-btn-secondary {
    display: block;
    width: 100%;
    max-width: 360px;
    text-align: center;
    color: #0C0C0C;
    font-size: .7rem;
    letter-spacing: .22em;
    font-weight: 500;
    font-family: var(--sf-font-body, 'Sora', sans-serif);
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 8px;
    -webkit-tap-highlight-color: transparent;
    text-indent: .22em;
}
.pwa-ob-btn-secondary:hover { color: #0C0C0C; }

/* ── Mobile App-Mode Body Adjustments ────────────────────── */
@media (max-width: 768px) {
    /* Ensure tap highlight is removed globally on mobile */
    * { -webkit-tap-highlight-color: transparent; }

    /* Bottom-nav clearance — push all page content above bottom nav */
    .sf-main {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    /* Hide desktop topline on PWA standalone */
    .pwa-standalone .sf-topline { display: none; }

    /* Hide desktop top-bar in standalone */
    .pwa-standalone .sf-header { display: none; }

    /* ── Bottom Navigation ────────────────────────────────── */
    .sf-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255,255,255,.96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(0,0,0,.07);
        display: flex;
        align-items: stretch;
        z-index: 1000;
        box-shadow: 0 -2px 24px rgba(0,0,0,.06);
    }
    .sf-bn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: #999;
        font-size: .6rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 600;
        transition: color .2s;
        position: relative;
        min-height: 44px;
    }
    .sf-bn-item i { font-size: 1.1rem; transition: transform .2s; }
    .sf-bn-item.is-active { color: #0C0C0C; }
    .sf-bn-item.is-active i { transform: scale(1.12); }
    .sf-bn-item.is-active::after {
        content: '';
        position: absolute;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
        left: 50%; transform: translateX(-50%);
        width: 20px; height: 2px;
        background: #0C0C0C;
        border-radius: 1px;
    }
    .sf-bn-badge {
        position: absolute;
        top: 6px; right: calc(50% - 16px);
        background: #0C0C0C;
        color: #fff;
        font-size: .55rem;
        font-weight: 700;
        min-width: 16px; height: 16px;
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 4px;
        line-height: 1;
    }

    /* ── Storefront Header (non-standalone mobile) ────────── */
    .sf-header {
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        background: rgba(255,255,255,.88);
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    /* ── Category Filter Chips (Shop page) ───────────────── */
    .mob-filter-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 12px 16px 0;
        white-space: nowrap;
    }
    .mob-filter-bar::-webkit-scrollbar { display: none; }
    .mob-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        padding: 7px 14px;
        font-size: .7rem;
        letter-spacing: .08em;
        font-weight: 600;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        color: #444;
        background: #fff;
        white-space: nowrap;
        text-decoration: none;
        transition: all .18s;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .mob-filter-chip.is-active,
    .mob-filter-chip:active {
        background: #0C0C0C;
        color: #fff;
        border-color: #0C0C0C;
    }
    .mob-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #0C0C0C;
        border-radius: 2px;
        padding: 7px 14px;
        font-size: .7rem;
        letter-spacing: .08em;
        font-weight: 700;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        color: #0C0C0C;
        background: #fff;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Product Grid ─────────────────────────────────────── */
    .mob-product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: #e8e8e8;
        margin-top: 12px;
    }
    .mob-product-card {
        background: #fff;
        position: relative;
        overflow: hidden;
    }
    .mob-product-card-img {
        width: 100%;
        aspect-ratio: 3/4;
        object-fit: cover;
        display: block;
        background: #f7f7f7;
    }
    .mob-product-card-body {
        padding: 10px 10px 14px;
    }
    .mob-product-card-name {
        font-size: .72rem;
        font-weight: 600;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        letter-spacing: .01em;
        line-height: 1.35;
        margin-bottom: 4px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .mob-product-card-price {
        font-size: .74rem;
        font-weight: 700;
        color: #0C0C0C;
    }
    .mob-product-card-price-was {
        font-size: .68rem;
        color: #999;
        text-decoration: line-through;
        margin-left: 5px;
    }
    .mob-product-card-wish {
        position: absolute;
        top: 10px; right: 10px;
        width: 32px; height: 32px;
        background: rgba(255,255,255,.85);
        backdrop-filter: blur(4px);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #555;
        font-size: .85rem;
        border: none;
        cursor: pointer;
    }
    .mob-product-card-badge {
        position: absolute;
        top: 10px; left: 10px;
        background: #0C0C0C;
        color: #fff;
        font-size: .56rem;
        letter-spacing: .1em;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 2px;
        text-transform: uppercase;
    }

    /* ── Filter Drawer (slide up) ─────────────────────────── */
    .mob-filter-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 2000;
        backdrop-filter: blur(2px);
    }
    .mob-filter-drawer-backdrop.is-open { display: block; animation: fadeIn .2s ease both; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .mob-filter-drawer {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        z-index: 2001;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mob-filter-drawer.is-open {
        transform: translateY(0);
    }
    .mob-filter-drawer-handle {
        width: 36px; height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        margin: 12px auto 0;
    }
    .mob-filter-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .mob-filter-drawer-title {
        font-size: .85rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #0C0C0C;
    }
    .mob-filter-drawer-close {
        width: 32px; height: 32px;
        border: none; background: transparent;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; color: #555; cursor: pointer;
    }
    .mob-filter-section { padding: 20px 20px 0; }
    .mob-filter-section-title {
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
        margin-bottom: 12px;
    }
    .mob-filter-swatch-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }
    .mob-filter-swatch {
        width: 28px; height: 28px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color .15s;
        position: relative;
    }
    .mob-filter-swatch.is-active { border-color: #0C0C0C; }
    .mob-filter-size-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }
    .mob-filter-size {
        min-width: 42px; height: 38px;
        border: 1px solid #ddd;
        border-radius: 2px;
        display: flex; align-items: center; justify-content: center;
        font-size: .7rem;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
        padding: 0 10px;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
    }
    .mob-filter-size.is-active {
        background: #0C0C0C;
        color: #fff;
        border-color: #0C0C0C;
    }
    .mob-filter-price-range {
        margin-bottom: 20px;
    }
    .mob-filter-range {
        width: 100%;
        accent-color: #0C0C0C;
    }
    .mob-filter-footer {
        display: flex;
        gap: 10px;
        padding: 16px 20px 20px;
        border-top: 1px solid #f0f0f0;
        background: #fff;
        position: sticky;
        bottom: 0;
    }
    .mob-filter-footer .btn-clear {
        flex: 1;
        border: 1px solid #ddd;
        background: #fff;
        color: #0C0C0C;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 14px;
        border-radius: 2px;
        cursor: pointer;
    }
    .mob-filter-footer .btn-apply {
        flex: 2;
        background: #0C0C0C;
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 14px;
        border-radius: 2px;
        border: none;
        cursor: pointer;
    }

    /* ── Product Detail – Mobile ──────────────────────────── */
    .mob-product-images {
        position: relative;
    }
    .mob-product-main-img {
        width: 100%;
        aspect-ratio: 3/4;
        object-fit: cover;
        display: block;
        background: #f7f7f7;
    }
    .mob-product-thumb-row {
        display: flex;
        gap: 6px;
        padding: 10px 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .mob-product-thumb-row::-webkit-scrollbar { display: none; }
    .mob-product-thumb {
        width: 52px; height: 52px;
        flex-shrink: 0;
        object-fit: cover;
        border: 2px solid transparent;
        cursor: pointer;
        background: #f0f0f0;
        transition: border-color .15s;
    }
    .mob-product-thumb.is-active { border-color: #0C0C0C; }

    .mob-product-info { padding: 0 16px 24px; }
    .mob-product-info-title {
        font-size: 1rem;
        font-weight: 700;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        margin-bottom: 4px;
        line-height: 1.35;
    }
    .mob-product-info-price {
        font-size: .95rem;
        font-weight: 700;
        color: #0C0C0C;
        margin-bottom: 16px;
    }
    .mob-product-info-price span {
        font-size: .8rem;
        font-weight: 400;
        color: #999;
        text-decoration: line-through;
        margin-left: 6px;
    }

    /* Rating stars row */
    .mob-rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
    }
    .mob-rating-stars { color: #0C0C0C; font-size: .85rem; letter-spacing: -1px; }
    .mob-rating-count { font-size: .72rem; color: #888; }

    /* Color swatches */
    .mob-swatch-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }
    .mob-swatch {
        width: 26px; height: 26px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color .15s;
    }
    .mob-swatch.is-active { border-color: #0C0C0C; outline: 2px solid #0C0C0C; outline-offset: 2px; }

    /* Size selector */
    .mob-size-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .mob-size-btn {
        min-width: 44px; height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        font-size: .72rem;
        font-weight: 600;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        padding: 0 10px;
        background: #fff;
        transition: all .15s;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
    }
    .mob-size-btn.is-active {
        background: #0C0C0C;
        color: #fff;
        border-color: #0C0C0C;
    }
    .mob-size-btn.is-disabled {
        color: #ccc;
        border-color: #eee;
        text-decoration: line-through;
        cursor: not-allowed;
    }

    /* Quantity */
    .mob-qty {
        display: flex;
        align-items: center;
        gap: 0;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
        display: inline-flex;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .mob-qty-btn {
        width: 40px; height: 40px;
        background: #f7f7f7;
        border: none;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #0C0C0C;
        transition: background .15s;
    }
    .mob-qty-btn:active { background: #eee; }
    .mob-qty-val {
        width: 48px;
        text-align: center;
        font-size: .88rem;
        font-weight: 600;
        border: none;
        outline: none;
        background: #fff;
    }

    /* Add to cart sticky bottom bar */
    .mob-product-add-bar {
        position: sticky;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        padding: 12px 16px;
        display: flex;
        gap: 10px;
        z-index: 100;
        box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    }
    .mob-btn-wish {
        width: 48px; height: 48px;
        border: 1px solid #ddd;
        border-radius: 2px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; color: #0C0C0C;
        background: #fff;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mob-btn-addcart {
        flex: 1;
        background: #0C0C0C;
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .15em;
        text-transform: uppercase;
        border: none;
        border-radius: 2px;
        height: 48px;
        cursor: pointer;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        transition: background .2s, transform .12s;
    }
    .mob-btn-addcart:active { transform: scale(.97); }

    /* ── Cart – Mobile ────────────────────────────────────── */
    .mob-cart-item {
        display: flex;
        gap: 14px;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        align-items: flex-start;
    }
    .mob-cart-item-img {
        width: 80px;
        aspect-ratio: 3/4;
        object-fit: cover;
        flex-shrink: 0;
        background: #f7f7f7;
    }
    .mob-cart-item-body {
        flex: 1;
        min-width: 0;
    }
    .mob-cart-item-name {
        font-size: .8rem;
        font-weight: 600;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        margin-bottom: 3px;
        line-height: 1.35;
    }
    .mob-cart-item-meta {
        font-size: .7rem;
        color: #888;
        margin-bottom: 10px;
    }
    .mob-cart-item-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mob-cart-item-price {
        font-size: .82rem;
        font-weight: 700;
        color: #0C0C0C;
    }
    .mob-cart-summary {
        padding: 20px 16px;
        background: #fafafa;
        border-top: 1px solid #f0f0f0;
    }
    .mob-cart-summary-row {
        display: flex;
        justify-content: space-between;
        font-size: .78rem;
        color: #555;
        margin-bottom: 8px;
    }
    .mob-cart-summary-row.total {
        font-size: .88rem;
        font-weight: 700;
        color: #0C0C0C;
        border-top: 1px solid #e0e0e0;
        padding-top: 10px;
        margin-top: 6px;
    }
    .mob-cart-checkout-btn {
        display: block;
        width: 100%;
        background: #0C0C0C;
        color: #fff;
        text-align: center;
        padding: 16px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        border: none;
        border-radius: 2px;
        margin-top: 16px;
        cursor: pointer;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        text-decoration: none;
        transition: background .2s, transform .12s;
    }
    .mob-cart-checkout-btn:active { transform: scale(.98); }

    /* ── Checkout – Mobile ────────────────────────────────── */
    .mob-checkout-steps {
        display: flex;
        align-items: center;
        padding: 16px;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .mob-checkout-steps::-webkit-scrollbar { display: none; }
    .mob-checkout-step {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        font-size: .65rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-weight: 600;
        color: #bbb;
    }
    .mob-checkout-step.is-active { color: #0C0C0C; }
    .mob-checkout-step.is-done { color: #0C0C0C; }
    .mob-checkout-step-num {
        width: 20px; height: 20px;
        border-radius: 50%;
        background: #eee;
        display: flex; align-items: center; justify-content: center;
        font-size: .6rem;
        font-weight: 700;
    }
    .mob-checkout-step.is-active .mob-checkout-step-num,
    .mob-checkout-step.is-done .mob-checkout-step-num {
        background: #0C0C0C;
        color: #fff;
    }
    .mob-checkout-step-line {
        flex: 1;
        min-width: 20px;
        height: 1px;
        background: #e0e0e0;
        margin: 0 6px;
    }
    .mob-checkout-section {
        padding: 0 16px 20px;
    }
    .mob-checkout-section-title {
        font-size: .7rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
        margin-bottom: 14px;
        margin-top: 20px;
    }
    .mob-payment-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: border-color .15s;
    }
    .mob-payment-option.is-selected {
        border-color: #0C0C0C;
        background: #fafafa;
    }
    .mob-payment-option input[type=radio] { accent-color: #0C0C0C; }
    .mob-checkout-success {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 60px 24px;
        gap: 16px;
    }
    .mob-checkout-success-icon {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: #0C0C0C;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem;
        color: #fff;
        margin-bottom: 8px;
    }
    .mob-checkout-success-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
    }
    .mob-checkout-success-sub {
        font-size: .8rem;
        color: #666;
    }

    /* ── Profile – Mobile ─────────────────────────────────── */
    .mob-profile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 16px 20px;
        gap: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    .mob-profile-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: #0C0C0C;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem;
        font-weight: 700;
        color: #fff;
        font-family: var(--sf-font-heading, 'Bebas Neue', sans-serif);
        letter-spacing: .05em;
    }
    .mob-profile-name {
        font-size: .95rem;
        font-weight: 700;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
    }
    .mob-profile-email { font-size: .75rem; color: #888; }
    .mob-profile-menu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border-bottom: 1px solid #f7f7f7;
        text-decoration: none;
        color: #0C0C0C;
        font-size: .82rem;
        font-weight: 500;
        transition: background .15s;
    }
    .mob-profile-menu-item:active { background: #fafafa; }
    .mob-profile-menu-icon {
        width: 32px; height: 32px;
        border-radius: 8px;
        background: #f4f4f4;
        display: flex; align-items: center; justify-content: center;
        font-size: .85rem;
        color: #555;
        flex-shrink: 0;
    }
    .mob-profile-menu-chevron {
        margin-left: auto;
        color: #ccc;
        font-size: .75rem;
    }

    /* ── Page header for inner mobile pages ──────────────── */
    .mob-page-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 500;
    }
    .mob-page-header-back {
        width: 36px; height: 36px;
        border: none; background: transparent;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; color: #0C0C0C;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mob-page-header-title {
        font-size: .75rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-weight: 700;
        color: #0C0C0C;
        font-family: var(--sf-font-body, 'Sora', sans-serif);
        flex: 1;
        text-align: center;
    }
    .mob-page-header-action {
        width: 36px; height: 36px;
        border: none; background: transparent;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; color: #0C0C0C;
        cursor: pointer;
        flex-shrink: 0;
        text-decoration: none;
    }

    /* Touch feedback ripple */
    .touch-tap {
        position: relative;
        overflow: hidden;
    }
    .touch-tap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.06);
        opacity: 0;
        transition: opacity .12s;
        pointer-events: none;
    }
    .touch-tap:active::after { opacity: 1; }

    /* ═══════════════════════════════════════════════════════
       EXISTING-CLASS OVERRIDES — make the real storefront
       pages look native-app on mobile without any template edits
       ═══════════════════════════════════════════════════════ */

    /* Hide announcement topline */
    .sf-topline { display: none !important; }

    /* Hide full desktop footer — bottom nav replaces it */
    .th-footer { display: none !important; }

    /* ── Header — native app-style slim bar ──────────────── */
    .sf-header {
        position: sticky;
        top: 0;
        z-index: 900;
        border-bottom: 1px solid rgba(0,0,0,.07);
        background: rgba(255,255,255,.95);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        box-shadow: none;
        padding: 0;
    }
    .sf-header-row {
        height: 52px;
        padding: 0 12px;
        gap: 8px;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
    }
    /* Hide secondary icons (wishlist, account, search) — bottom nav handles them */
    .sf-actions a:not(.sf-cart-link) { display: none; }
    .sf-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
    }
    /* Currency switcher not needed on mobile header */
    .sf-actions .currency-switcher-wrap { display: none; }
    .sf-cart-link {
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
    }
    /* Center logo */
    .sf-logo {
        justify-self: center;
        text-align: center;
        font-size: 22px !important;
        letter-spacing: .18em;
    }
    /* Hamburger */
    .sf-mobile-toggle {
        width: 40px; height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    /* ── Product grids — 2-column native app style ────────── */
    .sf-grid-4,
    .sf-grid-3,
    .sf-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1px !important;
        background: #e8e8e8 !important;
    }

    /* Product card native-app look */
    .sf-product-card {
        background: #fff;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    /* Force 3:4 portrait images */
    .sf-product-media {
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }
    .sf-product-media img,
    .sf-product-img-primary,
    .sf-product-img-secondary {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Compact product info */
    .sf-product-info {
        padding: 8px 10px 12px;
    }
    .sf-product-name {
        font-size: .72rem !important;
        line-height: 1.35;
        margin-bottom: 3px;
    }
    .sf-product-price {
        font-size: .74rem !important;
        font-weight: 700;
    }
    /* Quick-add button hidden on mobile (tap card to view) */
    .sf-product-quick { display: none !important; }

    /* ── Main content spacing — account for sticky header + bottom nav ── */
    .sf-main {
        padding-top: 0;
    }

    /* ── Hero section — tighten on mobile ────────────────── */
    .sf-home-hero-full {
        min-height: 55vh;
    }

    /* ── Inner pages (cart, account, etc.) — full width ──── */
    .sf-page {
        padding: 20px 0 !important;
    }
    .sf-shell,
    .sf-page,
    .sf-auth-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }
}

/* ── PWA standalone — hide all browser-style chrome ─────── */
.pwa-standalone .sf-topline { display: none; }
.pwa-standalone .sf-header  { display: none; }
.pwa-standalone .th-footer  { display: none; }
.pwa-standalone .sf-main    { padding-top: env(safe-area-inset-top, 0px); }

/* ── Smooth transitions for in-app navigation ───────────── */
@media (max-width: 768px) {
    .sf-main {
        animation: pageFadeIn .22s ease both;
    }
    @keyframes pageFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ═════════════════════════════════════════════════════════════
   NATIVE APP POLISH — every mobile page to match reference
   Targets real classes used in templates (sf-*, elite-*, premium-*)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─────────────────────────────────────────────────────────
       SHOP LISTING — filter chip bar + product grid polish
       ───────────────────────────────────────────────────────── */
    .sf-filter-bar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 16px !important;
        margin: 0 -16px 0 !important;
        white-space: nowrap;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,.06);
        position: sticky;
        top: 52px;
        z-index: 800;
    }
    .sf-filter-bar::-webkit-scrollbar { display: none; }
    .sf-filter-trigger {
        flex-shrink: 0;
        padding: 8px 14px !important;
        font-size: .68rem !important;
        letter-spacing: .1em;
        border: 1px solid #0C0C0C !important;
        border-radius: 2px !important;
        background: #fff !important;
        color: #0C0C0C !important;
        font-weight: 600;
        text-transform: uppercase;
    }
    .sf-filter-trigger:active { background: #0C0C0C !important; color: #fff !important; }
    .sf-filter-badge {
        background: #0C0C0C;
        color: #fff;
        font-size: .6rem;
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: 4px;
    }

    /* Hero section tighten */
    .sf-page-shop .sf-hero-center,
    .sf-hero-center {
        min-height: 0 !important;
        padding: 12px 0 6px !important;
    }
    .sf-kicker { font-size: .6rem !important; }
    .sf-heading { font-size: 1.4rem !important; margin-bottom: 4px !important; }
    .sf-copy { font-size: .8rem; display: none; }  /* hide long hero copy on mobile */
    .sf-rule { display: none; }

    /* ─────────────────────────────────────────────────────────
       PRODUCT DETAIL — full-width image + compact info
       ───────────────────────────────────────────────────────── */
    .sf-qv-modal,
    .sf-qv-overlay { /* quick-view modal — force full-screen on mobile */
        padding: 0 !important;
    }

    /* ─────────────────────────────────────────────────────────
       CART — native app compact list view
       ───────────────────────────────────────────────────────── */
    .premium-cart,
    .premium-cart-container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .premium-cart-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f0f0f0;
    }
    .premium-cart-title { font-size: .95rem !important; font-weight: 700; }
    .premium-cart-count { font-size: .7rem; color: #888; }

    .premium-cart-main {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .premium-cart-items { padding: 0 !important; }
    .premium-cart-card {
        display: grid !important;
        grid-template-columns: 80px 1fr auto !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        border: none !important;
        border-bottom: 1px solid #f4f4f4 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        align-items: start;
    }
    .premium-cart-img,
    .premium-cart-img-placeholder {
        width: 80px !important;
        height: 100px !important;
        border-radius: 3px !important;
        object-fit: cover;
        background: #f4f4f4;
    }
    .premium-cart-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .premium-cart-name {
        font-size: .78rem !important;
        font-weight: 600 !important;
        color: #0C0C0C !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .premium-cart-variant {
        font-size: .68rem !important;
        color: #888 !important;
        margin: 0 !important;
    }
    .premium-cart-price {
        font-size: .78rem !important;
        font-weight: 700 !important;
        color: #0C0C0C !important;
        margin-top: 2px !important;
    }
    .premium-cart-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .premium-qty-selector {
        display: inline-flex !important;
        align-items: center;
        border: 1px solid #e0e0e0 !important;
        border-radius: 2px !important;
        overflow: hidden;
    }
    .premium-qty-btn {
        width: 26px !important;
        height: 26px !important;
        border: none !important;
        background: #fafafa !important;
        color: #0C0C0C !important;
        font-size: .8rem !important;
        line-height: 1;
        cursor: pointer;
    }
    .premium-qty-value {
        min-width: 28px !important;
        text-align: center;
        font-size: .72rem !important;
        font-weight: 600 !important;
        padding: 0 4px;
    }
    .premium-cart-remove {
        background: transparent !important;
        border: none !important;
        color: #c33 !important;
        font-size: .75rem !important;
        padding: 2px 4px !important;
    }

    /* Cart summary sticky at bottom on mobile */
    .premium-cart-summary {
        position: sticky;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #f0f0f0;
        padding: 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 16px rgba(0,0,0,.06);
        z-index: 90;
    }
    .premium-summary-row {
        display: flex !important;
        justify-content: space-between;
        font-size: .8rem !important;
        padding: 4px 0 !important;
    }
    .premium-summary-muted { color: #888 !important; }
    .premium-summary-divider {
        border-color: #eee !important;
        margin: 8px 0 !important;
    }
    .premium-cart-subtotal {
        font-size: .9rem !important;
        font-weight: 700 !important;
    }
    .premium-checkout-btn {
        display: flex !important;
        width: 100% !important;
        background: #0C0C0C !important;
        color: #fff !important;
        padding: 16px !important;
        font-size: .72rem !important;
        letter-spacing: .18em !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: center;
        justify-content: center;
        align-items: center;
        border: none !important;
        border-radius: 3px !important;
        margin-top: 14px !important;
        text-decoration: none !important;
    }
    .premium-checkout-btn:active { transform: scale(.98); }
    .premium-continue-link {
        display: block;
        text-align: center;
        font-size: .7rem !important;
        color: #888 !important;
        margin-top: 10px !important;
        padding: 8px !important;
    }

    /* Promo section */
    .premium-promo-section {
        margin: 0 !important;
        padding: 14px 16px !important;
        background: #fafafa !important;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0 !important;
    }
    .premium-promo-input {
        border-radius: 2px !important;
        padding: 10px 12px !important;
        font-size: .75rem !important;
    }
    .premium-promo-btn {
        padding: 10px 16px !important;
        font-size: .7rem !important;
        border-radius: 2px !important;
    }

    /* Empty cart state */
    .premium-cart-empty {
        padding: 60px 20px !important;
        text-align: center;
    }
    .premium-empty-icon { font-size: 3rem !important; color: #ddd !important; margin-bottom: 16px !important; }
    .premium-empty-title { font-size: 1rem !important; font-weight: 700 !important; }
    .premium-empty-text { font-size: .8rem !important; color: #888 !important; margin: 6px 0 20px !important; }

    /* ─────────────────────────────────────────────────────────
       CHECKOUT — single column, clean radio cards
       ───────────────────────────────────────────────────────── */
    .elite-checkout,
    .elite-checkout-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
    }
    .elite-checkout-main,
    .elite-checkout-sidebar {
        padding: 14px 16px !important;
        border: none !important;
        background: transparent !important;
    }
    .elite-checkout-sidebar {
        background: #fafafa !important;
        border-top: 1px solid #eee;
    }
    .elite-express-section,
    .elite-field-group {
        padding: 14px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0;
    }
    .elite-express-title,
    .elite-label {
        font-size: .68rem !important;
        letter-spacing: .12em !important;
        text-transform: uppercase;
        color: #555 !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        display: block;
    }
    .elite-input {
        border-radius: 2px !important;
        padding: 12px !important;
        font-size: .82rem !important;
        border: 1px solid #e0e0e0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .elite-input:focus {
        border-color: #0C0C0C !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .elite-field-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    .elite-grand-total {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0 !important;
        border-top: 2px solid #0C0C0C !important;
        margin-top: 10px !important;
    }
    .elite-grand-total-amount {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }
    .elite-divider { border-color: #eee !important; margin: 10px 0 !important; }

    /* Checkout confirm button */
    .elite-express-btn,
    .elite-form button[type="submit"] {
        width: 100% !important;
        background: #0C0C0C !important;
        color: #fff !important;
        padding: 16px !important;
        font-size: .72rem !important;
        letter-spacing: .18em !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border: none !important;
        border-radius: 3px !important;
        margin-top: 8px !important;
    }

    /* ─────────────────────────────────────────────────────────
       SUCCESS MODAL (image 1 bottom-right reference)
       ───────────────────────────────────────────────────────── */
    .elite-success-wrap,
    .checkout-success-wrap {
        padding: 60px 24px !important;
        text-align: center;
    }

    /* ─────────────────────────────────────────────────────────
       PROFILE / ACCOUNT
       ───────────────────────────────────────────────────────── */
    .elite-account,
    .elite-account-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
    }
    .elite-account-sidebar {
        padding: 20px 16px !important;
        background: #fff !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .elite-account-main {
        padding: 14px 16px !important;
        border: none !important;
        background: transparent !important;
    }

    /* Avatar and identity row */
    .elite-mobile-avatar,
    .elite-account-sidebar .elite-avatar,
    .elite-account-sidebar > img {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
        object-fit: cover;
        margin: 0 auto 12px !important;
        display: block;
        background: #0C0C0C;
    }
    .elite-mobile-name,
    .elite-account-sidebar h2,
    .elite-account-sidebar h3 {
        font-size: .95rem !important;
        font-weight: 700 !important;
        text-align: center;
        margin: 0 !important;
    }
    .elite-mobile-greeting,
    .elite-account-sidebar .email,
    .elite-account-sidebar p {
        font-size: .72rem !important;
        color: #888 !important;
        text-align: center;
        margin: 4px 0 0 !important;
    }

    /* Stats row — 4 inline stats */
    .elite-loyalty-info,
    .elite-stats-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center;
        padding: 16px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 16px !important;
    }
    .elite-loyalty-points {
        font-size: .95rem !important;
        font-weight: 700 !important;
        color: #0C0C0C !important;
    }
    .elite-loyalty-label {
        font-size: .58rem !important;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #888 !important;
    }

    /* Menu actions list */
    .elite-actions-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .elite-action-card {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 14px 16px !important;
        border: none !important;
        border-bottom: 1px solid #f4f4f4 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        text-decoration: none !important;
        transition: background .15s;
    }
    .elite-action-card:active { background: #fafafa !important; }
    .elite-action-icon {
        width: 36px; height: 36px;
        border-radius: 10px !important;
        background: #f4f4f4 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
        color: #555 !important;
        flex-shrink: 0;
    }
    .elite-action-content {
        flex: 1;
        min-width: 0;
    }
    .elite-action-title {
        font-size: .82rem !important;
        font-weight: 600 !important;
        color: #0C0C0C !important;
        margin: 0 !important;
        line-height: 1.3;
    }
    .elite-action-subtitle {
        font-size: .68rem !important;
        color: #888 !important;
        margin: 2px 0 0 !important;
    }
    .elite-action-arrow {
        color: #ccc !important;
        font-size: .75rem !important;
        flex-shrink: 0;
    }

    /* Logout button */
    .elite-logout-btn {
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: 100% !important;
        padding: 14px 16px !important;
        border: none !important;
        background: #fff !important;
        color: #c33 !important;
        font-size: .82rem !important;
        font-weight: 600 !important;
        text-align: left !important;
        border-bottom: 1px solid #f4f4f4 !important;
        margin-top: 12px !important;
        border-radius: 0 !important;
    }

    /* Order list on profile */
    .elite-order-card,
    .elite-orders-list .elite-order-card {
        padding: 14px 16px !important;
        border: none !important;
        border-bottom: 1px solid #f4f4f4 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    .elite-order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    .elite-order-number { font-size: .75rem !important; font-weight: 700 !important; }
    .elite-order-date { font-size: .68rem !important; color: #888 !important; }
    .elite-order-total { font-size: .85rem !important; font-weight: 700 !important; }

    /* Notifications */
    .elite-notification-card {
        padding: 14px 16px !important;
        border: none !important;
        border-bottom: 1px solid #f4f4f4 !important;
        border-radius: 0 !important;
    }
    .elite-notification-icon {
        width: 36px; height: 36px;
        border-radius: 50% !important;
        font-size: .85rem !important;
    }
    .elite-notification-title { font-size: .82rem !important; font-weight: 600 !important; }
    .elite-notification-text { font-size: .7rem !important; color: #666 !important; }

    /* ─────────────────────────────────────────────────────────
       SF-BTN — unified button style on mobile
       ───────────────────────────────────────────────────────── */
    .sf-btn {
        width: 100% !important;
        padding: 14px 16px !important;
        border-radius: 3px !important;
        font-size: .72rem !important;
        letter-spacing: .18em !important;
        font-weight: 700 !important;
    }
    .sf-btn-outline {
        border-radius: 3px !important;
        padding: 14px 16px !important;
    }

    /* Remove excessive card shadows on mobile */
    .card,
    .elite-account-main > div,
    .elite-checkout-main > div {
        box-shadow: none !important;
    }
}


/* =========================================================
   INFLUHKS MOBILE/PWA — Redesigned Shell v2
   Design-accurate: cream/beige background, 4-tab nav,
   native-app typography, premium product cards.
   Scoped to @media (max-width: 900px) — desktop untouched.
   ========================================================= */

/* ── Design Tokens ── */
:root {
    --mob-bg:       #F5F0EB;
    --mob-surface:  #FFFFFF;
    --mob-ink:      #1A1A1A;
    --mob-ink-2:    #555555;
    --mob-ink-3:    #999999;
    --mob-line:     #EBEBEB;
    --mob-accent:   #1A1A1A;
    --mob-radius:   12px;
    --mob-font:     'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --mob-bn-h:     68px;
    --mob-top-h:    56px;
    --mob-safe-top: env(safe-area-inset-top, 0px);
    --mob-safe-bot: env(safe-area-inset-bottom, 0px);
}

/* ── Global: show/hide mobile shell ── */
@media (max-width: 900px) {
    /* Hide ALL desktop chrome on mobile */
    .sf-topline,
    .sf-header,
    .sf-mobile-nav,
    .sf-bottom-nav,
    .sf-main > *,
    .sf-footer,
    .th-footer,
    .brand-footer,
    [class*="th-footer"] { display: none !important; }

    /* sf-main becomes invisible wrapper */
    .sf-main {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Show mobile app shell */
    .mob-app-shell {
        display: flex !important;
        flex-direction: column;
        min-height: 100dvh;
        background: var(--mob-bg);
        font-family: var(--mob-font);
        padding-bottom: calc(var(--mob-bn-h) + var(--mob-safe-bot));
    }

    /* Show new bottom nav */
    .mob-bottom-nav { display: flex !important; }

    /* Body styles for mobile */
    body.storefront-body {
        background: var(--mob-bg) !important;
        overflow-x: hidden;
    }
}

@media (min-width: 901px) {
    /* Desktop: hide mobile shell and bottom nav completely */
    .mob-app-shell,
    .mob-bottom-nav,
    .sf-bottom-nav,
    .mob-app-shell * { display: none !important; }
}

/* ── Mobile App Shell ── */
.mob-app-shell {
    /* display controlled exclusively by media queries */
    position: relative;
    width: 100%;
}

/* ── Top Bar ── */
.mob-top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--mob-surface);
    border-bottom: 1px solid var(--mob-line);
}

.mob-header-inner,
.mob-header-default,
.mob-home-header,
.mob-header-bare {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--mob-top-h);
    padding: 0 16px;
    padding-top: var(--mob-safe-top);
    background: var(--mob-surface);
}

.mob-hd-brand {
    font-family: var(--mob-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--mob-ink);
    text-decoration: none;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mob-hd-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mob-ink);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.mob-hd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--mob-ink);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
}
.mob-hd-btn:active { opacity: .6; }

.mob-hd-cart { position: relative; }
.mob-hd-cart-count {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    background: var(--mob-ink);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ── Mobile View (scroll area) ── */
.mob-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Ensure the view can grow and shows scrollbar correctly */
    min-height: 0;
}
.mob-fallback-content { padding: 16px; }

/* ═══ BOTTOM NAV ═══ */
.mob-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--mob-bn-h) + var(--mob-safe-bot));
    padding-bottom: var(--mob-safe-bot);
    background: var(--mob-surface);
    border-top: 1px solid var(--mob-line);
    z-index: 200;
    align-items: stretch;
    justify-content: space-around;
}

.mob-bn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--mob-ink-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
    padding: 8px 0;
}
.mob-bn-tab.is-active { color: var(--mob-ink); }
.mob-bn-tab.is-active .mob-bn-icon { opacity: 1; }
.mob-bn-icon { opacity: .5; line-height: 1; transition: opacity .15s; }
.mob-bn-tab.is-active .mob-bn-icon { opacity: 1; }
.mob-bn-label {
    font-family: var(--mob-font);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.mob-bn-tab.is-active .mob-bn-label { font-weight: 700; }

/* ═══ HERO SLIDER ═══ */
.mob-hero {
    position: relative;
    width: 100%;
    height: 56vw;
    min-height: 220px;
    max-height: 380px;
    overflow: hidden;
    background: #111;
}
.mob-hero-track { display: flex; height: 100%; }
.mob-hero-slide {
    flex: 0 0 100%;
    position: relative;
    overflow: hidden;
}
.mob-hero-bg {
    position: absolute;
    inset: 0;
    background-image: var(--slide-bg, linear-gradient(145deg,#1a1a2e,#0a0a0a));
    background-size: cover;
    background-position: center;
}
.mob-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
    color: #fff;
}
.mob-hero-kicker {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 6px;
    opacity: .85;
}
.mob-hero-title {
    font-size: clamp(22px, 6vw, 34px);
    font-weight: 300;
    line-height: 1.15;
    margin: 0 0 6px;
    font-family: 'Playfair Display', Georgia, serif;
}
.mob-hero-subtitle {
    font-size: 12px;
    line-height: 1.5;
    opacity: .85;
    margin: 0 0 14px;
}
.mob-hero-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    transform: translate(
        clamp(-100px, var(--cta-ox, 0px), 100px),
        clamp(-80px,  var(--cta-oy, 0px), 80px)
    );
    will-change: transform;
}
.mob-cta-align-left   { justify-content: flex-start; }
.mob-cta-align-center { justify-content: center; }
.mob-cta-align-right  { justify-content: flex-end; }
.mob-hero-cta {
    display: inline-block;
    background: var(--mob-surface);
    color: var(--mob-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 22px;
    text-decoration: none;
    align-self: flex-start;
}
.mob-hero-cta-wrap .mob-hero-cta { align-self: auto; }
.mob-hero-dots {
    position: absolute;
    bottom: 12px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.mob-hero-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .3s;
}
.mob-hero-dot.is-active { background: #fff; width: 20px; border-radius: 3px; }

/* ── Hero overlay (separate from content gradient) ── */
.mob-hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* ── Hero content: remove old background gradient, use overlay div instead ── */
.mob-hero-content {
    background: none !important;
    z-index: 2;
}
/* ── Vertical align variants ── */
.mob-hero-v-top    { justify-content: flex-start; padding-top: 32px; }
.mob-hero-v-center { justify-content: center; }
.mob-hero-v-bottom { justify-content: flex-end; padding-bottom: 24px; }
/* ── CTA style variants ── */
.mob-hero-cta { border-radius: 8px; }
.mob-hero-cta-filled  { /* default filled */ }
.mob-hero-cta-outline { background: transparent !important; border: 1.5px solid currentColor; }
.mob-hero-cta-text    { background: transparent !important; border: none; padding: 0; text-decoration: underline; }
/* ── Badge pill above headline ── */
.mob-hero-badge {
    display: inline-block; padding: 3px 10px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.4);
    font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 8px; align-self: flex-start;
}
/* ── Transition styles ── */
.mob-trans-zoom .mob-hero-bg { animation: mobHeroZoom 8s ease-in-out infinite alternate; }
@keyframes mobHeroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.mob-trans-parallax .mob-hero-bg { will-change: transform; }
.mob-trans-blur.mob-hero-slide:not(.is-active) .mob-hero-bg { filter: blur(8px); transition: filter .6s ease; }
.mob-trans-blur.mob-hero-slide.is-active .mob-hero-bg { filter: blur(0); }
/* ── Text animation classes (added by JS on slide activate) ── */
.mob-hero-anim-fade-up { animation: mobTextFadeUp .55s cubic-bezier(.4,0,.2,1) both; }
.mob-hero-anim-fade-in { animation: mobTextFadeIn .55s ease both; }
.mob-hero-anim-slide-left { animation: mobTextSlideLeft .5s cubic-bezier(.4,0,.2,1) both; }
.mob-hero-anim-slide-right { animation: mobTextSlideRight .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes mobTextFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes mobTextFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes mobTextSlideLeft { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }
@keyframes mobTextSlideRight { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }

/* ═══ SECTION LAYOUT ═══ */
.mob-section {
    background: var(--mob-surface);
    margin-top: 10px;
    padding: 18px 0 12px;
}
.mob-section-last { margin-bottom: 8px; }
.mob-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 12px;
}
.mob-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--mob-ink);
}
.mob-section-link {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--mob-ink-2);
    text-decoration: none;
    text-transform: uppercase;
}

/* ═══ CATEGORY PILLS ═══ */
.mob-cats-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mob-cats-row::-webkit-scrollbar { display: none; }
.mob-cat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    color: var(--mob-ink);
}
.mob-cat-icon {
    width: 52px; height: 52px;
    border: 1px solid var(--mob-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mob-surface);
    color: var(--mob-ink);
}
.mob-cat-pill span:last-child {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mob-ink);
    text-align: center;
}
.mob-cat-pill:active .mob-cat-icon { background: var(--mob-line); }

/* ═══ PRODUCT CARDS ═══ */
.mob-product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
}
.mob-product-card {
    text-decoration: none;
    color: var(--mob-ink);
    display: block;
}
.mob-pc-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    background: #f0ede8;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 8px;
}
.mob-pc-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.mob-product-card:active .mob-pc-img { transform: scale(1.03); }
.mob-pc-img-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 200;
    color: #bbb;
    background: #e8e4de;
}
.mob-pc-wish {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mob-ink-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-pc-wish:active { color: #c33; }
.mob-pc-info { padding: 0 2px; }
.mob-pc-name {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--mob-ink);
    margin: 0 0 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mob-pc-price {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mob-ink);
    margin: 0;
}

/* ═══ CART ═══ */
.mob-cart-wrap {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
}
.mob-cart-items {
    background: var(--mob-surface);
    margin-bottom: 10px;
}
.mob-cart-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mob-line);
    align-items: flex-start;
}
.mob-ci-thumb {
    width: 90px; height: 110px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #e8e4de;
    display: block;
}
.mob-ci-thumb img { width:100%; height:100%; object-fit:cover; }
.mob-ci-thumb-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#bbb;
}
.mob-ci-info { flex: 1; min-width: 0; }
.mob-ci-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.mob-ci-name {
    font-size:13.5px; font-weight:600; color:var(--mob-ink);
    text-decoration:none; line-height:1.3;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.mob-ci-remove {
    flex-shrink:0; width:24px; height:24px; background:none; border:none;
    color:var(--mob-ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent; padding:0;
}
.mob-ci-variant { font-size:12px; color:var(--mob-ink-2); margin:4px 0 10px; }
.mob-ci-bottom { display:flex; align-items:center; justify-content:space-between; }
.mob-ci-price { font-size:14px; font-weight:700; color:var(--mob-ink); }
.mob-ci-qty { display:flex; align-items:center; gap:0; border:1px solid var(--mob-line); border-radius:4px; }
.mob-ci-qty-btn {
    width:32px; height:32px; background:none; border:none; color:var(--mob-ink);
    font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent;
}
.mob-ci-qty-val { width:32px; text-align:center; font-size:13px; font-weight:600; color:var(--mob-ink); }

.mob-cart-promo {
    background:var(--mob-surface); margin-bottom:10px; padding:12px 16px;
}
.mob-promo-form { display:flex; gap:10px; align-items:center; }
.mob-promo-field {
    flex:1; display:flex; align-items:center; gap:8px;
    border:1px solid var(--mob-line); border-radius:4px; padding:10px 12px;
    background:var(--mob-bg);
}
.mob-promo-input {
    flex:1; border:none; background:transparent; font-size:13px; color:var(--mob-ink);
    outline:none; font-family:var(--mob-font);
}
.mob-promo-apply {
    font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--mob-ink);
    background:none; border:none; cursor:pointer; flex-shrink:0;
}

.mob-cart-totals {
    background:var(--mob-surface); padding:16px; margin-bottom:10px;
    display:flex; flex-direction:column; gap:10px;
}
.mob-total-row {
    display:flex; justify-content:space-between; align-items:center;
    font-size:13.5px; color:var(--mob-ink-2);
}
.mob-total-final { font-size:16px; font-weight:700; color:var(--mob-ink); border-top:1px solid var(--mob-line); padding-top:12px; margin-top:2px; }
.mob-free { color:#16a34a; font-weight:600; }
.mob-info-icon { font-size:10px; color:var(--mob-ink-3); }

.mob-cart-cta {
    background:var(--mob-surface); padding:16px; margin-bottom:10px; text-align:center;
}
.mob-cart-secure {
    margin-top:10px; font-size:11px; color:var(--mob-ink-3);
    display:flex; align-items:center; justify-content:center; gap:5px;
}

/* ═══ ACCOUNT ═══ */
.mob-account-wrap { display:flex; flex-direction:column; gap:10px; padding-bottom:8px; }
.mob-acct-profile {
    background:var(--mob-surface); padding:20px 16px;
    display:flex; align-items:center; gap:14px;
}
.mob-acct-avatar {
    width:56px; height:56px; border-radius:50%; background:var(--mob-ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:600; flex-shrink:0;
}
.mob-acct-info { flex:1; min-width:0; }
.mob-acct-name { font-size:16px; font-weight:700; color:var(--mob-ink); margin:0 0 2px; }
.mob-acct-email { font-size:12px; color:var(--mob-ink-2); margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mob-acct-since { font-size:11px; color:var(--mob-ink-3); margin:0; }
.mob-acct-edit {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    color:var(--mob-ink-3); text-decoration:none;
}

.mob-loyalty-card {
    background:var(--mob-ink); color:#fff; border-radius:8px;
    margin:0 12px; padding:16px;
    display:flex; align-items:center; justify-content:space-between;
}
.mob-loyalty-brand { font-size:10px; letter-spacing:.12em; font-weight:700; text-transform:uppercase; opacity:.7; margin:0 0 3px; }
.mob-loyalty-tier { font-size:15px; font-weight:600; margin:0; }
.mob-loyalty-right { text-align:right; }
.mob-loyalty-benefits {
    background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
    font-size:11px; font-weight:600; letter-spacing:.06em; padding:7px 14px;
    cursor:pointer; margin-bottom:8px;
}
.mob-loyalty-points {
    font-size:11px; color:rgba(255,255,255,.7); margin:0;
    display:flex; align-items:center; gap:4px; justify-content:flex-end;
}

.mob-orders-quick { background:var(--mob-surface); padding:16px; }
.mob-oq-hd {
    display:flex; justify-content:space-between; margin-bottom:16px;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--mob-ink);
}
.mob-oq-hd a { font-size:10px; color:var(--mob-ink-2); text-decoration:none; font-weight:600; }
.mob-oq-icons { display:flex; justify-content:space-around; }
.mob-oq-item {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    text-decoration:none; color:var(--mob-ink-2);
}
.mob-oq-item span { font-size:10px; font-weight:500; }

.mob-acct-menu { background:var(--mob-surface); }
.mob-menu-row {
    display:flex; align-items:center; gap:14px;
    padding:15px 16px; border-bottom:1px solid var(--mob-line);
    text-decoration:none; color:var(--mob-ink);
    -webkit-tap-highlight-color:transparent;
}
.mob-menu-row:last-child { border-bottom:none; }
.mob-menu-row:active { background: var(--mob-bg); }
.mob-menu-icon { width:24px; display:flex; align-items:center; justify-content:center; color:var(--mob-ink-2); flex-shrink:0; }
.mob-menu-label { flex:1; font-size:14px; font-weight:500; color:var(--mob-ink); }
.mob-menu-chevron { color:var(--mob-line); flex-shrink:0; }
.mob-menu-logout .mob-menu-icon { color:#c33; }
.mob-menu-logout-btn { font-size:14px; font-weight:500; color:#c33 !important; }

/* ═══ EMPTY STATES ═══ */
.mob-empty-state {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:60px 24px; text-align:center;
}
.mob-empty-state p { font-size:15px; color:var(--mob-ink-2); margin:16px 0 0; }

/* ═══ SHARED BUTTON ═══ */
.mob-btn-primary {
    display:block; width:100%;
    background:var(--mob-ink); color:#fff;
    font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    text-align:center; text-decoration:none;
    padding:17px; border:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    font-family:var(--mob-font);
}
.mob-btn-primary:active { opacity:.85; }

.mob-btn-google {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 14px;
    border: 1px solid var(--mob-line, #d0d0d0);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--mob-font);
    -webkit-tap-highlight-color: transparent;
}
.mob-btn-google:active { background: #f3f4f6; }
.mob-btn-google svg { flex: none; }

/* ═══ HOME: SPLASH WHILE ASSETS LOAD ═══ */
.mob-home-splash-loading {
    position:fixed; inset:0; background:var(--mob-bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; pointer-events:none;
    opacity:1; transition:opacity .4s ease;
}
.mob-home-splash-loading.done { opacity:0; }
.mob-home-splash-loading-logo {
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(3rem,12vw,5rem);
    color:rgba(0,0,0,.06);
    font-weight:300; letter-spacing:.04em;
}


/* =========================================================
   INFLUHKS MOBILE — PHASE 2 CSS
   Product Detail · Catalog Improvements · Checkout · Filter
   ========================================================= */

/* ── PRODUCT DETAIL ── */
.mob-pd-wrap { display:flex; flex-direction:column; background:var(--mob-bg); }

.mob-pd-gallery {
    position:relative;
    width:100%;
    background:var(--mob-surface);
    overflow:hidden;
}
.mob-pd-gallery-track {
    display:flex;
    transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.mob-pd-gallery-slide {
    flex:0 0 100%;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#e8e4de;
}
.mob-pd-gallery-img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.mob-pd-gallery-placeholder {
    display:flex; align-items:center; justify-content:center;
    font-size:72px; font-weight:200; color:#bbb; background:#e8e4de;
}
.mob-pd-dots {
    position:absolute; bottom:14px; left:0; right:0;
    display:flex; justify-content:center; gap:6px; z-index:2;
}
.mob-pd-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(0,0,0,.25); cursor:pointer; transition:all .3s;
}
.mob-pd-dot.is-active { background:var(--mob-ink); width:18px; border-radius:3px; }
.mob-pd-badge-sale {
    position:absolute; top:14px; left:14px; z-index:2;
    background:var(--mob-ink); color:#fff;
    font-size:11px; font-weight:700; padding:4px 10px;
    letter-spacing:.06em;
}
.mob-pd-header { background:rgba(255,255,255,.96); }

.mob-pd-info {
    padding:20px 16px 100px; /* 100px bottom clearance for sticky CTA */
    background:var(--mob-surface);
}
.mob-pd-brand {
    font-size:10px; letter-spacing:.15em; font-weight:600;
    color:var(--mob-ink-3); margin:0 0 6px; text-transform:uppercase;
}
.mob-pd-name {
    font-size:22px; font-weight:600; line-height:1.2;
    color:var(--mob-ink); margin:0 0 10px;
    font-family:'Playfair Display',Georgia,serif;
}
.mob-pd-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.mob-pd-price { font-size:20px; font-weight:700; color:var(--mob-ink); }
.mob-pd-price-was { font-size:14px; color:var(--mob-ink-3); text-decoration:line-through; }
.mob-pd-rating {
    display:flex; align-items:center; gap:4px; margin-bottom:12px;
    padding-bottom:12px; border-bottom:1px solid var(--mob-line);
}
.mob-pd-rating-count { font-size:12px; color:var(--mob-ink-2); margin-left:4px; }
.mob-pd-desc { font-size:13.5px; line-height:1.6; color:var(--mob-ink-2); margin:0 0 20px; }
.mob-pd-stock-label {
    font-size:11px; letter-spacing:.06em; font-weight:600;
    text-transform:uppercase; margin:12px 0; padding:8px 0;
}
.mob-pd-stock-in { color:#16a34a; }
.mob-pd-stock-low { color:#d97706; }
.mob-pd-stock-made_to_order, .mob-pd-stock-preorder { color:#2563eb; }

/* Option groups */
.mob-pd-option { margin-bottom:18px; }
.mob-pd-option-hd {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px;
}
.mob-pd-option-label {
    font-size:11px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--mob-ink);
}
.mob-pd-option-val { font-weight:400; color:var(--mob-ink-2); }
.mob-pd-size-guide-btn {
    font-size:11px; font-weight:600; letter-spacing:.06em;
    color:var(--mob-ink-2); background:none; border:none;
    text-decoration:underline; cursor:pointer; text-transform:uppercase;
}

/* Color swatches */
.mob-pd-colors { display:flex; gap:10px; flex-wrap:wrap; }
.mob-pd-color {
    width:28px; height:28px; border-radius:50%;
    border:2px solid transparent; cursor:pointer;
    outline:2px solid transparent; outline-offset:2px;
    transition:outline .15s; -webkit-tap-highlight-color:transparent;
}
.mob-pd-color.is-active { outline:2px solid var(--mob-ink); }

/* Size buttons */
.mob-pd-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.mob-pd-size-btn {
    min-width:50px; height:44px; padding:0 14px;
    border:1px solid var(--mob-line); background:var(--mob-surface);
    font-size:13px; font-weight:500; color:var(--mob-ink);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:all .15s; letter-spacing:.04em;
}
.mob-pd-size-btn.is-active {
    border-color:var(--mob-ink); background:var(--mob-ink); color:#fff;
}

/* Sticky CTA */
.mob-pd-cta-wrap {
    position:fixed; bottom:calc(var(--mob-bn-h) + var(--mob-safe-bot));
    left:0; right:0; z-index:50;
    padding:12px 16px;
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--mob-line);
}
.mob-pd-cta {
    display:block; width:100%; padding:17px;
    background:var(--mob-ink); color:#fff;
    font-size:12px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; border:none; cursor:pointer;
    font-family:var(--mob-font);
    -webkit-tap-highlight-color:transparent;
}
.mob-pd-cta:active { opacity:.85; }

/* Accordion */
.mob-pd-accordion { border-top:1px solid var(--mob-line); margin-top:20px; }
.mob-pd-acc-item { border-bottom:1px solid var(--mob-line); }
.mob-pd-acc-trigger {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 0; font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--mob-ink);
    list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mob-pd-acc-trigger::-webkit-details-marker { display:none; }
details[open] .mob-pd-acc-trigger svg { transform:rotate(180deg); }
.mob-pd-acc-body { padding:0 0 16px; font-size:13.5px; line-height:1.65; color:var(--mob-ink-2); }

/* Related products row */
.mob-pd-related {
    display:grid; grid-template-columns:1fr 1fr;
    gap:12px; padding:0 16px 16px;
}

/* ── CATALOG / SHOP ── */

/* Page container — gradient warm background */
.mob-shop-native {
    min-height: 100dvh;
    padding: 6px 14px 24px;
    background:
        radial-gradient(circle at 15% -5%, rgba(255,255,255,.8), transparent 34%),
        linear-gradient(180deg, #f7f1ea 0%, #f1e8df 100%);
}

/* Title row: large Playfair heading + optional right control */
.mob-shop-title-row {
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 14px;
    padding: 12px 2px 14px;
}
.mob-shop-title-row h1 {
    margin: 0; color: #18130f;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px; line-height: 1;
    font-weight: 600; letter-spacing: -.03em;
}

/* Sticky sort/count bar */
.mob-shop-toolbar {
    position: sticky;
    top: calc(var(--mob-top-h, 56px) + var(--mob-safe-top, 0px));
    z-index: 40;
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    margin: 0 -14px 14px; padding: 11px 16px;
    background: rgba(245,240,235,.88);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,.48);
    border-bottom: 1px solid rgba(26,26,26,.06);
}

.mob-shop-count {
    font-size: 12px; color: var(--mob-ink-2);
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mob-shop-controls { display: flex; align-items: center; gap: 8px; }
.mob-shop-sort-btn,
.mob-shop-view-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; border: 1px solid rgba(26,26,26,.08); border-radius: 999px;
    background: rgba(255,255,255,.78); color: var(--mob-ink);
    font-family: var(--mob-font); font-size: 12px; font-weight: 700; padding: 0 12px;
    -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.mob-shop-view-btn { width: 38px; padding: 0; }

/* Legacy flat meta bar (kept for any legacy usage) */
.mob-shop-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--mob-surface);
    border-bottom: 1px solid var(--mob-line);
}

/* Product grid */
.mob-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; align-items: start;
}
.mob-shop-product-card {
    display: flex; flex-direction: column; min-width: 0;
    color: var(--mob-ink); text-decoration: none !important;
    background: rgba(255,255,255,.8); border: 1px solid rgba(26,26,26,.055);
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 16px 34px rgba(76,55,35,.08);
    transform: translateZ(0); -webkit-tap-highlight-color: transparent;
}
.mob-shop-product-card:active { transform: scale(.985); }
.mob-shop-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #e9dfd3; }
.mob-shop-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mob-shop-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 200;
    color: #b9aa9b; background: linear-gradient(145deg, #efe6db, #ddd0c2);
}
.mob-shop-wish {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    color: #3a3029; background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: 0 10px 22px rgba(26,26,26,.1);
    z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mob-shop-wish.is-active { color: #8f2020; background: rgba(255,255,255,.94); }
.mob-shop-info { padding: 11px 11px 13px; flex: 1; min-width: 0; }
.mob-shop-name {
    margin: 0 0 5px; color: var(--mob-ink);
    font-size: 12.5px; font-weight: 700; line-height: 1.35;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mob-shop-price { margin: 0 0 8px; color: #4b382b; font-size: 12.5px; font-weight: 800; }
.mob-shop-colors { display: flex; align-items: center; gap: 5px; }
.mob-shop-color-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.13); display: inline-block; }

/* Single-column mode */
.mob-shop-grid.mob-grid-single { grid-template-columns: 1fr; }
.mob-shop-grid.mob-grid-single .mob-shop-product-card { border-radius: 26px; }
.mob-shop-grid.mob-grid-single .mob-shop-img-wrap { aspect-ratio: 4/5; }

/* Pagination, empty state, sort sheet */
.mob-shop-pagination { margin: 16px -14px 0; padding: 16px; background: rgba(255,255,255,.64); border-top: 1px solid rgba(26,26,26,.06); }
.mob-shop-empty { padding: 72px 20px; border-radius: 28px; background: rgba(255,255,255,.7); }
.mob-shop-sheet { max-height: 56vh; }
.mob-shop-sheet-list { padding: 8px 0 12px; }

/* Tab strip (used on home/sub-pages) */
.mob-shop-tabs {
    display: flex; overflow-x: auto; scrollbar-width: none;
    background: var(--mob-surface); border-bottom: 1px solid var(--mob-line);
    -ms-overflow-style: none;
}
.mob-shop-tabs::-webkit-scrollbar { display: none; }
.mob-shop-tab {
    flex-shrink: 0; padding: 12px 16px; font-size: 13px; font-weight: 500;
    color: var(--mob-ink-2); border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap; background: none;
    border-top: 0; border-left: 0; border-right: 0;
    -webkit-tap-highlight-color: transparent; font-family: var(--mob-font);
    transition: color .15s, border-color .15s;
    text-decoration: none; display: inline-flex; align-items: center;
}
.mob-shop-tab.is-active { color: var(--mob-ink); border-bottom-color: var(--mob-ink); font-weight: 700; }

/* ── FILTER DRAWER ── */
.mob-filter-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:400;
}
.mob-filter-overlay.is-open { display:block; }
.mob-filter-drawer {
    position:fixed; bottom:0; left:0; right:0;
    background:var(--mob-surface); z-index:401;
    border-radius:20px 20px 0 0;
    max-height:88vh; overflow-y:auto;
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    padding-bottom:calc(16px + var(--mob-safe-bot));
}
.mob-filter-drawer.is-open,
.mob-filter-overlay.is-open > .mob-filter-drawer { transform:translateY(0); }

.mob-sort-row {
    display:flex; align-items:center;
    padding:15px 20px; text-decoration:none;
    color:var(--mob-ink); border-bottom:1px solid var(--mob-line);
    font-size:15px; font-family:var(--mob-font);
}
.mob-sort-row:last-child { border-bottom:none; }

.mob-filter-handle {
    width:36px; height:4px; border-radius:2px;
    background:var(--mob-line); margin:12px auto 8px;
}
.mob-filter-top {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px 16px; border-bottom:1px solid var(--mob-line);
}
.mob-filter-top-title { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mob-filter-reset { font-size:12px; font-weight:500; color:var(--mob-ink-2); background:none; border:none; cursor:pointer; }

.mob-filter-section { padding:20px; border-bottom:1px solid var(--mob-line); }
.mob-filter-section-title {
    font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
    color:var(--mob-ink); margin:0 0 14px;
}
.mob-filter-cats {
    display:flex; flex-wrap:wrap; gap:8px;
}
.mob-filter-cat {
    padding:9px 16px; border:1px solid var(--mob-line); border-radius:100px;
    font-size:13px; font-weight:500; color:var(--mob-ink);
    background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mob-filter-cat.is-active { background:var(--mob-ink); color:#fff; border-color:var(--mob-ink); }

.mob-filter-colors { display:flex; gap:10px; flex-wrap:wrap; }
.mob-filter-color {
    width:32px; height:32px; border-radius:50%; border:2px solid transparent;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    outline:2px solid transparent; outline-offset:2px; transition:outline .15s;
}
.mob-filter-color.is-active { outline:2px solid var(--mob-ink); }

.mob-filter-brands-list { display:flex; flex-direction:column; gap:0; }
.mob-filter-brand-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--mob-line);
}
.mob-filter-brand-row:last-child { border-bottom:none; }
.mob-filter-brand-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--mob-ink); }
.mob-filter-brand-label { font-size:14px; color:var(--mob-ink); }

.mob-filter-cta { padding:16px 20px 8px; }

/* ── CHECKOUT ── */
.mob-checkout-wrap { padding-bottom:20px; background:var(--mob-bg); }
.mob-ck-section {
    background:var(--mob-surface); margin-bottom:10px; padding:16px;
}
.mob-ck-section-hd {
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.mob-ck-num { font-size:11px; font-weight:700; color:var(--mob-ink-2); }
.mob-ck-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mob-ink); flex:1; }
.mob-ck-edit { font-size:12px; font-weight:600; color:var(--mob-ink-2); text-decoration:none; }
.mob-ck-address-card {
    border:1px solid var(--mob-line); border-radius:8px; padding:14px;
    display:flex; gap:12px; align-items:flex-start;
}
.mob-ck-address-sel { border-color:var(--mob-ink); }
.mob-ck-radio-dot {
    width:18px; height:18px; border-radius:50%; border:1.5px solid var(--mob-ink);
    flex-shrink:0; position:relative; margin-top:1px;
}
.mob-ck-address-sel .mob-ck-radio-dot::after {
    content:''; position:absolute; inset:3px; border-radius:50%; background:var(--mob-ink);
}
.mob-ck-address-name { font-size:14px; font-weight:600; margin:0 0 4px; color:var(--mob-ink); }
.mob-ck-address-line { font-size:13px; color:var(--mob-ink-2); margin:0; line-height:1.45; }
.mob-ck-add-address {
    display:flex; align-items:center; gap:8px; font-size:14px;
    color:var(--mob-ink-2); text-decoration:none;
}

.mob-ck-methods { display:flex; flex-direction:column; gap:8px; }
.mob-ck-method {
    display:flex; align-items:center; gap:12px;
    border:1px solid var(--mob-line); border-radius:8px; padding:14px;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mob-ck-method.is-selected { border-color:var(--mob-ink); }
.mob-ck-method input[type=radio] { display:none; }
.mob-ck-method-radio {
    width:18px; height:18px; border-radius:50%; border:1.5px solid var(--mob-ink-3);
    flex-shrink:0; position:relative; transition:border-color .15s;
}
.mob-ck-method.is-selected .mob-ck-method-radio {
    border-color:var(--mob-ink);
}
.mob-ck-method.is-selected .mob-ck-method-radio::after {
    content:''; position:absolute; inset:3px; border-radius:50%; background:var(--mob-ink);
}
.mob-ck-method-info { flex:1; }
.mob-ck-method-name { font-size:14px; font-weight:600; color:var(--mob-ink); display:block; margin-bottom:2px; }
.mob-ck-method-days { font-size:12px; color:var(--mob-ink-2); }
.mob-ck-method-price { font-size:14px; font-weight:600; color:var(--mob-ink); }

.mob-ck-items { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.mob-ck-item { display:flex; gap:12px; align-items:center; }
.mob-ck-item-img {
    width:52px; height:64px; flex-shrink:0; border-radius:4px;
    overflow:hidden; background:#e8e4de;
}
.mob-ck-item-img img { width:100%; height:100%; object-fit:cover; }
.mob-ck-item-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:20px; color:#bbb; }
.mob-ck-item-info { flex:1; min-width:0; }
.mob-ck-item-name { font-size:13px; font-weight:600; color:var(--mob-ink); margin:0 0 2px; }
.mob-ck-item-meta { font-size:12px; color:var(--mob-ink-2); margin:0; }
.mob-ck-item-right { text-align:right; flex-shrink:0; }
.mob-ck-item-qty { font-size:12px; color:var(--mob-ink-2); display:block; }
.mob-ck-item-price { font-size:13px; font-weight:600; color:var(--mob-ink); }
.mob-ck-totals { border-top:1px solid var(--mob-line); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.mob-ck-total-row { display:flex; justify-content:space-between; font-size:13.5px; color:var(--mob-ink-2); }
.mob-ck-total-final { font-size:16px; font-weight:700; color:var(--mob-ink); }
.mob-ck-cta { padding:16px; background:var(--mob-surface); }


/* =========================================================
   INFLUHKS MOBILE — PHASE 3 CSS
   Orders · Returns · Tracking · Settings · Help · Stores
   Reviews · Gift Cards · Search · Size Guide · Addresses
   ========================================================= */

/* ── Shared page layout ── */
.mob-page-wrap { background: var(--mob-bg); min-height: 100%; }
.mob-page-title { font-size: 28px; font-weight: 600; color: var(--mob-ink); margin: 0; line-height: 1.1; font-family: 'Playfair Display', Georgia, serif; }
.mob-page-header { padding: 20px 16px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--mob-surface); border-bottom: 1px solid var(--mob-line); }
.mob-btn-outline { display: block; width: 100%; padding: 16px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--mob-ink); color: var(--mob-ink); background: var(--mob-surface); cursor: pointer; font-family: var(--mob-font); }
.mob-btn-chip { padding: 8px 14px; border: 1px solid var(--mob-ink); background: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mob-ink); cursor: pointer; font-family: var(--mob-font); }
.mob-input { width: 100%; padding: 11px 14px; border: 1px solid var(--mob-line); border-radius: 0; font-size: 14px; font-family: var(--mob-font); color: var(--mob-ink); background: var(--mob-surface); outline: none; }
.mob-input:focus { border-color: var(--mob-ink); }

/* ── ORDER HISTORY ── */
.mob-order-tabs { display: flex; overflow-x: auto; background: var(--mob-surface); border-bottom: 1px solid var(--mob-line); scrollbar-width: none; }
.mob-order-tabs::-webkit-scrollbar { display: none; }
.mob-order-tab { flex-shrink: 0; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--mob-ink-2); border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: var(--mob-font); white-space: nowrap; transition: color .15s, border-color .15s; }
.mob-order-tab.is-active { color: var(--mob-ink); border-bottom-color: var(--mob-ink); font-weight: 700; }

.mob-orders-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.mob-order-card { background: var(--mob-surface); border-radius: 8px; overflow: hidden; }
.mob-oc-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 14px 10px; }
.mob-oc-number { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 0; }
.mob-oc-date { font-size: 11.5px; color: var(--mob-ink-2); margin: 2px 0 0; }
.mob-oc-status { font-size: 12px; font-weight: 700; }
.mob-oc-item { display: flex; gap: 12px; padding: 0 14px 10px; border-bottom: 1px solid var(--mob-line); }
.mob-oc-img { width: 60px; height: 74px; border-radius: 4px; overflow: hidden; background: #e8e4de; flex-shrink: 0; }
.mob-oc-img img { width: 100%; height: 100%; object-fit: cover; }
.mob-oc-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 200; color: #bbb; }
.mob-oc-info { flex: 1; min-width: 0; }
.mob-oc-item-name { font-size: 13.5px; font-weight: 600; color: var(--mob-ink); margin: 0 0 3px; }
.mob-oc-item-variant { font-size: 12px; color: var(--mob-ink-2); margin: 0 0 3px; }
.mob-oc-item-qty { font-size: 12px; color: var(--mob-ink-2); margin: 0 0 3px; }
.mob-oc-item-price { font-size: 13px; font-weight: 600; color: var(--mob-ink); margin: 0; }
.mob-oc-more { font-size: 11.5px; color: var(--mob-ink-2); padding: 6px 14px 0; margin: 0; }
.mob-oc-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.mob-oc-total { font-size: 14px; font-weight: 600; color: var(--mob-ink); }
.mob-oc-link { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--mob-ink); text-decoration: none; }

/* ── ORDER DETAIL ── */
.mob-od-section { background: var(--mob-surface); margin-bottom: 10px; padding: 16px; }
.mob-od-section-title { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mob-ink); margin: 0 0 12px; }
.mob-od-addr { display: flex; gap: 10px; align-items: flex-start; }
.mob-od-addr-name { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.mob-od-addr-line { font-size: 13px; color: var(--mob-ink-2); margin: 0; line-height: 1.5; }
.mob-od-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--mob-line); }
.mob-od-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mob-od-item-img { width: 56px; height: 70px; border-radius: 4px; overflow: hidden; background: #e8e4de; flex-shrink: 0; }
.mob-od-item-img img { width: 100%; height: 100%; object-fit: cover; }
.mob-od-item-info { flex: 1; }
.mob-od-item-name { font-size: 13.5px; font-weight: 600; color: var(--mob-ink); margin: 0 0 3px; }
.mob-od-item-variant { font-size: 12px; color: var(--mob-ink-2); margin: 0 0 4px; }
.mob-od-item-price { font-size: 13px; font-weight: 600; color: var(--mob-ink); margin: 0; }
.mob-od-totals { border-top: 1px solid var(--mob-line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ── TIMELINE ── */
.mob-timeline { display: flex; flex-direction: column; gap: 0; }
.mob-timeline-item { display: flex; gap: 14px; position: relative; }
.mob-timeline-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mob-line); background: var(--mob-surface); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; }
.mob-timeline-item.done .mob-timeline-dot { border-color: var(--mob-ink); background: var(--mob-ink); }
.mob-timeline-line { position: absolute; left: 6px; top: 18px; bottom: -4px; width: 2px; background: var(--mob-line); }
.mob-timeline-line.done { background: var(--mob-ink); }
.mob-timeline-content { flex: 1; padding-bottom: 18px; }
.mob-timeline-label { font-size: 13.5px; font-weight: 600; color: var(--mob-ink); margin: 0 0 3px; }
.mob-timeline-date { font-size: 12px; color: var(--mob-ink-2); margin: 0; }

/* ── ADDRESS BOOK ── */
.mob-addr-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.mob-addr-card { background: var(--mob-surface); border-radius: 8px; padding: 16px; }
.mob-addr-badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; background: var(--mob-line); color: var(--mob-ink-2); }
.mob-addr-badge-dark { background: var(--mob-ink); color: #fff; }
.mob-addr-name { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 8px 0 4px; }
.mob-addr-phone { font-size: 12.5px; color: var(--mob-ink-2); margin: 0 0 4px; }
.mob-addr-line { font-size: 13px; color: var(--mob-ink-2); margin: 0; line-height: 1.55; }
.mob-addr-actions { display: flex; gap: 20px; margin-top: 14px; border-top: 1px solid var(--mob-line); padding-top: 12px; }
.mob-addr-action-btn { background: none; border: none; font-size: 13px; font-weight: 600; color: var(--mob-ink-2); cursor: pointer; font-family: var(--mob-font); padding: 0; }
.mob-addr-action-del { color: #dc2626; }

/* ── WISHLIST ── */
.mob-wl-wrap { padding-bottom: 90px; }
.mob-wl-item { display: flex; gap: 14px; align-items: flex-start; background: var(--mob-surface); padding: 14px 16px; border-bottom: 1px solid var(--mob-line); }
.mob-wl-img { width: 88px; height: 108px; border-radius: 4px; overflow: hidden; background: #e8e4de; flex-shrink: 0; display: block; }
.mob-wl-img img { width: 100%; height: 100%; object-fit: cover; }
.mob-wl-info { flex: 1; min-width: 0; }
.mob-wl-name { font-size: 14px; font-weight: 600; color: var(--mob-ink); text-decoration: none; display: block; margin-bottom: 4px; }
.mob-wl-variant { font-size: 12.5px; color: var(--mob-ink-2); margin: 0 0 2px; }
.mob-wl-price { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 8px 0 0; }
.mob-wl-heart { width: 32px; height: 32px; border-radius: 50%; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mob-ink); flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.mob-wl-heart.is-active { color: var(--mob-ink); }

/* ── RETURNS ── */
.mob-return-item { display: flex; gap: 14px; background: var(--mob-surface); padding: 16px; margin-bottom: 10px; }
.mob-return-img { width: 76px; height: 92px; border-radius: 4px; overflow: hidden; background: #e8e4de; flex-shrink: 0; }
.mob-return-img img { width: 100%; height: 100%; object-fit: cover; }
.mob-return-info { flex: 1; }
.mob-return-name { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 0 0 4px; }
.mob-return-variant, .mob-return-meta { font-size: 12px; color: var(--mob-ink-2); margin: 0 0 2px; }
.mob-return-price { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 8px 0 0; }
.mob-return-steps-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mob-ink); padding: 14px 16px 8px; }
.mob-return-steps { background: var(--mob-surface); margin-bottom: 10px; }
.mob-return-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--mob-line); }
.mob-return-step:last-child { border-bottom: none; }
.mob-return-step-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mob-line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--mob-ink-3); flex-shrink: 0; margin-top: 1px; }
.mob-return-step.is-active .mob-return-step-num { border-color: var(--mob-ink); color: var(--mob-ink); background: var(--mob-ink); color: #fff; }
.mob-return-step-content { flex: 1; }
.mob-return-step-label { font-size: 14px; font-weight: 600; color: var(--mob-ink); margin: 0 0 3px; }
.mob-return-step-desc { font-size: 12px; color: var(--mob-ink-2); margin: 0; line-height: 1.5; }
.mob-return-step-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--mob-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mob-ink); }
.mob-return-step.is-active .mob-return-step-radio { border-color: var(--mob-ink); background: var(--mob-ink); color: #fff; }

/* ── ORDER TRACKING ── */
.mob-tracking-estimated { background: var(--mob-surface); padding: 20px 16px; margin: 10px 0; }
.mob-tracking-est-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mob-ink-2); margin: 0 0 8px; }
.mob-tracking-est-date { font-size: 28px; font-weight: 600; color: var(--mob-ink); margin: 0 0 4px; font-family: 'Playfair Display', Georgia, serif; }
.mob-tracking-est-window { font-size: 13px; color: var(--mob-ink-2); margin: 0; }
.mob-tracking-steps { display: flex; align-items: center; padding: 20px 20px 8px; gap: 0; }
.mob-tracking-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.mob-tracking-step-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mob-line); background: var(--mob-surface); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; color: var(--mob-ink-3); }
.mob-tracking-step.done .mob-tracking-step-circle { border-color: var(--mob-ink); background: var(--mob-ink); color: #fff; }
.mob-tracking-step.current .mob-tracking-step-circle { border-color: var(--mob-ink); background: var(--mob-ink); }
.mob-tracking-step-line { position: absolute; top: 10px; left: 50%; right: -50%; height: 2px; background: var(--mob-line); z-index: 0; }
.mob-tracking-step-line.done { background: var(--mob-ink); }
.mob-tracking-step-labels { display: flex; padding: 4px 10px 16px; }
.mob-tracking-step-label-item { flex: 1; text-align: center; }
.mob-tracking-step-name { font-size: 9.5px; font-weight: 600; color: var(--mob-ink-3); margin: 0 0 2px; text-align: center; }
.mob-tracking-step-name.done { color: var(--mob-ink); }
.mob-tracking-step-date { font-size: 9px; color: var(--mob-ink-3); margin: 0; text-align: center; }
.mob-tracking-number-wrap { background: var(--mob-surface); padding: 16px; margin-bottom: 10px; }
.mob-tracking-number-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mob-ink-2); margin: 0 0 8px; }
.mob-tracking-number { font-size: 16px; font-weight: 600; font-family: monospace; color: var(--mob-ink); margin: 0; letter-spacing: .05em; }

/* ── SETTINGS ── */
.mob-settings-section-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mob-ink-2); padding: 16px 16px 8px; }
.mob-settings-group { background: var(--mob-surface); margin-bottom: 10px; }
.mob-settings-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--mob-line); text-decoration: none; color: var(--mob-ink); -webkit-tap-highlight-color: transparent; cursor: pointer; }
.mob-settings-row:last-child { border-bottom: none; }
.mob-settings-row:active { background: var(--mob-bg); }
.mob-settings-row-val { cursor: default; }
.mob-settings-icon { width: 22px; display: flex; align-items: center; justify-content: center; color: var(--mob-ink-2); flex-shrink: 0; font-size: 15px; }
.mob-settings-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--mob-ink); }

/* ── HELP CENTER ── */
.mob-help-cta { background: var(--mob-surface); margin: 0 16px 16px; padding: 20px; border-radius: 8px; border: 1px solid var(--mob-line); }
.mob-search-bar { display: flex; align-items: center; gap: 10px; background: var(--mob-bg); border-radius: 8px; }

/* ── STORE LOCATOR ── */
.mob-map-placeholder { height: 200px; background: #e8e4de; overflow: hidden; position: relative; margin-bottom: 0; }
.mob-map-bg { width: 100%; height: 100%; position: relative; overflow: hidden; }
.mob-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px); background-size: 40px 40px; }
.mob-map-pin { position: absolute; width: 16px; height: 16px; background: var(--mob-ink); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.mob-map-pin::after { content: ''; position: absolute; inset: 3px; background: #fff; border-radius: 50%; }
.mob-store-list { display: flex; flex-direction: column; }
.mob-store-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--mob-line); background: var(--mob-surface); }
.mob-store-img { width: 70px; height: 70px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.mob-store-info { flex: 1; min-width: 0; }
.mob-store-name { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 0 0 3px; }
.mob-store-addr { font-size: 12.5px; color: var(--mob-ink-2); margin: 0; line-height: 1.4; }
.mob-store-status { font-size: 11.5px; color: var(--mob-ink-2); margin: 4px 0 0; }

/* ── REVIEWS ── */
.mob-rev-summary { background: var(--mob-surface); padding: 20px 16px; margin-bottom: 10px; display: flex; gap: 20px; align-items: flex-start; }
.mob-rev-score { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.mob-rev-big { font-size: 44px; font-weight: 700; color: var(--mob-ink); margin: 0; line-height: 1; }
.mob-rev-stars { display: flex; gap: 2px; margin: 6px 0 4px; }
.mob-rev-breakdown { flex: 1; min-width: 0; }
.mob-rev-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; color: var(--mob-ink-2); }
.mob-rev-bar { flex: 1; height: 4px; background: var(--mob-line); border-radius: 2px; overflow: hidden; }
.mob-rev-bar-fill { height: 100%; background: var(--mob-ink); border-radius: 2px; transition: width .4s; }
.mob-rev-list { display: flex; flex-direction: column; }
.mob-rev-item { background: var(--mob-surface); padding: 16px; border-bottom: 1px solid var(--mob-line); }
.mob-rev-item-header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.mob-rev-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e8e4de; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--mob-ink-2); flex-shrink: 0; }
.mob-rev-reviewer { font-size: 13.5px; font-weight: 700; color: var(--mob-ink); margin: 0 0 4px; }
.mob-rev-verified { font-size: 10px; font-weight: 600; background: #f0fdf4; color: #166534; padding: 2px 8px; border-radius: 100px; }
.mob-rev-date { font-size: 11.5px; color: var(--mob-ink-3); margin: 0; white-space: nowrap; }
.mob-rev-title { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 0 0 6px; }
.mob-rev-body { font-size: 13px; color: var(--mob-ink-2); line-height: 1.55; margin: 0 0 8px; }
.mob-rev-meta { font-size: 11.5px; color: var(--mob-ink-3); margin: 0; }

/* ── GIFT CARDS ── */
.mob-gc-card { background: #111; border-radius: 14px; padding: 22px 20px; color: #fff; position: relative; min-height: 180px; display: flex; flex-direction: column; margin-bottom: 4px; }
.mob-gc-card-brand { font-size: 13px; font-weight: 700; letter-spacing: .25em; opacity: .7; }
.mob-gc-amount { font-size: 52px; font-weight: 700; margin: 0; text-align: center; font-family: 'Playfair Display', Georgia, serif; }
.mob-gc-card-footer { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; letter-spacing: .1em; opacity: .55; text-transform: uppercase; }
.mob-gc-label { font-size: 14px; font-weight: 700; color: var(--mob-ink); margin: 0 0 10px; }
.mob-gc-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.mob-gc-amount-btn { padding: 10px 16px; border: 1px solid var(--mob-line); background: var(--mob-surface); font-size: 13.5px; font-weight: 600; color: var(--mob-ink); cursor: pointer; border-radius: 6px; font-family: var(--mob-font); transition: all .15s; }
.mob-gc-amount-btn.is-active { background: var(--mob-ink); color: #fff; border-color: var(--mob-ink); }
.mob-gc-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mob-gc-field { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--mob-line); padding: 12px 0; }
.mob-gc-field-msg { align-items: flex-start; }
.mob-gc-input { flex: 1; border: none; background: transparent; font-size: 14px; font-family: var(--mob-font); color: var(--mob-ink); outline: none; }
.mob-gc-input::placeholder { color: var(--mob-ink-3); }

/* ── SEARCH ── */
.mob-search-bar { display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.mob-search-tag { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--mob-line); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--mob-ink); text-decoration: none; background: var(--mob-surface); white-space: nowrap; }
.mob-search-promo { margin: 16px; border-radius: 10px; background: linear-gradient(135deg, #1a1a2e, #2d2418); padding: 24px 20px; min-height: 120px; }

/* ── SIZE GUIDE ── */
.mob-sg-category-tabs { display: flex; background: var(--mob-surface); border-bottom: 1px solid var(--mob-line); }
.mob-sg-cat-tab { flex: 1; padding: 13px 8px; font-size: 13px; font-weight: 500; color: var(--mob-ink-2); border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: var(--mob-font); transition: color .15s, border-color .15s; }
.mob-sg-cat-tab.is-active { color: var(--mob-ink); border-bottom-color: var(--mob-ink); font-weight: 700; }
.mob-sg-gender-tabs { display: flex; gap: 8px; padding: 14px 16px; background: var(--mob-surface); border-bottom: 1px solid var(--mob-line); }
.mob-sg-gender-btn { padding: 8px 20px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--mob-line); border-radius: 6px; background: none; color: var(--mob-ink-2); cursor: pointer; font-family: var(--mob-font); transition: all .15s; }
.mob-sg-gender-btn.is-active { background: var(--mob-ink); color: #fff; border-color: var(--mob-ink); }
.mob-sg-tables { background: var(--mob-surface); padding: 16px; margin-bottom: 10px; overflow-x: auto; }
.mob-sg-table-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mob-ink); margin: 0 0 10px; }
.mob-sg-table { width: 100%; overflow-x: auto; }
.mob-sg-thead, .mob-sg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; text-align: center; }
.mob-sg-thead { background: var(--mob-bg); }
.mob-sg-thead span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mob-ink-2); padding: 8px 4px; }
.mob-sg-row { border-bottom: 1px solid var(--mob-line); }
.mob-sg-row:last-child { border-bottom: none; }
.mob-sg-row span { font-size: 12.5px; color: var(--mob-ink); padding: 10px 4px; }
.mob-sg-row span:first-child { font-weight: 700; }
.mob-sg-disclaimer { display: flex; align-items: flex-start; gap: 10px; background: var(--mob-bg); border-radius: 8px; margin: 0 16px 16px; padding: 14px; border: 1px solid var(--mob-line); font-size: 12px; color: var(--mob-ink-2); line-height: 1.5; }
.mob-sg-disclaimer p { margin: 0; }

/* ── Order tabs JS filter ── */

/* =========================================================
   INFLUHKS MOBILE — PHASE 4 CSS
   Brands grid · Shop filter fixes · Grid single-col toggle
   ========================================================= */

/* ── Brands Grid ── */
.mob-brands-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--mob-line);
    padding: 10px 0 0;
}
.mob-brand-card {
    background: var(--mob-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    min-height: 100px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.mob-brand-card:active { background: var(--mob-bg); }
.mob-brand-logo {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .75;
    transition: opacity .2s;
}
.mob-brand-card:hover .mob-brand-logo { opacity: 1; }
.mob-brand-name-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mob-ink);
    text-align: center;
    letter-spacing: .04em;
    line-height: 1.35;
}

/* ── Shop: single-column toggle ── */
.mob-shop-grid.mob-grid-single {
    grid-template-columns: 1fr;
}
.mob-shop-grid.mob-grid-single .mob-shop-product-card {
    display: flex;
    flex-direction: row;
    gap: 14px;
}
.mob-shop-grid.mob-grid-single .mob-shop-img-wrap {
    width: 100px;
    height: 120px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

/* ── Filter: ensure overlay works correctly ── */
.mob-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 400;
}
.mob-filter-overlay.is-open {
    display: block;
}
.mob-filter-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--mob-surface);
    z-index: 401;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    padding-bottom: calc(16px + var(--mob-safe-bot));
}
.mob-filter-overlay.is-open .mob-filter-drawer {
    transform: translateY(0);
}

/* ── Order tab filter ── */
.mob-order-card[style*="display:none"],
.mob-order-card[hidden] { display: none; }

/* ── Home: ensure mob-section white bg on top of mob-bg ── */
.mob-section {
    background: var(--mob-surface);
    margin-top: 10px;
    padding: 18px 0 12px;
}
.mob-section:first-of-type { margin-top: 0; }

/* ── Order tabs JS logic ── */
@keyframes mobSlideUp {
    from { transform: translateY(10px); opacity:0; }
    to   { transform: translateY(0); opacity:1; }
}

/* ── Account pages: ensure padding doesn't overlap bottom nav ── */
.mob-page-wrap { padding-bottom: calc(var(--mob-bn-h, 68px) + var(--mob-safe-bot, 0px) + 16px); }
.mob-wl-wrap   { padding-bottom: calc(var(--mob-bn-h, 68px) + var(--mob-safe-bot, 0px) + 72px); }

/* ── Shop: product info area ── */
.mob-shop-product-card { background: var(--mob-surface); }