/* ═══════════════════════════════════════════════════════════════════════════
   SHOP — Main Stylesheet
   Loaded via: public/shop/assets/css/shop.css
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   FONT
───────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/admin/assets/fonts/vazir/Vazirmatn[wght].woff2') format('woff2 supports variations'),
         url('/admin/assets/fonts/vazir/Vazirmatn[wght].woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────────────────────────────────── */
:root {
    --topbar-h:   56px;
    --sidebar-w:  288px;
    --sidebar-cw: 72px;

    --bg:         #f4f5f9;
    --bg-card:    #ffffff;
    --bg-sidebar: #ffffff;
    --bg-topbar:  #ffffff;
    --bg-input:   #f4f5f9;
    --bg-hover:   #f0f0f8;

    --text-1:     #0f0f1a;
    --text-2:     #4b4b6a;
    --text-3:     #9898b2;
    --border:     #e4e4f0;

    --primary:    #7c3aed;
    --primary-h:  #6d28d9;
    --primary-t:  rgba(124,58,237,.1);
    --primary-lt: rgba(124,58,237,.06);

    --green:      #059669;
    --green-t:    rgba(5,150,105,.1);
    --amber:      #d97706;
    --amber-t:    rgba(217,119,6,.1);
    --red:        #dc2626;

    --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
    --shadow:     0 4px 24px rgba(0,0,0,.08);
    --radius:     12px;
}
[data-theme="dark"] {
    --bg:         #0c0c16;
    --bg-card:    #13131f;
    --bg-sidebar: #11111c;
    --bg-topbar:  #11111c;
    --bg-input:   #1a1a2a;
    --bg-hover:   #1e1e30;

    --text-1:     #eeeef8;
    --text-2:     #8888aa;
    --text-3:     #555572;
    --border:     #252538;

    --primary:    #8b5cf6;
    --primary-h:  #7c3aed;
    --primary-t:  rgba(139,92,246,.14);
    --primary-lt: rgba(139,92,246,.07);

    --green:      #34d399;
    --green-t:    rgba(52,211,153,.1);
    --amber:      #fbbf24;
    --amber-t:    rgba(251,191,36,.1);
    --red:        #f87171;

    --shadow-sm:  0 1px 4px rgba(0,0,0,.4);
    --shadow:     0 4px 24px rgba(0,0,0,.5);
}

/* ─────────────────────────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
/* No double-tap-to-zoom; pinch-zoom is blocked in shop.js (iOS gesture events). */
html { touch-action: manipulation; }
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text-1);
    line-height: 1.6;
    transition: background .2s, color .2s;
}
a { text-decoration: none; color: inherit; }
button, input, select { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── Modern select boxes ─────────────────────────────────────────────────
   Strips the native dropdown chrome and draws a custom chevron so selects
   match the rest of the UI. Theme-aware via tokens; arrow colour switches
   for dark mode below. (RTL → chevron sits on the left.) */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--bg-input);
    color: var(--text-1);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    height: 42px;
    padding: 0 14px 0 38px;
    font-size: .9rem;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239898b2'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    transition: border-color .2s, box-shadow .2s;
}
select:hover  { border-color: var(--text-3); }
select:focus  { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-t); }
select option { background: var(--bg-card); color: var(--text-1); }
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238888aa'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
}

/* ── Custom select (JS-enhanced `.js-select`) ────────────────────────────
   .ms wraps the now-hidden native select; .ms-btn mimics a select control;
   .ms-panel is the themed option list, portaled to <body> (position:fixed). */
.ms { position: relative; display: inline-flex; }
.ms > select.js-select {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.ms-btn {
    appearance: none; -webkit-appearance: none;
    width: 100%; text-align: right;
    display: flex; align-items: center;
    background-color: var(--bg-input); color: var(--text-1);
    border: 1.5px solid var(--border); border-radius: 10px;
    height: 42px; padding: 0 14px 0 38px; font-size: .9rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239898b2'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    transition: border-color .2s, box-shadow .2s;
}
.ms-btn:hover { border-color: var(--text-3); }
.ms.open .ms-btn { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-t); }
[data-theme="dark"] .ms-btn {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238888aa'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
}
.ms-panel {
    position: fixed; z-index: 1000;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; max-height: 300px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .15s, transform .15s;
}
.ms-panel.open { opacity: 1; transform: none; }
.ms-opt {
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    font-size: .9rem; color: var(--text-1); white-space: nowrap;
    transition: background .12s, color .12s;
}
.ms-opt:hover  { background: var(--primary-t); color: var(--primary); }
.ms-opt.is-sel { background: var(--primary); color: #fff; }
.ms-panel::-webkit-scrollbar { width: 8px; }
.ms-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   APP SHELL
───────────────────────────────────────────────────────────────────────── */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.app-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.app-main > .main-inner {
    flex: 1 0 auto;
}
.app-main::-webkit-scrollbar { width: 5px; }
.app-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   STOREFRONT ADMIN BAR — rendered only for authenticated admins
───────────────────────────────────────────────────────────────────────── */
.store-adminbar {
    min-height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    direction: rtl;
    background: #11131c;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #d6d8e3;
    font-size: .72rem;
    z-index: 230;
}
.store-adminbar a { color: inherit; text-decoration: none; }
.store-adminbar-brand,
.store-adminbar-brand a,
.store-adminbar-links,
.store-adminbar-links a,
.store-adminbar-alerts,
.store-adminbar-alerts a,
.store-adminbar-alert-total,
.store-adminbar-clear {
    display: flex;
    align-items: center;
}
.store-adminbar-brand { gap: 4px; flex-shrink: 0; }
.store-adminbar-brand a,
.store-adminbar-links a,
.store-adminbar-alerts a {
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    transition: background .15s, color .15s;
}
.store-adminbar-brand a:first-child { color: #fff; font-weight: 700; }
.store-adminbar-brand a:hover,
.store-adminbar-links a:hover,
.store-adminbar-alerts a:hover { background: rgba(255,255,255,.08); color: #fff; }
.store-adminbar-site { color: #aeb2c3 !important; }
.store-adminbar-links {
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.store-adminbar-links::-webkit-scrollbar { display: none; }
.store-adminbar-links a { white-space: nowrap; }
.store-adminbar-links .is-contextual { background: rgba(124,58,237,.18); color: #c4b5fd; }
.store-adminbar-alerts {
    gap: 3px;
    margin-right: auto;
    flex-shrink: 0;
}
.store-adminbar-alerts a { white-space: nowrap; color: #c6c9d5; }
.store-adminbar-alerts b,
.store-adminbar-alert-total {
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
}
.store-adminbar-alert-total { gap: 4px; height: 24px; border-radius: 7px; }
.store-adminbar-clear { gap: 5px; color: #6ee7b7; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
   TOP BAR
───────────────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    flex-shrink: 0;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 200;
    position: relative;   /* anchor for the mobile search drop-down panel */
    transition: background .2s, border-color .2s;
}

/* Brand */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-1);
}
.topbar-brand-icon {
    width: 34px; height: 34px;
    background: var(--primary);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}
/* Uploaded site logo (replaces the icon + text when set) */
.topbar-logo {
    height: 36px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}
.topbar-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.2;
}
.topbar-brand-sub {
    font-size: .68rem;
    color: var(--text-3);
    letter-spacing: .5px;
    display: block;
    font-weight: 400;
}

/* Search */
.topbar-search {
    flex: 1;
    max-width: 440px;
    margin: 0 24px;
}
.topbar-search-form {
    position: relative;
    display: flex;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: visible;
    transition: border-color .2s, box-shadow .2s;
}
.topbar-search-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-t);
}
.topbar-search-input {
    flex: 1;
    height: 38px;
    border: none;
    background: transparent;
    padding: 0 14px;
    color: var(--text-1);
    font-size: .875rem;
    outline: none;
}
.topbar-search-input::placeholder { color: var(--text-3); }
.topbar-search-btn {
    width: 44px; height: 38px;
    border-radius: 9px 0 0 9px;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .15s;
    flex-shrink: 0;
}
.topbar-search-btn:hover { background: var(--primary-h); }

.live-search-panel {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    z-index: 1200;
    display: none;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.live-search-panel.open { display: block; }
.live-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: var(--text-1);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.live-search-item:last-child { border-bottom: 0; }
.live-search-item:hover { background: var(--primary-t); color: var(--primary); }
.live-search-thumb {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 1.15rem;
}
.live-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.live-search-title {
    min-width: 0;
    flex: 1;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-search-kind {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-t);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.live-search-empty {
    padding: 14px;
    color: var(--text-3);
    font-size: .82rem;
    text-align: center;
}
.live-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    color: var(--text-3);
    font-size: .82rem;
}
.live-search-loading i {
    display: inline-block;
    color: var(--primary);
    font-size: 1.05rem;
    animation: live-search-spin .75s linear infinite;
}
@keyframes live-search-spin {
    to { transform: rotate(360deg); }
}

/* On the homepage the large hero search owns the first viewport. The compact
   header search enters only after the user has scrolled completely past it. */
@media (min-width: 641px) {
    .topbar-home .topbar-search {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-9px) scale(.97);
        filter: blur(4px);
        transition:
            opacity .32s ease,
            transform .42s cubic-bezier(.2,.85,.25,1),
            filter .32s ease,
            visibility .32s;
    }
    .topbar-home.search-revealed .topbar-search {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.topbar-home .topbar-search-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.85);
    transition: opacity .25s, transform .35s cubic-bezier(.2,.85,.25,1), visibility .25s;
}
.topbar-home.search-revealed .topbar-search-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Actions */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tbtn {
    width: 38px; height: 38px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    position: relative;
    transition: all .15s;
}
.tbtn:hover { background: var(--primary-t); color: var(--primary); border-color: var(--primary); }
.tbtn-badge {
    position: absolute;
    top: -4px; left: -4px;
    background: var(--red);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    width: 17px; height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-topbar);
}
.topbar-divider {
    width: 1px; height: 22px;
    background: var(--border);
    margin: 0 4px;
}

/* User chip */
.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 6px;
    border-radius: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.user-chip:hover { background: var(--primary-lt); border-color: var(--primary); }
.user-chip-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.user-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-chip-avatar.is-default-avatar {
    background: #fff;
    border: 1px solid var(--border);
}
.user-chip-avatar img.default-profile-avatar {
    object-fit: contain;
}
.user-chip-meta { display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.user-chip-name { font-size: .82rem; font-weight: 600; color: var(--text-1); }
.user-chip-role {
    font-size: .67rem; color: var(--text-3); font-weight: 500;
    display: flex; align-items: center; gap: 3px;
}
.user-chip-role i { font-size: .78rem; }
.user-chip-role.vendor { color: var(--green); }
.user-chip-role.admin  { color: var(--primary); }
.user-chip-caret { color: var(--text-3); font-size: 1.05rem; transition: transform .2s; }
.user-menu:hover .user-chip-caret,
.user-menu:focus-within .user-chip-caret { transform: rotate(180deg); }

/* User dropdown */
.user-menu { position: relative; }
.user-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
    z-index: 299;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(340px, calc(100vw - 28px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s;
    overflow: hidden;
}
.user-dropdown::after {
    content: none;
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.user-dd-head,
.user-dd-stats,
.user-dd-wallet,
.user-dd-links,
.user-dd-logout {
    position: relative;
    z-index: 1;
}
.user-dd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 4px 12px;
}
.user-dd-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}
.user-dd-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.user-dd-avatar.is-default-avatar {
    background: #fff;
}
.user-dd-avatar img.default-profile-avatar {
    object-fit: contain;
}
.user-dd-person {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-dd-person strong {
    color: var(--text-1);
    font-size: .96rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dd-person span {
    color: var(--text-3);
    font-size: .74rem;
    direction: ltr;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dd-role {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-t);
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
}
.user-dd-role.vendor { color: var(--green); background: rgba(16,185,129,.12); }
.user-dd-role.admin { color: var(--primary); background: var(--primary-t); }
.user-dd-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}
.user-dd-stats div {
    min-width: 0;
    min-height: 56px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.user-dd-stats strong {
    color: var(--primary);
    font-size: .93rem;
    font-weight: 850;
}
.user-dd-stats span {
    color: var(--text-3);
    font-size: .64rem;
    white-space: nowrap;
}
.user-dd-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}
.user-dd-panels a:only-child {
    grid-column: 1 / -1;
}
.user-dd-panels a {
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 850;
    transition: transform .15s, background .15s, border-color .15s;
}
.user-dd-panels a.vendor {
    border-color: color-mix(in srgb, var(--green) 24%, var(--border));
    background: color-mix(in srgb, var(--green) 12%, var(--bg-input));
    color: var(--green);
}
.user-dd-panels a.account {
    border-color: var(--border);
    background: var(--bg-input);
    color: var(--primary);
}
.user-dd-panels a:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.user-dd-panels a.vendor:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.user-dd-panels span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dd-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 10px;
    border-radius: 13px;
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.user-dd-wallet div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.user-dd-wallet span {
    color: var(--text-3);
    font-size: .7rem;
}
.user-dd-wallet strong {
    color: var(--text-1);
    font-size: .86rem;
    font-weight: 800;
}
.user-dd-wallet a {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 10px;
    color: #fff;
    background: var(--primary);
    font-size: .75rem;
    font-weight: 800;
}
.user-dd-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.dditem {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: .8rem;
    color: var(--text-2);
    cursor: pointer;
    border: none;
    background: none;
    text-align: right;
    width: 100%;
    transition: all .15s;
}
.dditem i {
    color: var(--text-3);
    font-size: 1rem;
    flex-shrink: 0;
}
.dditem span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dditem b {
    margin-right: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-input));
    color: var(--primary);
    font-size: .65rem;
    font-weight: 800;
}
.dditem:hover { background: var(--primary-t); color: var(--primary); }
.dditem:hover i { color: var(--primary); }
.user-dd-logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.user-dd-logout .dditem {
    justify-content: center;
    color: var(--red);
    font-weight: 800;
}
.dditem-danger:hover { background: rgba(220,38,38,.08); color: var(--red); }
.dditem-danger:hover i { color: var(--red); }
.dd-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* Login button */
.btn-login {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.btn-login:hover { background: var(--primary-h); }
.login-label-short { display: none; }

/* Mobile menu button */
.mobile-menu-btn { display: none; }

/* Mobile search opener — hidden on desktop (the inline search box is shown
   there); revealed in the mobile media queries where the box is collapsed. */
.topbar-search-toggle { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: width .22s ease, background .2s, border-color .2s;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); }

.sidebar-nav { padding: 12px 10px; flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .88rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    position: relative;
    width: 100%;
    border: none;
    background: none;
    text-align: right;
    font-family: inherit;
    margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-item.active {
    background: var(--primary-t);
    color: var(--primary);
    font-weight: 600;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--primary);
    border-radius: 3px 0 0 3px;
}
.nav-icon { font-size: 1.05rem; flex-shrink: 0; }
.nav-icon-img {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
}
.nav-label { flex: 1; }
.nav-arrow {
    font-size: .85rem;
    color: var(--text-3);
    transition: transform .2s;
    flex-shrink: 0;
}
.nav-arrow.open { transform: rotate(-90deg); }

/* Sub-items */
.nav-group { margin-bottom: 2px; }
.nav-sub {
    padding-right: 14px;
    display: none;
}
/* Deeper levels indent less so labels keep their width at depth 3–4+ */
.nav-sub .nav-sub { padding-right: 10px; }
.nav-sub.open { display: block; }
.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .82rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    margin-bottom: 1px;
}
.nav-sub-item:hover { background: var(--bg-hover); color: var(--primary); }

/* Product-count badge shown next to a category */
.nav-count { font-size: .68rem; color: var(--text-3); flex-shrink: 0; padding: 0 2px; }
.nav-sub-item::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

/* Separator */
.nav-sep {
    height: 1px;
    background: var(--border);
    margin: 10px 8px;
}

/* Sidebar bottom */
.sidebar-bottom { padding: 12px 10px 16px; }
.sidebar-promo {
    display: block;
    background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
    border-radius: 12px;
    padding: 16px 14px;
    color: #fff;
    text-align: center;
    margin-bottom: 8px;
}
.sidebar-promo-icon { font-size: 1.5rem; margin-bottom: 6px; }
.sidebar-promo h4 { font-size: .88rem; font-weight: 700; margin-bottom: 4px; }
.sidebar-promo p { font-size: .73rem; opacity: .82; line-height: 1.5; margin-bottom: 12px; }
.btn-promo {
    display: block;
    background: rgba(255,255,255,.95);
    color: var(--primary);
    font-weight: 700;
    font-size: .8rem;
    padding: 8px 0;
    border-radius: 8px;
    text-align: center;
    transition: opacity .15s;
}
.btn-promo:hover { opacity: .9; }
.btn-vendor-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    font-size: .82rem;
    font-weight: 600;
    transition: all .15s;
    margin-top: 8px;
}
.btn-vendor-sm:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-t);
}
.sidebar-sub-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 12px;
    border-radius: 12px;
    color: var(--text-1);
    background: linear-gradient(135deg, rgba(5,150,105,.1), rgba(124,58,237,.08));
    border: 1px solid rgba(5,150,105,.28);
    margin-bottom: 8px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sidebar-sub-status:hover {
    border-color: var(--green);
    box-shadow: 0 8px 20px rgba(5,150,105,.12);
    transform: translateY(-1px);
}
.sidebar-sub-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-t);
    color: var(--green);
    font-size: 1.15rem;
}
.sidebar-sub-body {
    min-width: 0;
    flex: 1;
}
.sidebar-sub-body h4 {
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 3px;
}
.sidebar-sub-plan {
    font-size: .74rem;
    color: var(--green);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 6px;
}
.sidebar-sub-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .68rem;
    color: var(--text-2);
    line-height: 1.55;
}
.sidebar-sub-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sidebar-sub-meta i {
    color: var(--green);
    font-size: .8rem;
    flex-shrink: 0;
}
.sidebar-sub-quota {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(5,150,105,.14);
    margin-top: 9px;
}
.sidebar-sub-quota div {
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR — COLLAPSED STATE
   Toggle adds `.sidebar-collapsed` to <html> (set early in head to avoid FOUC).
   Collapsed: icons only at minimal width; top-level branches open as hover
   flyouts (the flyout is a DOM child of the group, so the cursor can travel
   from the icon into the flyout without it closing).
───────────────────────────────────────────────────────────────────────── */

/* Desktop toggle button: pinned to the sidebar/content edge */
.sidebar-toggle {
    position: fixed;
    top: 50%;
    right: calc(var(--sidebar-w) - 15px);
    transform: translateY(-50%);
    z-index: 360;
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    background: var(--bg-card);
    color: var(--primary);
    border-color: var(--border);
    box-shadow: 0 8px 22px rgba(15,15,26,.12);
    font-size: 1.15rem;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(124,58,237,.25);
}

.sidebar-collapsed .sidebar { width: var(--sidebar-cw); overflow: visible; }
.sidebar-collapsed .sidebar-toggle {
    right: calc(var(--sidebar-cw) - 15px);
}

/* Hide labels / arrows / counts / promo; center the icons */
.sidebar-collapsed .sidebar .nav-label,
.sidebar-collapsed .sidebar > .sidebar-nav > .nav-group > .nav-toggle > .nav-arrow,
.sidebar-collapsed .sidebar .nav-count,
.sidebar-collapsed .sidebar .nav-sep { display: none; }

.sidebar-collapsed .sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}
.sidebar-collapsed .sidebar-promo,
.sidebar-collapsed .sidebar-sub-status,
.sidebar-collapsed .btn-vendor-sm {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-collapsed .sidebar-promo {
    box-shadow: 0 8px 18px rgba(124,58,237,.2);
}
.sidebar-collapsed .sidebar-sub-status {
    box-shadow: 0 8px 18px rgba(5,150,105,.16);
}
.sidebar-collapsed .sidebar-promo-icon {
    font-size: 1.1rem;
    margin: 0;
}
.sidebar-collapsed .sidebar-sub-icon {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 1.1rem;
}
.sidebar-collapsed .sidebar-promo h4,
.sidebar-collapsed .sidebar-promo p,
.sidebar-collapsed .sidebar-promo .btn-promo,
.sidebar-collapsed .sidebar-sub-body,
.sidebar-collapsed .btn-vendor-sm span {
    display: none;
}
.sidebar-collapsed .btn-vendor-sm i {
    font-size: 1.15rem;
}

.sidebar-collapsed .sidebar-nav { padding: 12px 8px; overflow: visible; }
.sidebar-collapsed .sidebar-nav > .nav-item,
.sidebar-collapsed .sidebar-nav > .nav-group > .nav-toggle {
    justify-content: center;
    padding: 11px 0;
}
.sidebar-collapsed .nav-icon { font-size: 1.2rem; }
.sidebar-collapsed .nav-icon-img {
    width: 22px;
    height: 22px;
}

/* Top-level branch → hover flyout panel (opens to the left in RTL) */
.sidebar-collapsed .sidebar-nav > .nav-group { position: relative; }
.sidebar-collapsed .sidebar-nav > .nav-group > .nav-sub {
    display: none;
    position: absolute;
    top: 0; right: 100%;
    width: 232px;
    max-height: 78vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 350;
}
.sidebar-collapsed .sidebar-nav > .nav-group:hover > .nav-sub { display: block; }

/* Inside a flyout everything reads normally again (labels/arrows visible) */
.sidebar-collapsed .nav-sub .nav-item,
.sidebar-collapsed .nav-sub .nav-toggle { justify-content: flex-start; padding: 7px 12px; }
.sidebar-collapsed .nav-sub .nav-label { display: block; flex: 1; }
.sidebar-collapsed .nav-sub .nav-arrow,
.sidebar-collapsed .nav-sub .nav-count { display: inline-block; }
.sidebar-collapsed .nav-sub .nav-icon { font-size: 1.05rem; }
.sidebar-collapsed .nav-sub .nav-icon-img {
    width: 20px;
    height: 20px;
}

/* Flyout title (category name) — injected by shop.js, shown only when collapsed */
.nav-flyout-title { display: none; }
.sidebar-collapsed .sidebar-nav > .nav-group > .nav-sub > .nav-flyout-title {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-1);
    padding: 4px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────────────────
   FLASH MESSAGES
───────────────────────────────────────────────────────────────────────── */
.flash-zone { padding: 0 28px; }

#pdp-toast-zone {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.pdp-toast {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 340px;
    padding: 12px 16px;
    border-radius: 11px;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    transform: translateY(14px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.pdp-toast.is-shown { transform: translateY(0); opacity: 1; }
.pdp-toast.is-ok { background: var(--green); }
.pdp-toast.is-error { background: var(--red); }
.pdp-toast i { font-size: 1.1rem; flex-shrink: 0; }
@media (max-width: 560px) {
    #pdp-toast-zone { right: 12px; bottom: 12px; left: 12px; }
    .pdp-toast { max-width: none; }
}
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 10px;
    font-size: .875rem;
    margin-top: 16px;
}
.flash-success { background: var(--green-t); color: var(--green); border: 1px solid rgba(52,211,153,.2); }
.flash-error   { background: rgba(248,113,113,.08); color: var(--red); border: 1px solid rgba(248,113,113,.2); }

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE DRAWER
───────────────────────────────────────────────────────────────────────── */
.overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 400;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.overlay.open { opacity: 1; pointer-events: all; }
.mobile-sidebar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(280px, 85vw);
    background: var(--bg-sidebar);
    z-index: 401;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mobile-sidebar.open { transform: translateX(0); }
.mobile-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT CARD
───────────────────────────────────────────────────────────────────────── */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* Touch behaviour for every storefront card (home + category): no accidental
   text selection / long-press callout on tap, no grey tap-flash, and no
   double-tap-to-zoom on the interactive areas. */
.product-card,
.audio-card, .video-card, .masonry-card, .media-card {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.product-card, .product-thumb, .pcard-thumb, .awc-bars-wrap,
.video-thumb, .audio-bars, .masonry-card {
    touch-action: manipulation;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.product-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg);
}
.product-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.product-card:hover .product-thumb img { transform: scale(1.05); }
.product-thumb-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--border); font-size: 2rem;
}
.p-badge {
    position: absolute;
    top: 8px; right: 8px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .2px;
}
.p-badge-free { background: var(--green); color: #fff; }
.p-badge-vip  { background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; }
.p-badge-new  { background: var(--primary); color: #fff; }
.p-badge-hot  { background: var(--red); color: #fff; }

.product-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.product-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.product-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}
.product-vendor {
    max-width: 42%;
    font-size: .73rem;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    flex-shrink: 0;
}
.product-vendor span { overflow: hidden; text-overflow: ellipsis; }
.product-dl { font-size: .7rem; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.product-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.product-footer .p-price-free,
.product-footer .p-price-sub,
.product-footer .p-price-paid {
    margin-right: auto;
    text-align: left;
}
.p-price-free  { font-size: .88rem; font-weight: 700; color: var(--green); }
.p-price-sub   { font-size: .78rem; font-weight: 600; color: var(--primary); }
.p-price-paid  { font-size: .9rem; font-weight: 700; color: var(--text-1); }
.p-price-unit  { font-size: .68rem; color: var(--text-3); font-weight: 400; margin-right: 2px; }
.p-price-was   { font-size: .72rem; color: var(--text-3); font-weight: 400; text-decoration: line-through; margin-left: 5px; }
.btn-add {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
    transition: background .15s;
}
.btn-add-primary { background: var(--primary); }
.btn-add-primary:hover { background: var(--primary-h); }
.btn-add-green { background: var(--green); }
.btn-add-green:hover { background: #047857; }

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(var(--product-grid-desktop-cols, 4), minmax(0, 1fr));
    gap: var(--product-grid-gap, 22px);
    /* Keep each card at its natural height — image/video cards are tall (cover
       thumbnail) while audio cards are short (waveform). Without this the grid's
       default `stretch` would inflate the short cards to match the tallest in the
       row, leaving ugly empty space. */
    align-items: start;
}
@media (max-width: 1500px) {
    .product-grid { grid-template-columns: repeat(var(--product-grid-wide-cols, 4), minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(var(--product-grid-laptop-cols, 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(var(--product-grid-tablet-cols, 2), minmax(0, 1fr));
        gap: var(--product-grid-gap-small, 16px);
    }
}
@media (max-width: 540px) {
    .product-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION HEADER
───────────────────────────────────────────────────────────────────────── */
.sec-hdr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}
.sec-hdr-cat { font-size: .72rem; color: var(--primary); font-weight: 600; letter-spacing: .4px; margin-bottom: 4px; }
.sec-hdr h2 { font-size: 1.05rem; font-weight: 800; color: var(--text-1); }
.sec-hdr-count { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.sec-hdr-all {
    font-size: .82rem;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity .15s;
    white-space: nowrap;
}
.sec-hdr-all:hover { opacity: .7; }

/* Category section */
.cat-section { margin-bottom: 40px; }

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────────────── */
.site-footer {
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    margin-top: 40px;
}
.footer-grid {
    max-width: 100%;
    padding: 40px 28px 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
}
.footer-brand { font-size: 1.15rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.footer-desc { font-size: .82rem; color: var(--text-3); line-height: 1.9; margin-bottom: 18px; }
.footer-social { display: flex; gap: 8px; }
.social-btn {
    width: 36px; height: 36px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2); font-size: .95rem;
    transition: all .15s;
}
.social-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-t); }
.footer-col-title { font-size: .85rem; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: .82rem; color: var(--text-3); transition: color .15s; display: flex; align-items: center; gap: 5px; }
.footer-links a:hover { color: var(--primary); }
.trust-bar { border-top: 1px solid var(--border); padding: 18px 28px; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 16px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-2); }
.trust-item i { color: var(--primary); font-size: 1.25rem; }
.footer-bottom { padding: 14px 28px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--text-3); flex-wrap: wrap; gap: 8px; }
.footer-bottom-links { display: flex; gap: 14px; }
.footer-bottom-links a { color: var(--text-3); transition: color .15s; }
.footer-bottom-links a:hover { color: var(--primary); }
.footer-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px 28px; border-top: 1px solid var(--border); }
.footer-badges img { max-height: 90px; width: auto; border-radius: 8px; background: #fff; padding: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sidebar { display: none; }
    .mobile-menu-btn { display: flex !important; }
    .sidebar-toggle { display: none; }   /* mobile uses the drawer instead */
    .topbar-search { max-width: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 16px 16px; }

    /* Match the app box to the *visible* viewport so the footer (and its
       copyright line) is reachable. Plain 100vh overshoots on phones, pushing
       the footer bottom behind the browser chrome; dvh tracks the real toolbar.
       (The product page already did this in product.css — this makes it global
       so every page's footer is whole on mobile.) */
    .app { height: 100dvh; }
}
@media (max-width: 640px) {
    .topbar { padding: 0 12px; }

    /* The inline search box turns into a drop-down panel under the topbar,
       opened by the search button (toggleSearch adds .open). Animated with
       opacity/transform (not display) so it eases open instead of snapping. */
    .topbar-search {
        display: block;
        position: absolute;
        top: 100%; left: 0; right: 0;
        margin: 0;
        padding: 10px 12px;
        max-width: none;
        background: var(--bg-topbar);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .topbar-search.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .topbar-search-form { width: 100%; }
    .topbar-search-toggle { display: flex; }   /* show opener where the box is collapsed */

    /* Tighten the action row so the menu button is never pushed off-screen. */
    .topbar-actions { gap: 4px; }
    .topbar-brand { gap: 8px; }
    .topbar-brand-sub { display: none; }          /* declutter — keep just the name */
    .topbar-brand-name { font-size: .98rem; }
    .topbar-divider { display: none; }

    /* Profile chip is redundant with the hamburger drawer (which carries the
       same account links) and crowds the small topbar — hide it on phones. */
    .user-menu { display: none; }
    .btn-login { padding: 8px 12px; }

    /* Guest header has more independent actions than an authenticated header.
       Reduce visual weight without removing access: secondary tools also live
       in the mobile drawer. */
    .topbar-guest .topbar-actions { min-width: 0; }
    .topbar-guest .btn-login { min-height: 36px; padding: 7px 10px; gap: 5px; }

    /* Footer: brand spans the row, links in two compact columns. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 26px 16px 14px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .trust-bar { gap: 12px 18px; padding: 16px; justify-content: flex-start; }
    .trust-item { font-size: .74rem; }
    .footer-bottom { padding: 14px 16px; justify-content: center; text-align: center; }
    .footer-badges { padding: 16px; }
    .footer-badges img { max-height: 72px; }

    .app-main > .main-inner { padding: 20px 14px; }

    .store-adminbar { gap: 4px; min-height: 36px; padding: 0 8px; }
    .store-adminbar-brand a,
    .store-adminbar-links a,
    .store-adminbar-alerts a { padding: 0 7px; }
    .store-adminbar-brand span,
    .store-adminbar-links span,
    .store-adminbar-alerts a span,
    .store-adminbar-clear { display: none; }
    .store-adminbar-site { display: none !important; }
    .store-adminbar-alerts { gap: 5px; }
}
@media (max-width: 480px) {
    .topbar-guest { padding-inline: 9px; }
    .topbar-guest .topbar-brand-name,
    .topbar-guest .topbar-brand-sub { display: none; }
    .topbar-guest .topbar-brand { gap: 0; flex-shrink: 0; }
    .topbar-guest .topbar-logo { max-width: 86px; height: 32px; }
    .topbar-guest .tbtn { width: 35px; height: 35px; border-radius: 8px; }
    .topbar-guest .topbar-theme-toggle { display: none; }
    .topbar-guest .login-label-full { display: none; }
    .topbar-guest .login-label-short { display: inline; }
    .topbar-guest .btn-login { font-size: .78rem; }
}
@media (max-width: 380px) {
    .footer-grid { grid-template-columns: 1fr; }
    .topbar-guest { padding-inline: 7px; }
    .topbar-guest .topbar-actions { gap: 3px; }
    .topbar-guest .topbar-cart.is-empty { display: none; }
    .topbar-guest .topbar-logo { max-width: 70px; }
}