/* ═══════════════════════════════════════════════════════════════════
   UI POLISH LAYER — storefront desktop + mobile/PWA
   Loaded AFTER all other storefront stylesheets. Strictly refining:
   no layout-structural overrides (widths, grids, positioning), only
   micro-interactions, focus states, elevation, and finish. Every rule
   keys off classes/tokens that already exist in storefront.css /
   mobile-app.css, so removing this file degrades gracefully.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Foundations ─────────────────────────────────────────────────── */
::selection { background: var(--sf-text, #0c0c0c); color: #fff; }

html { scroll-behavior: smooth; }

/* Slim, unobtrusive scrollbars (desktop) */
@media (min-width: 901px) {
    * { scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: #9a9a9a; }
}

/* Accessible, consistent keyboard focus ring — everywhere */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--sf-text, #0c0c0c);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Honour users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Buttons: press feel + subtle elevation ──────────────────────── */
.sf-btn, .sf-btn-outline, .sf-btn-link {
    transition: transform .16s ease, box-shadow .16s ease,
                background-color .16s ease, color .16s ease,
                border-color .16s ease, opacity .16s ease;
    will-change: transform;
}
@media (hover: hover) {
    .sf-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
    .sf-btn-outline:hover, .sf-btn-link:hover { transform: translateY(-1px); }
}
.sf-btn:active, .sf-btn-outline:active, .sf-btn-link:active {
    transform: translateY(0) scale(.985);
    box-shadow: none;
}

/* ── Inputs: calm focus, refined placeholder ─────────────────────── */
.sf-input, .sf-select, textarea.sf-input {
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sf-input:focus, .sf-select:focus, textarea.sf-input:focus {
    border-color: var(--sf-text, #0c0c0c);
    box-shadow: 0 0 0 3px rgba(12,12,12,.07);
}
.sf-input::placeholder { color: #a3a3a3; }

/* ── Cards & blocks: gentle lift on interactive surfaces ─────────── */
.sf-block { transition: box-shadow .22s ease, border-color .22s ease; }
@media (hover: hover) {
    a.sf-block:hover, .sf-block:has(> a:hover) {
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        border-color: #d9d9d9;
    }
}

/* Product cards: image ease + title color shift */
.sf-product-card img, .sf-card-media img {
    transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
}
@media (hover: hover) {
    .sf-product-card:hover img, .sf-card-media:hover img { transform: scale(1.035); }
}

/* ── Tables: readable rows, hover affordance ─────────────────────── */
.sf-table tbody tr { transition: background-color .14s ease; }
@media (hover: hover) {
    .sf-table tbody tr:hover { background: var(--sf-soft, #f6f6f6); }
}
.sf-table thead th {
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}

/* ── Badges: crisper finish ──────────────────────────────────────── */
.sf-badge { letter-spacing: .05em; }

/* ── Auth card: premium presence ─────────────────────────────────── */
.sf-auth-card {
    box-shadow: 0 18px 60px rgba(0,0,0,.09);
    border-radius: 4px;
}

/* ── Alerts: soft entrance ───────────────────────────────────────── */
.sf-alert { animation: sfAlertIn .28s ease both; }
@keyframes sfAlertIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Elite account: consistent card hover + nav transitions ──────── */
@media (min-width: 901px) {
    .elite-nav-link { transition: background-color .16s ease, color .16s ease, transform .16s ease; }
    .elite-nav-link:hover { transform: translateX(2px); }
    .elite-action-card, .elite-stat-card { transition: box-shadow .2s ease, transform .2s ease; }
    .elite-action-card:hover, .elite-stat-card:hover {
        box-shadow: 0 10px 28px rgba(0,0,0,.08);
        transform: translateY(-2px);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE / PWA — native-app feel (≤900px, matching app breakpoint)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Kill browser artefacts that betray "website" */
    * { -webkit-tap-highlight-color: transparent; }
    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overscroll-behavior-y: none;           /* no rubber-band page bounce */
    }
    input, select, textarea { font-size: 16px; } /* prevent iOS focus zoom */

    /* Momentum scrolling in any inner scroller */
    .mob-page-wrap, .mob-orders-list, [class*="mob-"] { -webkit-overflow-scrolling: touch; }

    /* ── Bottom nav: frosted glass + spring dot ── */
    .mob-bottom-nav {
        background: rgba(255,255,255,.88);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 -4px 24px rgba(0,0,0,.05);
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
    }
    .mob-bn-tab {
        min-height: 48px;                       /* WCAG touch target */
        transition: color .18s ease, transform .18s ease;
        position: relative;
    }
    .mob-bn-tab:active { transform: scale(.92); }
    .mob-bn-tab.is-active::before {
        content: "";
        position: absolute;
        top: 2px; left: 50%;
        width: 16px; height: 3px;
        border-radius: 999px;
        background: currentColor;
        transform: translateX(-50%);
        animation: mobTabDot .32s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes mobTabDot {
        from { transform: translateX(-50%) scaleX(.2); opacity: 0; }
        to   { transform: translateX(-50%) scaleX(1);  opacity: 1; }
    }

    /* ── Header: frosted, safe-area aware ── */
    .mob-header-inner {
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
    .mob-hd-btn {
        min-width: 44px; min-height: 44px;
        transition: transform .15s ease, background-color .15s ease;
        border-radius: 12px;
    }
    .mob-hd-btn:active { transform: scale(.9); background: rgba(0,0,0,.05); }

    /* ── Native press feedback on all primary touch surfaces ── */
    .mob-btn-primary, .mob-btn-outline, .mob-btn-chip,
    .mob-oc-link, .mob-addr-action-btn, .mob-gc-amount-btn {
        transition: transform .14s ease, opacity .14s ease, box-shadow .14s ease;
    }
    .mob-btn-primary:active, .mob-btn-outline:active,
    .mob-btn-chip:active, .mob-gc-amount-btn:active { transform: scale(.965); }

    /* Cards respond to touch like list rows in a native app */
    .mob-order-card, .mob-addr-card, .mob-brand-card, .mob-gc-card,
    .mob-ck-address-card {
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .mob-order-card:active, .mob-addr-card:active,
    .mob-brand-card:active, .mob-ck-address-card:active {
        transform: scale(.985);
    }

    /* ── Page entrance: subtle native push ── */
    .mob-page-wrap { animation: mobPageIn .3s cubic-bezier(.2,.7,.3,1) both; }
    @keyframes mobPageIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Skeleton shimmer (used with existing skeleton blocks) ── */
    .mob-skeleton, .elite-skeleton {
        position: relative; overflow: hidden;
        background: #eee !important;
    }
    .mob-skeleton::after, .elite-skeleton::after {
        content: "";
        position: absolute; inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
        animation: mobShimmer 1.4s infinite;
    }
    @keyframes mobShimmer { to { transform: translateX(100%); } }

    /* ── Inputs: iOS-calibre fields ── */
    .mob-ck-input, .mob-gc-input {
        transition: border-color .16s ease, box-shadow .16s ease;
        border-radius: 12px;
    }
    .mob-ck-input:focus, .mob-gc-input:focus {
        box-shadow: 0 0 0 3px rgba(12,12,12,.08);
    }

    /* Focus ring on touch devices only for keyboards, not taps */
    :focus-visible { outline-offset: 1px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PWA standalone mode — remove any lingering browser chrome feel
   ═══════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
    body { user-select: none; }                 /* native apps don't select UI text */
    input, textarea, [contenteditable] { user-select: text; }
}

/* ═══════════════════════════════════════════════════════════════════
   Native cross-page transitions (mobile only, ≤900px)
   Cross-document View Transitions: zero JS, progressive enhancement —
   unsupported browsers simply navigate as before. Desktop unaffected.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    /* Subtle native push: old page eases out, new page slides in a touch. */
    ::view-transition-old(root) {
        animation: vtOut 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }
    ::view-transition-new(root) {
        animation: vtIn 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }
    @keyframes vtOut {
        to { opacity: 0.4; transform: translateX(-14px); }
    }
    @keyframes vtIn {
        from { opacity: 0; transform: translateX(18px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* The bottom nav + header persist visually across the transition
       instead of sliding with the page — exactly like a native tab bar. */
    .mob-bottom-nav { view-transition-name: mob-nav; }
    .mob-header-inner { view-transition-name: mob-header; }
}

/* Where view transitions exist they own the page-entrance motion — the
   scroll-in animation would double the movement. Non-supporting browsers
   keep the original entrance. */
@supports (view-transition-name: none) {
    @media (max-width: 900px) {
        .mob-page-wrap { animation: none; }
    }
}