* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }
body { background:#0b0f19; color:#fff; }

/* ============================================================
   NO ZOOM, the layout is fixed, so pinching, double-tapping
   or Ctrl-scrolling must never scale it. The gesture guard in
   index.html covers the browsers that ignore these rules
   (iOS Safari ignores user-scalable=no).
   ============================================================ */
html, body {
    touch-action: pan-x pan-y;        /* pinch-zoom off, scrolling untouched */
    -webkit-text-size-adjust: 100%;   /* iOS: never inflate text */
    text-size-adjust: 100%;
}

/* The 3D product viewer needs full touch control for camera-controls,
   so it is the single exception that keeps its own gestures. */
model-viewer { touch-action: none; }

/* iOS zooms the whole page when you focus an input under 16px -
   that is the "why did the page jump" zoom. */
@media (max-width: 820px) {
    html input, html select, html textarea { font-size: 16px !important; }
}

/* HEADER */
header {
    display:flex; justify-content:space-between; align-items:center; padding:15px 5%;
    background:#111827; border-bottom:1px solid #1f2937; flex-wrap:wrap; gap:10px;

    /* Pinned to the top of the viewport. 900 keeps it under the modals
       (1000) and the chat window (1050), and above everything in the page. */
    position: sticky;
    top: 0;
    z-index: 900;

    /* Hidden while scrolling down, revealed while scrolling up. A transform
       is used so the sticky box keeps its place and nothing jumps. */
    transition: transform 0.25s ease;
}

header.header-hidden { transform: translateY(-100%); }
.logo-container { display:flex; align-items:center; gap:10px; }
.logo-img { height:50px; border-radius:8px; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
/* Two position language switch. The knob slides right on Bangla, so the state
   reads at a glance instead of the eye comparing two opacity levels. */
.lang-switch { position:relative; display:inline-flex; align-items:center; width:84px; height:30px; padding:3px; background:#1f2937; border:1px solid #374151; border-radius:20px; cursor:pointer; font-family:inherit; }
.lang-switch:hover { border-color:#4ade80; }
.lang-knob { position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px); background:#4ade80; border-radius:20px; transition:transform 0.22s ease; }
.lang-switch.is-bn .lang-knob { transform:translateX(100%); }
.lang-opt { position:relative; z-index:1; flex:1; text-align:center; font-size:0.75rem; font-weight:bold; color:#9ca3af; line-height:1; transition:color 0.22s ease; }
.lang-switch:not(.is-bn) [data-lang="en"],
.lang-switch.is-bn [data-lang="bn"] { color:#000; }

/* ============================================================
   MOBILE BOTTOM TABS
   Phones only. The header keeps the logo and the search, and every action a
   customer reaches for sits at the bottom, within thumb reach.
   ============================================================ */
.mobile-tabs { display:none; }

@media (max-width: 1023px) {
    .mobile-tabs {
        display:flex;
        position:fixed;
        left:0; right:0; bottom:0;
        z-index:900;
        background:#0f1520;
        border-top:1px solid #1f2937;
        padding-bottom:env(safe-area-inset-bottom, 0);
    }

    .mobile-tabs button {
        flex:1;
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:8px 2px 7px;
        background:transparent;
        border:none;
        color:#9ca3af;
        font-family:inherit;
        font-size:0.75rem;   /* 12px, the same floor as the rest of the shop */
        cursor:pointer;
    }

    .mobile-tabs button i { font-size:1.05rem; }
    .mobile-tabs button:active { color:#4ade80; }

    .tab-badge {
        position:absolute;
        top:4px;
        left:calc(50% + 6px);
        min-width:16px;
        height:16px;
        padding:0 4px;
        border-radius:9px;
        background:#4ade80;
        color:#000;
        font-size:0.6rem;
        font-weight:bold;
        line-height:16px;
        text-align:center;
        display:none;
    }
    .tab-badge.on { display:block; }

    /* Room for the bar, and the chat bubble lifted above it */
    html body { padding-bottom:64px; }
    /* A little smaller on a phone, and clear of the new tab bar */
    body .sms-fab {
        width:52px; height:52px; font-size:1.25rem;
        bottom:calc(78px + env(safe-area-inset-bottom, 0));
    }
    /* Same lift, on the other side, and slimmer so it never meets the bubble */
    body .section-back {
        left:14px;
        padding:10px 15px;
        font-size:0.78rem;
        bottom:calc(78px + env(safe-area-inset-bottom, 0));
    }

    /* Two rows on a phone: the logo, then the search bar centred on a row of
       its own. The account control has gone back to the bottom bar, so
       nothing shares the search row and the bar can be wide again, which also
       means the full "Search products" wording still fits. */
    .logo-container { flex:0 0 100%; justify-content:center; }
    header .search-container { flex:1 1 auto; width:auto; min-width:0; max-width:85%; margin:0 auto; }

    /* The whole icon strip is gone on a phone. Every button inside it is still
       in the page and still works, because the bottom bar presses them and a
       synthetic click fires on a hidden element. The language switch has moved
       into the login and account panels.
       The "header" prefix is required, not decoration. The base .nav-icons rule
       further down this file sets display:flex, and at equal specificity the
       later rule wins, so a bare .nav-icons here is silently overruled. */
    header .nav-icons { display:none; }
}

.logo-container h1 { font-size:1.5rem; }
.logo-container h1 span { color:#4ade80; }
.search-container { display:flex; align-items:center; background:#1f2937; border-radius:20px; padding:5px 10px; width:40%; border:1px solid #374151; }
.search-container input { background:transparent; border:none; color:#fff; width:100%; padding:8px; outline:none; }
.search-container button { background:#4ade80; border:none; color:#000; padding:8px 12px; border-radius:15px; cursor:pointer; margin-left:5px; }
/* Camera search is parked until the catalogue is big enough (300+ products
   with clean photos) for picture matching to return anything useful.
   The button still exists in index.html line 82. To bring it back, delete
   display:none from the rule below. Nothing else needs to change. */
.image-search-btn { background:transparent !important; color:#9ca3af !important; font-size:1.2rem; display:none !important; }
.nav-icons { display:flex; gap:20px; font-size:1.2rem; color:#9ca3af; align-items:center; }
.nav-icons i { cursor:pointer; transition:0.3s; }
.nav-icons i:hover { color:#4ade80; }

/* The account control. On desktop it is a bare icon like its neighbours.
   On a phone it grows the My Account label underneath and turns green. */
.acct-btn { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; padding:0; color:inherit; font-family:inherit; cursor:pointer; }
.acct-btn i { font-size:1.2rem; }
/* Same size and weight as the bottom bar tab labels, so every label on a
   phone matches. The green is kept because the icon above it is green. */
/* .acct-label was the "My Account" caption under the header account icon. The
   account moved to the bottom bar, so it was permanently hidden. */

/* The language row, used by the login panel and the account panel */
.modal-lang { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin:16px 0 10px; padding:10px 12px; border-radius:8px; border:1px solid #374151; background:#1f2937; }
.modal-lang-label { display:flex; align-items:center; gap:8px; color:#d1d5db; font-size:0.8rem; font-weight:bold; }
.modal-lang-label i { color:#4ade80; }
.cart-icon-wrap { position:relative; cursor:pointer; }
.fav-icon-wrap { position:relative; cursor:pointer; display:inline-flex; }
.cart-badge { position:absolute; top:-8px; right:-10px; background:#ef4444; color:#fff; font-size:0.65rem; font-weight:bold; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center; }

/* REQUEST PRODUCT BUTTON (header) */
.request-btn { background:linear-gradient(135deg,#4ade80,#22c55e); color:#000; border:none; padding:10px 18px; border-radius:20px; font-size:0.85rem; font-weight:bold; cursor:pointer; display:flex; align-items:center; gap:6px; transition:0.3s; box-shadow:0 4px 15px rgba(74,222,128,0.3); animation:requestPulse 2s infinite; }
.request-btn:hover { background:linear-gradient(135deg,#22c55e,#16a34a); transform:translateY(-2px); box-shadow:0 6px 20px rgba(74,222,128,0.5); }
@keyframes requestPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(74,222,128,0.3); }
    50% { box-shadow: 0 4px 25px rgba(74,222,128,0.6); }
}

/* The floating Request button rules lived here. Nothing ever rendered one, so
   they were removed. The requestPulse keyframes stay, the header Request
   button still uses them. */

/* CATEGORY NAV (centered + wrapping) */
.category-nav { background:#111827; padding:16px 5%; border-bottom:1px solid #1f2937; display:flex; justify-content:center; }

/* ============================================================
   GLASSMORPHISM THEME
   Scoped to html.theme-glass / html.theme-glass-lite.
   With neither class the site renders exactly as it did before.
   Only colour, background, border, shadow and blur are touched -
   never layout, so nothing can shift or resize.
   ============================================================ */
:root {
    --glass-bg: rgba(30, 41, 59, 0.42);          /* lighter + much more see-through */
    --glass-border: rgba(255, 255, 255, 0.16);   /* the light rim that SELLS the glass */
    --glass-blur: 20px;                          /* stronger frost */
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --glass-base: #0a1020;
}

/* The backdrop the frosted panels blur. Without this, blur has
   nothing to work with and the glass looks like flat grey. */
html.theme-glass body,
html.theme-glass-lite body {
    background:
        radial-gradient(circle at 12% 15%, rgba(74, 222, 128, 0.38), transparent 48%),
        radial-gradient(circle at 88% 5%,  rgba(59, 130, 246, 0.34), transparent 46%),
        radial-gradient(circle at 50% 95%, rgba(139, 92, 246, 0.30), transparent 50%),
        radial-gradient(circle at 95% 62%, rgba(74, 222, 128, 0.20), transparent 42%),
        var(--glass-base);
    background-attachment: fixed;
}

/* ---- Full glass: real blur, on surfaces only ---- */
html.theme-glass header,
html.theme-glass .category-nav,
html.theme-glass .modal-content,
html.theme-glass .sms-chat,
html.theme-glass .toast,
html.theme-glass .account-btn,
html.theme-glass .cod-widget {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border-color: var(--glass-border);
    /* inset highlight = the "glass edge" catching light */
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Glass Lite: same look, no GPU cost ---- */
html.theme-glass-lite header,
html.theme-glass-lite .category-nav,
html.theme-glass-lite .modal-content,
html.theme-glass-lite .sms-chat,
html.theme-glass-lite .toast,
html.theme-glass-lite .account-btn,
html.theme-glass-lite .cod-widget {
    background: rgba(30, 41, 59, 0.80);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ---- Product cards: translucent, NO blur ----
   Cards dominate the page, so this is what actually makes the
   theme visible. No backdrop-filter here = no GPU cost, so
   scrolling stays smooth even on low-end phones. */
html.theme-glass .product-card,
html.theme-glass-lite .product-card {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
}

html.theme-glass .product-card:hover,
html.theme-glass-lite .product-card:hover {
    border-color: #4ade80;
}

/* ---- Cards that live INSIDE the glass modals ----
   Without this they stay solid and look like blocks stuck
   onto the glass. Still no blur, so still no GPU cost. */
html.theme-glass .cart-item,
html.theme-glass .address-card,
html.theme-glass .order-card,
html.theme-glass .tracking-result,
html.theme-glass-lite .cart-item,
html.theme-glass-lite .address-card,
html.theme-glass-lite .order-card,
html.theme-glass-lite .tracking-result {
    background: rgba(15, 21, 32, 0.55);
}

/* The selected address must still read as selected, this rule has
   to come AFTER the one above, or the green highlight is lost. */
html.theme-glass .address-card.selected,
html.theme-glass-lite .address-card.selected {
    background: rgba(15, 30, 21, 0.68);
}

/* Older browsers with no backdrop-filter: solid panels, no see-through text */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.theme-glass header,
    html.theme-glass .category-nav,
    html.theme-glass .modal-content,
    html.theme-glass .sms-chat,
    html.theme-glass .toast,
    html.theme-glass .account-btn,
    html.theme-glass .cod-widget,
    html.theme-glass .product-card {
        background: rgba(17, 24, 39, 0.96);
    }
}

/* ============================================================
   HIGHLIGHTED CATEGORIES, compact tiles above the grid
   ============================================================ */
.highlights-row { margin-bottom: 26px; }

/* Only the thumbnails fade, never the tile and never the heading above it.
   Fading the whole block read as a page glitch, and fading every tile at once
   made it worse. */
.hl-thumbs { transition: opacity 0.24s ease; }

/* The rotation is decoration, so it stands down for anyone whose device asks
   for less motion. */
@media (prefers-reduced-motion: reduce) {
    .hl-thumbs { transition: none; }
}

/* ============================================================
   SEARCH RESULTS BAR, replaces the banner while searching
   ============================================================ */
.search-bar {
    padding: 16px 5%;
    background: #0f1520;
    border-bottom: 1px solid #1f2937;
}

.search-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.search-bar-text {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.95rem;
    color: #e5e7eb;
    font-weight: bold;
}

.search-bar-text i { color: #4ade80; }

.search-clear {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 20px;
    color: #d1d5db;
    font-size: 0.82rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}

.search-clear:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* ============================================================
   SEARCH, nothing found
   ============================================================ */
.search-empty {
    grid-column: 1 / -1;          /* span the whole product grid */
    text-align: center;
    padding: 50px 20px;
    max-width: 520px;
    margin: 0 auto;
}

.search-empty-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 16px;
}

.search-empty h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 10px;
    word-wrap: break-word;
}

.search-empty p {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 22px;
}

.search-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.search-empty-actions .btn-primary,
.search-empty-actions .btn-secondary {
    width: auto;
    margin-top: 0;
}

@media (max-width: 560px) {
    .search-empty { padding: 34px 12px; }
    .search-empty-emoji { font-size: 2.4rem; }
    .search-empty-actions .btn-primary,
    .search-empty-actions .btn-secondary { width: 100%; }
}

.hl-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 12px;
}

.hl-title i { color: #fbbf24; }

/* auto-fit = wraps automatically, 2–3 across then down to 1 */
.hl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.hl-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    padding: 14px;
    background: #0f1520;
    border: 1px solid #1f2937;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    font-family: inherit;
    color: inherit;
}

.hl-tile:hover { border-color: #4ade80; transform: translateY(-2px); }

.hl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
}

.hl-head i { color: #4ade80; font-size: 0.9rem; }

.hl-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.hl-thumbs img,
.hl-thumb-ph {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 7px;
    background: #111827;
    border: 1px solid #1f2937;
}

.hl-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 1rem;
}

.hl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: auto;
}

.hl-foot span { color: #4ade80; font-weight: bold; white-space: nowrap; }

@media (max-width: 560px) {
    .hl-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .hl-tile { padding: 11px; }
    .hl-head { font-size: 0.82rem; }
    .hl-foot { font-size: 0.68rem; }
}
.category-nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none; max-width:1200px; width:100%; }

/* "See more" only exists for narrow screens (see the phone block below). */
.category-nav li.see-more-chip { display: none; }
.category-nav li {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    color: #d1d5db;
    font-size: 0.85rem;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.20),
        inset 0 -2px 4px rgba(0,0,0,0.25),
        0 2px 6px rgba(0,0,0,0.22);
    transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1),
                background 0.28s ease,
                border-color 0.28s ease,
                box-shadow 0.28s ease,
                color 0.28s ease;
}

/* The droplet's specular highlight, the bright spot on water */
.category-nav li::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.34), rgba(255,255,255,0) 72%);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

/* ---- HOVER: thick, wet glass ---- */
.category-nav li:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
    border-color: rgba(255,255,255,0.34);
    color: #fff;
    transform: translateY(-2px) scale(1.045);
    -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.14);
    backdrop-filter: blur(10px) saturate(170%) brightness(1.14);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.50),
        inset 0 -3px 6px rgba(0,0,0,0.30),
        0 8px 18px rgba(0,0,0,0.42);
}

.category-nav li:hover::after { opacity: 1; }

/* ---- SELECTED: same glass, green so it still reads as active ---- */
.category-nav li.active {
    background: linear-gradient(180deg, rgba(74,222,128,0.30), rgba(74,222,128,0.12));
    border-color: rgba(74,222,128,0.55);
    color: #86efac;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        inset 0 -3px 6px rgba(0,0,0,0.25),
        0 4px 16px rgba(74,222,128,0.28);
}

.category-nav li.active::after { opacity: 0.85; }

/* Hovering the item that is ALREADY selected */
.category-nav li.active:hover {
    background: linear-gradient(180deg, rgba(74,222,128,0.42), rgba(74,222,128,0.18));
    border-color: #4ade80;
    color: #bbf7d0;
}

/* DISCOUNT BANNER */
.discount-banner { width:100%; background:#0f1520; padding:20px 5%; display:flex; justify-content:center; align-items:center; border-bottom:1px solid #1f2937; }

/* Nothing saved yet, or the backend is asleep: hide the box rather than leaving
   an empty band at the top. !important is required because the browsing chrome
   sets an inline display:"" on this element whenever you leave a category or a
   search, and an inline style would otherwise win. */
.discount-banner.no-banner { display:none !important; }
.discount-banner img { width:100%; max-width:1200px; max-height:200px; object-fit:contain; border-radius:12px; display:block; }
.banner-placeholder { text-align:center; padding:40px 20px; color:#9ca3af; font-size:0.95rem; background:#1f2937; border:2px dashed #374151; border-radius:12px; width:100%; max-width:1200px; }

/* MAIN */
main { padding:30px 5%; }
.section-title h2 { font-size:1.8rem; }
.section-title p { color:#9ca3af; font-size:0.9rem; margin-bottom:20px; }

/* ============================================================
   CATEGORY / FAVOURITES HEADING BOX
   Name left, count right, vertically centred.
   The two `margin: 0` rules are what make the alignment exact -
   the default margin-bottom on <p> is what knocks it out.
   ============================================================ */
.section-title.is-category {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* name | message | count */
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: #0f1520;
    border: 1px solid #1f2937;
    border-radius: 12px;
}

/* ---- Three fixed slots, so the message sits dead centre no matter
   how long the category name or the count happens to be. ---- */

/* Name, its own capsule, the strongest of the three */
.section-title.is-category h2 {
    justify-self: start;
    min-width: 0;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 8px 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message, green and centred. Its capsule comes from the glass rules. */
.section-title.is-category .cat-text {
    justify-self: center;
    margin: 0;
    max-width: 420px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #4ade80;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Capsule, in ALL three themes */
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 999px;
    padding: 7px 16px;
}

/* Count, capsule, the quietest of the three */
.section-title.is-category p {
    justify-self: end;
    margin: 0;
    font-size: 0.78rem;
    font-weight: bold;
    line-height: 1;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
}

/* ---- Glass theme: the capsule gets a real frosted blur ----
   The capsule itself comes from the base rule above, so all three
   themes have one. Only the blur is glass-specific. */
html.theme-glass .section-title.is-category .cat-text {
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

/* ---- Mobile: name + count on line 1, message centred on line 2 ----
   Every item is placed EXPLICITLY. Without this the full-width
   message forces the count onto a stranded third row. */
@media (max-width: 560px) {
    .section-title.is-category {
        grid-template-columns: 1fr auto;
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .section-title.is-category h2 {
        grid-row: 1;
        grid-column: 1;
        font-size: 0.95rem;
        padding: 7px 14px;
    }

    .section-title.is-category p {
        grid-row: 1;
        grid-column: 2;
        padding: 6px 12px;
    }

    .section-title.is-category .cat-text {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 100%;
        font-size: 0.9rem;
        white-space: normal;
        text-align: center;
        border-radius: 18px;      /* nicer if the text wraps to 2 lines */
        padding: 7px 14px;
    }
}

/* ---- Glass: the box frosts like the other surfaces ---- */
html.theme-glass .section-title.is-category {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html.theme-glass-lite .section-title.is-category {
    background: rgba(30, 41, 59, 0.80);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

@media (max-width: 560px) {
    /* Phone only: the NAME keeps its capsule, because it is the identity.
       The count and the message lose theirs. Three stacked pills of three
       different widths was what made this read as a pile rather than a
       heading. Desktop keeps all three capsules. */
    .section-title.is-category {
        grid-template-columns: minmax(0, auto) 1fr;   /* name capsule | count */
        gap: 6px 12px;
        padding: 12px 14px;
    }

    .section-title.is-category h2 {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        max-width: 100%;          /* a long name clips instead of spilling */
        font-size: 0.95rem;
        padding: 7px 14px;
    }

    /* Count: quiet text, right-hand side, no capsule. It WRAPS, because
       "5 items · arrives in 7–10 days" is far wider than the space left
       beside the name, and a nowrap item would spill into it. */
    .section-title.is-category p {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        align-self: center;
        background: none;
        border: none;
        padding: 0;
        font-size: 0.75rem;
        color: #9ca3af;
        white-space: normal;
        line-height: 1.3;
        text-align: right;
    }

    /* Message: plain green subtitle, centred under the row above. */
    .section-title.is-category .cat-text {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 100%;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        font-size: 0.9rem;
        white-space: normal;
        text-align: center;

        /* Nothing to frost once the capsule is gone */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* PRODUCT GRID */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
.product-card { background:#111827; border-radius:12px; overflow:hidden; border:1px solid #1f2937; transition:0.3s; cursor:pointer; position:relative; }
.product-card:hover { transform:translateY(-5px); border-color:#4ade80; }
.product-img { width:100%; height:180px; background:#1f2937; display:flex; justify-content:center; align-items:center; color:#4b5563; font-size:3rem; position:relative; overflow:hidden; }
.product-img img { width:100%; height:100%; object-fit:cover; }
.fav-btn { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.5); color:#fff; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem; z-index:2; }
.fav-btn.active { color:#ef4444; }
.discount-tag { position:absolute; top:10px; left:10px; background:#ef4444; color:#fff; font-size:0.7rem; padding:4px 8px; border-radius:4px; font-weight:bold; z-index:2; }
.trending-tag { position:absolute; top:10px; left:10px; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-size:0.7rem; padding:4px 8px; border-radius:4px; font-weight:bold; z-index:2; }
.fashion-tag { position:absolute; top:10px; left:10px; background:linear-gradient(135deg,#ec4899,#8b5cf6); color:#fff; font-size:0.7rem; padding:4px 8px; border-radius:4px; font-weight:bold; z-index:2; }
.stock-badge { position:absolute; bottom:10px; left:10px; font-size:0.7rem; padding:3px 8px; border-radius:4px; font-weight:bold; z-index:2; }
.in-stock { background:#4ade80; color:#000; }
.out-stock { background:#6b7280; color:#fff; }
.low-stock { background:#fbbf24; color:#000; }
.product-info { padding:15px; }
.product-category { font-size:0.7rem; text-transform:uppercase; color:#ef4444; font-weight:bold; letter-spacing:1px; }
.product-title { font-size:1rem; margin:5px 0; }
.price-row { display:flex; gap:10px; align-items:center; }
.product-price { font-size:1.2rem; font-weight:bold; color:#4ade80; }
.old-price { font-size:0.9rem; color:#9ca3af; text-decoration:line-through; }

/* MODALS */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:1000; justify-content:center; align-items:center; padding:20px; }
.modal-overlay.active { display:flex; }
.modal-content { background:#111827; border-radius:12px; max-width:900px; width:100%; max-height:90vh; overflow-y:auto; position:relative; padding:30px; border:1px solid #1f2937; }
.modal-content.small { max-width:460px; }
.close-btn { position:absolute; top:15px; right:15px; background:transparent; color:#9ca3af; border:none; font-size:1.5rem; cursor:pointer; }

/* PRODUCT DETAIL */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.media-tabs { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.media-tabs button { background:#1f2937; color:#9ca3af; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:0.8rem; }
.media-tabs button.active { background:#4ade80; color:#000; }
.media-display { width:100%; height:320px; background:#1f2937; border-radius:10px; display:flex; justify-content:center; align-items:center; font-size:5rem; color:#4b5563; overflow:hidden; }
.main-image { width:100%; height:100%; object-fit:contain; padding:10px; }
.detail-info h2 { font-size:1.5rem; margin-bottom:10px; }
.detail-price { font-size:1.8rem; color:#4ade80; font-weight:bold; }
.detail-old-price { font-size:1rem; color:#9ca3af; text-decoration:line-through; margin-left:10px; }
.option-label { font-size:0.85rem; color:#9ca3af; margin:15px 0 8px; text-transform:uppercase; letter-spacing:1px; }
.option-label span { color:#4ade80; font-weight:bold; text-transform:none; letter-spacing:0; }

/* COLOR THUMBNAILS */
.color-thumbnails { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.color-thumb { width:60px; height:60px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid #374151; background:#1f2937; display:flex; justify-content:center; align-items:center; transition:0.2s; }
.color-thumb:hover { border-color:#9ca3af; transform:translateY(-2px); }
.color-thumb.active { border-color:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,0.3); }
.color-thumb img { width:100%; height:100%; object-fit:cover; }
.color-thumb i { font-size:1.5rem; color:#4b5563; }
.video-thumb { background:#1e3a8a; color:#fff; }
.video-thumb i, .model-thumb i { font-size:1.6rem; color:#fff; }
.model-thumb { background:#8b1b8b; color:#fff; }
.video-thumb.active, .model-thumb.active { background:#4ade80; }
.video-thumb.active i, .model-thumb.active i { color:#000; }

/* SIZES */
.sizes { display:flex; gap:8px; flex-wrap:wrap; }
.size-btn { background:#1f2937; border:1px solid #374151; color:#d1d5db; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:0.85rem; transition:0.2s; }
.size-btn.active { background:#4ade80; color:#000; border-color:#4ade80; }
.size-btn.locked { background:#0f1520; color:#4b5563; border-color:#1f2937; cursor:not-allowed; text-decoration:line-through; opacity:0.5; }
.size-btn.locked::after { content:" 🔒"; font-size:0.75rem; }

/* QTY */
.qty-row { display:flex; align-items:center; gap:15px; margin:15px 0; }
.qty-control { display:flex; align-items:center; background:#1f2937; border-radius:8px; overflow:hidden; }
.qty-control button { background:transparent; border:none; color:#fff; font-size:1.2rem; width:36px; height:36px; cursor:pointer; }
.qty-control button:hover { background:#374151; }
.qty-control button:disabled { color:#4b5563; cursor:not-allowed; }
.qty-control span { padding:0 15px; font-weight:bold; min-width:40px; text-align:center; }

/* LIVE TOTAL */
.live-total { background:#0f1520; border:1px solid #1f2937; border-radius:8px; padding:12px; margin-top:10px; display:flex; justify-content:space-between; align-items:center; }
.live-total span:first-child { color:#9ca3af; font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; }
.live-total span:last-child { color:#4ade80; font-size:1.3rem; font-weight:bold; }
.stock-warning { color:#fbbf24; font-size:0.8rem; margin-top:6px; }

/* ACTION BUTTONS */
.action-btns { display:flex; gap:10px; margin-top:15px; flex-wrap:wrap; }
.btn-primary { background:#4ade80; color:#000; border:none; padding:12px 20px; border-radius:8px; font-weight:bold; cursor:pointer; flex:1; text-align:center; text-decoration:none; display:inline-block; }
.btn-primary:hover { background:#22c55e; }
.btn-primary:disabled { background:#374151; color:#6b7280; cursor:not-allowed; }
.btn-secondary { background:transparent; color:#4ade80; border:2px solid #4ade80; padding:12px 20px; border-radius:8px; font-weight:bold; cursor:pointer; flex:1; width:100%; }
.btn-danger { background:#ef4444; color:#fff; border:none; padding:12px 20px; border-radius:8px; font-weight:bold; cursor:pointer; width:100%; margin-top:10px; }
.btn-message { background:#3b82f6; color:#fff; border:none; padding:12px 20px; border-radius:8px; font-weight:bold; cursor:pointer; width:100%; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-message:hover { background:#2563eb; }

/* DESCRIPTION */
.description-section { margin-top:25px; border-top:1px solid #1f2937; padding-top:20px; grid-column:1 / -1; }
.description-section h3 { margin-bottom:12px; color:#4ade80; font-size:1.1rem; }
.description-section p { color:#d1d5db; font-size:0.92rem; line-height:1.6; white-space:pre-line; }

/* REVIEWS */
.reviews-section { margin-top:20px; border-top:1px solid #1f2937; padding-top:20px; grid-column:1 / -1; }
.reviews-section h3 { margin-bottom:15px; }
.stars { color:#fbbf24; font-size:1.2rem; }
.review-card { background:#1f2937; padding:12px; border-radius:8px; margin-bottom:10px; }
.review-card .name { font-weight:bold; color:#4ade80; }
.review-card .text { color:#d1d5db; font-size:0.9rem; margin-top:5px; }

/* CART */
#cartList { max-height:400px; overflow-y:auto; margin-bottom:15px; }
.cart-item { display:flex; gap:12px; background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:12px; margin-bottom:10px; align-items:center; }
.cart-checkbox { width:20px; height:20px; accent-color:#4ade80; cursor:pointer; flex-shrink:0; }
.cart-item-img { width:70px; height:70px; border-radius:8px; background:#1f2937; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#4b5563; }
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:0.95rem; font-weight:bold; margin-bottom:4px; }
.cart-item-meta { font-size:0.75rem; color:#9ca3af; margin-bottom:4px; }
.cart-item-price { font-size:1rem; color:#4ade80; font-weight:bold; margin-top:4px; }
.cart-item-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.cart-qty-control { display:flex; align-items:center; background:#1f2937; border-radius:6px; overflow:hidden; }
.cart-qty-control button { background:transparent; border:none; color:#fff; font-size:1rem; width:28px; height:28px; cursor:pointer; }
.cart-qty-control button:hover { background:#374151; }
.cart-qty-control span { padding:0 10px; font-weight:bold; font-size:0.9rem; }
.cart-remove { background:transparent; border:none; color:#ef4444; font-size:0.8rem; cursor:pointer; }
.cart-remove:hover { text-decoration:underline; }

/* CART SUMMARY */
.cart-summary { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:15px; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:0.9rem; }
.summary-row span:first-child { color:#9ca3af; }
.summary-row span:last-child { color:#d1d5db; font-weight:bold; }
.total-row { border-top:1px solid #1f2937; margin-top:8px; padding-top:12px; font-size:1.1rem; }
.total-row span:last-child { color:#4ade80; font-size:1.3rem; }

/* ADDRESS SYSTEM */
.address-picker { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:15px; margin-bottom:15px; }
.address-picker h3 { font-size:0.95rem; color:#4ade80; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.address-card { background:#111827; border:1px solid #1f2937; border-radius:10px; padding:12px; margin-bottom:10px; position:relative; transition:0.2s; cursor:pointer; }
.address-card:hover { border-color:#4ade80; }
.address-card.selected { border-color:#4ade80; background:#0f1e15; }
.address-card.default { border-color:#fbbf24; }
.address-card .address-name { font-weight:bold; color:#fff; font-size:0.95rem; margin-bottom:4px; padding-right:90px; }
.address-card .address-phone { font-size:0.8rem; color:#9ca3af; margin-bottom:6px; }
.address-card .address-full { font-size:0.85rem; color:#d1d5db; line-height:1.4; }
.address-badges { position:absolute; top:10px; right:10px; display:flex; gap:5px; }
.badge { font-size:0.65rem; font-weight:bold; padding:2px 8px; border-radius:10px; text-transform:uppercase; }
.badge-default { background:#fbbf24; color:#000; }
.badge-selected { background:#4ade80; color:#000; }
.address-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.addr-btn { padding:6px 12px; font-size:0.75rem; border-radius:6px; cursor:pointer; border:none; font-weight:bold; }
.addr-btn-default { background:#fbbf24; color:#000; }
.addr-btn-edit { background:#3b82f6; color:#fff; }
.addr-btn-delete { background:#ef4444; color:#fff; }
.addr-btn-select { background:#4ade80; color:#000; }
.address-empty { text-align:center; padding:25px 15px; color:#9ca3af; font-size:0.9rem; background:#0f1520; border:2px dashed #374151; border-radius:10px; }

/* DELIVERY INFO BOX */
.delivery-info-box { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:12px 15px; margin-bottom:15px; font-size:0.85rem; }
.delivery-info-box h3 { font-size:0.9rem; color:#4ade80; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.delivery-info-box .di-row { display:flex; justify-content:space-between; padding:5px 0; color:#9ca3af; border-bottom:1px dashed #1f2937; }
.delivery-info-box .di-row:last-of-type { border-bottom: none; }
.delivery-info-box .di-row strong { color:#d1d5db; }
.delivery-info-box .di-match { color:#4ade80; font-weight:bold; }
.delivery-info-box .di-remote { color:#fbbf24; font-weight:bold; }
.delivery-info-box .di-note { margin-top:8px; padding-top:8px; border-top:1px solid #1f2937; font-size:0.72rem; color:#fbbf24; }

/* ACCOUNT / COD */
.login-sub { color:#9ca3af; font-size:0.85rem; margin-bottom:20px; }
.login-btn { width:100%; padding:12px; border-radius:8px; border:none; font-weight:bold; cursor:pointer; margin-bottom:10px; font-size:0.95rem; }
.login-btn.fb { background:#1877f2; color:#fff; }
.login-btn.google { background:#fff; color:#000; }
.login-btn.phone { background:#4ade80; color:#000; }
.phone-input-group input { width:100%; padding:12px; border-radius:8px; border:1px solid #374151; background:#1f2937; color:#fff; margin-top:10px; }
.otp-btn { width:100%; padding:12px; border-radius:8px; border:none; background:#4ade80; color:#000; font-weight:bold; cursor:pointer; margin-top:10px; }
.login-note { color:#f59e0b; font-size:0.75rem; margin-top:15px; text-align:center; }
.social-slot { display:flex; justify-content:center; margin-bottom:10px; }
.social-slot > div { width:100% !important; }
.social-hint { color:#6b7280; font-size:0.75rem; text-align:center; margin:0 0 10px 0; }
.field-hint { color:#6b7280; font-size:0.75rem; margin:-4px 0 10px 0; }

/* The two social buttons lead, the phone option sits below them small and
   quiet, because social login is free and every SMS costs money. */
#loginModal .login-btn.fb {
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.brand-mark { width:20px; height:20px; flex-shrink:0; }

.login-or {
    display:flex; align-items:center; gap:10px;
    margin:14px 0; color:#6b7280;
    font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
}
.login-or::before,
.login-or::after { content:""; flex:1; height:1px; background:#1f2937; }

.login-alt {
    width:100%; padding:10px;
    border-radius:8px; border:1px solid #374151; background:transparent;
    color:#9ca3af; font-size:0.85rem; font-weight:normal;
    cursor:pointer; margin-bottom:10px;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.login-alt:hover { border-color:#4ade80; color:#4ade80; }

/* A trust line, not a warning. Amber made it look like something was wrong. */
#loginModal .login-note.trust { color:#9ca3af; }
#loginModal .login-note.trust i { color:#4ade80; margin-right:4px; }
.input-field { width:100%; padding:12px; border-radius:8px; border:1px solid #374151; background:#1f2937; color:#fff; margin-bottom:10px; font-family:inherit; font-size:0.95rem; }
select.input-field { appearance:none; cursor:pointer; }
.account-btn { width:100%; padding:12px; border-radius:8px; border:1px solid #374151; background:#1f2937; color:#d1d5db; font-weight:bold; cursor:pointer; margin-bottom:10px; text-align:left; display:flex; align-items:center; gap:10px; }
.account-btn:hover { background:#263244; border-color:#4ade80; color:#4ade80; }
.account-btn i { width:20px; text-align:center; }
.account-hr { border:none; border-top:1px solid #1f2937; margin:20px 0; }

/* COD WIDGET */
.cod-widget { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:15px; margin-bottom:20px; }
.cod-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:0.95rem; }
.cod-header i { color:#4ade80; font-size:1.2rem; }
.cod-status { margin-left:auto; background:#ef4444; color:#fff; padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:bold; text-transform:uppercase; }
.cod-status.unlocked { background:#4ade80; color:#000; }
.cod-progress-bar { width:100%; height:8px; background:#1f2937; border-radius:4px; overflow:hidden; margin-bottom:10px; }
.cod-progress-fill { height:100%; background:linear-gradient(90deg, #ef4444 0%, #fbbf24 60%, #4ade80 100%); border-radius:4px; transition:width 0.6s ease; }
.cod-text { font-size:0.8rem; color:#9ca3af; margin-bottom:5px; }
.cod-count { font-size:0.85rem; color:#d1d5db; }
.cod-count strong { color:#4ade80; }

/* TRACKING RESULT */
.tracking-result { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:15px; margin-top:15px; }
.tracking-result h3 { color:#4ade80; font-size:1rem; margin-bottom:10px; }
.track-line { font-size:0.85rem; color:#d1d5db; margin:6px 0; }
.track-line strong { color:#9ca3af; display:inline-block; min-width:110px; }
.track-link { display:block; margin-top:12px; }

/* ORDER HISTORY */
.order-card { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:15px; margin-bottom:15px; }
.order-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.order-id { font-weight:bold; color:#4ade80; font-size:0.9rem; }
.order-status { font-size:0.7rem; padding:3px 8px; border-radius:10px; font-weight:bold; text-transform:uppercase; }
.status-delivered { background:#4ade80; color:#000; }
.status-shipped { background:#3b82f6; color:#fff; }
.status-pending { background:#fbbf24; color:#000; }
.status-returned { background:#ef4444; color:#fff; }
.order-product { display:flex; gap:10px; align-items:center; margin:8px 0; }
.order-product img { width:50px; height:50px; border-radius:6px; object-fit:cover; background:#1f2937; }
.order-product .name { font-size:0.9rem; }
.order-product .meta { font-size:0.75rem; color:#9ca3af; }
.order-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.btn-small { padding:8px 12px; font-size:0.8rem; border-radius:6px; cursor:pointer; border:none; font-weight:bold; }
.btn-track { background:#3b82f6; color:#fff; }
.btn-return { background:#ef4444; color:#fff; }
.btn-review { background:#4ade80; color:#000; }

/* REQUEST FORM */
.form-label { display:block; font-size:0.8rem; color:#d1d5db; text-transform:uppercase; letter-spacing:1px; margin:12px 0 5px; }
.required { color:#ef4444; }
.upload-box { border:2px dashed #374151; border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:0.3s; background:#1f2937; }
.upload-box:hover { border-color:#4ade80; background:#263244; }
.upload-box i { font-size:2rem; color:#4ade80; margin-bottom:8px; }
.upload-box p { color:#d1d5db; font-size:0.9rem; }
.upload-box small { color:#6b7280; font-size:0.75rem; }
.upload-box img { max-width:100%; max-height:140px; border-radius:8px; }

/* PAYMENT METHOD MODAL */
.payment-summary { background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:12px; margin-bottom:15px; font-size:0.9rem; }
.payment-summary .ps-row { display:flex; justify-content:space-between; padding:4px 0; }
.payment-summary .ps-row span:first-child { color:#9ca3af; }
.payment-summary .ps-row span:last-child { color:#d1d5db; font-weight:bold; }
.payment-summary .ps-total { border-top:1px solid #1f2937; margin-top:6px; padding-top:8px; font-size:1rem; }
.payment-summary .ps-total span:last-child { color:#4ade80; font-size:1.2rem; }

.payment-options { display:flex; flex-direction:column; gap:10px; }
.payment-option { display:flex; align-items:center; gap:12px; background:#0f1520; border:1px solid #1f2937; border-radius:10px; padding:12px; cursor:pointer; transition:0.2s; text-align:left; }
.payment-option:hover { border-color:#4ade80; background:#0f1e15; }
.payment-option:disabled, .payment-option.locked { opacity:0.5; cursor:not-allowed; }
.payment-option.friend-option { border-color:#3b82f6; background:#0f1520; }
.payment-option.friend-option:hover { border-color:#60a5fa; background:#0f1a30; }
.pay-icon { width:60px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.75rem; flex-shrink:0; }
.bkash-icon { background:#e2136e; color:#fff; }
.nagad-icon { background:#f6921e; color:#000; }
.rocket-icon { background:#8b1b8b; color:#fff; }
.cod-icon { background:#4ade80; color:#000; font-size:1.2rem; }
.friend-icon { background:#3b82f6; color:#fff; font-size:1.3rem; }
.pay-icon-gen { background:#334155; color:#e2e8f0; font-size:1.1rem; }
/* A brand logo covers the tile completely. It is absolutely positioned so the
   tile's own text (bKash / Nagad / Rocket) sits UNDERNEATH it rather than
   beside it: the text stays in the DOM for the no-logo case, and the logo
   simply covers it. Without this the word and the logo both showed, stacked. */
.pay-icon.has-logo { position:relative; background:transparent; }
.pay-icon-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    border-radius:8px;
}
.pay-info { flex:1; }
.pay-info strong { display:block; color:#fff; font-size:0.95rem; margin-bottom:2px; }
.pay-info small { color:#9ca3af; font-size:0.75rem; }
.payment-option i.fa-chevron-right { color:#6b7280; }

/* ASK FRIEND MODAL */
.char-count { text-align:right; font-size:0.75rem; color:#9ca3af; margin-top:-6px; margin-bottom:10px; }
.quick-messages { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:15px; }
.quick-msg { background:#1f2937; border:1px solid #374151; color:#d1d5db; padding:6px 10px; border-radius:16px; font-size:0.75rem; cursor:pointer; transition:0.2s; }
.quick-msg:hover { background:#263244; border-color:#4ade80; color:#4ade80; }

/* SHARE CARD */
.share-card { background:linear-gradient(135deg, #111827 0%, #0f1520 100%); border:2px solid #4ade80; border-radius:14px; padding:16px; margin-top:15px; box-shadow:0 10px 30px rgba(74,222,128,0.15); }
.share-card-header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #1f2937; margin-bottom:12px; }
.share-card-logo { width:36px; height:36px; border-radius:8px; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.share-card-header strong { display:block; color:#4ade80; font-size:0.95rem; }
.share-card-header small { color:#9ca3af; font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; }
.share-card-product { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.share-card-img { width:60px; height:60px; border-radius:8px; background:#1f2937; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#4b5563; font-size:1.5rem; }
.share-card-img img { width:100%; height:100%; object-fit:cover; }
.share-card-title { color:#fff; font-weight:bold; font-size:0.9rem; margin-bottom:4px; }
.share-card-qty { color:#9ca3af; font-size:0.75rem; }
.share-card-message { background:#0b0f19; border-left:3px solid #3b82f6; padding:10px 12px; border-radius:6px; color:#d1d5db; font-size:0.85rem; font-style:italic; margin-bottom:12px; word-wrap:break-word; }
.share-card-total { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid #1f2937; }
.share-card-total span { color:#9ca3af; font-size:0.85rem; }
.share-card-total strong { color:#4ade80; font-size:1.4rem; }
.share-card-link { background:#0b0f19; border:1px dashed #374151; border-radius:6px; padding:8px 10px; margin-top:10px; font-family:monospace; font-size:0.7rem; color:#60a5fa; word-break:break-all; }

/* SHARE BUTTONS */
.share-buttons { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-top:10px; }
.share-btn { padding:10px 8px; border-radius:8px; border:none; color:#fff; font-weight:bold; font-size:0.75rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:0.2s; }
.share-btn:hover { transform:translateY(-2px); }
.share-btn.whatsapp { background:#25d366; color:#000; }
.share-btn.messenger { background:#0084ff; }
.share-btn.instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.share-btn.telegram { background:#0088cc; }
.share-btn.sms { background:#4ade80; color:#000; }
.share-btn.email { background:#ef4444; }

/* BIG COPY BUTTON */
.copy-inbox-btn { display:flex; align-items:center; gap:12px; width:100%; background:linear-gradient(135deg, #3b82f6, #2563eb); color:#fff; border:none; border-radius:10px; padding:14px 16px; margin-top:15px; cursor:pointer; text-align:left; transition:0.2s; }
.copy-inbox-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(59,130,246,0.3); }
.copy-inbox-btn i { font-size:1.6rem; flex-shrink:0; }
.copy-inbox-btn strong { display:block; font-size:0.9rem; margin-bottom:3px; }
.copy-inbox-btn small { font-size:0.75rem; opacity:0.9; }

/* FRIEND PAY MODAL */
.friend-pay-header { text-align:center; margin-bottom:15px; }
.friend-pay-header i { font-size:2.5rem; color:#fbbf24; margin-bottom:10px; display:block; }
.friend-pay-header h2 { font-size:1.3rem; margin-bottom:5px; }
.friend-pay-actions { display:flex; gap:10px; margin-top:15px; }
.friend-pay-actions .btn-primary { flex:1; }
.friend-pay-actions .btn-secondary { flex:1; }

/* SMS WIDGET */
/* z-index hierarchy, keep these in order:
     modals .......... 1000
     chat + fab ...... 1050   ← above modals, so chat works over a product
     login modal ..... 1100   ← set in script.js openLoginModal()
     toasts .......... 9999
*/
/* Back out of a category section. Mirrors the chat bubble on the other side,
   and lifts above the phone tab bar exactly the same way. */
.section-back {
    position: fixed;
    bottom: 25px;
    left: 25px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: #4ade80;
    color: #06210f;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(74, 222, 128, 0.42);
    z-index: 1050;
    transition: background 0.2s, transform 0.2s;
}
.section-back:hover { background: #22c55e; transform: translateY(-2px); }
.section-back[hidden] { display: none; }

/* The chat bubble. Blue at rest, and the whole button turns red while a reply
   is waiting, which is far easier to notice than a small dot. */
.sms-fab { position:fixed; bottom:25px; right:25px; width:60px; height:60px; border-radius:50%; background:#3b82f6; color:#fff; border:none; font-size:1.5rem; cursor:pointer; box-shadow:0 6px 22px rgba(59,130,246,0.45); z-index:1050; transition:background 0.25s, box-shadow 0.25s, transform 0.2s; }
.sms-fab:hover { background:#2563eb; transform:translateY(-2px); }
.sms-fab.has-unread { background:#ef4444; box-shadow:0 6px 22px rgba(239,68,68,0.5); }
.sms-fab.has-unread:hover { background:#dc2626; }

/* The old red dot is retired. A colour change says it better. */
body .sms-fab.has-unread::after { display:none; }
.sms-chat { display:none; position:fixed; bottom:100px; right:25px; width:320px; height:450px; background:#111827; border:1px solid #1f2937; border-radius:12px; overflow:hidden; flex-direction:column; z-index:1050; }
.sms-chat.active { display:flex; }
.sms-header { background:#3b82f6; color:#fff; padding:12px; display:flex; justify-content:space-between; align-items:center; font-weight:bold; }
.sms-header i { cursor:pointer; }
.sms-body { flex:1; padding:15px; overflow-y:auto; }
.sms-msg { padding:8px 12px; border-radius:10px; margin-bottom:8px; font-size:0.9rem; max-width:85%; word-wrap:break-word; }
.sms-msg.bot { background:#1f2937; color:#d1d5db; }
.sms-msg.user { background:#4ade80; color:#000; margin-left:auto; }
.sms-msg.product-tag { background:#1e3a8a; color:#fff; font-size:0.8rem; border-left:3px solid #3b82f6; max-width:100%; }
.sms-footer { display:flex; padding:10px; border-top:1px solid #1f2937; }
.sms-footer input { flex:1; background:#1f2937; border:none; padding:10px; border-radius:8px; color:#fff; outline:none; }
.sms-footer button { background:#4ade80; border:none; color:#000; padding:0 15px; margin-left:8px; border-radius:8px; cursor:pointer; }

/* Pending picture preview inside the chat widget */
.sms-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #0b0f19;
    border-top: 1px solid #1f2937;
}

.sms-pending img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #374151;
    flex-shrink: 0;
}

.sms-pending span { flex: 1; font-size: 0.82rem; color: #9ca3af; }

.sms-pending button {
    background: transparent;
    border: 1px solid #374151;
    color: #9ca3af;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s;
}

.sms-pending button:hover { background: #1f2937; color: #fff; border-color: #ef4444; }

.sms-attach.has-image { color: #4ade80; background: #14532d; border-color: #4ade80; }

/* Inline upload progress, shown next to the upload button */
.inline-upload-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.iup-bar {
    flex: 1;
    height: 6px;
    background: #1f2937;
    border-radius: 3px;
    overflow: hidden;
}

.iup-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.iup-text {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    min-width: 78px;
    text-align: right;
}

/* FOOTER */
footer { text-align:center; padding:30px; color:#6b7280; font-size:0.9rem; border-top:1px solid #1f2937; margin-top:50px; }

/* Social links. Each one takes its own brand colour on hover, so they are
   recognisable before the customer reads anything. 42px is a comfortable
   thumb target, and 12px apart stops mis-taps. */
.footer-social { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:16px; }
.footer-social a { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1f2937; border:1px solid #374151; color:#9ca3af; font-size:1.05rem; text-decoration:none; transition:background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; }
.footer-social a:hover { color:#fff; transform:translateY(-2px); }
.footer-social a.fb:hover { background:#1877f2; border-color:#1877f2; }
.footer-social a.yt:hover { background:#ff0000; border-color:#ff0000; }
.footer-social a.ig:hover { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); border-color:#dc2743; }
.footer-social a.tt:hover { background:#010101; border-color:#25f4ee; }

/* Accepted payment methods, drawn as tiles built from your own settings.
   The same treatment as the social row above, so the footer reads as one set
   rather than a line of small print. Logos do the talking, so there is no
   font or colour to argue with. */
.footer-pay-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:18px; }
.footer-pay-logos .pay-tile { min-width:58px; height:40px; padding:0 10px; border-radius:9px; background:#1f2937; border:1px solid #374151; display:flex; align-items:center; justify-content:center; gap:6px; transition:border-color 0.25s, transform 0.25s; }
.footer-pay-logos .pay-tile:hover { border-color:#4ade80; transform:translateY(-2px); }
.footer-pay-logos .pay-tile img { max-height:24px; max-width:66px; display:block; object-fit:contain; }
.footer-pay-logos .pay-tile span { color:#9ca3af; font-size:0.72rem; font-weight:bold; letter-spacing:0.3px; white-space:nowrap; }
.footer-pay-logos .pay-tile i { color:#4ade80; font-size:0.85rem; }
/* .footer-pay was the old "We accept:" text line. The logo tiles replaced it. */
.footer-note { font-size:0.75rem; color:#4b5563; margin-top:5px; }

/* MOBILE, 2 columns × 2 rows = 4 products visible per screen */
@media (max-width: 1023px) {
    /* The header is no longer a column. The logo takes its own row and the
       search and account control share the next one, set up in the block
       near the top of this file. */
    .detail-grid { grid-template-columns:1fr; }
    .modal-content { padding:20px; }
    .sms-chat { width:calc(100vw - 30px); right:15px; }
    .request-btn span { display:none; }
    .address-card .address-name { padding-right:60px; }
    .category-nav { padding:12px 4%; }

    /* Centred, and wrapping. Wrapping is what lets Book Now claim a full row
       of its own underneath the categories. */
    .category-nav ul { gap:5px; flex-wrap:wrap; justify-content:center; }

    /* Five chips, then the button. Everything from the 7th child waits behind
       it, except Book Now, which always keeps its own row. */
    .category-nav ul:not(.nav-expanded) li:nth-child(n + 7):not(.booking-chip) { display:none; }

    /* Tighter than before, to claw back some of the width the icons need. */
    .category-nav li { padding:6px 8px; font-size:0.75rem; white-space:nowrap; }
    .category-nav ul li i { margin-right:3px; }

    /* Category icons show on a phone too, matching PC. The chevron inside the
       See more chip was never covered by the old rule and still works. */

    /* Deliberately muted, so it never reads as a second Book Now chip. */
    .category-nav li.see-more-chip {
        display:inline-flex;
        align-items:center;
        gap:5px;
        border:1px dashed rgba(255,255,255,0.25);
        color:#9ca3af;
    }

    /* Book Now takes the whole second row. It is a section, not a filter. */
    .category-nav li.booking-chip {
        flex:1 0 100%;
        display:inline-flex;
        justify-content:center;
        align-items:center;
        gap:6px;
        margin-top:6px;
    }

    /* 2 products per row */
    main { padding: 12px 3%; }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-img { height: 150px; font-size: 3rem; }
    .product-info { padding: 10px; }
    .product-title { font-size: 0.85rem; line-height: 1.25; margin: 5px 0; }
    .product-price { font-size: 1rem; }
    .old-price { font-size: 0.75rem; }
    .product-category { font-size: 0.65rem; letter-spacing: 0.5px; }
    .fav-btn { width: 30px; height: 30px; font-size: 0.85rem; top: 8px; right: 8px; }
    .discount-tag, .trending-tag, .fashion-tag {
        font-size: 0.6rem;
        padding: 3px 6px;
        top: 8px;
        left: 8px;
    }
    .stock-badge {
        font-size: 0.6rem;
        padding: 3px 6px;
        bottom: 8px;
        left: 8px;
    }
    .product-img img { object-fit: cover; }

    /* Floating button adjusts for mobile */
    /* The floating Request button mobile override went with the button. */
}
/* ============ LOGIN / ACCOUNT MODAL ============ */
#loginModal .modal-content,
#accountModal .modal-content {
    padding: 30px;
}

#loginModal h2,
#accountModal h2 {
    font-size: 1.3rem;
    margin-bottom: 6px;
    color: #fff;
}

#loginModal .login-sub,
#accountModal .login-sub {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

#loginModal .login-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.2s;
}

#loginModal .login-btn:hover {
    transform: translateY(-2px);
}

#loginModal .login-btn.fb {
    background: #1877f2;
    color: #fff;
}

#loginModal .login-btn.google {
    background: #fff;
    color: #000;
}

#loginModal .login-btn.phone {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
}

#loginModal .login-note {
    color: #6b7280;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#loginModal .otp-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

#loginModal .otp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.3);
}

#loginModal .btn-secondary {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #4ade80;
    background: transparent;
    color: #4ade80;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#loginModal .btn-secondary:hover {
    background: #4ade80;
    color: #000;
}

#loginModal .resend-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: #60a5fa;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 12px;
    padding: 8px;
    text-decoration: underline;
}

#loginModal .form-label {
    display: block;
    font-size: 0.8rem;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-top: 12px;
}

#loginModal .input-field {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #374151;
    background: #0f1520;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: 0.2s;
}

#loginModal .input-field:focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

#loginModal .error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
}

/* ACCOUNT MODAL */
.account-profile {
    text-align: center;
    margin-bottom: 20px;
}

.account-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 12px;
    overflow: hidden;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-phone {
    color: #9ca3af;
    font-size: 0.85rem;
}

.logout-btn-full {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #ef4444;
    background: transparent;
    color: #ef4444;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

.logout-btn-full:hover {
    background: #ef4444;
    color: #fff;
}

/* HEADER, logged in state */
#userIcon.logged-in {
    color: #4ade80;
}

.user-name-header {
    font-size: 0.8rem;
    color: #4ade80;
    font-weight: bold;
    margin-left: 5px;
    cursor: pointer;
}
/* ============ LOGIN / ACCOUNT MODAL ============ */
#loginModal .modal-content,
#accountModal .modal-content { padding: 30px; }

#loginModal h2,
#accountModal h2 {
    font-size: 1.3rem;
    margin-bottom: 6px;
    color: #fff;
}

#loginModal .login-sub,
#accountModal .login-sub {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

#loginModal .login-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.2s;
}

#loginModal .login-btn:hover { transform: translateY(-2px); }
#loginModal .login-btn.fb { background: #1877f2; color: #fff; }
#loginModal .login-btn.google { background: #fff; color: #000; }
#loginModal .login-btn.phone { background: linear-gradient(135deg, #4ade80, #22c55e); color: #000; }

#loginModal .login-note {
    color: #6b7280;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#loginModal .otp-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

#loginModal .otp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.3);
}

#loginModal .btn-secondary {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #4ade80;
    background: transparent;
    color: #4ade80;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#loginModal .btn-secondary:hover { background: #4ade80; color: #000; }

#loginModal .resend-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: #60a5fa;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 12px;
    padding: 8px;
    text-decoration: underline;
}

#loginModal .form-label {
    display: block;
    font-size: 0.8rem;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-top: 12px;
}

#loginModal .input-field {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #374151;
    background: #0f1520;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
}

#loginModal .input-field:focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

#loginModal .error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
}

/* ACCOUNT MODAL */
.account-profile { text-align: center; margin-bottom: 20px; }

.account-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 12px;
    overflow: hidden;
}

.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-phone { color: #9ca3af; font-size: 0.85rem; }

.logout-btn-full {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #ef4444;
    background: transparent;
    color: #ef4444;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

.logout-btn-full:hover { background: #ef4444; color: #fff; }

#userIcon.logged-in { color: #4ade80; }
/* ============================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================ */
.toast-container {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    width: calc(100% - 32px);
    pointer-events: none;
}

.toast {
    background: #111827;
    border: 2px solid #374151;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    cursor: pointer;
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.toast:hover { transform: translateY(-2px); }

.toast.toast-success { border-color: #4ade80; }
.toast.toast-error   { border-color: #ef4444; }
.toast.toast-warning { border-color: #fbbf24; }
.toast.toast-info    { border-color: #3b82f6; }
.toast.toast-loading { border-color: #8b5cf6; }

.toast-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.css-cat {
    width: 44px;
    height: 44px;
    position: relative;
    animation: catBounce 1.2s ease-in-out infinite;
}

.css-cat .cat-head {
    width: 40px;
    height: 34px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50% 50% 45% 45%;
    position: absolute;
    top: 4px;
    left: 2px;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.15);
}

.css-cat .cat-ear-left,
.css-cat .cat-ear-right {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #f59e0b;
    position: absolute;
    top: -6px;
}

.css-cat .cat-ear-left  { left: 3px;  transform: rotate(-15deg); }
.css-cat .cat-ear-right { right: 3px; transform: rotate(15deg); }

.css-cat .cat-eye {
    width: 6px;
    height: 6px;
    background: #1f2937;
    border-radius: 50%;
    position: absolute;
    top: 16px;
    animation: catBlink 3s infinite;
}

.css-cat .cat-eye.left  { left: 10px; }
.css-cat .cat-eye.right { right: 10px; }

.css-cat .cat-nose {
    width: 4px;
    height: 3px;
    background: #ec4899;
    border-radius: 50%;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

.css-cat .cat-whisker {
    width: 10px;
    height: 1px;
    background: #78350f;
    position: absolute;
    top: 24px;
}

.css-cat .cat-whisker.left-1  { left: -4px;  transform: rotate(-10deg); }
.css-cat .cat-whisker.left-2  { left: -4px;  top: 27px; transform: rotate(10deg); }
.css-cat .cat-whisker.right-1 { right: -4px; transform: rotate(10deg); }
.css-cat .cat-whisker.right-2 { right: -4px; top: 27px; transform: rotate(-10deg); }

.toast-success .css-cat { animation: catHappy 0.8s ease-in-out infinite; }
.toast-error .css-cat   { animation: catSad 1s ease-in-out infinite; }
.toast-warning .css-cat { animation: catWobble 1.4s ease-in-out infinite; }
.toast-loading .css-cat { animation: catSpin 1.5s linear infinite; }

@keyframes catBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes catHappy {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-5px) rotate(-5deg); }
    75%      { transform: translateY(-5px) rotate(5deg); }
}
@keyframes catSad {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
@keyframes catWobble {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}
@keyframes catSpin {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes catBlink {
    0%, 90%, 100% { height: 6px; }
    95%           { height: 1px; }
}

.toast-icon img.toast-gif {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
}

.toast-content { flex: 1; min-width: 0; }
.toast-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
}
.toast-message {
    font-size: 0.82rem;
    color: #9ca3af;
    line-height: 1.4;
    word-wrap: break-word;
}
.toast-close {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    transition: 0.2s;
}
.toast-close:hover { color: #fff; }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #4ade80;
    animation: toastProgress 3.5s linear forwards;
}
.toast-error   .toast-progress { background: #ef4444; }
.toast-warning .toast-progress { background: #fbbf24; }
.toast-info    .toast-progress { background: #3b82f6; }
.toast-loading .toast-progress { background: #8b5cf6; animation: none; width: 100%; }

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

@keyframes toastSlideIn {
    from { transform: translateY(-140%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.toast.removing { animation: toastSlideOut 0.3s forwards; }

@keyframes toastSlideOut {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-140%); opacity: 0; }
}

@media (max-width: 480px) {
    .toast-container {
        top: 70px;
        left: 8px;
        right: 8px;
        transform: none;
        width: auto;
        max-width: none;
    }
    .toast { padding: 12px; }
}
/* ============================================================
   CUSTOM CONFIRM / TEXT DIALOGS (replacements for confirm/prompt)
   ============================================================ */
.bb-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: bbFadeIn 0.2s ease;
}

.bb-dialog {
    background: #111827;
    border: 2px solid #374151;
    border-radius: 16px;
    padding: 22px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: bbPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bb-dialog.wide { max-width: 520px; }

.bb-dialog-title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.bb-dialog-text {
    font-size: 0.9rem;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 18px;
    white-space: pre-line;
}

.bb-dialog-textarea {
    width: 100%;
    min-height: 130px;
    background: #0b0f19;
    border: 1px solid #374151;
    border-radius: 10px;
    color: #e5e7eb;
    padding: 12px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 18px;
}

.bb-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.bb-dialog-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-size: 0.88rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}

.bb-dialog-btn.primary { background: #4ade80; color: #06210f; }
.bb-dialog-btn.primary:hover { background: #22c55e; }

.bb-dialog-btn.danger { background: #ef4444; color: #fff; }
.bb-dialog-btn.danger:hover { background: #dc2626; }

.bb-dialog-btn.ghost {
    background: transparent;
    border-color: #374151;
    color: #9ca3af;
}
.bb-dialog-btn.ghost:hover { border-color: #6b7280; color: #fff; }

@keyframes bbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bbPopIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@media (max-width: 480px) {
    .bb-dialog { padding: 18px; }
    .bb-dialog-btn { flex: 1; }
}
/* ============================================================
   BANNER SLIDESHOW
   ============================================================ */
.discount-banner { position: relative; overflow: hidden; }

.banner-slide { display: none; }

.banner-slide.active {
    display: block;
    animation: bannerFade 0.5s ease;
}

.banner-slide img,
.banner-slide video {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* PC: three banners visible at once as equal cards, the middle one marked.
   Clicking a side card promotes it to the middle. Below 1024px only the
   middle banner shows, so phones and tablets keep the current behaviour. */
@media (min-width: 1024px) {
    .discount-banner {
        flex-wrap: wrap;
        gap: 14px;
    }

    .banner-slide {
        display: none;
    }

    .banner-slide.prev,
    .banner-slide.active,
    .banner-slide.next {
        display: block;
        flex: 0 1 390px;
        min-width: 0;
        height: 220px;
        animation: none;
        border: 2px solid transparent;
        border-radius: 12px;
        background: #111827;
        overflow: hidden;
        transition: opacity 0.25s, border-color 0.25s, transform 0.25s;
    }

    .banner-slide.prev,
    .banner-slide.next {
        opacity: 0.78;
    }

    /* The middle slot holds whichever banner is current. Order does the job
       that DOM order cannot, so the cards never swap places. */
    .banner-slide.prev { order: 1; }
    .banner-slide.active { order: 2; }
    .banner-slide.next { order: 3; }

    /* The highlight is a gentle zoom, so the current banner stands out */
    .banner-slide.active {
        position: relative;
        z-index: 2;
        opacity: 1;
        transform: scale(1.06);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    }

    .banner-slide img,
    .banner-slide video {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        border-radius: 10px;
    }

    /* The dots sit centred under the row. left and transform must be reset,
       because the base rule centres them with left:50% and translateX(-50%),
       and that transform throws them to the far left once this element is
       full width. order keeps them below the cards. */
    .discount-banner .banner-dots {
        order: 4;
        position: static;
        left: auto;
        transform: none;
        flex-basis: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.banner-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: 0.2s;
}

.banner-dot.active { background: #4ade80; }

@keyframes bannerFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* ============================================================
   SUPPORT CHAT (real, persistent)
   ============================================================ */
.sms-fab.has-unread::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 13px;
    height: 13px;
    background: #ef4444;
    border: 2px solid #0b0f19;
    border-radius: 50%;
}

.sms-msg .sms-who {
    font-size: 0.68rem;
    font-weight: bold;
    color: #4ade80;
    margin-bottom: 3px;
}

/* Sent / Seen label on the customer's own messages */
.sms-receipt {
    margin-left: 8px;
    font-size: 0.68rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.45);
}

.sms-receipt.seen { color: #052e16; }

/* "Support is typing…" strip */
.sms-typing {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: #0b0f19;
    border-top: 1px solid #1f2937;
    font-size: 0.78rem;
    color: #9ca3af;
    font-style: italic;
}

.typing-dots { display: inline-flex; gap: 3px; }

.typing-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: typingBounce 1.3s infinite ease-in-out;
}

.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.sms-msg.user .sms-who { color: #06210f; }

.sms-msg .sms-text { white-space: pre-wrap; }

.sms-product-tag {
    display: inline-block;
    margin-bottom: 6px;
    background: #1e3a8a;
    border-left: 3px solid #3b82f6;
    color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 0.72rem;
}

.sms-image {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 6px;
}

.sms-img-missing {
    margin-top: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-size: 0.72rem;
    text-align: center;
    opacity: 0.8;
}

.sms-time {
    font-size: 0.62rem;
    opacity: 0.6;
    margin-top: 5px;
}

.sms-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    padding: 30px 10px;
    line-height: 1.8;
}

.sms-login-btn {
    background: #4ade80;
    color: #06210f;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
}

.sms-attach {
    background: #1f2937 !important;
    color: #9ca3af !important;
    padding: 0 12px !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.sms-attach.has-image {
    background: #4ade80 !important;
    color: #06210f !important;
}
/* ============================================================
   PRODUCT REVIEWS
   ============================================================ */
.card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 0.74rem;
    color: #fbbf24;
    font-weight: bold;
}

.card-rating span {
    color: #6b7280;
    font-weight: normal;
}

.review-loading {
    color: #6b7280;
    font-size: 0.85rem;
    padding: 10px 0;
}

.review-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.review-average-number {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.review-average-stars {
    color: #fbbf24;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-top: 4px;
}

.review-average-count {
    color: #9ca3af;
    font-size: 0.74rem;
    margin-top: 3px;
}

.review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.review-date {
    color: #6b7280;
    font-size: 0.7rem;
    white-space: nowrap;
}

.review-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.review-media img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #374151;
    cursor: pointer;
}

.review-video {
    width: 220px;
    border-radius: 8px;
    border: 1px solid #374151;
    background: #000;
}

.review-admin-answer {
    margin-top: 10px;
    background: #0f1e15;
    border-left: 3px solid #4ade80;
    border-radius: 6px;
    padding: 10px 13px;
    color: #d1fae5;
    font-size: 0.82rem;
    line-height: 1.5;
}

.review-admin-answer strong {
    display: block;
    margin-bottom: 4px;
    color: #4ade80;
    font-size: 0.76rem;
}

/* ---- write-a-review modal ---- */
.review-stars-input {
    display: flex;
    gap: 10px;
    font-size: 1.9rem;
    color: #4b5563;
    cursor: pointer;
    margin: 6px 0 4px;
}

.review-stars-input i {
    transition: 0.15s;
}

.review-stars-input i:hover {
    transform: scale(1.15);
}

.review-stars-input i.fas {
    color: #fbbf24;
}

.review-star-hint {
    color: #6b7280;
    font-size: 0.76rem;
    margin-bottom: 14px;
}

.review-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.review-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #374151;
    background: #0b0f19;
}

.review-thumb img,
.review-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-thumb-x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: 0.62rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-upload-review {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    color: #d1d5db;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 14px;
    transition: 0.2s;
}

.btn-upload-review:hover {
    background: #374151;
    color: #fff;
}

#reviewText {
    width: 100%;
    padding: 11px 13px;
    background: #0b0f19;
    border: 1px solid #374151;
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 14px;
}

#reviewText:focus {
    outline: none;
    border-color: #4ade80;
}
/* ============================================================
   MY PRODUCT REQUESTS
   ============================================================ */
.req-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.req-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.req-card-left {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.req-card-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #374151;
    flex-shrink: 0;
}

.req-card-noimg {
    width: 62px;
    height: 62px;
    border-radius: 8px;
    border: 1px dashed #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    flex-shrink: 0;
}

.req-card-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
}

.req-card-sub {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 2px;
}

.req-card-notes {
    margin-top: 10px;
    font-size: 0.78rem;
    color: #9ca3af;
    background: #0b0f19;
    border-radius: 7px;
    padding: 8px 11px;
}

.req-status-badge {
    font-size: 0.68rem;
    font-weight: bold;
    border-radius: 20px;
    padding: 4px 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.req-new       { background: #1e3a8a; color: #dbeafe; }
.req-contacted { background: #78350f; color: #fde68a; }
.req-sourced   { background: #14532d; color: #bbf7d0; }
.req-closed    { background: #1f2937; color: #9ca3af; }

/* progress steps */
.req-progress {
    display: flex;
    gap: 4px;
    position: relative;
}

.req-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.req-step-dot {
    width: 26px;
    height: 26px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #1f2937;
    border: 2px solid #374151;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.req-step.done .req-step-dot {
    background: #14532d;
    border-color: #4ade80;
    color: #4ade80;
}

.req-step.current .req-step-dot {
    background: #4ade80;
    border-color: #4ade80;
    color: #06210f;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

.req-step-label {
    font-size: 0.62rem;
    color: #6b7280;
    line-height: 1.3;
}

.req-step.done .req-step-label { color: #9ca3af; }
.req-step.current .req-step-label { color: #4ade80; font-weight: bold; }

.req-step::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #1f2937;
    z-index: 1;
}

.req-step:first-child::before { display: none; }
.req-step.done::before { background: #4ade80; }

.req-empty {
    color: #6b7280;
    font-size: 0.84rem;
    text-align: center;
    padding: 22px 10px;
}

.prev-req-title {
    font-size: 0.85rem;
    color: #d1d5db;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
/* ============================================================
   RETURNS (customer side)
   ============================================================ */
.order-return-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #1f2937;
}

.order-return-head {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.order-return-line {
    font-size: 0.76rem;
    color: #9ca3af;
    margin-top: 8px;
}

.order-return-line.muted { color: #6b7280; }

.order-return-line.rejected { color: #ef4444; }
.order-return-line.note {
    color: #d1d5db;
    background: #0b0f19;
    border-left: 3px solid #4ade80;
    padding: 8px 10px;
    border-radius: 6px;
}

/* ---- Return notice, admin message / rejection reason ---- */
.return-notice {
    margin-top: 14px;
    background: #0b0f19;
    border: 1px solid #1f2937;
    border-left: 4px solid #4ade80;
    border-radius: 10px;
    overflow: hidden;
}

.return-notice.danger { border-left-color: #ef4444; }

.return-notice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: #111827;
    border-bottom: 1px solid #1f2937;
    font-size: 0.85rem;
    font-weight: bold;
    color: #4ade80;
}

.return-notice.danger .return-notice-head { color: #ef4444; }
.return-notice-head i { margin-right: 7px; }

.return-notice-dismiss {
    background: transparent;
    border: 1px solid #374151;
    color: #9ca3af;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
    transition: 0.2s;
}

.return-notice-dismiss:hover { background: #1f2937; color: #fff; border-color: #ef4444; }

/* This is the size fix, the old line was 0.76rem */
.return-notice-body {
    padding: 15px 16px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #e5e7eb;
    word-wrap: break-word;
}

/* ---- My Returns tab ---- */
.returns-empty {
    color: #9ca3af;
    text-align: center;
    padding: 32px 10px;
    line-height: 1.7;
}

.returns-empty small { color: #6b7280; }

.return-card {
    background: #0f1520;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.return-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.return-card-order { font-weight: bold; color: #fff; font-size: 0.92rem; }

.return-badge {
    background: #1f2937;
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
}

.returns-eligible-head {
    margin: 28px 0 12px;
    font-size: 0.82rem;
    font-weight: bold;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-return-ship {
    margin-top: 12px;
    background: #1e3a8a !important;
    color: #dbeafe !important;
    border-color: #3b82f6 !important;
}

.return-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.return-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0b0f19;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: 0.2s;
}

.return-pick-row:hover { border-color: #4ade80; }

.return-pick-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #4ade80;
    flex-shrink: 0;
}

.return-pick-row img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #374151;
}

.return-pick-row span { min-width: 0; }

.return-pick-row strong {
    display: block;
    color: #e5e7eb;
    font-size: 0.84rem;
}

.return-pick-row small {
    display: block;
    color: #9ca3af;
    font-size: 0.72rem;
    margin-top: 2px;
}

.return-hint {
    color: #6b7280;
    font-size: 0.72rem;
    margin-bottom: 14px;
}

.req-rejected {
    background: #1f0f0f;
    border: 1px solid #7f1d1d;
    border-radius: 8px;
    color: #ef4444;
    font-weight: bold;
    font-size: 0.78rem;
    padding: 9px 12px;
    text-align: center;
    margin: 10px 0;
}

#returnNote,
#returnReason {
    width: 100%;
    padding: 11px 13px;
    background: #0b0f19;
    border: 1px solid #374151;
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 0.88rem;
    font-family: inherit;
    margin-bottom: 14px;
}

#returnNote { resize: vertical; }

#returnNote:focus,
#returnReason:focus {
    outline: none;
    border-color: #4ade80;
}
/* ============================================================
   RETURN ADDRESS (customer view)
   ============================================================ */
.ret-addr-box {
    background: #0f1e15;
    border: 1px solid #1f3d2a;
    border-left: 4px solid #4ade80;
    border-radius: 10px;
    padding: 14px;
    margin: 14px 0;
}

.ret-addr-title {
    font-size: 0.78rem;
    font-weight: bold;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ret-addr-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.ret-addr-line {
    font-size: 0.82rem;
    color: #d1fae5;
    margin-bottom: 2px;
}

.ret-addr-text {
    font-size: 0.85rem;
    color: #e5e7eb;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 8px 0 12px;
}

.ret-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #4ade80;
    color: #06210f;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: 0.2s;
}

.ret-copy-btn:hover {
    background: #22c55e;
}
/* ============================================================
   ORDER ITEM LIST (customer view)
   ============================================================ */
.order-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
}

.order-item-line {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0b0f19;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 9px 12px;
}

.order-item-line img,
.order-item-noimg {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #374151;
    flex-shrink: 0;
}

.order-item-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 1rem;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.order-item-info strong {
    display: block;
    color: #e5e7eb;
    font-size: 0.85rem;
}

.order-item-info small {
    display: block;
    color: #9ca3af;
    font-size: 0.73rem;
    margin-top: 3px;
}

.order-item-info small strong { display: inline; color: #d1d5db; }

.order-item-price {
    font-weight: bold;
    color: #4ade80;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ---- return quantity picker ---- */
.return-pick-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #0b0f19;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 10px 12px;
}

.return-pick-main {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.return-pick-main input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #4ade80;
    flex-shrink: 0;
}

.return-pick-main img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #374151;
}

.return-pick-main span { min-width: 0; }

.return-pick-main strong {
    display: block;
    color: #e5e7eb;
    font-size: 0.84rem;
}

.return-pick-main small {
    display: block;
    color: #9ca3af;
    font-size: 0.72rem;
    margin-top: 2px;
}

.return-qty-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: #9ca3af;
    padding-left: 27px;
}

.return-qty {
    width: 64px;
    padding: 6px 8px;
    background: #111827;
    border: 1px solid #374151;
    border-radius: 7px;
    color: #e5e7eb;
    font-size: 0.82rem;
    font-family: inherit;
    text-align: center;
}

.return-qty:focus {
    outline: none;
    border-color: #4ade80;
}

.return-qty:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* Category menu icons */
.category-nav li i {
    margin-right: 5px;
    font-size: 0.82rem;
    opacity: 0.85;
}
/* ============================================================
   BOOKING (pre-order), storefront
   ============================================================ */

/* Inside Booking, the shop's own chips step aside. A booking item never
   appears under Men or Gadgets, so two rows of categories at once is noise.
   The Book Now chip stays visible because it marks the section, and the Shop
   button in the booking row is the way back to the shop. */
body.in-booking .category-nav li:not(.booking-chip) { display: none; }

/* Inside a category: the other chips step aside, the current one stays lit so
   it still marks where you are, and the section's own row of sub-categories
   sits underneath. */
body.in-section .category-nav li:not(.active):not(.booking-chip) { display: none; }
body.in-section .category-nav li.active {
    background: rgba(74, 222, 128, 0.16);
    border-color: #4ade80;
    color: #4ade80;
    font-weight: bold;
}
body.in-section .category-nav ul { justify-content: center; }

.category-nav li.booking-chip {
    border: 1px dashed rgba(74, 222, 128, 0.6);
    color: #4ade80;

    /* A section, not a filter: it takes a row of its own under the category
       chips, on every screen size. flex-basis 100% is what forces the new
       line; the centring inside keeps the text in the middle of it. */
    flex: 1 0 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.category-nav li.booking-chip.active {
    background: rgba(74, 222, 128, 0.16);
    border-style: solid;
    color: #4ade80;
}

.booking-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 12px 12px 0;
}

/* The shop's second row sits directly under the category chips, so it gets
   less space above it and a faint line to say it belongs to the row above. */
#shopSubNav {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 8px;
}

.bk-sub {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    font-size: 0.78rem;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
}
.bk-sub.active {
    background: rgba(34, 197, 94, 0.18);
    border-color: #22c55e;
    color: #4ade80;
}

.booking-tag {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    color: #fff; font-size: 0.7rem; padding: 4px 8px;
    border-radius: 4px; font-weight: bold; z-index: 2;
}

.stock-badge.booking-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.booking-now {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4ade80;
}
/* ============================================================
   BOOKING, product detail panel
   ============================================================ */
.bk-panel {
    margin: 14px 0 4px;
    padding: 14px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.07);
}
.bk-panel-head {
    font-weight: 700;
    color: #4ade80;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.bk-breakdown { display: flex; flex-direction: column; gap: 6px; }
.bk-breakdown > div {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    color: #d1d5db;
}
.bk-breakdown strong { color: #fff; }
.bk-breakdown .bk-now-amt { color: #4ade80; font-size: 1rem; }

.bk-rules { margin-top: 12px; }
.bk-rules > summary {
    cursor: pointer;
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: 600;
}
.bk-rules-text {
    white-space: pre-line;
    color: #d1d5db;
    font-size: 0.84rem;
    line-height: 1.6;
    margin-top: 10px;
}
.bk-rules-body p {
    font-size: 0.82rem;
    color: #9ca3af;
    margin-top: 10px;
    line-height: 1.6;
}
.bk-rules-body .bk-refund strong { color: #fbbf24; }
.bk-rules-body .bk-note { color: #4ade80; }
/* The wallet a Booking customer picked */
.payment-option.bk-selected {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
}

/* A payment card inside a chat message */
.sms-pay-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.1);
    text-align: center;
}
.sms-pay-label {
    font-size: 0.82rem;
    color: #d1d5db;
    line-height: 1.5;
}
.sms-pay-amt {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4ade80;
    margin: 6px 0 10px;
}
.sms-pay-btn {
    width: 100%;
    margin-top: 0;
}
.sms-pay-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* ============================================================
   READABILITY FLOOR, zoom is locked site-wide (pinch, double-tap
   and Ctrl+scroll are all blocked), so any text under 12px is text
   some customers simply cannot read. Nothing here is decoration:
   discount %, stock badges, order status, chat timestamps.
   This block sits at the END of the file on purpose, for equal
   specificity the last declaration wins, so it lifts the small
   sizes above without editing 33 separate lines.
   ============================================================ */
.cart-badge,
.hl-foot,
.discount-tag,
.trending-tag,
.fashion-tag,
.stock-badge,
.product-category,
.badge,
.delivery-info-box .di-note,
.cod-status,
.order-status,
.share-card-header small,
.share-card-link,
.sms-msg .sms-who,
.sms-receipt,
.sms-product-tag,
.sms-img-missing,
.sms-time,
.review-date,
.review-thumb-x,
.req-card-sub,
.req-status-badge,
.req-step-dot,
.req-step-label,
.return-badge,
.return-pick-row small,
.return-hint,
.return-pick-main small,
.booking-tag {
    font-size: 0.75rem;   /* 12px, the smallest text on the site */
}

/* ============================================================
   RED RING on the checkout Transaction ID box when it is empty.
   #payRef has its border set inline in index.html, and inline
   styles win over classes, hence the !important.
   ============================================================ */
#payRef.pay-ref-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* ============================================================
   ORDER JOURNEY, reuses the Product Request stepper (.req-progress,
   .req-step, .req-step-dot, .req-step-label), so the site has one
   progress design. Only the wrapper and the detail line are new, and
   .req-step-label is already covered by the readability floor.
   ============================================================ */
.journey {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.journey-title {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 12px;
}

/* Seven steps is more than the four a request has, so on a narrow phone the
   stepper scrolls sideways instead of squashing the labels. */
.journey .req-progress { overflow-x: auto; padding-bottom: 4px; }
.journey .req-step { min-width: 56px; }

.journey-detail {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.6;
}
.journey-note { color: #fbbf24; }

/* The Track link: the default link colour is nearly invisible on this dark
   panel, and a raw underline cannot hold its own inside a line of text.
   A capsule reads as a button while sitting inline. */
.journey-track {
    display: inline-block;
    margin-left: 2px;
    padding: 4px 12px;
    border-radius: 999px;

    /* Glass, the same way the cards and the pay page do it: a translucent
       fill, a hairline border, a blurred backdrop and a bright highlight
       along the top edge so it catches the light. */
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.45);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.25);

    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    line-height: 1.4;
}
.journey-track:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #4ade80;
    color: #86efac;
}
/* ============================================================
   PAYMENT STATE, the line above the stepper that says where the
   money stands, for the two states the journey deliberately omits.
   ============================================================ */
.pay-state {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d1d5db;
}
.pay-state-check {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
/* ============================================================
   PAYMENT STATE, the line that says where the money stands, for
   the two states the journey deliberately omits, plus the admin note.
   ============================================================ */
.pay-state {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d1d5db;
}
.pay-state-check {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.pay-state-note {
    background: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.35);
    color: #93c5fd;
}
.pay-state-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: #22c55e;
    color: #06210f;
    font-size: 0.75rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}
/* ============================================================
   CHAT PAY CARD STATES, the card inside the chat now reports the
   order's real payment state instead of always offering Pay now.
   ============================================================ */
.sms-pay-state {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.sms-pay-done {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
}
.sms-pay-pending {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.sms-pay-off {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    text-align: left;
}
/* ============================================================
   THEME, NEUMORPHISM (soft UI)

   Surfaces are the SAME colour as the page, and depth comes only from a pair
   of shadows: light from the top left, dark from the bottom right. Raised for
   things you press, inset for things you type into.

   Consequence worth knowing: the page background has to move to the surface
   colour too, otherwise the trick does not read at all. So #0b0f19 becomes
   #1a1e26 everywhere.

   Only box-shadow is used, never a blur filter, so this renders as cheaply as
   the classic theme and needs no lite variant.
   ============================================================ */
html.theme-neumorphism body { background: #1a1e26; }

html.theme-neumorphism header,
html.theme-neumorphism footer,
html.theme-neumorphism .discount-banner,
html.theme-neumorphism .category-nav,
html.theme-neumorphism .product-card,
html.theme-neumorphism .hl-tile {
    background: #1a1e26;
    border-color: transparent;
}

html.theme-neumorphism header { border-bottom: none; box-shadow: 0 10px 22px rgba(0,0,0,0.35); }
html.theme-neumorphism footer { border-top: none; box-shadow: 0 -10px 22px rgba(0,0,0,0.3); }
html.theme-neumorphism .category-nav { border-bottom: none; }
html.theme-neumorphism .discount-banner { border-bottom: none; }

/* Raised: the objects you can pick up. */
html.theme-neumorphism .product-card,
html.theme-neumorphism .hl-tile {
    box-shadow: 6px 6px 14px rgba(0,0,0,0.5), -6px -6px 14px rgba(255,255,255,0.05);
}

html.theme-neumorphism .product-card:hover,
html.theme-neumorphism .hl-tile:hover {
    border-color: transparent;
    box-shadow: 8px 8px 18px rgba(0,0,0,0.55), -8px -8px 18px rgba(255,255,255,0.06);
}

/* Inset: the search bar is a well pressed into the surface, not a panel. */
html.theme-neumorphism .search-container {
    background: #1a1e26;
    border: none;
    box-shadow: inset 5px 5px 11px rgba(0,0,0,0.5), inset -5px -5px 11px rgba(255,255,255,0.05);
}
html.theme-neumorphism .search-container input { background: transparent; }

/* The green search button stays raised, so a tap reads as pressing it in. */
html.theme-neumorphism .search-container button {
    box-shadow: 4px 4px 9px rgba(0,0,0,0.45), -4px -4px 9px rgba(255,255,255,0.05);
}

/* Chips raised. The active one is pressed in and carries the green. */
html.theme-neumorphism .category-nav li {
    background: #1a1e26;
    border: none;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.45), -4px -4px 9px rgba(255,255,255,0.05);
}
html.theme-neumorphism .category-nav li.active {
    background: #1a1e26;
    color: #4ade80;
    box-shadow: inset 4px 4px 9px rgba(0,0,0,0.5), inset -4px -4px 9px rgba(255,255,255,0.05);
}
html.theme-neumorphism .category-nav li.booking-chip { border: none; }

/* The bottom bar floats above the page instead of sitting on a border line. */
html.theme-neumorphism .mobile-tabs {
    background: #1a1e26;
    border-top: none;
    box-shadow: 0 -10px 22px rgba(0,0,0,0.4);
}

/* The chat bubble joins the same world as everything else. */
html.theme-neumorphism .sms-fab {
    box-shadow: 6px 6px 14px rgba(0,0,0,0.5), -3px -3px 12px rgba(255,255,255,0.06);
}
/* ============================================================
   THEME, NEUMORPHISM, STAGE 2
   Panels, wells and controls. The same two shadow pairs as Stage 1: raised for
   anything you press, inset for anything that holds content or that you type
   into.

   One rule of construction here: this block never sets border-color on a
   control, only on containers. That is deliberate. Size buttons and address
   cards use their border to show which one is chosen, and a theme that wiped
   those would silently break the checkout.
   ============================================================ */

/* ---- Floating panels: raised, no visible border ---- */
html.theme-neumorphism .modal-content,
html.theme-neumorphism .sms-chat,
html.theme-neumorphism .cart-item,
html.theme-neumorphism .cart-summary,
html.theme-neumorphism .order-card,
html.theme-neumorphism .address-picker,
html.theme-neumorphism .payment-summary,
html.theme-neumorphism .cod-widget,
html.theme-neumorphism .delivery-info-box,
html.theme-neumorphism .tracking-result,
html.theme-neumorphism .review-card,
html.theme-neumorphism .live-total,
html.theme-neumorphism .modal-lang {
    background: #1a1e26;
    border-color: transparent;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.45), -4px -4px 10px rgba(255,255,255,0.04);
}

/* The two modals carry the heaviest shadow, so they read as floating above
   everything rather than as one more panel. */
html.theme-neumorphism .modal-content {
    box-shadow: 10px 10px 26px rgba(0,0,0,0.55), -8px -8px 22px rgba(255,255,255,0.04);
}

/* ---- Wells: the surface is pressed IN around the content ---- */
html.theme-neumorphism .product-img,
html.theme-neumorphism .media-display,
html.theme-neumorphism .cart-item-img,
html.theme-neumorphism .color-thumb,
html.theme-neumorphism .share-card-img,
html.theme-neumorphism .banner-placeholder,
html.theme-neumorphism .address-empty {
    background: #1a1e26;
    border-color: transparent;
    box-shadow: inset 4px 4px 9px rgba(0,0,0,0.5), inset -4px -4px 9px rgba(255,255,255,0.04);
}

/* ---- Inputs are wells too, and they lose the border entirely ---- */
html.theme-neumorphism .input-field,
html.theme-neumorphism .phone-input-group input,
html.theme-neumorphism .sms-footer input,
html.theme-neumorphism .upload-box {
    background: #1a1e26;
    border: none;
    box-shadow: inset 4px 4px 9px rgba(0,0,0,0.5), inset -4px -4px 9px rgba(255,255,255,0.04);
}

/* ---- Controls: raised, with no border touched, so every state colour lives ---- */
html.theme-neumorphism .account-btn,
html.theme-neumorphism .size-btn,
html.theme-neumorphism .quick-msg,
html.theme-neumorphism .footer-social a,
html.theme-neumorphism .footer-pay-logos .pay-tile,
html.theme-neumorphism .qty-control,
html.theme-neumorphism .cart-qty-control,
html.theme-neumorphism .lang-switch,
html.theme-neumorphism .payment-option,
html.theme-neumorphism .address-card {
    background: #1a1e26;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.45), -4px -4px 9px rgba(255,255,255,0.05);
}

/* Tapping one presses it into the surface. This is the whole point of the
   style, and it is the one bit of motion the theme adds. */
html.theme-neumorphism .account-btn:active,
html.theme-neumorphism .size-btn:active,
html.theme-neumorphism .quick-msg:active,
html.theme-neumorphism .footer-social a:active,
html.theme-neumorphism .payment-option:active {
    box-shadow: inset 4px 4px 9px rgba(0,0,0,0.5), inset -4px -4px 9px rgba(255,255,255,0.05);
}

/* ---- Selected states, re-asserted so they survive the theme above ---- */
/* Without these a customer cannot see which size they picked or which address
   is the chosen one, because the theme block is more specific than the
   original rule. The glass themes do the same thing for address cards. */
html.theme-neumorphism .size-btn.active {
    background: #4ade80;
    color: #000;
    border-color: #4ade80;
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3);
}

html.theme-neumorphism .address-card.selected {
    background: #1a1e26;
    border-color: #4ade80;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.45), -4px -4px 10px rgba(255,255,255,0.04);
}

/* The Ask a Friend option keeps its blue edge, it is a deliberate highlight
   rather than decoration. */
html.theme-neumorphism .payment-option.friend-option { border-color: #3b82f6; }

/* ---- Flat things stay flat: a progress bar is not an object ---- */
html.theme-neumorphism .cod-progress-bar {
    background: #14181f;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.55);
}
html.theme-neumorphism .login-or::after { background: #262b34; }

/* ---- Chat: the support bubble is raised, the customer's green one is not ---- */
html.theme-neumorphism .sms-msg.bot {
    background: #1a1e26;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.45), -3px -3px 8px rgba(255,255,255,0.04);
}
/* ---- Media tabs: the Image, Video and 3D buttons in the product panel ----
   These do have a chosen state: .media-tabs button.active fills green. The
   theme rule below is more specific than that one, so the green has to be
   restated underneath it, exactly like the size buttons. */
html.theme-neumorphism .media-tabs button {
    background: #1a1e26;
    color: #9ca3af;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.45), -4px -4px 9px rgba(255,255,255,0.05);
}

html.theme-neumorphism .media-tabs button.active {
    background: #4ade80;
    color: #000;
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3);
}
/* The delete cross on a media library tile. Absolute, so it sits above the tile
   without disturbing the grid, and revealed on hover so it cannot be hit by
   accident while browsing. On a touch screen there is no hover, so it is always
   visible there. */
.media-tile { position: relative; }

/* Always visible. The first version revealed the cross on hover only, which meant
   nobody could find it, which rather defeats a delete button. Bigger, solid red,
   lifted off the thumbnail, and ringed in white so it reads as its own control
   rather than part of the picture. */
.media-tile-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 0.85rem; font-weight: bold; line-height: 28px; text-align: center; cursor: pointer; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.media-tile-del:hover { background: #dc2626; transform: scale(1.08); }

/* ============================================================
   BOT CHECK NOTICE
   Sits under the login form. It is the disclosure Cloudflare asks for when
   Turnstile runs in invisible mode, and it also explains the brief pause
   before the SMS goes out, so the wait does not look like a fault.
   ============================================================ */
.turnstile-note {
    font-size: 0.72rem;
    color: #6b7280;
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

.turnstile-note a {
    color: #9ca3af;
    text-decoration: underline;
}

.turnstile-note a:hover {
    color: #4ade80;
}

/* .pay-changed-warning was removed: the customer-side payment notice was
   dropped by choice. The admin alert strip uses .alerts-box instead. */