/* Design tokens
   ---------------------------------------------------------------------
   Palette derived from the Sinomart logo:
     * Crimson red  (#d11219) — primary brand accent (logo dot / bar)
     * Deep navy    (#020c27) — logo wordmark + dark surfaces
     * Soft tints of each for backgrounds and hover/active states.
   The two colours contrast strongly, so we use navy for text/headings
   and red for action surfaces (buttons, badges, links, focus rings). */
:root {
    /* Brand */
    --brand:       #d11219;
    --brand-600:   #b50d14;
    --brand-dark:  #9a0d14;
    --brand-deep:  #6b0a0e;
    --brand-soft:  #fde6e8;
    --brand-tint:  #fef2f3;
    --brand-on:    #ffffff;
    --brand-ring:  rgba(209, 18, 25, 0.45);
    --brand-shadow:rgba(209, 18, 25, 0.30);
    --brand-shadow-strong: rgba(209, 18, 25, 0.45);

    /* Deep navy — logo wordmark, headings, dark surfaces */
    --ink:         #020c27;
    --ink-soft:    #1a2238;
    --ink-tint:    #e7e9f1;

    /* Neutral system */
    --bg:          #f5f6fb;
    --text:        #131a2c;
    --muted:       #5b6573;
    --card:        #ffffff;
    --border:      #e3e6ee;
    --border-strong: #c9cfdb;

    /* Status */
    --ok:          #16a34a;
    --warn:        #d97706;
    --danger:      #dc2626;

    /* Effects */
    --shadow-sm:   0 1px 2px rgba(2, 12, 39, 0.05);
    --shadow-md:   0 6px 24px rgba(2, 12, 39, 0.08);
    --shadow-lg:   0 18px 50px rgba(2, 12, 39, 0.14);
    --radius:      12px;
    --radius-sm:   8px;
    --header-h:    64px;

    /* Legacy aliases — kept so other components that referenced the
       raw rgba() values still receive a consistent brand shadow. Any
       pre-existing 226, 19, 110 should be migrated to use --brand-*. */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; }
.product-detail-page { max-width: 1480px; }

/* Make header span full width while keeping content centered */
.site-header > .container {
    max-width: 100%;
    padding: 0;
}
.site-header .header-row {
    max-width: none;
    margin: 0;
    padding: 6px 12px 6px 12px; /* add left padding to align with site content */
}

.shop-page {
    /* The full-bleed trick (`width: 100vw; margin-left: -50vw`) is
       hostile to mobile browsers — `100vw` includes the (sometimes
       invisible) vertical scrollbar width on iOS Safari/Chrome and
       causes the page to push content past the right edge, which
       then gets clipped here by `overflow-x: hidden`. Since <main>
       has no padding to break out of, a plain `width: 100%` is
       both correct and safe across viewports. */
    position: relative;
    width: 100%;
    overflow-x: clip;
}

.shop-page .container {
    max-width: none;
    margin: 0 auto;
    width: 100%;
    /* Match the responsive container scale but with slightly tighter
       horizontal gutters than the base 24px so product cards stay
       generous on phones. The shop grid already has its own inset,
       so we don't need the full base padding here. */
    padding: 0 20px;
}

.shop-heading {
    padding: 28px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.shop-heading-title {
    margin: 0;
    font-size: clamp(22px, 4.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.shop-heading-sub {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.shop-heading-sub strong { color: var(--text); font-weight: 600; }

/* ===== Header ===== */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    box-shadow: var(--shadow-sm);
    backdrop-filter: saturate(180%) blur(8px);
}
.site-header .row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 0; min-height: var(--header-h);
}
.site-header .brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 20px; color: var(--text);
    letter-spacing: -0.01em;
}
.site-header .brand:hover { text-decoration: none; }
.site-header .brand-mark {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white; border-radius: 10px;
    font-weight: 800; font-size: 18px;
    box-shadow: 0 6px 18px rgba(209, 18, 25, 0.4);
    transition: transform .2s ease;
}
.site-header .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.site-header .brand-text { letter-spacing: -0.02em; }

/* When the logo is an inline SVG/IMG (Sinomart wordmark), keep it crisp
   and sized to the header without the square background. */
.site-header .brand-mark-img {
    width: 160px; height: auto; display: block;
    background: none !important; color: transparent !important;
    box-shadow: none !important; border-radius: 0;
    font-size: 0; line-height: 0;
}
.site-header .brand:hover .brand-mark-img { transform: none; }

/* Same treatment for the footer mark. */
.site-footer .brand-mark-img {
    width: 100px; height: auto; display: block;
    background: none !important; color: transparent !important;
    box-shadow: none !important; border-radius: 0;
    font-size: 0; line-height: 0;
}

/* Visually hidden but accessible to screen readers / crawlers. */
.sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ===== Header layout ===== */
.site-header {
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    transition: box-shadow .2s ease, padding .2s ease;
}
.site-header.scrolled {
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}
.header-row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 0; min-height: var(--header-h);
}
.site-header .brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 20px; color: var(--text);
    letter-spacing: -0.01em; flex-shrink: 0;
}

/* ===== Search (header) ===== */
.site-header .search {
    flex: 1; max-width: 560px;
    position: relative;
    display: flex; align-items: center;
}
.site-header .search-ico {
    position: absolute; left: 14px;
    width: 18px; height: 18px; color: var(--muted);
    pointer-events: none; display: grid; place-items: center;
}
.site-header .search-ico svg { width: 18px; height: 18px; }
.site-header .search input {
    width: 100%;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 48px 11px 42px;
    font-size: 14px;
    transition: all .2s ease;
}
.site-header .search input:focus {
    background: white;
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.14);
}
.site-header .search-go {
    position: absolute; right: 6px;
    width: 32px; height: 32px;
    border: none; border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .15s ease;
}
.site-header .search-go svg { width: 16px; height: 16px; }
.site-header .search-go:hover { transform: scale(1.08); }

/* ===== Header actions ===== */
.header-actions {
    display: flex; align-items: center; gap: 6px;
    margin-left: auto; flex-shrink: 0;
}
.icon-btn {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    color: var(--text);
    transition: background .15s, color .15s;
    position: relative;
}
.icon-btn:hover { background: var(--bg); text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; }
.cart-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--brand); color: white;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(209, 18, 25, 0.45);
    border: 2px solid var(--card);
}
.cart-badge.small { position: static; border: none; box-shadow: none; }

/* ---------- Add-to-cart floating toast ---------- */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 24px);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 14px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    border-radius: 14px;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.35),
        0 4px 12px rgba(209, 18, 25, 0.25);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    max-width: calc(100vw - 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.cart-toast[hidden] { display: none; }
.cart-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.cart-toast-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: white;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.45);
}
.cart-toast-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
}
.cart-toast-link {
    /* Square icon-only button — matches the visual rhythm of the
       toast's coloured icon circles. Clickable, but no text label;
       aria-label / title carry the meaning for assistive tech. */
    margin-left: 2px;
    padding: 0;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(209, 18, 25, 0.22);
    color: #fef2f3;
    text-decoration: none;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cart-toast.has-cart-link .cart-toast-link {
    display: inline-flex;
}
.cart-toast-link:hover {
    background: rgba(209, 18, 25, 0.45);
    color: white;
    transform: scale(1.06);
}
.cart-toast-link:focus-visible {
    outline: 2px solid #fbd0d6;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .cart-toast { transition: opacity .15s ease; transform: translate(-50%, 0); }
    .auth-orb, .auth-eyebrow__dot, .auth-card { animation: none !important; }
}

/* Warning variant — used for destructive cart actions like item removal.
   Reuses the same floating position/shape, just swaps the colour and icon. */
.cart-toast.is-warning {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ea580c 100%);
    box-shadow:
        0 10px 30px rgba(127, 29, 29, 0.4),
        0 4px 12px rgba(234, 88, 12, 0.28);
}
.cart-toast.is-warning .cart-toast-icon-success { display: none; }
.cart-toast:not(.is-warning) .cart-toast-icon-warning { display: none; }
.cart-toast.is-warning .cart-toast-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
}
/* (Cart-icon link now uses generic styling from `.cart-toast-link` —
   no per-variant overrides needed. The link is only visible when both
   `is-success` and `has-cart-link` are on the toast root, i.e. the
   cart-add success path.) */

/* Error variant — for Django messages.error() / .danger() / auth failures.
   Red theme, "X" icon, no link colour (it's a notice, not a CTA). */
.cart-toast.is-error {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    box-shadow:
        0 10px 30px rgba(220, 38, 38, 0.35),
        0 4px 12px rgba(220, 38, 38, 0.22);
}
.cart-toast.is-error .cart-toast-icon-success,
.cart-toast.is-error .cart-toast-icon-warning { display: none; }
.cart-toast.is-error .cart-toast-icon {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
}
/* (No per-variant rules needed to hide the link — it's hidden by
   default and only shown when JS adds `.has-cart-link` to the toast,
   which it does for cart-wrapper callers. See `.cart-toast-link`
   and `.cart-toast.has-cart-link .cart-toast-link` above.) */

/* Info variant — neutral blue, lowercase "i" icon. */
.cart-toast.is-info {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow:
        0 10px 30px rgba(37, 99, 235, 0.3),
        0 4px 12px rgba(37, 99, 235, 0.2);
}
.cart-toast.is-info .cart-toast-icon-success,
.cart-toast.is-info .cart-toast-icon-warning,
.cart-toast.is-info .cart-toast-icon-error { display: none; }
.cart-toast.is-info .cart-toast-icon {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.5);
}

.user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    transition: background .15s ease;
}
.user-chip:hover { background: var(--brand-soft); text-decoration: none; }
.user-chip .user-name { font-size: 14px; }
.user-cluster {
    display: inline-flex; align-items: center; gap: 8px;
}
.user-logout { margin: 0; display: inline-flex; }

/* ===== Logout pill ===== */
.btn-logout {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 5px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(209, 18, 25, 0.18);
    background: linear-gradient(135deg, #fef2f3 0%, #fde6e8 100%);
    color: #9a0d14;
    font-weight: 700; font-size: 13px;
    letter-spacing: .01em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 4px 12px rgba(209, 18, 25, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition:
        transform .18s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}
.btn-logout:hover {
    background: linear-gradient(135deg, #d11219 0%, #9a0d14 100%);
    border-color: rgba(209, 18, 25, 0.55);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(209, 18, 25, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-logout:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(209, 18, 25, 0.18); }
.btn-logout:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(209, 18, 25, 0.25),
        0 10px 22px rgba(209, 18, 25, 0.28);
}
.btn-logout-ico {
    width: 28px; height: 28px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #d11219 0%, #ff7a82 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(209, 18, 25, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.btn-logout-ico svg { display: block; }
.btn-logout:hover .btn-logout-ico {
    transform: translateX(2px) rotate(-2deg);
    box-shadow: 0 6px 14px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #ffffff 0%, #fde6e8 100%);
    color: #9a0d14;
}
.btn-logout-text {
    position: relative;
    display: inline-flex; align-items: center;
    overflow: hidden;
    line-height: 1;
}
.btn-logout-label { position: relative; z-index: 1; }
.btn-logout-shine {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}
.btn-logout:hover .btn-logout-shine { transform: translateX(120%); }

.avatar-sm {
    width: 30px; height: 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white;
    display: grid; place-items: center;
    font-weight: 800; font-size: 13px;
    flex-shrink: 0;
}

.nav-pill {
    background: transparent; border: none;
    color: var(--text);
    padding: 9px 14px;
    border-radius: 999px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.nav-pill:hover { background: var(--bg); text-decoration: none; }
.nav-pill.logout { color: var(--muted); }
.admin-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.admin-nav-toggle {
    position: relative;
    padding-right: 38px;
    white-space: nowrap;
}
.admin-nav-toggle svg {
    width: 16px; height: 16px; transition: transform .2s ease;
}
.admin-nav-dropdown.open .admin-nav-toggle svg { transform: rotate(180deg); }
.admin-nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(92vw, 280px);
    display: none;
    flex-direction: column;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    z-index: 60;
    overflow: hidden;
    /* Keep the menu on-screen when the toggle is near the right edge:
       if the menu would overflow the viewport, anchor it to the right
       instead of the left. The 200px headroom matches the menu's
       max-width so it never overlaps the viewport edge. */
    --admin-menu-shift: 0px;
    transform: translateX(var(--admin-menu-shift));
}
.admin-nav-dropdown.open .admin-nav-menu { display: flex; }

/* If the dropdown is in the right half of the navbar, anchor the menu
   to the right edge of the toggle so it grows leftward instead of
   spilling off the screen. */
@media (max-width: 900px) {
    .admin-nav-menu {
        left: auto;
        right: 0;
        max-width: 92vw;
    }
}
.admin-nav-item {
    width: 100%;
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    /* Allow long labels like "Reports · Monthly sales" to wrap inside
       the menu rather than being clipped by overflow-hidden on the
       outer container. */
    overflow-wrap: anywhere;
    word-break: normal;
}
.admin-nav-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.drawer-admin-group { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; }
.drawer-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); padding: 4px 12px 2px;
}

/* ===== Top announcement bar ===== */
.topbar {
    background: linear-gradient(90deg, #020c27, #6b0a0e 50%, var(--brand));
    color: white;
    font-size: 13px;
    padding: 8px 0;
    overflow: hidden;
}
.topbar-inner { text-align: center; }
.topbar-msg { opacity: 0.95; }
.topbar-msg strong { font-weight: 800; }

/* ===== Mobile drawer ===== */
.mobile-drawer {
    display: none;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
}
.mobile-drawer.open {
    max-height: 540px;
    overflow-y: auto;
}
.drawer-inner {
    display: flex; flex-direction: column;
    padding: 14px 20px 22px 24px; /* match header left padding */
    gap: 4px;
}
.drawer-link {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px;
    border-radius: 10px;
    color: var(--text);
    font-weight: 600;
    background: transparent; border: none;
    font: inherit; font-weight: 600;
    width: 100%; text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}
.drawer-link:hover { background: var(--bg); text-decoration: none; }
.drawer-link.primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white; justify-content: center;
    margin-top: 6px;
}
.drawer-link.danger { color: var(--danger); }
.drawer-link form, form .drawer-link { all: unset; }
.drawer-sep {
    height: 1px; margin: 10px 8px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.drawer-logout {
    display: block; margin: 0;
}
.drawer-logout .drawer-link {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 12px;
    border: none; background: transparent;
    color: var(--danger);
    font: inherit; font-weight: 700;
    border-radius: 10px; cursor: pointer; text-align: left;
    transition: background .15s ease;
}
.drawer-logout .drawer-link:hover { background: rgba(239, 68, 68, 0.08); }
.drawer-logout svg { flex-shrink: 0; }

/* ===== Hamburger ===== */
.menu-toggle {
    display: none;
    background: transparent; border: 1px solid var(--border);
    width: 40px; height: 40px; border-radius: 10px;
    flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text);
    gap: 4px;
    padding: 0;
}
.menu-toggle .bar {
    display: block;
    width: 18px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* ===== Main ===== */
.site-main { display: block; min-height: calc(100vh - var(--header-h) - 80px); padding-bottom: 8px; }

/* ===== Footer ===== */
.site-footer {
    padding: 56px 0 24px;
    margin-top: 64px;
    background: linear-gradient(180deg, var(--card), #fbfbfd);
    border-top: 1px solid var(--border);
    color: var(--muted);
}
.site-footer .brand { color: var(--text); margin-bottom: 12px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 36px;
}
.footer-col h4 {
    font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.08em; font-weight: 800;
    color: var(--text); margin: 0 0 14px;
}
.footer-col a {
    display: block;
    color: var(--muted);
    padding: 6px 0;
    font-size: 14px;
    transition: color .15s ease;
}
.footer-col a:hover { color: var(--brand); text-decoration: none; }
.footer-tag { font-size: 14px; line-height: 1.55; margin: 12px 0 16px; max-width: 320px; }
.pay-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    color: var(--text); background: var(--card);
}
.link-btn {
    background: none; border: none; padding: 6px 0;
    color: var(--muted); cursor: pointer; font: inherit;
    text-align: left; font-size: 14px;
}
.link-btn:hover { color: var(--brand); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center; gap: 8px;
    font-size: 13px;
}
.footer-bottom .muted { color: var(--muted); }

/* ===== Cards ===== */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; border-radius: 10px;
    border: 1px solid var(--border);
    background: white; cursor: pointer;
    font: inherit; font-weight: 600;
    color: var(--text);
    transition: transform .05s ease, box-shadow .15s, background .15s, border-color .15s, color .15s;
    text-decoration: none;
    min-height: 40px;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 4px 14px rgba(209, 18, 25, 0.3); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost {
    /* soft outlined pill — visible enough to read at a glance, but still
       secondary vs. the primary CTA. Used for "Continue shopping",
       "Back to cart", "Add more". */
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: transparent;
    font-weight: 700;
}
.btn-ghost:hover {
    background: #fbd0d6;
    color: var(--brand-dark);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(209, 18, 25, 0.18);
}
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-soft {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: transparent;
}
.btn-soft:hover {
    background: #fbd0d6;
    color: var(--brand-dark);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(209, 18, 25, 0.18);
}
.btn-outline {
    background: white;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(209, 18, 25, 0.18);
}
.btn-sm { padding: 6px 12px; font-size: 14px; min-height: 32px; border-radius: 8px; }
.site-header .btn-primary.btn-sm,
.site-header .brand-btn {
    padding: 10px 22px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    font-weight: 700;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ===== Forms ===== */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], select, textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px; background: white; font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.15);
}
label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: 14px; }
.form-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; background: white; }
table.data th, table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.data th { background: #fafbff; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
table.data tr:hover td { background: #fafbff; }

/* ===== Messages ===== */
.messages { margin: 16px 0; display: grid; gap: 8px; }
.messages .msg {
    padding: 12px 16px; border-radius: 10px;
    border: 1px solid var(--border); background: white;
    box-shadow: var(--shadow-sm);
}
.messages .msg.success { border-color: var(--ok); background: #f0fdf4; }
.messages .msg.error, .messages .msg.danger { border-color: var(--danger); background: #fef2f2; }
.messages .msg.warning { border-color: var(--warn); background: #fffbeb; }
.messages .msg.info { border-color: #3b82f6; background: #eff6ff; }

/* ===== Status pills ===== */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.pill.paid { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }
.pill.unpaid, .pill.pending { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.pill.failed, .pill.cancelled { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ===== Layout helpers ===== */
.stack > * + * { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== Shop: hero + filters ===== */
.shop-hero {
    background:
        radial-gradient(1100px 380px at 90% -10%, rgba(209, 18, 25, 0.18), transparent 60%),
        radial-gradient(900px 320px at 0% 10%, rgba(2, 12, 39, 0.14), transparent 60%),
        linear-gradient(180deg, #ffffff, #f6f7fb);
    border-bottom: 1px solid var(--border);
    padding: 48px 0 36px;
}
.shop-hero h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.shop-hero p { color: var(--muted); margin: 0; max-width: 640px; }
.shop-hero .hero-meta {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center;
}
.shop-hero .search-big {
    flex: 1; min-width: 260px; max-width: 520px;
    display: flex; gap: 0;
    background: white; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.shop-hero .search-big input { border: 0; border-radius: 0; padding: 12px 14px; }
.shop-hero .search-big input:focus { box-shadow: none; }
.shop-hero .search-big button {
    background: var(--brand); color: white; border: 0;
    padding: 0 18px; font-weight: 700; cursor: pointer;
}
.shop-hero .search-big button:hover { background: var(--brand-dark); }

.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; padding: 32px 24px 64px; align-items: start; }
.shop-sidebar {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 16px 16px;
    box-shadow: var(--shadow-sm);
}
.shop-sidebar h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.shop-sidebar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.shop-sidebar a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; border-radius: 8px; color: var(--text);
}
.shop-sidebar a:hover { background: var(--bg); text-decoration: none; }
.shop-sidebar a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }

.shop-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.shop-toolbar .count { color: var(--muted); font-size: 14px; }

/* Filter chips (visible on mobile as horizontal scroller) */
.shop-chips { display: none; gap: 8px; overflow-x: auto; padding: 4px 0 12px; margin: 0 -4px; }
.shop-chips a {
    flex: 0 0 auto;
    padding: 8px 14px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); font-size: 14px; font-weight: 600;
    white-space: nowrap;
}
.shop-chips a:hover { text-decoration: none; background: var(--bg); }
.shop-chips a.active { background: var(--brand); color: white; border-color: var(--brand); }

/* ===== Product grid + cards ===== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    /* Center the grid if it doesn't fill the row, and pad outer edges
       so cards never touch the container edge. */
    padding: 4px;
    justify-content: stretch;
}
.product-grid > .product-card,
.product-grid > .product-card-v2 {
    /* Prevent cards from stretching full-width when the row has fewer items
       (e.g. last row on the last page). Cap them at a comfortable size. */
    max-width: 320px;
    width: 100%;
    justify-self: stretch;
}
@media (min-width: 1280px) {
    /* On wide screens, cap card width so they don't become huge */
    .product-grid > .product-card,
    .product-grid > .product-card-v2 {
        max-width: 280px;
    }
}
.product-card {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none !important;
    color: var(--text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.product-card .thumb {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f3f4f8, #e9ecf3);
    overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .badge-stock {
    position: absolute; top: 10px; left: 10px;
    background: rgba(22, 163, 74, 0.95); color: white;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.product-card .badge-stock.out { background: rgba(220, 38, 38, 0.9); }
.product-card .body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .cat { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.product-card .name { font-weight: 600; line-height: 1.35; min-height: 2.7em; }
.product-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.product-card .price { font-weight: 800; color: var(--brand); font-size: 18px; }
.product-card .quick {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--muted); font-size: 13px;
    transition: color .15s, transform .15s;
}
.product-card:hover .quick { color: var(--brand); transform: translateX(2px); }

/* ===== Infinite scroll ===== */
.infinite-scroll {
    display: flex; justify-content: center; padding: 8px 0 8px;
    /* The sentinel lives here for IntersectionObserver purposes but stays
       collapsed by default. We only expand it (reveal the spinner pill)
       while a request is actually in flight, so the user doesn't stare at
       a permanent "Loading more products…" message between pages. */
}
.scroll-sentinel {
    /* Idle: invisible but still takes up its intersection-observation
       slot so the observer keeps firing as the user scrolls. */
    display: inline-flex; align-items: center; gap: 12px;
    padding: 0;
    color: var(--muted, #6b7280);
    font-size: 14px; font-weight: 600;
    background: transparent; border: 0 solid var(--border);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, padding .2s ease, background .2s ease, border-color .2s ease, color .2s;
}
.scroll-sentinel.is-loading {
    /* Active: reveal the pill so the user knows another batch is on its
       way. Same look as before — rounded surface, spinner on the left. */
    opacity: 1;
    padding: 14px 22px;
    background: var(--card); border: 1px solid var(--border);
    pointer-events: none;
}
.scroll-sentinel .loader {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(209, 18, 25, 0.25);
    border-top-color: var(--brand, #d11219);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    /* Hidden while idle so the pill collapses to nothing. */
    display: none;
}
.scroll-sentinel.is-loading .loader { display: inline-block; }
.scroll-sentinel.is-error {
    /* Error: red pill, click to retry. Stays visible so the user can act. */
    opacity: 1;
    padding: 14px 22px;
    color: #b91c1c; border-color: #fecaca; background: #fef2f2;
    cursor: pointer;
    pointer-events: auto;
}
.scroll-sentinel.is-error .loader { display: none; }
.end-of-results {
    text-align: center; padding: 32px 16px;
    color: var(--muted, #6b7280);
    font-size: 14px;
    border-top: 1px dashed var(--border, #e5e7eb);
    margin: 24px auto 0; max-width: 600px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Detail page ===== */
.detail-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 28px 0 64px; align-items: start; }
.detail-gallery {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
    box-shadow: var(--shadow-sm);
}
.detail-gallery .main {
    aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #f3f4f8, #e9ecf3);
    overflow: hidden; display: flex; align-items: center; justify-content: center; color: #94a3b8;
}
.detail-gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.detail-gallery .thumbs div { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #f0f1f5; }
.detail-gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-info h1 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 8px; }
.detail-info .price { font-size: 28px; font-weight: 800; color: var(--brand); }
.detail-info .desc { color: var(--muted); white-space: pre-line; }
.detail-info .qty-row { display: flex; gap: 8px; align-items: center; }
.detail-info .qty-row input { max-width: 100px; }

/* ===== Shop 2.0 — modern, animated, responsive ===== */
@keyframes shop-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes shop-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes shop-float-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -20px); } }
@keyframes shop-float-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 30px); } }
@keyframes shop-pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }

/* ===== Responsive shop tweaks =====
   Filter sidebar's mobile behavior lives in its own media block further
   down (line ~1536). The legacy rules that forced .filter-sidebar to
   render inline on mobile have been removed; the sidebar now hides off
   canvas until the user taps the .filter-trigger button. */
@media (max-width: 960px) {
    .shop-layout { grid-template-columns: 1fr !important; padding: 16px !important; }
    .shop-hero-v2 .hero-grid { grid-template-columns: 1fr; gap: 18px; text-align: left; }
    .shop-hero-v2 .hero-collage { display: none; }
    .shop-chips { display: flex; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px; }
    .product-grid > .product-card-v2, .product-grid > .product-card { max-width: none; }
    .shop-toolbar-v2 { gap: 8px; }
}

/* On any viewport, prevent the section / product-grid child of
   .shop-layout from blowing past its grid cell. Without `min-width: 0`
   long product names or image overflow can push the rightmost card
   off the screen edge on narrow viewports. */
.product-grid { min-width: 0; }
.product-grid > .product-card-v2,
.product-grid > .product-card { min-width: 0; }

@media (max-width: 480px) {
    .shop-hero-v2 { padding: 36px 0 36px; }
    .shop-hero-v2 h1 { font-size: clamp(22px, 6vw, 32px); }
    .shop-hero-v2 .eyebrow { font-size: 11px; }
    /* Allow grid children to shrink below their content's intrinsic size
       so long product names don't push the rightmost card off-screen. */
    .product-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 4px; min-width: 0; }
    .product-grid > .product-card-v2,
    .product-grid > .product-card { min-width: 0; }
    .product-card .body { padding: 12px; }
    .shop-toolbar-v2 { flex-direction: column; align-items: stretch; }
    .shop-toolbar-v2 .sort { width: 100%; display: flex; justify-content: space-between; }
    .drawer-inner { padding-left: 16px; }
}

/* Tighter product card body on mobile / tablet: smaller name, slimmer
   price row, smaller discount chip. Keeps everything readable but
   fits more cards on screen and avoids wrapping. */
@media (max-width: 640px) {
    .product-card-v2 .body {
        padding: 12px 12px 14px;
        gap: 8px;
    }
    .product-card-v2 .name {
        font-size: 13.5px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }
    .product-card-v2 .price-row {
        gap: 6px;
        padding-top: 8px;
    }
    .product-card-v2 .price-block { gap: 6px; }
    .product-card-v2 .price {
        font-size: 14px;
    }
    .compare-price { font-size: 11.5px; }
    .discount-badge {
        font-size: 10.5px;
        padding: 2px 6px;
        border-radius: 5px;
    }
    .product-card-v2 .rating .star-icon { font-size: 12px; }
    .product-card-v2 .rating .rating-value { font-size: 11.5px; }
    .product-card-v2 .rating .sold-count { font-size: 10.5px; }
}

/* Move discount badge under the price block on very small screens so
   the price row doesn't wrap and the badge stays full-width readable. */
@media (max-width: 380px) {
    .product-card-v2 .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* --- Hero 2.0 --- */
.shop-hero-v2 {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
    margin-bottom: 20px;
    background:
        linear-gradient(120deg, #ffffff 0%, #fef2f3 35%, #fde6e8 70%, #fde6e8 100%);
    border-bottom: 1px solid var(--border);
}
.shop-hero-v2::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 280px at 88% 0%, rgba(209, 18, 25, 0.22), transparent 60%),
        radial-gradient(700px 320px at -10% 100%, rgba(2, 12, 39, 0.20), transparent 60%);
    pointer-events: none;
}
.shop-hero-v2 .container { position: relative; z-index: 1; }
.shop-hero-v2 .hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}
.shop-hero-v2 .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.7); border: 1px solid rgba(209, 18, 25, 0.25);
    color: var(--brand-dark); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(209, 18, 25, 0.10);
    animation: shop-fade-up .6s ease both;
}
.shop-hero-v2 .eyebrow .pulse {
    width: 8px; height: 8px; border-radius: 999px; background: var(--brand);
    animation: shop-pulse-dot 1.8s ease-in-out infinite;
}
.shop-hero-v2 h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05; letter-spacing: -0.025em;
    margin: 14px 0 12px;
    background: linear-gradient(120deg, #1f2933 0%, #9a0d14 45%, #d11219 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shop-shine 8s linear infinite, shop-fade-up .6s .05s ease both;
}
.shop-hero-v2 p.lead {
    color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 0 24px;
    animation: shop-fade-up .6s .1s ease both;
}
.shop-hero-v2 .search-glass {
    display: flex; align-items: center; gap: 0;
    background: white; border: 1px solid var(--border);
    border-radius: 16px; padding: 6px 6px 6px 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    max-width: 580px;
    animation: shop-fade-up .6s .15s ease both;
}
.shop-hero-v2 .search-glass input {
    flex: 1; border: 0; padding: 14px 8px; font-size: 15px; background: transparent;
    box-shadow: none !important;
}
.shop-hero-v2 .search-glass input:focus { box-shadow: none; }
.shop-hero-v2 .search-glass button {
    border: 0; cursor: pointer; padding: 0 22px; height: 44px;
    border-radius: 12px; font-weight: 700; color: white;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 6px 18px rgba(209, 18, 25, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.shop-hero-v2 .search-glass button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(209, 18, 25, 0.4); }
.shop-hero-v2 .pill-row {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
    animation: shop-fade-up .6s .2s ease both;
}
.shop-hero-v2 .pill-row a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.7); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background .15s, border-color .15s, transform .15s, color .15s;
}
.shop-hero-v2 .pill-row a:hover { background: white; border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); text-decoration: none; }
.shop-hero-v2 .pill-row a.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white; border-color: transparent;
    box-shadow: 0 6px 18px rgba(209, 18, 25, 0.3);
}

/* Hero right-side decorative collage */
.shop-hero-v2 .hero-collage {
    position: relative;
    height: 360px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #fde6e8 0%, #fde6e8 50%, #e7e9f1 100%);
    box-shadow: 0 30px 80px rgba(2, 12, 39, 0.25);
    animation: shop-fade-up .7s .1s ease both;
}
.shop-hero-v2 .hero-collage .blob {
    position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.7;
    pointer-events: none;
}
.shop-hero-v2 .hero-collage .blob.b1 { width: 260px; height: 260px; background: #f472b6; top: -60px; right: -40px; animation: shop-float-a 9s ease-in-out infinite; }
.shop-hero-v2 .hero-collage .blob.b2 { width: 240px; height: 240px; background: #818cf8; bottom: -60px; left: -30px; animation: shop-float-b 11s ease-in-out infinite; }
.shop-hero-v2 .hero-collage .blob.b3 { width: 180px; height: 180px; background: #facc15; bottom: 30%; right: 20%; opacity: 0.5; animation: shop-float-a 7s ease-in-out infinite; }
.shop-hero-v2 .hero-collage .tile {
    position: absolute; border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    border: 4px solid white;
    background: linear-gradient(135deg, #f3f4f8, #e9ecf3);
    display: grid; place-items: center; color: #94a3b8; font-size: 12px;
}
.shop-hero-v2 .hero-collage .tile.t1 { width: 180px; height: 180px; top: 24px; left: 28px; transform: rotate(-6deg); }
.shop-hero-v2 .hero-collage .tile.t2 { width: 150px; height: 150px; bottom: 28px; right: 32px; transform: rotate(5deg); }
.shop-hero-v2 .hero-collage .tile.t3 { width: 110px; height: 110px; top: 130px; right: 60px; transform: rotate(8deg); }
.shop-hero-v2 .hero-collage .tile img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero-v2 .hero-collage .price-tag {
    position: absolute; top: 18px; right: 18px;
    background: white; color: var(--brand-dark);
    padding: 6px 12px; border-radius: 999px;
    font-weight: 800; font-size: 13px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    z-index: 2;
}

/* --- Shop toolbar (sort + count + view toggle) --- */
.shop-toolbar-v2 {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.shop-toolbar-v2 .count { color: var(--muted); font-size: 14px; }
.shop-toolbar-v2 .count strong { color: var(--text); }
.shop-toolbar-v2 .sort {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--muted);
}
.shop-toolbar-v2 .sort select {
    width: auto; padding: 6px 10px; border-radius: 8px; font-size: 14px;
}

/* --- Filter sidebar v2 --- */
.filter-sidebar {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 18px;
}
.filter-sidebar h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
.filter-sidebar h3 .count-pill {
    margin-left: auto;
    background: var(--brand-soft); color: var(--brand-dark);
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.filter-sidebar .cat-list a .count-pill {
    background: var(--bg); color: var(--muted);
    padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.filter-sidebar .cat-list a.active .count-pill {
    background: #ffffff2e; color: #515151;
}
.filter-sidebar .cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.filter-sidebar .cat-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 10px; color: var(--text);
    font-weight: 500; font-size: 14px;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-sidebar .cat-list a:hover { background: var(--bg); text-decoration: none; }
.filter-sidebar .cat-list a.active {
    background: var(--brand-soft); color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.25);
    font-weight: 700;
}
.filter-sidebar .cat-list a .num { color: var(--muted); font-size: 12px; font-weight: 600; }
.filter-sidebar .cat-list a.active .num { color: var(--brand-dark); }
.filter-sidebar .price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.filter-sidebar .price-inputs span { color: var(--muted); }
.filter-sidebar .apply-btn {
    width: 100%; padding: 10px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white; font-weight: 700;
    box-shadow: 0 6px 16px rgba(209, 18, 25, 0.3);
}
.filter-sidebar .clear-link { display: block; text-align: center; color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ===== Modern filter sidebar (v3) =====
   Layout: collapsible sections (Categories, Brand, Price range),
   dual-range slider for price, brand chips, mobile drawer.
   Hover, active, focus states match the rest of the design system. */
.filter-sidebar {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 16px 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 8px;
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.filter-sidebar::-webkit-scrollbar { width: 6px; }
.filter-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }

.filter-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.filter-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text);
    margin: 0;
}
.filter-title svg { color: var(--brand); }
.filter-close {
    display: none;
    width: 36px; height: 36px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer;
    align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.filter-close:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-soft); transform: rotate(90deg); }

/* ----- Collapsible section ----- */
.filter-section {
    border-radius: 12px;
    transition: background .15s;
}
.filter-section + .filter-section { margin-top: 2px; }
.filter-section-head {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer; font: inherit;
    color: var(--text);
    text-align: left;
    transition: background .15s;
}
.filter-section-head:hover { background: var(--bg); }
.filter-section-title {
    font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text);
}
.filter-section-count {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; padding: 0 8px;
    background: var(--bg); color: var(--muted);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* Active state — applied by JS (or a server-side `is-active` class) when
   the section has a filter applied. Turns the badge brand-coloured so the
   user can see at a glance which sections are filtering the list. */
.filter-section-count.is-active,
.filter-section.is-active .filter-section-count {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.30);
    box-shadow: 0 1px 3px rgba(209, 18, 25, 0.10);
}

/* Text variant — used by the price-range summary badge, which shows a
   multi-character label like "৳190 – ৳8990" instead of a single number.
   We give it a touch more padding, tabular-nums for stable widths, and
   a thinner dashed-style border at rest so it doesn't compete with the
   brand-count badge for visual weight. The active variant lights up in
   brand colour as before. */
.filter-section-count.is-summary {
    width: 100vh;
    height: 24px;
    padding: 0 10px;
    gap: 4px;
    background: var(--card);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    border: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.filter-section-count.is-summary .ps-cur { color: var(--muted); font-weight: 700; }
.filter-section-count.is-summary .ps-sep { color: var(--border-strong); padding: 0 2px; }

.filter-section.is-active .filter-section-count.is-summary,
.filter-section-count.is-summary.is-active {
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fef2f3 100%);
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.30);
    box-shadow:
        0 1px 3px rgba(209, 18, 25, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.filter-section.is-active .filter-section-count.is-summary .ps-cur { color: var(--brand-dark); }
.filter-section.is-active .filter-section-count.is-summary .ps-sep { color: rgba(181, 14, 87, 0.45); }
/* Section title gets a brand-coloured dot prefix when the section is
   active so even users who don't read the badge can see the state. */
.filter-section.is-active .filter-section-title::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    vertical-align: middle;
}
.filter-section-chev {
    color: var(--muted);
    margin-left: 4px;
    transition: transform .25s ease;
}
.filter-section.is-collapsed .filter-section-chev { transform: rotate(-90deg); }
.filter-section.is-collapsed .filter-section-body {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
    pointer-events: none;
}
.filter-section-body {
    opacity: 1;
    transition: max-height .3s ease, opacity .2s ease, padding .2s ease;
    overflow: hidden;
}

/* ----- Category list (modern rows) ----- */
.filter-section .cat-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.filter-section .cat-list a {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text); font-weight: 600; font-size: 14px;
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.filter-section .cat-list a:hover {
    background: var(--bg);
    text-decoration: none;
    transform: translateX(2px);
}
.filter-section .cat-list a.active {
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fef2f3 100%);
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.22);
    box-shadow: 0 4px 14px rgba(209, 18, 25, 0.08);
}
.filter-section .cat-list a .cat-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--border-strong);
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}
.filter-section .cat-list a:hover .cat-dot { background: var(--brand); }
.filter-section .cat-list a.active .cat-dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.18);
}
.filter-section .cat-list a .cat-label { flex: 1; min-width: 0; }
.filter-section .cat-list a .cat-count {
    margin-left: auto;
    font-size: 11.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg); color: var(--muted);
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s;
}
.filter-section .cat-list a.active .cat-count {
    background: white;
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.35);
}

/* ----- Brand chip grid -----
   Each row is now a full-width checkbox-style line (see .brand-chip
   below). The list is capped to 8 rows via the `.is-clipped` class
   (added by the template when there are more than 8 brands) and a
   "+N more" toggle reveals the rest. The grid uses a small 4px gap
   between rows so chips never get visually clipped. */
.filter-section .brand-chip-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;                     /* reset any inherited margins */
    padding: 0;                    /* reset any inherited padding */
    /* When clipped, the overflow chips stay in the DOM but are hidden
       with `max-height` + `overflow:hidden` so the toggle reveals them
       smoothly without re-painting the layout. */
    position: relative;
    max-height: none;
    overflow: visible;
    transition: max-height .25s ease;
}
.filter-section .brand-chip-grid.is-clipped {
    /* 8 rows × ~37px (8 + 18 + 8 padding + 1.5×2 border + 1.25 line-height) ≈ 296px
       plus a 4px gap between rows; round up to 304px. */
    max-height: 304px;
    overflow: hidden;
    /* Fade at the bottom to hint that there's more below. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
/* When the user expands the list, drop the fade so the chips look
   equally crisp at the bottom. */
.filter-section .brand-chip-grid.is-clipped.is-expanded {
    max-height: 1500px;
    -webkit-mask-image: none;
            mask-image: none;
}

.filter-section .brand-chip {
    /* Each row is a full-width flex line: square checkbox on the left,
       brand name flex-grow, count badge on the right. Margins are 0 and
       the grid sets a small inter-row gap, so no chip ever gets cut. */
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px; font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}
.filter-section .brand-chip:hover {
    background: var(--brand-soft);
    border-color: rgba(209, 18, 25, 0.30);
    color: var(--brand-dark);
    text-decoration: none;
}
.filter-section .brand-chip:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.22);
}
.filter-section .brand-chip.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.45);
    box-shadow: inset 0 0 0 1px rgba(209, 18, 25, 0.08);
}
.filter-section .brand-chip.active:hover {
    background: #fbd0d6;
    border-color: var(--brand);
}

/* The checkbox indicator. A square that fills brand colour when the
   parent `.brand-chip` carries `.active`, otherwise a neutral outlined
   square. The checkmark icon sits centred. */
.filter-section .brand-chip .brand-check {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 5px;
    background: white;
    border: 1.5px solid var(--border-strong);
    color: transparent;            /* hides the check until active */
    transition: background .15s, border-color .15s, color .15s;
}
.filter-section .brand-chip .brand-check svg { display: block; }
.filter-section .brand-chip:hover .brand-check {
    border-color: var(--brand);
}
.filter-section .brand-chip.active .brand-check {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
    box-shadow: 0 1px 3px rgba(209, 18, 25, 0.35);
}

/* The brand name itself — flex-grow so it absorbs any spare space and
   truncates with an ellipsis on very long names (e.g. localised strings). */
.filter-section .brand-chip .brand-name {
    flex: 1 1 auto;
    min-width: 0;                   /* allow shrinking past content size */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-section .brand-chip-count {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--bg); color: var(--muted);
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s;
}
.filter-section .brand-chip:hover .brand-chip-count {
    background: white;
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.25);
}
.filter-section .brand-chip.active .brand-chip-count {
    background: white;
    color: var(--brand-dark);
    border-color: rgba(209, 18, 25, 0.25);
}

/* "Show all brands" toggle button rendered only when the grid is
   clipped. Full-width to match the chip rows above, dashed border so
   it reads as a secondary action. */
.filter-section .brand-chip-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    background: transparent;
    color: var(--brand-dark);
    border: 1px dashed rgba(209, 18, 25, 0.40);
    border-radius: 10px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.filter-section .brand-chip-toggle:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}
.filter-section .brand-chip-toggle svg {
    transition: transform .2s ease;
}
.filter-section .brand-chip-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Tiny search input that filters brand chips client-side. Shown when
   the catalog exposes > 12 brands. The input is server-rendered with
   the section; an empty value means "show all". */
.filter-section .brand-search {
    position: relative;
    margin-bottom: 10px;
}
.filter-section .brand-search input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    font: inherit; font-size: 13px;
    color: var(--text);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-section .brand-search input::placeholder { color: var(--muted); }
.filter-section .brand-search input:focus {
    outline: none;
    border-color: var(--brand);
    background: white;
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.12);
}
.filter-section .brand-search svg {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

/* Clear-current-brand pill, kept for the active state. */
.filter-section .brand-clear-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    margin-bottom: 8px;
    background: #fef2f2; color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.filter-section .brand-clear-chip:hover {
    background: #fee2e2; color: #991b1b;
    text-decoration: none;
}

/* ----- Dual-range price slider ----- */
.filter-section .range-slider {
    position: relative;
    height: 36px;
    margin: 6px 6px 4px;
}
.filter-section .range-track {
    /* The track is the visible rail. It also doubles as the click
       target: a JS handler routes clicks to the nearest thumb. We give
       it a subtle inner shadow so it reads as recessed into the card. */
    position: absolute; top: 50%; left: 0; right: 0; height: 6px;
    transform: translateY(-50%);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}
.filter-section .range-fill {
    position: absolute; top: 50%; height: 6px;
    transform: translateY(-50%);
    left: 0; width: 100%;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(209, 18, 25, 0.25);
}
.filter-section .range-slider input[type="range"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 36px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none; appearance: none;
    padding: 0; margin: 0;
}
.filter-section .range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    pointer-events: auto;
    width: 22px; height: 22px;
    background: white;
    border: 3px solid var(--brand);
    border-radius: 999px;
    cursor: grab;
    box-shadow:
        0 4px 10px rgba(209, 18, 25, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s;
}
.filter-section .range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.10);
    box-shadow:
        0 0 0 5px rgba(209, 18, 25, 0.18),
        0 6px 14px rgba(209, 18, 25, 0.35);
}
.filter-section .range-slider input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow:
        0 0 0 4px rgba(209, 18, 25, 0.22),
        0 4px 10px rgba(209, 18, 25, 0.28);
}
.filter-section .range-slider input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow:
        0 0 0 7px rgba(209, 18, 25, 0.20),
        0 6px 14px rgba(209, 18, 25, 0.35);
}
.filter-section .range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px;
    background: white;
    border: 3px solid var(--brand);
    border-radius: 999px;
    cursor: grab;
    box-shadow:
        0 4px 10px rgba(209, 18, 25, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.filter-section .range-slider input[type="range"]::-moz-range-track { background: transparent; }

/* Readout boxes (separate number inputs below the slider for precision) */
.filter-section .price-readout {
    display: flex; align-items: center; gap: 6px;
    margin: 10px 0 12px;
}
.filter-section .price-input-wrap {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 8px 0 10px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-section .price-input-wrap:focus-within {
    border-color: var(--brand);
    background: white;
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.12);
}
.filter-section .price-input-wrap .price-cur {
    color: var(--muted); font-weight: 700; font-size: 13px;
}
.filter-section .price-input-wrap input {
    border: 0; padding: 8px 4px;
    background: transparent; box-shadow: none !important;
    font-weight: 700; font-size: 13.5px;
    width: 100%; min-width: 0;
    -moz-appearance: textfield;
}
.filter-section .price-input-wrap input::-webkit-outer-spin-button,
.filter-section .price-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.filter-section .price-dash { color: var(--muted); font-weight: 700; }

.filter-section .apply-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 14px; border: 0; border-radius: 11px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: white; font-weight: 800; font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(209, 18, 25, 0.30);
    transition: transform .15s ease, box-shadow .2s ease, filter .15s;
}
.filter-section .apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(209, 18, 25, 0.38);
    filter: brightness(1.04);
}
.filter-section .apply-btn:active { transform: translateY(0); }

/* The "Clear all filters" footer link, redesigned to match the new system */
.filter-sidebar .clear-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px;
    padding: 9px 12px;
    background: transparent;
    color: var(--muted);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-align: center;
    transition: color .15s, border-color .15s, background .15s;
}
.filter-sidebar .clear-link:hover {
    color: var(--danger);
    border-color: #fecaca;
    background: #fef2f2;
    text-decoration: none;
}

/* ----- Mobile filter trigger button ----- */
.filter-trigger {
    display: none;
    align-items: center; gap: 8px;
    padding: 11px 18px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: white;
    border: 0; border-radius: 12px;
    font: inherit; font-weight: 700; font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(209, 18, 25, 0.30);
    transition: transform .15s, box-shadow .2s, filter .2s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.filter-trigger:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(209, 18, 25, 0.38); }
.filter-trigger:active { transform: translateY(0); filter: brightness(0.95); }
.filter-trigger:focus-visible { outline: 3px solid rgba(209, 18, 25, 0.45); outline-offset: 3px; }
.filter-trigger .filter-active-dot {
    width: 8px; height: 8px;
    background: #f59e0b;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
    margin-left: 2px;
    animation: shop-pulse-dot 1.6s ease-in-out infinite;
}

/* ----- Backdrop (mobile only) ----- */
.filter-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease, backdrop-filter .28s ease;
    z-index: 49;
}
.filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.filter-drawer-open { overflow: hidden; }

/* Drawer drag-handle. Only rendered in markup on mobile, only visible
   visually on small phones (≤480px) where the drawer is full-height
   and reads as a swipeable sheet from the left edge. */
.filter-handle {
    display: none;
}

/* ===== Filter sidebar responsive: collapses into a slide-in drawer on mobile ===== */
@media (max-width: 960px) {
    .shop-layout { grid-template-columns: 1fr !important; }

    /* Mobile trigger becomes a floating "FAB" (floating action button)
       anchored to the bottom-left of the viewport. Click it to pop up
       the drawer; click again (or tap the scrim / X) to close.
       Behaviour notes:
         * `position: fixed` so it doesn't take any document flow — the
           product list starts directly under the hero, no phantom row.
         * Stays reachable with the left thumb while scrolling.
         * Morphs into an "X" when the drawer is open so the same button
           is the open AND close target. */
    .filter-trigger {
        display: inline-flex;
        position: fixed;
        left: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        border-radius: 999px;
        font-size: 0;            /* hide the "Filters" wordmark on mobile */
        z-index: 70;
        box-shadow:
            0 10px 24px rgba(209, 18, 25, 0.40),
            0 4px 10px rgba(15, 23, 42, 0.18);
        align-self: auto;
    }
    /* When the drawer opens, tint the FAB to match the scrim and rotate
       the icon 180° so the same control reads as "close filters". */
    .filter-trigger.is-open {
        background: var(--text);
        box-shadow:
            0 10px 24px rgba(15, 23, 42, 0.35),
            0 4px 10px rgba(15, 23, 42, 0.18);
    }
    .filter-trigger.is-open svg {
        transform: rotate(180deg);
    }
    .filter-trigger svg {
        transition: transform .25s ease;
        width: 22px; height: 22px;
    }

    /* Active-filter count badge sits on the top-right of the FAB and
       turns the icon from "filters" into "filters (3)". The number
       is rendered server-side from `active_filter_count`. */
    .filter-active-dot {
        position: absolute;
        top: -2px;
        right: -2px;
        margin: 0;
        width: 22px;
        height: 22px;
        background: #f59e0b;
        color: white;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.95);
        font-size: 12px;
        font-weight: 800;
        line-height: 22px;
        text-align: center;
    }
    /* Suppress the desktop pulse-keyframe when the dot is now a number
       (no longer an empty circle), so the digit stays legible. */
    .filter-active-dot:not(:empty) {
        animation: none;
    }

    /* Drawer slides in from the LEFT (user-requested). On screens
       larger than 480px it stays a sidebar-shaped panel (~88vw, max
       360px); below 480px it goes edge-to-edge full-screen with safe
       insets for the home indicator.

       IMPORTANT: this rule must win over any later generic
       `≤960px` rule that resets `.filter-sidebar` to a static /
       in-flow position. We couple `transform` with `visibility` so
       the panel is invisible AND non-interactive when closed, even
       if a stray rule tries to put it back in the grid. */
    .shop-layout .filter-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        right: auto;
        width: min(380px, 88vw);
        max-height: 100vh;
        height: 100vh;
        z-index: 60;
        border-radius: 0 18px 18px 0;
        padding: 18px 18px 22px;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.2,.7,.2,1),
                    visibility 0s linear .3s;
        box-shadow: 12px 0 40px rgba(15, 23, 42, 0.15);
        align-items: stretch;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        align-self: stretch;
    }
    .shop-layout .filter-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s cubic-bezier(.2,.7,.2,1),
                    visibility 0s linear 0s;
    }
    /* Subtle parallax as the panel slides in — a 4px Y-offset at rest
       that settles to 0 when open. Adds a touch of motion without
       fighting the slide transition. */
    .filter-sidebar { will-change: transform; }

    /* Edge accent: a thin highlight on the right edge of the drawer
       to reinforce the left-side affordance when the drawer sits next
       to the page content (mid-mobile, 480–960px). On full-screen
       phones (≤480px) this is hidden because the drawer has no edge. */
    .filter-sidebar::after {
        content: "";
        position: absolute;
        top: 18px; bottom: 18px;
        right: 0; width: 2px;
        background: linear-gradient(180deg, transparent, var(--brand) 50%, transparent);
        opacity: .35;
        border-radius: 2px;
        pointer-events: none;
    }

    .filter-close { display: inline-flex; }
    .filter-head { padding: 4px 0 14px; margin-bottom: 4px; }

    /* Larger tap targets in the drawer. */
    .filter-section-head { padding: 14px 10px; min-height: 48px; }
    .filter-section .cat-list a { padding: 12px 12px; min-height: 44px; }
    .filter-section .brand-chip { padding: 9px 13px; min-height: 38px; }
    .filter-section .apply-btn { padding: 14px; min-height: 48px; font-size: 14.5px; }
}
/* Phones in landscape, very small tablets — drawer takes more width. */
@media (max-width: 720px) {
    .filter-sidebar { width: min(420px, 100vw); }
    .filter-trigger { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* Small phones — drawer goes full-screen (edge-to-edge popup).
   Inner padding uses safe-area insets so notched devices (iOS) keep
   the close button and content clear of the rounded screen edges,
   and we widen the section gutters so tap targets don't hug the bezel. */
@media (max-width: 480px) {
    .filter-sidebar {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        /* symmetric: equal top + bottom, equal left + right, with safe
           areas added so content clears the notch / home indicator.
           Sides got +4px compared to the right-side drawer because the
           drawer is anchored to the LEFT and the page content peeks
           out on the right — leave an explicit visual gutter. */
        padding:
            calc(env(safe-area-inset-top, 0px) + 14px)
            calc(env(safe-area-inset-right, 0px) + 20px)
            calc(env(safe-area-inset-bottom, 0px) + 24px)
            calc(env(safe-area-inset-left, 0px) + 20px);
        border-radius: 0;
        gap: 10px;
    }
    /* Full-screen drawer has no edge accent. */
    .filter-sidebar::after { display: none; }
    /* Show the swipe handle. Centered horizontally at the top, just
       below the safe-area top inset. Tells the user the panel is a
       sheet that can be swiped away. */
    .filter-handle {
        display: block;
        width: 44px; height: 5px;
        margin: 4px auto 2px;
        background: var(--border-strong);
        border-radius: 999px;
        opacity: .65;
    }
    /* On very small phones the FAB can shrink a touch so it doesn't
       crowd the home-indicator area or overlap scroll content. */
    .filter-trigger {
        left: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }
    .filter-active-dot {
        width: 20px; height: 20px;
        font-size: 11px; line-height: 20px;
        top: -3px; right: -3px;
    }

    /* Header row: bigger title, more breathing room around the close
       button so it's easy to tap with a thumb without overshooting. */
    .filter-head {
        padding: 6px 2px 14px;
        margin-bottom: 6px;
    }
    .filter-title { font-size: 15px; }
    .filter-close {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    /* Section bodies: more horizontal padding so the row content (dot +
       label + count) doesn't crowd the screen edge. The vertical padding
       also grows slightly for thumb-friendly tap heights. */
    .filter-section-head {
        padding: 14px 12px;
        min-height: 50px;
        border-radius: 12px;
    }
    .filter-section-body {
        padding: 10px 6px 14px;
    }
    .filter-section .cat-list a {
        padding: 12px 12px;
        min-height: 46px;
        border-radius: 12px;
    }
    .filter-section .brand-chip {
        padding: 10px 14px;
        min-height: 40px;
    }
    .filter-section .apply-btn {
        padding: 15px;
        min-height: 50px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* Range slider: tighten the readout boxes so they don't overflow
       the narrow viewport, and give the numeric inputs the same
       comfortable tap height used elsewhere. */
    .price-readout { gap: 8px; }
    .price-input-wrap input {
        height: 44px;
        padding: 0 10px 0 28px;
        font-size: 15px;
    }

    /* Clear-all link gets the same touch-friendly spacing as the rows. */
    .clear-link {
        margin-top: 6px;
        padding: 12px;
        min-height: 44px;
        justify-content: center;
    }
}

/* Landscape phones & small tablets — drawer becomes a side panel
   anchored to the LEFT edge. Vertically centered for short viewports,
   taller so filter content can be scrolled without overwhelming the
   screen. */
@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
    .filter-sidebar {
        top: 50%;
        left: 4px;
        right: auto;
        bottom: auto;
        transform: translate(0, -50%) translateX(-100%);
        width: min(420px, 96vw);
        max-height: 92vh;
        height: auto;
        border-radius: 16px;
        box-shadow: 12px 0 40px rgba(15, 23, 42, 0.15);
    }
    .filter-sidebar.is-open {
        transform: translate(0, -50%) translateX(0);
    }
    .filter-trigger {
        left: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Modern product card (grid) --- */
.product-card-v2 {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none !important; color: var(--text);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), var(--shadow-sm);
    isolation: isolate;
    animation: shop-fade-up .45s ease both;
}
/* glowing ring on hover (1px gradient border) */
.product-card-v2::before {
    content: ""; position: absolute; inset: -1px;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, transparent 25%, rgba(209, 18, 25, 0.85) 50%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 3;
}
/* soft top glow on hover */
.product-card-v2::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0%, rgba(209, 18, 25, 0.10), transparent 60%);
    opacity: 0; transition: opacity .35s;
    border-radius: inherit; z-index: 0;
}
.product-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px -16px rgba(209, 18, 25, 0.32), 0 8px 16px rgba(15,23,42,0.08);
    border-color: transparent;
}
.product-card-v2:hover::before { opacity: 1; }
.product-card-v2:hover::after  { opacity: 1; }

/* transparent link overlay so the whole card is clickable, but
   real buttons (heart / quick-add) sit above it via z-index */
.product-card-v2 .card-link {
    position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
}
.product-card-v2 .card-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* --- Thumb area ---
   `z-index: 1` keeps the whole thumb (and the absolutely-positioned
   heart inside it) above the transparent `.card-link` overlay, which
   also sits at z:1 but is the earlier sibling. Together with the
   heart's own z-index, this guarantees the heart receives clicks
   instead of the underlying product link. */
.product-card-v2 .thumb {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(209, 18, 25, 0.05), transparent 55%),
        linear-gradient(135deg, #f5f6fa 0%, #e9ecf3 100%);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.product-card-v2 .thumb::after {
    /* subtle inner highlight frame */
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    border-radius: inherit;
    pointer-events: none;
}
.product-card-v2 .thumb-img {
    position: relative; z-index: 1;
    display: block; width: 100%; height: 100%;
    text-decoration: none !important;
}
.product-card-v2 .thumb-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s;
    filter: saturate(1);
}
.product-card-v2:hover .thumb-img img {
    transform: scale(1.08);
    filter: saturate(1.05);
}

/* heart button — top right.
   The heart is `position: absolute; z-index: 5` so it floats above
   the transparent `.card-link` overlay (which has z-index: 1) and
   receives clicks instead of the link. */
.product-card-v2 .heart {
    position: absolute; top: 12px; right: 12px;
    z-index: 5;
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,0.94); color: var(--muted);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    transition: color .15s, transform .25s cubic-bezier(.2,.7,.2,1), background .15s;
}
.product-card-v2 .heart:hover { color: var(--brand); transform: scale(1.14); background: white; }
.product-card-v2 .heart.liked { color: var(--brand); transform: scale(1.05); }
.product-card-v2 .heart.liked svg { fill: currentColor; animation: heart-pop .35s ease; }
@keyframes heart-pop { 0% { transform: scale(1.4); } 60% { transform: scale(.95); } 100% { transform: scale(1.05); } }

/* quick-add (Add to cart) — reveals on hover over the product image */
.product-card-v2 .quick-add {
    position: absolute; left: 50%; bottom: 14px;
    transform: translate(-50%, 14px);
    opacity: 0; pointer-events: none;
    z-index: 4;
    display: inline-flex; gap: 6px;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.product-card-v2 .quick-add-btn,
.product-card-v2 .quick-buy-btn {
    appearance: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
    color: #fff;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.product-card-v2 .quick-add-btn {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 12px 26px rgba(209, 18, 25, 0.36), 0 4px 10px rgba(15,23,42,0.14);
}
.product-card-v2 .quick-buy-btn {
    background: linear-gradient(135deg, #020c27 0%, #020c27 100%);
    box-shadow: 0 10px 22px rgba(2, 12, 39,0.36), 0 3px 8px rgba(15,23,42,0.14);
}
.product-card-v2 .quick-add-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(209, 18, 25, 0.46), 0 6px 14px rgba(15,23,42,0.16); }
.product-card-v2 .quick-buy-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 28px rgba(2, 12, 39,0.46), 0 5px 12px rgba(15,23,42,0.18); }
.product-card-v2 .quick-add-btn:active,
.product-card-v2 .quick-buy-btn:active { transform: translateY(0); }
.product-card-v2 .quick-add-btn svg,
.product-card-v2 .quick-buy-btn svg { width: 14px; height: 14px; }

.product-card-v2:hover .quick-add,
.product-card-v2:focus-within .quick-add {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* dim thumb image slightly on hover so the button pops */
.product-card-v2:hover .thumb-img img { filter: saturate(1.05) brightness(0.96); }

/* on touch / small screens, always show the button (no hover state) */
@media (hover: none), (max-width: 640px) {
    .product-card-v2 .quick-add {
        opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
    }
    .product-card-v2 .quick-add-btn,
    .product-card-v2 .quick-buy-btn {
        padding: 8px 10px; font-size: 11px; gap: 5px;
    }
}

/* --- Body --- */
.product-card-v2 .body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1; position: relative; z-index: 2;
}

/* star rating — single icon + numeric value (grid view) */
.product-card-v2 .rating {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
    line-height: 1;
    margin: -1px 0 0;
}
.product-card-v2 .rating-score {
    display: inline-flex; align-items: center; gap: 3px;
    min-width: 0;
}
.product-card-v2 .rating .star-icon {
    color: #f59e0b;
    font-size: 11px;
    line-height: 1;
}
.product-card-v2 .rating-empty .star-icon { color: #cbd5e1; }
.product-card-v2 .rating .rating-value {
    font-size: 11px; font-weight: 600;
    color: var(--muted); letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.product-card-v2 .rating .rating-value::after { content: ""; }
/* Hide the legacy full star strip in grid cards (template no longer renders it) */
.product-card-v2 .rating .stars { display: none; }

/* "230 sold" — small, muted, sits opposite the rating */
.product-card-v2 .rating .sold-count {
    font-size: 10.5px; font-weight: 500;
    color: var(--muted); letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.product-card-v2 .rating-sep {
    display: none;
}

/* product name */
.product-card-v2 .name {
    display: block;
    font-weight: 600;
    font-size: 14.5px; letter-spacing: -0.005em;
    line-height: 1.35;
    color: var(--text);
    -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    transition: color .2s;
    text-decoration: none;
    position: relative; z-index: 2;
}
.product-card-v2:hover .name { color: var(--brand-dark); }

/* colour hint swatches under the name on the listing card */
.product-card-v2 .card-swatches {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; align-items: center; gap: 5px;
    position: relative; z-index: 2;
}
.product-card-v2 .card-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15, 23, 42, .08);
    background: white;
}
.product-card-v2 .card-swatch.is-out {
    position: relative;
    background: linear-gradient(135deg, transparent calc(50% - 1px), #cbd5e1 calc(50% - 1px), #cbd5e1 calc(50% + 1px), transparent calc(50% + 1px));
}
.product-card-v2 .card-swatch-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
    border: 1px solid rgba(15, 23, 42, .08);
    box-sizing: border-box;
}
.product-card-v2 .card-swatch-dot--neutral {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.product-card-v2 .card-swatch-more {
    width: auto; height: 14px; padding: 0 5px; border-radius: 7px;
    font-size: 9.5px; font-weight: 700; color: var(--muted, #64748b);
    letter-spacing: .02em;
}

/* price row — clean modern ecommerce: flat row, bold primary price,
   muted compare, compact accent discount chip */
.product-card-v2 .price-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: nowrap;
    margin-top: auto;
    padding-top: 8px;
    position: relative; z-index: 2;
}

/* Pin the price row to the bottom of the card body so all cards
   align the price strip to the same baseline regardless of name/rating height. */
.product-card-v2 .body .price-row-bottom,
.product-card-v2 .body .price-row { margin-top: auto; }

.product-card-v2 .price-block {
    display: flex; align-items: baseline; gap: 6px;
    min-width: 0; flex-wrap: wrap;
}
.product-card-v2 .price-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: var(--muted);
}
.product-card-v2 .price {
    font-weight: 700; font-size: 15px; letter-spacing: -0.015em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.product-card-v2 .save-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px; border-radius: 999px;
    background: #ecfdf5; color: #166534;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
    border: 1px solid #bbf7d0;
    white-space: nowrap; flex: 0 0 auto;
    max-width: 48%; overflow: hidden; text-overflow: ellipsis;
}

.compare-price {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 400;
    flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.line-through { text-decoration: line-through; opacity: 0.65; }

/* Modern ecommerce discount chip: solid accent, small but prominent */
.discount-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    padding: 2px 7px; border-radius: 5px; font-size: 10.5px;
    letter-spacing: 0.02em;
    white-space: nowrap; flex: 0 0 auto;
    line-height: 1.3;
}
/* Backward compat — leave .discount-label usable elsewhere, but match the new look */
.discount-label {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(209, 18, 25, 0.10);
    color: var(--brand-dark);
    font-weight: 700;
    padding: 3px 8px; border-radius: 6px; font-size: 11.5px;
    flex: 0 0 auto; white-space: nowrap;
}

/* Stack price block & badge vertically on very small screens */
@media (max-width: 380px) {
    .product-card-v2 .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* .add-form / .btn-add removed — Add to cart is now the .quick-add hover overlay only */
/* Removed .btn-arrow from product cards (arrow button removed in template) */
.product-card-v2 .btn-arrow { display: none !important; }

/* Stagger animation for grid cards */
.product-grid > .product-card-v2:nth-child(2)  { animation-delay: .04s; }
.product-grid > .product-card-v2:nth-child(3)  { animation-delay: .08s; }
.product-grid > .product-card-v2:nth-child(4)  { animation-delay: .12s; }
.product-grid > .product-card-v2:nth-child(5)  { animation-delay: .16s; }
.product-grid > .product-card-v2:nth-child(6)  { animation-delay: .20s; }
.product-grid > .product-card-v2:nth-child(7)  { animation-delay: .24s; }
.product-grid > .product-card-v2:nth-child(8)  { animation-delay: .28s; }
.product-grid > .product-card-v2:nth-child(n+9) { animation-delay: .32s; }

@keyframes shop-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Empty state v2 --- */
.empty-state-v2 {
    text-align: center; padding: 56px 20px;
    background: var(--card);
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    animation: shop-fade-up .5s ease both;
}
.empty-state-v2 .emoji {
    width: 64px; height: 64px; margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--brand-soft);
    font-size: 28px;
}
.empty-state-v2 h2 { margin: 0 0 6px; font-size: 20px; }
.empty-state-v2 p { color: var(--muted); margin: 0 0 18px; }

/* --- Detail page v2 --- */
.detail-crumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--muted); font-size: 13px; padding: 22px 0 14px;
}
.detail-crumb a { color: var(--muted); }
.detail-crumb a:hover { color: var(--brand); }
.detail-crumb .sep { color: var(--border-strong); }

/* --- Unified product hero card --- */
.product-detail-shell {
    /* Hero and tabs share one rounded card so the seam disappears. */
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.18), var(--shadow-md);
    overflow: hidden;
    margin: 0 0 48px;
    animation: shop-fade-up .5s ease both;
}
.product-hero {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
    animation: none;
}
.ph-glow {
    position: absolute; inset: -40% -10% auto auto; width: 60%; height: 80%;
    background: radial-gradient(closest-side, rgba(209, 18, 25, 0.18), transparent 70%);
    pointer-events: none; z-index: 0;
}
.ph-glow::after {
    content: ""; position: absolute; inset: 60% -20% auto auto; width: 50%; height: 60%;
    background: radial-gradient(closest-side, rgba(209, 18, 25, 0.16), transparent 70%);
    pointer-events: none;
}
.ph-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1px 1fr;
    gap: 0;
    align-items: stretch;
}
.ph-divider {
    background: linear-gradient(180deg, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
}

/* --- Gallery side --- */
.ph-gallery {
    padding: 28px 28px 28px 32px;
    display: flex; flex-direction: column; gap: 16px;
    min-width: 0;
}
.ph-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ph-badge.in-stock { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.ph-badge.out-stock { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ph-badge.category {
    background: var(--brand-soft); color: var(--brand-dark);
    border: 1px solid transparent;
}
.ph-badge .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    animation: pulse-green 1.8s ease-out infinite;
}
@keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0); }
}

.ph-main {
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, #f8fafc 0%, #eef0f5 100%),
        radial-gradient(circle at 20% 20%, rgba(209, 18, 25, 0.06), transparent 50%);
    display: grid; place-items: center; color: #94a3b8;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.ph-main::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0.6), transparent 70%);
    pointer-events: none;
}
.ph-main img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    position: relative; z-index: 1;
}
.ph-main:hover img { transform: scale(1.06); }

.ph-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-thumb {
    width: 72px; height: 72px; border-radius: 12px; overflow: hidden;
    border: 2px solid var(--border); padding: 0; background: #f0f1f5;
    cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-thumb:hover { transform: translateY(-2px); border-color: var(--brand-soft); }
.ph-thumb.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.15);
    transform: translateY(-2px);
}

/* --- Info side --- */
.ph-info {
    padding: 32px 36px 32px 32px;
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
}
.ph-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px; color: var(--muted);
}
.ph-rating { display: inline-flex; align-items: center; gap: 8px; }
.ph-rating .stars {
    color: #f59e0b; letter-spacing: 1px; font-size: 13px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ph-rating .count { color: var(--text); font-weight: 700; font-size: 12.5px; }

/* Filled-reviews state — same pill vocabulary as the empty CTA so the
   meta row stays visually consistent. Warm amber gradient + soft glow
   draw the eye to the rating without overpowering the buy buttons. */
.ph-rating--filled {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    box-shadow: 0 1px 0 rgba(180, 83, 9, 0.05) inset,
                0 4px 12px rgba(245, 158, 11, 0.10);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ph-rating--filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(180, 83, 9, 0.08) inset,
                0 8px 18px rgba(245, 158, 11, 0.18);
}
.ph-rating--filled .stars {
    font-size: 14px;
    letter-spacing: 1.5px;
}
.ph-rating--filled .count {
    color: #78350f;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.01em;
}
.ph-rating--filled .count strong {
    color: #b45309;
    font-weight: 800;
    margin-right: 2px;
}
.ph-rating--filled .count-sep {
    color: #d97706;
    margin: 0 6px;
    font-weight: 700;
}

/* Empty-reviews state — make "☆☆☆☆☆ No reviews yet — be the first…"
   pop without competing with the buy buttons. Bright amber pill, each
   outline star nudges up sequentially so the eye travels across them. */
.ph-rating--empty {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    box-shadow: 0 1px 0 rgba(180, 83, 9, 0.06) inset,
                0 4px 12px rgba(245, 158, 11, 0.10);
    color: #78350f;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ph-rating--empty:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(180, 83, 9, 0.08) inset,
                0 8px 18px rgba(245, 158, 11, 0.18);
}
.ph-rating--empty .empty-stars {
    display: inline-flex; align-items: center;
    gap: 1px; line-height: 1;
}
.ph-rating--empty .empty-stars-icon {
    font-size: 14px;
    color: #f59e0b;
    -webkit-text-stroke: 1.5px #f59e0b;
    text-shadow: 0 0 0 #fbbf24;
    animation: ph-star-wiggle 1.6s ease-in-out infinite;
}
.ph-rating--empty .empty-stars-icon:nth-child(1) { animation-delay: 0s; }
.ph-rating--empty .empty-stars-icon:nth-child(2) { animation-delay: .12s; }
.ph-rating--empty .empty-stars-icon:nth-child(3) { animation-delay: .24s; }
.ph-rating--empty .empty-stars-icon:nth-child(4) { animation-delay: .36s; }
.ph-rating--empty .empty-stars-icon:nth-child(5) { animation-delay: .48s; }
@keyframes ph-star-wiggle {
    0%, 100% { transform: translateY(0) rotate(0);    opacity: .75; }
    50%      { transform: translateY(-2px) rotate(-6deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-rating--empty .empty-stars-icon { animation: none; }
}
.ph-rating--empty .count {
    font-size: 12.5px; font-weight: 600;
    color: #78350f; letter-spacing: 0.01em;
}
.ph-rating--empty .count strong {
    color: #b45309; font-weight: 800;
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ph-sku {
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}
.ph-sku strong { color: var(--text); font-weight: 700; }

/* Sold-count chip — sits opposite the rating in .ph-meta (which uses
   space-between). Muted background pill so it doesn't compete with the
   primary action buttons below. */
.ph-sold {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: #f1f5f9; border: 1px solid var(--border);
    color: var(--text); font-size: 12.5px;
}
.ph-sold strong { color: var(--text); font-weight: 800; letter-spacing: 0.01em; }
.ph-sold-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(2, 12, 39, 0.12); color: #020c27;
}

.ph-name {
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em; line-height: 1.12; margin: 0;
    background: linear-gradient(120deg, #1f2933 0%, #9a0d14 55%, #d11219 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ph-price-block {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
    box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
.ph-price-block::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
    background: radial-gradient(closest-side, rgba(209, 18, 25, 0.08), transparent 70%);
    pointer-events: none;
}
.ph-price-block-inner {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ph-price-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    color: var(--muted);
}
.ph-price-main {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.ph-price-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    justify-content: space-between;
}
.ph-price {
    font-size: clamp(30px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
}
.ph-compare-price {
    font-size: 17px; font-weight: 500; color: var(--muted);
    text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.ph-discount-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 10px;
    background: var(--brand);
    color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(209, 18, 25, 0.25);
    white-space: nowrap;
}
/* Remove the decorative notch + punched circle for a cleaner modern look */
.ph-discount-pill::before,
.ph-discount-pill::after { content: none; }
.ph-savings {
    display: inline-flex; align-items: center; gap: 6px;
    color: #166534; font-weight: 600; font-size: 12.5px;
    margin-top: 2px;
}
.ph-savings .tick {
    width: 16px; height: 16px; border-radius: 50%;
    background: #16a34a; color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900;
}

.ph-desc {
    color: var(--text); opacity: 0.85; line-height: 1.65;
    margin: 0; font-size: 14.5px;
}

.ph-stock-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    color: #166534;
}
.ph-stock-bar.out {
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-color: #fecaca;
    color: #991b1b;
}
.ph-stock-bar .bar-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(22, 163, 74, 0.14);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ph-stock-bar.out .bar-icon { background: rgba(220, 38, 38, 0.12); }
.ph-stock-bar .bar-text { font-size: 13px; line-height: 1.4; }
.ph-stock-bar .bar-text strong { font-weight: 800; }

/* "230 already sold" — sits directly under the stock message inside the
   same green/red pill. Small dot + slightly muted weight so the primary
   "Only N left" line still reads first. */
.ph-stock-bar .bar-sold {
    display: block; margin-top: 4px;
    font-size: 12px; font-weight: 600;
    color: rgba(22, 101, 52, 0.85);
    letter-spacing: 0.01em;
}
.ph-stock-bar .bar-sold strong { font-weight: 800; color: inherit; }
.ph-stock-bar .bar-sold-dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: #16a34a;
    margin-right: 6px; vertical-align: middle;
    transform: translateY(-1px);
}
.ph-stock-bar.out .bar-sold { color: rgba(153, 27, 27, 0.85); }
.ph-stock-bar.out .bar-sold-dot { background: #dc2626; }

/* ----- Colour picker (product detail) ----- */
.ph-colors {
    margin: 14px 0 8px;
    display: flex; flex-direction: column; gap: 10px;
}
.ph-colors-head {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px;
}
.ph-colors-label {
    color: var(--text-muted, #64748b); font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; font-size: 11.5px;
}
.ph-colors-current {
    color: var(--text, #0f172a); font-weight: 700; font-size: 14px;
}
.ph-swatches {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.ph-swatch {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1.5px solid var(--border-strong, #e5e7eb);
    border-radius: 999px;
    background: white; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s, opacity .15s;
}
.ph-swatch:hover {
    border-color: var(--brand, #d11219);
    box-shadow: 0 1px 4px rgba(209, 18, 25, .12);
}
.ph-swatch input[type="radio"] {
    /* Hide the native radio but keep it accessible. */
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; margin: 0;
}
.ph-swatch.is-selected {
    border-color: var(--brand, #d11219);
    box-shadow: 0 0 0 3px rgba(209, 18, 25, .12);
    background: #fff5f6;
}
.ph-swatch.is-out {
    opacity: .55; cursor: not-allowed;
}
.ph-swatch.is-out:hover {
    border-color: var(--border-strong, #e5e7eb); box-shadow: none;
}
.ph-swatch-circle {
    position: relative;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #cbd5e1); /* neutral fallback */
    border: 1px solid rgba(15, 23, 42, .12);
    box-sizing: border-box; flex-shrink: 0;
    overflow: hidden;
}
.ph-swatch-ring {
    /* Used as a focus indicator overlay on the swatch dot. */
    position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
    pointer-events: none;
}
.ph-swatch-name {
    font-size: 13px; font-weight: 600; color: var(--text, #0f172a);
    line-height: 1; white-space: nowrap;
}
.ph-swatch-tag {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 999px;
    background: #fee2e2; color: #b91c1c;
}
.ph-swatch-tag.warn {
    background: #fef3c7; color: #92400e;
}
@media (max-width: 520px) {
    .ph-swatches { gap: 8px; }
    .ph-swatch { padding: 4px 10px 4px 4px; }
    .ph-swatch-circle { width: 22px; height: 22px; }
    .ph-swatch-name { font-size: 12px; }
}

.ph-buy {
    display: flex; align-items: stretch; gap: 10px;
    margin-top: 2px;
}
.ph-buy-row {
    display: flex; align-items: stretch; gap: 10px;
    margin-top: 2px; flex-wrap: wrap;
}
.ph-buy-row > .ph-buy { flex: 1 1 auto; min-width: 280px; margin-top: 0; }
.ph-buy-row > .ph-buy-now-form {
    flex: 1 1 auto; min-width: 180px; display: flex;
}
.ph-buy-row > .ph-buy-now-form > .ph-buy-now { flex: 1; width: 100%; }
.ph-qty {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--border-strong); border-radius: 14px;
    overflow: hidden; background: white; flex-shrink: 0;
}
.ph-qty button {
    width: 40px; border: 0; background: transparent; cursor: pointer;
    font-size: 18px; color: var(--text); font-weight: 700;
    transition: background .15s, color .15s;
}
.ph-qty button:hover { background: var(--bg); color: var(--brand); }
.ph-qty input {
    width: 52px; text-align: center; border: 0; padding: 10px 0;
    font-weight: 800; font-size: 15px; box-shadow: none !important;
    background: transparent;
}
.ph-add {
    flex: 1; min-height: 50px; border-radius: 14px; font-weight: 800;
    font-size: 15px; gap: 8px;
    box-shadow: 0 10px 24px -8px rgba(209, 18, 25, 0.45);
    transition: transform .15s, box-shadow .2s;
}
.ph-add:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -8px rgba(209, 18, 25, 0.55);
}
.ph-add:disabled { box-shadow: none; }
.ph-buy-now {
    flex: 1; min-height: 50px; border-radius: 14px; font-weight: 800;
    font-size: 15px; gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #020c27 0%, #020c27 100%);
    box-shadow: 0 10px 24px -8px rgba(2, 12, 39, 0.55);
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.ph-buy-now:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px -8px rgba(2, 12, 39, 0.7);
}
.ph-buy-now:active { transform: translateY(0); }
.ph-buy-now svg { width: 18px; height: 18px; }
.ph-wish {
    width: 50px; border-radius: 14px;
    border: 1.5px solid var(--border); background: white; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: color .15s, border-color .15s, transform .15s, background .15s;
    flex-shrink: 0;
}
.ph-wish:hover { color: var(--brand); border-color: var(--brand); transform: scale(1.04); }
.ph-wish.liked { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ph-wish.liked svg { fill: currentColor; }
/* Top-right corner variant — floats over the hero card */
.ph-wish-corner {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 5;
    width: 46px; height: 46px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.35);
}
.ph-wish-corner:hover {
    transform: scale(1.08);
}

.ph-view-cart {
    align-self: flex-start;
    color: var(--brand); font-weight: 700; font-size: 13.5px;
    text-decoration: none; margin-top: -4px;
    transition: gap .2s, color .2s;
    display: inline-flex; align-items: center; gap: 4px;
}
.ph-view-cart:hover { color: var(--brand-dark); gap: 8px; }

.ph-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-top: 6px;
}
.ph-trust .t {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
    transition: border-color .2s, background .2s, transform .2s;
}
.ph-trust .t:hover { border-color: var(--brand-soft); background: white; transform: translateY(-1px); }
.ph-trust .t-ico {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fef2f3 100%);
    color: var(--brand-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.ph-trust .t div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ph-trust .t strong { color: var(--text); font-size: 12.5px; font-weight: 800; }
.ph-trust .t span { color: var(--muted); font-size: 11px; }

/* --- Responsive --- */
@media (max-width: 960px) {
    .ph-grid { grid-template-columns: 1fr; }
    .ph-divider { display: none; }
    .ph-gallery { padding: 22px 22px 8px; }
    .ph-info { padding: 8px 22px 26px; }
    .ph-main { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
    .ph-info { padding: 8px 16px 22px; }
    .ph-gallery { padding: 18px 16px 6px; }
    .ph-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ph-trust { grid-template-columns: 1fr; }
    .ph-thumb { width: 60px; height: 60px; }
    .ph-wish { width: 46px; }
    .ph-wish-corner { top: 12px; right: 12px; width: 42px; height: 42px; }
    .ph-buy { flex-wrap: wrap; }
    .ph-buy .ph-qty { width: auto; }
    .ph-buy .ph-add { flex-basis: calc(100% - 60px); min-height: 46px; font-size: 14px; }
    .ph-buy-row { flex-direction: column; }
    .ph-buy-row > .ph-buy-now-form { width: 100%; }
    .ph-buy-now { min-height: 46px; font-size: 14px; }
}

/* ===== Related products ("You may also like") ===== */
.related-v2 {
    padding: 16px 16px 40px 16px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}
.related-v2 .related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.related-v2 .related-head-l {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.related-v2 .related-ico {
    width: 30px; height: 30px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand);
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fef2f3 100%);
    box-shadow: inset 0 0 0 1px rgba(209, 18, 25, 0.18);
    flex-shrink: 0;
}
.related-v2 h2 {
    font-size: 20px;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}
.related-v2 .related-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.related-v2 .related-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s, transform .2s, gap .2s;
}
.related-v2 .related-all:hover {
    color: var(--brand);
    border-color: var(--brand-soft);
    background: var(--brand-soft);
    gap: 9px;
    transform: translateX(2px);
}
.related-v2 .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.related-v2 .related-grid > .product-card-v2 {
    max-width: none;
    width: 100%;
}
@media (max-width: 960px) {
    .related-v2 { padding: 12px 12px 32px 12px; }
    .related-v2 h2 { font-size: 18px; }
    .related-v2 .related-head { margin-bottom: 10px; }
    .related-v2 .related-grid { gap: 12px; }
}
@media (max-width: 560px) {
    .related-v2 .related-head-l { flex-wrap: wrap; }
    .related-v2 .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .related-v2 .related-all { padding: 6px 10px; font-size: 12px; }
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .shop-hero-v2 { padding: 48px 0 36px; }
    .shop-hero-v2 .hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .shop-hero-v2 .hero-collage { height: 280px; order: -1; }
    .shop-hero-v2 .hero-collage .tile.t1 { width: 130px; height: 130px; top: 16px; left: 16px; }
    .shop-hero-v2 .hero-collage .tile.t2 { width: 110px; height: 110px; bottom: 16px; right: 16px; }
    .shop-hero-v2 .hero-collage .tile.t3 { width: 80px; height: 80px; top: 90px; right: 30px; }

    /* NOTE: .filter-sidebar intentionally has NO override here. The
       filter is delivered through a slide-in drawer (see the dedicated
       ≤960px filter rules above), and forcing `position: static` here
       used to yank the drawer back into the document flow on tablets /
       phones — leaving a sticky slice of the sidebar visible on the
       left while scrolling. If you need to neutralize the drawer's
       `position: fixed` for a different page, scope it explicitly
       (e.g. `.some-other-page .filter-sidebar { position: static; }`). */

    .detail-layout-v2 { grid-template-columns: 1fr; gap: 20px; }
    .detail-gallery-v2 { position: static; }
}
@media (max-width: 600px) {
    .shop-toolbar-v2 { padding: 10px 12px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px; }
    .product-grid > .product-card,
    .product-grid > .product-card-v2 { max-width: none; }
    .product-card-v2 .body { padding: 12px; }
    .product-card-v2 .name { font-size: 14px; min-height: 0; }
    .product-card-v2 .price { font-size: 16px; }
    .detail-info-v2 .trust { grid-template-columns: 1fr; }
}


/* ===== Breakpoints ===== */
@media (max-width: 960px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { display: none; }
    .shop-chips { display: flex; }
    .detail-layout { grid-template-columns: 1fr; gap: 20px; }

    .cart-layout, .checkout-layout, .profile-layout { grid-template-columns: 1fr; }
    .summary-card { position: static; }
    .order-row { grid-template-columns: 1fr 1fr; row-gap: 10px; }
    .order-row .arrow { justify-self: end; }
    .order-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv-list { grid-template-columns: 1fr; gap: 2px 0; }
    .kv-list .k { margin-top: 8px; }
}
@media (max-width: 720px) {
    .container { padding: 0 14px; }
    .grid-2 { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px; }
    .product-grid > .product-card,
    .product-grid > .product-card-v2 { max-width: none; }
    .product-card .name { font-size: 14px; }
    .product-card .price { font-size: 16px; }

    .site-header .row { gap: 8px; flex-wrap: wrap; }
    .site-header .search { order: 3; flex-basis: 100%; max-width: 100%; }
    .site-header nav { display: none; }
    .site-header nav.open {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; left: 12px; right: 12px; top: calc(var(--header-h) - 4px);
        background: var(--card); border: 1px solid var(--border);
        border-radius: 12px; padding: 10px; gap: 4px;
        box-shadow: var(--shadow-md); z-index: 60;
    }
    .site-header nav.open a, .site-header nav.open form { padding: 10px 12px; border-radius: 8px; }
    .site-header nav.open a:hover, .site-header nav.open form:hover { background: var(--bg); }
    .menu-toggle { display: inline-flex; }

    .shop-hero { padding: 32px 0 24px; }
    .shop-hero .hero-meta { flex-direction: column; align-items: stretch; }
    .shop-hero .search-big { max-width: 100%; }

    table.data th, table.data td { padding: 10px 8px; font-size: 14px; }
}
@media (max-width: 420px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 2px; }
    .form-actions .btn { width: 100%; }
}
@media (min-width: 721px) {
    .menu-toggle { display: none; }
}

/* Print niceties */
@media print {
    .site-header, .site-footer, .scroll-sentinel, .form-actions { display: none; }
    body { background: white; }
    .card { box-shadow: none; border-color: #ccc; }
}

/* ===== Page hero (light variant for non-shop pages) ===== */
.page-hero {
    background:
        radial-gradient(900px 280px at 90% -10%, rgba(209, 18, 25, 0.16), transparent 60%),
        radial-gradient(800px 240px at 0% 10%, rgba(2, 12, 39, 0.12), transparent 60%),
        linear-gradient(180deg, #ffffff, #f6f7fb);
    border-bottom: 1px solid var(--border);
    padding: 40px 0 28px;
}
.page-hero h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 6px; letter-spacing: -0.02em; }
.page-hero p { color: var(--muted); margin: 0; max-width: 640px; }
.page-hero .crumbs { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.page-hero .crumbs a { color: var(--muted); }
.page-hero .crumbs a:hover { color: var(--brand); }

/* ===== Cart page ===== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding: 28px 0 64px;
    align-items: start;
}
.cart-table-card { padding: 0; overflow: hidden; }
.cart-table-card table.data th, .cart-table-card table.data td { padding: 16px 18px; }
.cart-line { display: flex; align-items: center; gap: 12px; }
.cart-line .pimg {
    width: 56px; height: 56px; border-radius: 10px;
    background: linear-gradient(135deg, #f3f4f8, #e9ecf3);
    overflow: hidden; flex: 0 0 auto;
}
.cart-line .pimg img { width: 100%; height: 100%; object-fit: cover; }
.cart-line .pname { font-weight: 600; color: var(--text); }
.cart-line .pcat  { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.cart-line .pmeta { display: flex; flex-direction: column; }
.qty-inline { display: inline-flex; align-items: center; gap: 6px; }
.qty-inline input { width: 72px; text-align: center; }
.line-actions { display: flex; gap: 8px; align-items: center; }

.summary-card {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 20px;
}
.summary-card h2 { font-size: 16px; margin: 0 0 12px; }
.summary-card .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 14px;
}
.summary-card .row.muted { color: var(--muted); }
.summary-card .row.total {
    border-top: 1px dashed var(--border);
    margin-top: 6px; padding-top: 12px;
    font-weight: 800; font-size: 18px; color: var(--text);
}
.summary-card .form-actions { margin-top: 14px; flex-direction: column; align-items: stretch; }
.summary-card .form-actions .btn { width: 100%; }
.summary-card .trust {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 12px; line-height: 1.7;
}

/* ===== Checkout page ===== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding: 28px 0 64px;
    align-items: start;
}
.choice-list { display: grid; gap: 10px; margin-top: 6px; }
.choice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 12px; background: white; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.choice:hover { border-color: var(--border-strong); }
.choice input { margin-top: 4px; }
.choice.selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.12); background: #fff8fc; }
.choice .title { font-weight: 700; }
.choice .meta { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.choice .badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; margin-left: 6px; }
.section-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.section-card + .section-card { margin-top: 18px; }
.section-card h2 { font-size: 16px; margin: 0 0 12px; }
.section-card h2 .num {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--brand); color: white; font-size: 12px; font-weight: 800;
    margin-right: 8px; vertical-align: middle;
}

/* ===== Order history ===== */
.orders-list { display: grid; gap: 12px; padding: 28px 0 64px; }
.order-row {
    display: grid; grid-template-columns: 1.2fr 0.8fr 0.6fr auto; gap: 16px;
    align-items: center;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.order-row, .order-row:visited, .order-row:hover, .order-row:focus,
.order-row:active {
    text-decoration: none; color: inherit;
}
.order-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.order-row .onum { font-weight: 700; color: var(--text); }
.order-row .odate { font-size: 13px; color: var(--muted); }
.order-row .ototal { font-weight: 800; color: var(--brand); }
.order-row .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.order-row .arrow { color: var(--muted); font-weight: 700; }

/* ===== Order detail ===== */
.order-meta {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-top: 16px;
}
.order-meta .stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
}
.order-meta .stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.order-meta .stat .v { font-weight: 700; margin-top: 4px; word-break: break-word; }
.kv-list {
    display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px;
    color: var(--text); font-size: 14px;
}
.kv-list .k { color: var(--muted); }

/* ===== Address cards ===== */
.address-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: 18px;
}
.address-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.address-card.default { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.10); }
.address-card .name { font-weight: 700; }
.address-card .lines { color: var(--muted); font-size: 14px; line-height: 1.5; }
.address-card .actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }


/* =====================================================
   GLOBAL RESPONSIVE FIXES — applied across ALL pages
   Breakpoints: 1100, 900, 768, 640, 480, 360
   ===================================================== */

/* Utility: hide on small screens */
.hide-sm { display: inline-flex; }

/* Make tables responsive (wrap in .table-wrap on template side, or auto-wrap below) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 480px; }
.table-wrap th, .table-wrap td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
.table-wrap th { background: var(--bg); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.table-wrap tr:last-child td { border-bottom: none; }

/* Make any form layout responsive */
.form-grid { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.half { grid-column: span 1; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(209, 18, 25, 0.14);
}

/* Generic page wrapper */
.page { padding: 24px 0 8px; }
.page h1 { font-size: 26px; letter-spacing: -0.02em; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* Inline pill list */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Stacks */
.stack { display: flex; flex-direction: column; gap: 16px; }

/* =====================================================
   1100px — large laptop
   ===================================================== */
@media (max-width: 1100px) {
    .container { max-width: 100%; }
    .site-header .search { max-width: 420px; }
    .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
}

/* =====================================================
   900px — tablet landscape
   ===================================================== */
@media (max-width: 900px) {
    .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .site-header .user-name { display: none; }
    .user-chip { padding: 4px; }
    .user-logout-text { display: none; }
    .user-logout .ph-btn { padding: 8px; }
    /* Mobile: turn the logout pill into a pure icon circle so it
       stays compact next to the avatar. */
    .user-cluster { gap: 6px; }
    .btn-logout { padding: 0; width: 34px; height: 34px; justify-content: center; }
    .btn-logout-text { display: none; }
}

/* =====================================================
   768px — tablet portrait / large phone
   ===================================================== */
@media (max-width: 768px) {
    :root { --header-h: 60px; }
    .container { padding: 0 16px; }
    .topbar { font-size: 12px; padding: 6px 0; }
    .topbar-msg { display: block; }

    .site-header .search { order: 4; max-width: 100%; }
    .header-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
    }
    .site-header .brand { order: 1; }
    .header-actions { order: 2; margin-left: auto; }
    .menu-toggle { display: inline-flex; order: 3; }
    .site-header .search { flex-basis: 100%; }

    .menu-toggle { display: flex; }
    .hide-sm { display: none !important; }
    .mobile-drawer { display: block; }

    .page h1 { font-size: 22px; }
    .page { padding: 16px 0 8px; }
    .page-head { flex-direction: column; align-items: flex-start; }

    .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
    .btn { min-height: 42px; padding: 11px 16px; }

    .site-footer { padding: 40px 0 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =====================================================
   640px — large phone
   ===================================================== */
@media (max-width: 640px) {
    .container { padding: 0 14px; }
    .site-header .brand { font-size: 18px; }
    .site-header .brand-mark { width: auto; height: 34px; font-size: 16px; }

    .icon-btn { width: 38px; height: 38px; }
    .icon-btn svg { width: 18px; height: 18px; }
    .header-actions { gap: 4px; }
    .user-chip .avatar-sm { width: 32px; height: 32px; }

    .footer-grid { grid-template-columns: 1fr; gap: 22px; text-align: left; }
    .site-footer { margin-top: 48px; padding: 32px 0 20px; }
    .pay-row { gap: 4px; }

    h1 { font-size: 22px; }
    h2 { font-size: 18px; }

    .messages { padding: 0 4px; }
    .msg { font-size: 13px; padding: 10px 14px; }
}

/* =====================================================
   480px — small phone
   ===================================================== */
@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .topbar { font-size: 11px; }
    .header-row { gap: 8px; }
    .icon-btn { width: 36px; height: 36px; }
    .nav-pill { padding: 8px 12px; font-size: 14px; }

    .card { padding: 16px; }
    .site-main { padding-bottom: 0; }

    .table-wrap th, .table-wrap td { padding: 10px 10px; font-size: 13px; }

    .site-header .search input { padding: 10px 44px 10px 40px; font-size: 14px; }
    .site-header .search-ico { left: 12px; }
    .site-header .search-go { right: 4px; width: 30px; height: 30px; }
}

/* =====================================================
   360px — extra small
   ===================================================== */
@media (max-width: 360px) {
    .container { padding: 0 10px; }
    .site-header .brand { font-size: 16px; }
    .site-header .brand-mark { width: auto; height: 30px; font-size: 14px; }
    .icon-btn { width: 34px; height: 34px; }
    .header-actions { gap: 2px; }
    .footer-col h4 { font-size: 12px; }
    .footer-col a { font-size: 13px; }
    .page h1 { font-size: 20px; }
}

/* =====================================================
   Accessibility: reduce motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   Print
   ===================================================== */
@media print {
    .site-header, .site-footer, .topbar, .menu-toggle, .mobile-drawer { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* =====================================================
   BORDER PADDING — adds breathing room around all
   bordered surfaces (cards, chips, pills, table cells,
   inputs, pay chips, drawer links, etc.) using a soft
   inset ring + bumped padding.
   ===================================================== */

:root {
    --bp: 6px;     /* border-padding (outer ring) */
    --bp-inset: 4px;  /* inset ring distance */
}

/* Cards: more inner padding + subtle outer ring */
.card {
    padding: 24px;
    box-shadow:
        var(--shadow-sm),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
@media (min-width: 768px) {
    .card { padding: 28px; }
}

/* Inputs: more comfortable padding */
.field input, .field select, .field textarea {
    padding: 12px 14px;
}

/* Header search input: extra comfortable */
.site-header .search input { padding: 12px 50px 12px 44px; }

/* Pay chips: more padding for breathing room */
.pay-chip {
    padding: 6px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Pills, badges, chips: extra inner padding */
.pill { padding: 4px 12px; }

/* Table cells: more horizontal padding */
.table-wrap th, .table-wrap td { padding: 14px 16px; }

/* Drawer links: more vertical padding for touch */
.drawer-link { padding: 14px 14px; }

/* Nav pills: more padding */
.nav-pill { padding: 10px 16px; }

/* Buttons: extra comfortable tap target */
.btn { padding: 12px 18px; }
.btn-sm { padding: 8px 14px; }

/* Qty pill: more padding around + / - */
.qty-pill .qty-btn { width: 36px; height: 36px; }

/* Product card: more inner padding */
.product-card-v2 .body { padding: 16px 18px 18px; }

/* Filter sidebar: more padding */
.filter-sidebar { padding: 22px 22px; }
.filter-sidebar .cat-list a { padding: 10px 12px; }

/* Detail gallery thumbs: more padding */
.detail-gallery-v2 .thumb-btn { padding: 6px; }

/* Hero collages & search glass: more breathing room */
.search-glass { padding: 10px 14px; }
.pill-row .pill { padding: 8px 16px; }

/* Address cards / list items */
.address-card { padding: 18px 20px; }

/* Messages: more padding */
.msg { padding: 12px 18px; }

/* Universal border-padding ring on common bordered surfaces
   (opt-in via .bp class on a wrapper, or applied via :where) */
:where(.card, .field input, .field select, .field textarea,
       .pay-chip, .table-wrap, .drawer-link, .address-card,
       .section-card, .details-card) {
    position: relative;
}
:where(.card, .section-card, .details-card)::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* Responsive: tighten border padding on small screens */
@media (max-width: 640px) {
    :root { --bp: 4px; --bp-inset: 3px; }
    .card { padding: 18px; }
    .field input, .field select, .field textarea { padding: 11px 12px; }
    .site-header .search input { padding: 11px 46px 11px 40px; }
    .table-wrap th, .table-wrap td { padding: 12px 12px; }
    .drawer-link { padding: 12px 12px; }
    .product-card-v2 .body { padding: 14px 14px 16px; }
    .filter-sidebar { padding: 18px; }
    .msg { padding: 10px 14px; }
    .btn { padding: 11px 16px; }
}

@media (max-width: 480px) {
    .card { padding: 16px; }
    .table-wrap th, .table-wrap td { padding: 10px 10px; }
    .product-card-v2 .body { padding: 12px 12px 14px; }
    .qty-pill .qty-btn { width: 32px; height: 32px; }
    .nav-pill { padding: 8px 12px; }
}

/* =========================================================
   MODERN PAGES v2
   ========================================================= */

/* ---------- Page hero v2 ---------- */
.page-hero-v2 {
    position: relative; overflow: hidden; color: #fff;
    padding: 56px 0 64px;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(900px 400px at 90% 0%, rgba(255,255,255,0.12), transparent 55%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    isolation: isolate;
}
.page-hero-v2 .ph-blob {
    position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.55;
    pointer-events: none; z-index: -1;
}
.page-hero-v2 .ph-blob-1 { width: 360px; height: 360px; top: -120px; left: -80px;
    background: radial-gradient(circle, #ff5e8a 0%, transparent 70%);
    animation: floatBlob 14s ease-in-out infinite; }
.page-hero-v2 .ph-blob-2 { width: 420px; height: 420px; bottom: -160px; right: -100px;
    background: radial-gradient(circle, #ff9d4d 0%, transparent 70%);
    animation: floatBlob 18s ease-in-out infinite reverse; }
.page-hero-v2 .ph-inner { position: relative; z-index: 1; }
.page-hero-v2 .crumbs { color: rgba(255,255,255,0.85); font-size: 13px; margin-bottom: 16px;
    display: flex; gap: 8px; align-items: center; }
.page-hero-v2 .crumbs a { color: #fff; opacity: 0.9; text-decoration: none; }
.page-hero-v2 .crumbs a:hover { opacity: 1; text-decoration: underline; }
.page-hero-v2 .ph-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.page-hero-v2 .ph-field { display: flex; flex-direction: column; gap: 6px; }
.page-hero-v2 .ph-field-label {
    font-size: 11px; font-weight: 700;
    color: white; text-transform: uppercase;
    letter-spacing: 0.1em;
}
.page-hero-v2 h1 {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
    margin: 8px 0 8px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.page-hero-v2 h1 .ph-grad {
    background: linear-gradient(90deg, #fff 0%, #ffe9c2 60%, #ffd2a0 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero-v2 h1 .ph-title-ico {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.32);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    flex: 0 0 auto;
}
.page-hero-v2 h1 .ph-title-ico svg { width: 22px; height: 22px; display: block; }
.page-hero-v2 p { color: rgba(255,255,255,0.92); margin: 0; max-width: 56ch; font-size: 15px; }
.page-hero-v2 .ph-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.page-hero-v2 .ph-chip .dot { width: 8px; height: 8px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }
.page-hero-v2 .ph-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: 0;
}
.page-hero-v2 .ph-stat {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 160px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    transition: transform 0.25s ease, background 0.25s ease;
}
.page-hero-v2 .ph-stat:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.20);
}
.page-hero-v2 .ph-stat-ico {
    width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 100%);
    border: 1px solid rgba(255,255,255,0.32);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.page-hero-v2 .ph-stat-ico svg { width: 20px; height: 20px; display: block; }
.page-hero-v2 .ph-stat-body { display: flex; flex-direction: column; min-width: 0; }
.page-hero-v2 .ph-stat-n {
    font-size: 20px; font-weight: 800; color: #fff; line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.page-hero-v2 .ph-stat-l {
    font-size: 11px; color: rgba(255,255,255,0.85);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px;
    font-weight: 600;
}

.page-hero-cart { background: linear-gradient(135deg, #d11219 0%, #ff6b35 100%); }
.page-hero-checkout { background: linear-gradient(135deg, #6a11cb 0%, #d11219 100%); }
.page-hero-orders { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.page-hero-order-detail { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.page-hero-auth { background: linear-gradient(135deg, #0f172a 0%, #d11219 100%); }
.page-hero-address { background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); }
.page-hero-wishlist { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); }
.page-hero-profile { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }

/* ---------- Profile page (mirrors .orders-page layout) ---------- */
.profile-page { padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 20px; }

/* Tab strip (clean horizontal pills, matches the .container width) */
.profile-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
    align-self: stretch;
}
.profile-tab,
.profile-tab:visited,
.profile-tab:hover,
.profile-tab:focus,
.profile-tab:active {
    appearance: none; border: 0; background: transparent;
    padding: 10px 16px; border-radius: 12px;
    font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.profile-tab:hover { color: var(--text); background: rgba(2, 12, 39, 0.04); }
.profile-tab.active {
    color: #fff; background: var(--brand);
    box-shadow: 0 8px 20px rgba(209, 18, 25, 0.18);
}

/* Section card (reuses the visual language of .order-card) */
.profile-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 18px;
}
.profile-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.profile-section-head h2 {
    margin: 6px 0 4px; font-size: 22px; font-weight: 800;
    letter-spacing: -0.01em; color: var(--text);
}
.profile-section-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 56ch; }
.profile-eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand);
    background: rgba(209, 18, 25, 0.08);
    padding: 6px 10px; border-radius: 999px;
}
.profile-section-body { display: flex; flex-direction: column; gap: 18px; }

/* Key/value grid (matches .order-meta-grid for visual rhythm) */
.profile-meta-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px; padding: 14px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}
.pm-cell { display: grid; gap: 4px; min-width: 0; }
.pm-l {
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.pm-v { font-size: 15px; font-weight: 700; color: var(--text); word-break: break-word; }

/* Shortcut cards (reuses .order-card styling — just adds spacing) */
.profile-shortcuts { display: flex; flex-direction: column; gap: 16px; }
.shortcut-card { display: block; }
.shortcut-help { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.shortcut-addr {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(248, 250, 252, 0.7);
    border: 1px solid var(--border);
}

/* Form (details tab) */
.profile-form { display: flex; flex-direction: column; gap: 18px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-field { display: grid; gap: 6px; min-width: 0; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-field label {
    font-size: 12px; font-weight: 700;
    color: var(--text); letter-spacing: 0.04em;
    text-transform: uppercase;
}
.profile-field input,
.profile-field textarea,
.profile-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    font: inherit; color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.profile-field input:focus,
.profile-field textarea:focus,
.profile-field select:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.12);
}
.profile-msg.error { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.profile-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Read-only grid (when not editing) */
.profile-readonly {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.profile-readonly-item {
    display: grid; gap: 6px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.6));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
}

/* Responsive tweaks — same breakpoints the orders page uses */
@media (max-width: 980px) {
    .profile-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .profile-page { padding: 24px 16px 56px; }
    .profile-section-head h2 { font-size: 20px; }
    .profile-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .profile-form-grid { grid-template-columns: 1fr; }
    .profile-readonly { grid-template-columns: 1fr; }
    .profile-tabs { padding: 6px; gap: 6px; }
    .profile-tab { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 640px) {
    .profile-section { padding: 18px 18px; }
    .profile-section-head h2 { font-size: 18px; }
    .profile-meta-grid { grid-template-columns: 1fr; }
    .pm-v { font-size: 14px; }
}

.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Cart v2 ---------- */
.cart-page { padding: 32px 24px 64px; }
.cart-main { display: flex; flex-direction: column; gap: 24px; }
.cart-table-card { padding: 0; overflow: hidden; }
.cart-table-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%);
}
.cart-table-head h2 { margin: 0; font-size: 18px; }
/* =========================================================================
   Cart line — single source of truth across breakpoints.
   Markup:
     <li class="cart-line-v2">
       <div class="cart-line-top">    thumb | info (name/cat/price) | remove </div>
       <div class="cart-line-bottom"> qty-pill | subtotal                   </div>
     </li>
   Desktop: top row is a 3-col grid (96px / 1fr / 40px). Bottom row is a
            flex row that skips the thumb column with padding-left and
            uses justify-content: space-between so qty sits left and
            subtotal sits right.
   Mobile:  each inner row becomes a 2-col grid (thumb + remove column
            + info column). Thumb and remove span 2 rows; info is row 1,
            price is row 2. Bottom row's flex layout keeps qty + subtotal
            side by side with a dashed divider above.                       */

.cart-lines { list-style: none; margin: 0; padding: 8px 0; }

.cart-line-v2 {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    transition: background 0.18s ease;
}
.cart-line-v2:last-child { border-bottom: 0; }
.cart-line-v2:hover { background: var(--brand-soft); }

/* ----- Top row: thumb | info | remove ---------------------------------- */
.cart-line-top {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 40px;
    align-items: center;
    column-gap: 18px;
}
/* ----- Bottom row: [skip thumb] | qty-pill .... subtotal --------------- */
.cart-line-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    padding-left: calc(96px + 18px);  /* align with info column */
}

.cart-thumb {
    position: relative; display: block;
    width: 96px; height: 96px; border-radius: 12px;
    overflow: hidden; background: var(--bg);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.cart-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.cart-thumb:hover img { transform: scale(1.06); }
.cart-thumb .qty-badge {
    position: absolute; top: -8px; right: -8px;
    min-width: 28px; height: 28px; padding: 0 8px;
    border-radius: 999px; background: var(--brand); color: #fff;
    font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(209, 18, 25, 0.35);
    pointer-events: none;
}

.cart-info {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.cart-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700; color: var(--text); text-decoration: none;
    font-size: 15px; line-height: 1.35;
    overflow: hidden; word-break: break-word;
}
.cart-name:hover { color: var(--brand); }
.cart-cat {
    color: var(--muted); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
    display: inline-flex; align-items: center; gap: 6px;
}
.cart-cat::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--border);
}

/* Colour variant label + swatch on the cart line. Mirrors the
   wishlist pattern but uses the cart's smaller typography scale. */
.cart-color {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 12px;
    margin-top: 2px;
}
.cart-color-swatch {
    width: 14px; height: 14px; border-radius: 4px;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
    display: inline-block; flex-shrink: 0;
}
.cart-color-name {
    color: var(--text); font-weight: 500;
    letter-spacing: 0.01em;
}

.cart-line-price {
    font-weight: 700; color: var(--text); font-size: 14.5px;
    text-align: left; white-space: nowrap;
    margin-top: 4px;
    letter-spacing: -0.01em;
}

.cart-subtotal {
    display: flex; flex-direction: column;
    gap: 2px;
    text-align: right; align-items: flex-end;
}
.cs-label {
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600;
}
.cs-val {
    font-size: 16px; font-weight: 800; color: var(--brand);
    white-space: nowrap;
}

.cart-remove-form { display: inline-flex; }
.cart-remove {
    width: 36px; height: 36px; border-radius: 10px;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    justify-self: end;
}
.cart-remove:hover {
    background: #fee2e2; border-color: #fecaca; color: var(--danger);
    transform: rotate(8deg);
}

/* Quantity stepper pill */
.cart-line-v2 .qty-pill {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 4px; gap: 4px;
    display: inline-flex; align-items: center;
    justify-content: space-between;
    width: fit-content;
}
.cart-line-v2 .qty-pill .qty-input {
    width: 56px; height: 32px; text-align: center;
    border: 0; background: transparent; font-weight: 700; font-size: 14px;
    -moz-appearance: textfield; appearance: textfield;
}
.cart-line-v2 .qty-pill .qty-input::-webkit-outer-spin-button,
.cart-line-v2 .qty-pill .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.cart-line-v2 .qty-pill .qty-btn {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--card); border: 1px solid var(--border);
    font-size: 16px; font-weight: 700; cursor: pointer; color: var(--text);
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-line-v2 .qty-pill .qty-btn:hover {
    background: var(--brand); color: #fff; border-color: var(--brand);
}

/* ---------- Summary card v2 ---------- */
.summary-card-v2 {
    position: sticky; top: calc(var(--header-h, 72px) + 16px);
    border-radius: 18px; padding: 0; overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.summary-head {
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.summary-head h2 { margin: 0; font-size: 17px; color: #fff; }
.summary-head .badge-soft {
    background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.summary-rows { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }

/* Compact per-item list inside the Order Summary card. Sits between the
   gradient head and the totals rows. Each line shows thumb + name + qty/
   unit price meta + line total. The list is scroll-capped so a 30-item
   cart doesn't push the totals off-screen. */
.summary-lines {
    list-style: none; margin: 0; padding: 14px 22px 6px;
    display: flex; flex-direction: column; gap: 10px;
    max-height: 260px; overflow-y: auto;
    border-bottom: 1px dashed var(--border);
}
.summary-lines::-webkit-scrollbar { width: 6px; }
.summary-lines::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.sline {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px; align-items: center;
}
.sline-thumb {
    width: 40px; height: 40px; border-radius: 9px; overflow: hidden;
    background: var(--bg); display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); flex-shrink: 0;
}
.sline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sline-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sline-name {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sline-meta { font-size: 11.5px; color: var(--muted); }
.sline-price {
    font-size: 13px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.srow { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.srow-l { color: var(--text); }
.srow-l em { font-style: normal; color: var(--muted); margin-left: 4px; font-weight: 500; }
.srow-r { font-weight: 700; color: var(--text); }
.srow-r.muted { color: var(--muted); font-weight: 500; }
.summary-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px; border-top: 1px dashed var(--border);
    background: var(--brand-soft);
}
.summary-total span:first-child { font-weight: 700; color: var(--text); }
.total-amount {
    font-size: 24px; font-weight: 800; color: var(--brand);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.form-actions-col { padding: 18px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.trust-strip {
    padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid var(--border); margin-top: 16px;
}
.trust-item {
    display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted);
}
.trust-ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--brand-soft); display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}

/* ---------- Checkout v2 ---------- */
.checkout-page { padding: 32px 24px 64px; }
.steps {
    display: flex; gap: 0; margin-bottom: 28px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm);
}
.step {
    flex: 1; display: flex; align-items: center; gap: 12px;
    padding: 6px 14px; position: relative;
}
.step:not(:last-child)::after {
    content: ""; flex: 1; height: 2px; margin: 0 8px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--border) 100%);
    border-radius: 2px;
}
.step-num {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
    font-weight: 800; font-size: 14px;
    transition: all 0.25s ease;
}
.step.is-done .step-num { background: var(--brand); color: #fff; }
.step.is-active .step-num {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; box-shadow: 0 8px 18px rgba(209, 18, 25, 0.4);
    transform: scale(1.08);
}
.step-text { display: flex; flex-direction: column; }
.step-text strong { font-size: 13px; color: var(--text); }
.step-text span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.checkout-section {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; padding: 26px; box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.checkout-section h2 {
    margin: 0 0 6px; font-size: 20px; display: flex; align-items: center; gap: 10px;
}
.checkout-section h2 .section-num {
    width: 30px; height: 30px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; box-shadow: 0 6px 14px rgba(209, 18, 25, 0.3);
}
.checkout-section .sec-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border: 2px solid var(--border); border-radius: 14px;
    cursor: pointer; transition: all 0.2s ease; background: var(--card);
    position: relative;
}
.choice-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card .choice-ico {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand); font-size: 22px;
    transition: all 0.25s ease;
}
.choice-card input:checked ~ .choice-ico {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; box-shadow: 0 8px 20px rgba(209, 18, 25, 0.35);
}
.choice-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice-card .choice-text strong { display: block; color: var(--text); font-size: 15px; }
.choice-card .choice-text span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.addr-charge-note { color: var(--accent, #2563eb) !important; font-weight: 600; margin-top: 6px !important; }
.choice-card .choice-check {
    margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; color: transparent; font-weight: 800; font-size: 14px;
}
.choice-card:has(input:checked) .choice-check {
    background: var(--brand); border-color: var(--brand); color: #fff;
}

/* Default-address indicator — "Default" pill badge in the top-right corner
   with a small filled dot beneath it. Padding-right leaves room for the badge. */
.address-pick .choice-card.is-default-addr .choice-check { display: none; }
.address-pick .choice-card.is-default-addr .addr-check { display: none; }
.addr-badge {
    position: absolute; top: 12px; right: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(209, 18, 25, 0.3);
    pointer-events: none; z-index: 2;
}
.default-dot {
    position: absolute; top: 38px; right: 18px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
    pointer-events: none;
}
.address-pick .choice-card.is-default-addr { padding-right: 90px; }

/* Selected non-default address — checkmark circle pinned to the top-right
   corner. Hidden by default; revealed when the radio becomes checked. */
.addr-check {
    position: absolute; top: 12px; right: 12px;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card);
    color: transparent; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 2;
    transition: all 0.2s ease;
}
.address-pick .choice-card.is-pickable-addr:has(input:checked) .addr-check {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-color: var(--brand); color: #fff;
    box-shadow: 0 6px 14px rgba(209, 18, 25, 0.35);
    transform: scale(1.05);
}
/* Suppress the in-flow choice-check on non-default address cards — the
   corner .addr-check carries the selection mark instead. */
.address-pick .choice-card.is-pickable-addr .choice-check { display: none; }
.address-pick .choice-card.is-pickable-addr { padding-right: 50px; }

.bkash-config {
    margin-top: 16px; padding: 18px;
    background: linear-gradient(135deg, #fff4f8 0%, #fce7f3 100%);
    border: 1px solid #fbcfe8; border-radius: 14px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.bkash-logo {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, #d11219 0%, #9a0d14 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; box-shadow: 0 8px 20px rgba(209, 18, 25, 0.3);
}
.bkash-info { flex: 1; min-width: 200px; }
.bkash-info strong { display: block; color: var(--text); font-size: 15px; }
.bkash-info span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.bkash-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.bkash-pill {
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.bkash-pill.ok { background: #d1fae5; color: #065f46; }
.bkash-pill.warn { background: #fef3c7; color: #92400e; }
.bkash-pill.err { background: #fee2e2; color: #991b1b; }

.address-pick {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px; margin-top: 14px;
}
.address-pick .choice-card { padding: 14px; }

.form-actions-col .form-errors { color: var(--danger); font-size: 13px; margin: 0 0 6px; }

/* ---------- Orders v2 ---------- */
.orders-page { padding: 32px 24px 64px; }
.orders-list { display: flex; flex-direction: column; gap: 16px; }
.order-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; padding: 22px 24px;
    box-shadow: var(--shadow-sm); transition: all 0.25s ease;
    position: relative; overflow: hidden;
    text-decoration: none; color: inherit;
}
.order-card,
.order-card:visited,
.order-card:hover,
.order-card:focus,
.order-card:active {
    text-decoration: none !important; color: inherit;
}
.order-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    opacity: 0; transition: opacity 0.25s ease;
}
.order-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.order-card:hover::before { opacity: 1; }
.order-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    margin-bottom: 14px;
}
.order-id-block { min-width: 0; }
.order-id {
    font-size: 17px; font-weight: 800; color: var(--text);
    text-decoration: none; letter-spacing: -0.01em;
}
.order-id:hover { color: var(--brand); }
.order-date { color: var(--muted); font-size: 12px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

.status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-method {
    background: #eef0ff; color: #5b5bd6;
}
.status-method .dot { background: #5b5bd6; }
.admin-order-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px 12px;
    align-items: start;
    width: min(100%, 420px);
    justify-self: end;
}
.admin-order-pills .status-pill-row {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.admin-order-pills .status-pill-row-label {
    font-size: 10px; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
}
.admin-order-pills .status-pill {
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .order-card-top {
        grid-template-columns: 1fr;
    }
    .admin-order-pills {
        width: 100%;
        justify-self: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.status-pending { background: #fef3c7; color: #92400e; }
.status-pending .dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.2); }
.status-paid, .status-confirmed { background: #dbeafe; color: #1e40af; }
.status-paid .dot, .status-confirmed .dot { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.2); }
.status-processing { background: #e0f2fe; color: #075985; }
.status-processing .dot { background: #0ea5e9; box-shadow: 0 0 0 4px rgba(14,165,233,0.2); }
.status-shipped { background: #ede9fe; color: #020c27; }
.status-shipped .dot { background: #8b5cf6; box-shadow: 0 0 0 4px rgba(2, 12, 39, 0.2); }
.status-delivered, .status-completed { background: #d1fae5; color: #065f46; }
.status-delivered .dot, .status-completed .dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.2); }
.status-cancelled, .status-failed { background: #fee2e2; color: #991b1b; }
.status-cancelled .dot, .status-failed .dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }

/* Payment-status badges — applied via .pay-<value> on .status-pill.
   The .dot inside gets a colored glow ring, same recipe as the Status set. */
.pay-unpaid { background: #fef3c7; color: #92400e; }
.pay-unpaid .dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.2); }
.pay-paid { background: #d1fae5; color: #065f46; }
.pay-paid .dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.2); }
.pay-failed { background: #fee2e2; color: #991b1b; }
.pay-failed .dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
.pay-refunded { background: #f3e8ff; color: #020c27; }
.pay-refunded .dot { background: #8b5cf6; box-shadow: 0 0 0 4px rgba(2, 12, 39, 0.2); }

.order-meta-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    padding: 14px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}
.om-cell { display: flex; flex-direction: column; gap: 4px; }
.om-cell .om-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.om-cell .om-v { font-size: 14px; font-weight: 700; color: var(--text); }
.om-cell .om-v.brand { color: var(--brand); }

.order-card-bottom {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; flex-wrap: wrap; gap: 12px;
}
.order-items-preview { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.order-items-preview .mini-imgs { display: flex; }
.order-items-preview .mini-imgs img {
    width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
    border: 2px solid var(--card); margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.order-items-preview .mini-imgs img:first-child { margin-left: 0; }
.order-items-preview .mini-more {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; margin-left: -10px;
    border: 2px solid var(--card);
}

/* ---------- Order detail ---------- */
.order-detail-page { padding: 32px 24px 64px; }
.order-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: flex-start; }
.order-detail-main { display: flex; flex-direction: column; gap: 22px; }

/* Amazon / Alibaba-style order stepper.
   Card is white with a thin top accent, the rail is a 2 px hairline,
   done steps get a check-bubble in brand blue, the active step pulses,
   and each step shows a label + sub-text (date / "now") stack. */
.status-tracker {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px 26px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04);
    overflow: hidden;
}
.status-tracker::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1677ff 0%, #4096ff 50%, #69b1ff 100%);
    opacity: 0.9;
}
.status-tracker-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin: 4px 0 22px;
}
.status-tracker h2 {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -0.005em;
}
.status-tracker h2 .st-ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: #e6f0ff; color: #1677ff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.status-tracker h2 .st-ico svg { width: 16px; height: 16px; display: block; }
.status-tracker .st-ref {
    font-size: 12px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.status-tracker .st-ref strong { color: var(--text); font-weight: 700; }

.tracker {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: relative;
}
.tracker::before {
    /* The thin grey rail behind the bubbles. */
    content: "";
    position: absolute; top: 16px; left: 16px; right: 16px; height: 2px;
    background: #e5e7eb;
    z-index: 0;
}
.tracker-fill {
    /* The blue progress rail sitting on top of the grey rail. */
    position: absolute; top: 16px; left: 16px; height: 2px; width: 0;
    background: #1677ff;
    z-index: 1;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Terminal-state treatments (cancelled / refunded orders): hide progress,
   dim steps, and tint the current-step dot red. JS adds .tracker-terminal. */
.tracker.tracker-terminal .tracker-fill { display: none; }
.tracker.tracker-terminal .tstep { opacity: 0.55; }
.tracker.tracker-terminal .tstep.is-current .tstep-dot { border-color: #f43f5e; }
.tstep {
    position: relative; z-index: 2;
    text-align: center; flex: 1 1 0; min-width: 0;
    padding: 0 6px;
}
.tstep-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e7eb;
    display: inline-flex; align-items: center; justify-content: center;
    color: #9aa0a6; font-weight: 700; font-size: 13px;
    transition: all 0.3s ease;
    margin: 0 auto 10px;
    position: relative;
}
.tstep.is-done .tstep-dot {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
}
.tstep.is-current .tstep-dot {
    background: #fff;
    border-color: #1677ff;
    color: #1677ff;
    box-shadow: 0 0 0 4px rgba(22,119,255,0.18);
    animation: trackerCurrentPulse 1.8s ease-in-out infinite;
}
.tstep.is-done .tstep-dot > .tstep-num,
.tstep.is-current .tstep-dot > .tstep-num { display: none; }
.tstep.is-done .tstep-dot::before {
    content: "";
    width: 14px; height: 14px; display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.tstep.is-current .tstep-dot::before {
    content: "";
    width: 10px; height: 10px; display: block;
    background: #1677ff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(22,119,255,0.18);
}
.tstep-l {
    font-size: 13px; color: var(--muted);
    font-weight: 600;
    line-height: 1.25;
    transition: color 0.25s ease, font-weight 0.25s ease;
    word-break: break-word;
}
.tstep.is-done .tstep-l { color: var(--text); font-weight: 700; }
.tstep.is-current .tstep-l { color: #1677ff; font-weight: 700; }
.tstep-meta {
    font-size: 11px; color: var(--muted);
    margin-top: 4px;
    line-height: 1.3;
    min-height: 14px;
    font-weight: 500;
}
.tstep.is-current .tstep-meta { color: var(--brand); font-weight: 700; }
.ts-current { color: var(--brand); font-weight: 700; }

@keyframes trackerCurrentPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.20); }
    50%      { box-shadow: 0 0 0 8px rgba(209, 18, 25, 0.10); }
}

.order-info-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm);
}
.order-info-card h2 { margin: 0 0 16px; font-size: 17px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-grid .ig-cell { display: flex; flex-direction: column; gap: 4px; }
.ig-cell .ig-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ig-cell .ig-v { font-size: 14px; font-weight: 700; color: var(--text); }
.ig-cell.full { grid-column: 1 / -1; }

.items-table { width: 100%; border-collapse: collapse; }
.items-table thead th {
    background: var(--brand-soft); color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 12px 14px; text-align: left; font-weight: 700;
}
.items-table thead th .th-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 6px;
    background: var(--brand); color: #fff;
    border-radius: 6px; vertical-align: -5px;
}
.items-table thead th .th-ico svg { display: block; }
.items-table tbody td {
    padding: 14px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.items-table tbody tr:last-child td { border-bottom: 0; }
.items-table .it-name { display: flex; align-items: center; gap: 12px; }
.items-table .it-name img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.items-table .it-name a { font-weight: 700; color: var(--text); text-decoration: none; }
.items-table .it-name a:hover { color: var(--brand); }
/* Empty-product-image placeholder — a soft grey square with a generic
   product-icon SVG so the row still has visual weight. */
.items-table .it-img-empty {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: #f1f3f5;
    border: 1px dashed #d8dadd;
    display: flex; align-items: center; justify-content: center;
    color: #9aa0a6;
    flex: 0 0 auto;
}
.items-table .it-img-empty svg { width: 22px; height: 22px; display: block; }

/* Visually hidden but still announced by screen-readers; keeps column count intact
   when we drop a heading row label. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------- Auth stage (single canonical block) ---------- */
@keyframes authFloatA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(20px, -30px, 0) scale(1.05); }
}
@keyframes authFloatB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-25px, 25px, 0) scale(0.96); }
}
@keyframes authFloatC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(15px, 15px, 0) scale(1.08); }
}
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     }
}
@keyframes authPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.12); }
    50%      { box-shadow: 0 0 0 7px rgba(209, 18, 25, 0.06); }
}

.auth-stage {
    position: relative;
    min-height: calc(100vh - 200px);
    display: flex; align-items: center; justify-content: center;
    padding: 56px 24px 72px;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #fafbfd 0%, #ffffff 60%, #fbf6f6 100%);
}
.auth-stage::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(19, 26, 44, 0.05) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    z-index: -1;
}
.auth-orb {
    position: absolute; border-radius: 50%; filter: blur(70px);
    opacity: 0.55; z-index: -1; pointer-events: none;
}
.auth-orb--a {
    width: 460px; height: 460px;
    top: -140px; left: -140px;
    background: radial-gradient(circle, rgba(209, 18, 25, 0.45) 0%, transparent 70%);
    animation: authFloatA 18s ease-in-out infinite;
}
.auth-orb--b {
    width: 420px; height: 420px;
    bottom: -160px; right: -120px;
    background: radial-gradient(circle, rgba(255, 157, 77, 0.45) 0%, transparent 70%);
    animation: authFloatB 22s ease-in-out infinite;
}
.auth-orb--c {
    width: 320px; height: 320px;
    top: 35%; right: 14%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.30) 0%, transparent 70%);
    animation: authFloatC 26s ease-in-out infinite;
}

/* The card is the only one of its kind — wider, deeper, more expressive. */
.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--card);
    border: 1px solid rgba(227, 230, 238, 0.9);
    border-radius: 28px;
    padding: 48px 52px 36px;
    display: flex; flex-direction: column;
    animation: authCardIn 0.6s cubic-bezier(.2,.8,.2,1) both;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 32px 80px -32px rgba(15, 23, 42, 0.28),
        0 16px 40px -20px rgba(209, 18, 25, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.04);
}
.auth-card__brand { margin-bottom: 6px; }
.auth-card__hero  { margin: 14px 0 26px; }

/* Brand chip + link */
.auth-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 800; color: var(--text);
    text-decoration: none; letter-spacing: -0.01em;
    transition: opacity 0.2s ease;
}
.auth-brand:hover { opacity: 0.8; }
.auth-brand .brand-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow:
        0 6px 14px -4px rgba(209, 18, 25, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

/* Eyebrow chip with pulsing dot */
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px;
    background: var(--brand-tint, #fef2f3);
    color: var(--brand);
    border: 1px solid rgba(209, 18, 25, 0.15);
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    margin-bottom: 14px;
}
.auth-eyebrow__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand);
    animation: authPulse 2.2s ease-in-out infinite;
}

/* Title + subtitle */
.auth-title {
    margin: 0 0 8px;
    font-size: 32px; line-height: 1.12; font-weight: 800;
    letter-spacing: -0.028em; color: var(--text);
}
.auth-title__grad {
    background: linear-gradient(135deg, var(--brand) 0%, #ff7a18 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-sub {
    margin: 0;
    color: var(--muted); font-size: 14.5px; line-height: 1.55;
    max-width: 46ch;
}

/* Form layout */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; }
.auth-form button[type="submit"] { margin-top: 6px; }

.field-label-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.field-link {
    font-size: 12.5px; font-weight: 600; color: var(--brand);
    text-decoration: none; transition: opacity 0.2s ease;
}
.field-link:hover { opacity: 0.75; text-decoration: underline; }
.field-hint {
    color: var(--muted); font-size: 12px; margin-top: 2px;
    display: block; line-height: 1.45;
}
.field-error {
    color: var(--danger); font-size: 12px; margin-top: 2px;
    display: block; font-weight: 600;
}

/* Input shell — single source of truth for all auth inputs */
.input-shell {
    position: relative; display: flex; align-items: center;
    border: 1px solid var(--border);
    background: #fcfcfd;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input-shell:hover { border-color: var(--border-strong, #c9cfdb); }
.input-shell:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.12);
    background: #fff;
}
.input-shell__icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px 0 12px; color: var(--muted);
    flex-shrink: 0; transition: color 0.2s ease;
}
.input-shell:focus-within .input-shell__icon { color: var(--brand); }
.input-shell input,
.input-shell select,
.input-shell textarea {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; outline: none !important;
    padding: 13px 12px 13px 10px !important;
    flex: 1; min-width: 0; font-size: 14.5px;
}
.input-shell__toggle {
    border: 0; background: transparent; cursor: pointer;
    padding: 8px 12px 8px 4px; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s ease;
}
.input-shell__toggle:hover { color: var(--brand); }
.input-shell__toggle .ico-eye-off { display: none; }
.input-shell__toggle.is-on .ico-eye     { display: none; }
.input-shell__toggle.is-on .ico-eye-off { display: inline-block; }

/* Checkbox */
.auth-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: -2px 0 4px;
}
.checkbox {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font-size: 13px; color: var(--muted); font-weight: 500;
}
.checkbox input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 18px; height: 18px;
}
.checkbox__box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--border-strong, #c9cfdb);
    border-radius: 5px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.checkbox__box::after {
    content: ""; width: 10px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(0, -1px) scale(0);
    transition: transform 0.15s ease;
}
.checkbox input:checked + .checkbox__box {
    background: var(--brand); border-color: var(--brand);
}
.checkbox input:checked + .checkbox__box::after {
    transform: rotate(-45deg) translate(0, -1px) scale(1);
}
.checkbox input:focus-visible + .checkbox__box {
    box-shadow: 0 0 0 4px rgba(209, 18, 25, 0.15);
}

/* Submit button — refined brand gradient with motion */
.auth-submit {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 15px 22px;
    border-radius: 12px;
    font-weight: 700; letter-spacing: 0.01em;
    box-shadow:
        0 10px 22px -10px rgba(209, 18, 25, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.20) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-submit:hover  { transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit svg    { transition: transform 0.2s ease; }
.auth-submit:hover svg { transform: translateX(2px); }

.auth-fineprint {
    margin: 12px 2px 0;
    font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5;
}
.auth-fineprint a { color: var(--muted); text-decoration: underline; }
.auth-fineprint a:hover { color: var(--brand); }

/* Alert, divider, footer */
.auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; padding: 10px 14px;
    font-size: 13px; line-height: 1.5;
}
.auth-alert--error {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.18);
}
.auth-alert--error svg { flex-shrink: 0; margin-top: 1px; }

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0 14px;
    color: var(--muted); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}

.auth-foot {
    margin: 22px 0 0; padding-top: 18px;
    border-top: 1px solid var(--border);
    text-align: center; color: var(--muted); font-size: 13.5px;
}
.auth-foot a {
    color: var(--brand); font-weight: 700; text-decoration: none;
    transition: opacity 0.2s ease;
}
.auth-foot a:hover { opacity: 0.8; text-decoration: underline; }

/* Multi-column field grid for signup */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid .field { gap: 6px; }
.form-grid .field.full { grid-column: 1 / -1; }

/* ---------- Password reset tweaks ---------- */
.auth-card--centered { max-width: 540px; }
.auth-card__hero--centered { text-align: center; }
.auth-card__hero--centered .auth-eyebrow { margin-inline: auto; }
.auth-card__hero--centered .auth-sub { margin-inline: auto; }

.auth-emoji {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; line-height: 1;
    margin: 4px auto 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-soft, #fef2f3) 0%, #fff 100%);
    border: 1px solid rgba(209, 18, 25, 0.12);
    box-shadow: 0 8px 18px -10px rgba(209, 18, 25, 0.35);
}

.auth-checklist {
    list-style: none; padding: 0; margin: 0 0 6px;
    display: flex; flex-direction: column; gap: 12px;
}
.auth-checklist li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.auth-checklist li:hover { border-color: rgba(209, 18, 25, 0.25); background: #fff; }
.auth-checklist li > div { display: flex; flex-direction: column; gap: 2px; }
.auth-checklist li strong { font-size: 13.5px; color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
.auth-checklist li span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.auth-checklist__ico {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(209, 18, 25, 0.4);
}

.auth-foot--split {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.auth-foot--split .btn-ghost { flex: 1 1 220px; }

/* ---------- Password strength meter ---------- */
.pw-strength {
    margin-top: 4px;
    display: flex; flex-direction: column; gap: 6px;
    animation: pwFadeIn 0.18s ease-out both;
}
.pw-strength[hidden] { display: none; }
@keyframes pwFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pw-strength__bars {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    height: 6px;
}
.pw-strength__bars > span {
    background: var(--border);
    border-radius: 999px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pw-strength__bars > span.is-on { transform: scaleY(1.4); }
.pw-strength[data-score="1"] .pw-strength__bars > span.is-on { background: #ef4444; }
.pw-strength[data-score="2"] .pw-strength__bars > span.is-on { background: #f97316; }
.pw-strength[data-score="3"] .pw-strength__bars > span.is-on { background: #eab308; }
.pw-strength[data-score="4"] .pw-strength__bars > span.is-on { background: #22c55e; }
.pw-strength[data-score="5"] .pw-strength__bars > span.is-on { background: #10b981; }

.pw-strength__meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 600;
}
.pw-strength__label {
    color: var(--muted);
    transition: color 0.2s ease;
}
.pw-strength__score {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pw-strength[data-score="1"] .pw-strength__label { color: #ef4444; }
.pw-strength[data-score="2"] .pw-strength__label { color: #f97316; }
.pw-strength[data-score="3"] .pw-strength__label { color: #eab308; }
.pw-strength[data-score="4"] .pw-strength__label { color: #16a34a; }
.pw-strength[data-score="5"] .pw-strength__label { color: #059669; }

/* ---------- Password rules checklist ---------- */
.pw-rules {
    list-style: none; padding: 0; margin: 8px 0 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px;
}
.pw-rules li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--muted);
    line-height: 1.4;
    transition: color 0.2s ease;
}
.pw-rule__dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
    position: relative;
}
.pw-rule__dot::after {
    content: "";
    width: 5px; height: 2.5px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) scale(0);
    transition: transform 0.15s ease;
    margin-top: -1px;
}
.pw-rules li.is-met { color: var(--text); }
.pw-rules li.is-met .pw-rule__dot {
    background: #16a34a;
    transform: scale(1.05);
}
.pw-rules li.is-met .pw-rule__dot::after {
    transform: rotate(-45deg) scale(1);
}

/* Match state on the confirm field */
.input-shell.is-match {
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.input-shell.is-match .input-shell__icon { color: #16a34a; }

@media (max-width: 720px) {
    .auth-stage { padding: 32px 16px 56px; }
    .auth-card  { max-width: 100%; padding: 36px 28px 28px; border-radius: 22px; }
    .auth-title { font-size: 26px; }
    .auth-orb--c { display: none; }
}
@media (max-width: 520px) {
    .form-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 32px 22px 24px; border-radius: 18px; }
    .pw-rules { grid-template-columns: 1fr; }
}

/* ---------- Address v2 ---------- */
.address-page { padding: 32px 24px 64px; }
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.address-card-v2 {
    position: relative; background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; padding: 22px;
    box-shadow: var(--shadow-sm); transition: all 0.25s ease;
    overflow: hidden;
}
.address-card-v2::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    opacity: 0; transition: opacity 0.25s ease;
}
.address-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.address-card-v2:hover::before { opacity: 1; }
.address-card-v2.is-default { border-color: var(--brand); background: linear-gradient(135deg, var(--card) 0%, var(--brand-soft) 100%); }
.address-card-v2.is-default::before { opacity: 1; }
.addr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.addr-name { font-size: 16px; font-weight: 800; color: var(--text); }
.addr-badge {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px;
    border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(209, 18, 25, 0.3);
}
.addr-line { color: var(--muted); font-size: 13px; line-height: 1.55; margin-bottom: 4px; }
.addr-line strong { color: var(--text); font-weight: 600; }
.addr-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.addr-actions .btn-sm { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; }

.page-head-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 24px; flex-wrap: wrap; gap: 12px;
}
.page-head-row h1 { margin: 0; }
.page-head-row .head-sub { color: var(--muted); margin-top: 4px; font-size: 14px; }

.address-form-page { padding: 32px 24px 64px; }

/* ---------- Address combobox (region / city / upazila) ---------- */
/* The address form replaces three long <select> dropdowns with typeable
   search inputs. Each field is a wrapper around an <input>; a caret sits
   flush right, an absolutely-positioned <ul> floats the suggestions below.
   The suggestions are server-filtered via /accounts/api/places/. */
.addr-search-wrap {
    position: relative;
}
.addr-search-wrap .addr-search {
    width: 100%;
    padding-right: 32px;       /* leave room for the caret */
}
.addr-search-wrap .addr-search:disabled {
    background: #f8f9fb;
    color: var(--muted);
    cursor: not-allowed;
}
.addr-search-caret {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 12px;
    transition: transform 0.2s ease;
}
.addr-search-wrap:focus-within .addr-search-caret { transform: translateY(-50%) rotate(180deg); }

.addr-suggestions {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    z-index: 30;
    margin: 0; padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    max-height: 260px;
    overflow-y: auto;
}
.addr-suggestions[hidden] { display: none; }
.addr-suggestions li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.addr-suggestions li:hover,
.addr-suggestions li.is-active {
    background: var(--brand-soft);
}
.addr-suggestions .addr-sg-name {
    font-weight: 600; color: var(--text); font-size: 14px;
}
.addr-suggestions .addr-sg-extra {
    color: var(--muted); font-size: 12px; font-weight: 500;
}

/* Inline status row — pills / hints under the combobox. */
.addr-status {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}
.addr-status[data-kind="warn"] { color: var(--brand-dark); }
.addr-status[data-kind="hint"] { color: var(--muted); }
.addr-status[data-kind="ok"]   { color: #065f46; }

.country-locked {
    background: var(--brand-soft) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
    border-style: dashed !important;
}
.profile-form-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm);
}
.profile-form-card h2 { margin: 0 0 6px; font-size: 20px; }
.profile-form-card .form-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.checkbox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-radius: 12px; background: var(--brand-soft);
    cursor: pointer; margin-top: 8px;
}
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--brand); }
.checkbox-row strong { font-size: 14px; }
.checkbox-row span { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* ---------- Responsive for new pages ---------- */
@media (max-width: 1024px) {
    .order-detail-layout { grid-template-columns: 1fr; }
    .order-detail-layout .summary-card-v2 { position: static; }
    /* Order-detail hero: shrink stats so they fit beside the title. */
    .page-hero-v2 .ph-stats { gap: 10px; }
    .page-hero-v2 .ph-stat { padding: 8px 12px; }
}
@media (max-width: 768px) {
    .page-hero-v2 { padding: 40px 0 48px; }
    /* Cart page: collapse to single column so the Order summary card
       drops below the items table instead of squeezing beside it. */
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 0 48px;
    }
    .cart-layout > .cart-main { order: 1; }
    .cart-layout > .summary-card-v2 { order: 2; }

    /* Cart row on mobile — collapse to a vertical flex card.
       Top row: [thumb] [info (name + cat + price)]            [× remove]
       Bottom row: ───── divider ───── [qty] ............ [subtotal]
       The remove button is anchored to the top-right of the top row.
    */
    .cart-line-v2 {
        padding: 14px 16px;
        border-radius: 14px;
    }
    .cart-line-top {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) 36px;
        grid-template-rows: auto auto;
        align-items: flex-start;
        column-gap: 12px;
    }
    .cart-line-top .cart-thumb {
        width: 72px; height: 72px;
        grid-row: 1 / span 2;  /* thumb spans name + price rows */
    }
    .cart-line-top .cart-info {
        grid-column: 2; grid-row: 1;
        align-self: end;
    }
    .cart-line-top .cart-line-price {
        grid-column: 2; grid-row: 2;
        font-size: 13px;
        color: var(--muted);
        font-weight: 600;
        margin-top: 4px;
    }
    .cart-line-top .cart-line-price::before {
        content: "Price: ";
        font-weight: 500;
        color: var(--muted);
    }
    .cart-line-top .cart-remove-form {
        grid-column: 3; grid-row: 1 / span 2;
        justify-self: end;
        align-self: start;
    }
    .cart-line-bottom {
        padding-left: 0;  /* override desktop padding-left */
        margin-top: 12px;
        padding-top: 12px;
        gap: 10px;
    }
    .cart-line-bottom .qty-pill {
        justify-content: flex-start;
    }
    .cart-line-bottom .cart-subtotal {
        align-items: flex-end;
    }
    .cart-line-v2 .cart-remove { width: 36px; height: 36px; }

    .order-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: 1fr; }
    .checkout-section { padding: 20px; }
    .steps { padding: 12px; }
    .step-text span { display: none; }
    /* ===== Order detail (mobile) — items table → stacked cards ===== */
    .order-detail-page { padding: 20px 14px 40px; }
    .order-detail-layout { gap: 14px; }
    .order-detail-main,
    .order-detail-aside { gap: 14px; }
    /* Hero on order detail: keep enough room for 4 stats. */
    .page-hero-v2 { padding: 20px; }
    .page-hero-v2 h1 { font-size: 22px; }
    .page-hero-v2 .ph-sub { font-size: 13px; }
    .page-hero-v2 .ph-stats { gap: 6px; }
    .page-hero-v2 .ph-stat { padding: 6px 8px; }
    .page-hero-v2 .ph-stat-label { font-size: 10px; }
    .page-hero-v2 .ph-stat-value { font-size: 12px; }
    /* Status tracker compact. */
    .status-tracker { padding: 16px 14px 18px; border-radius: 12px; }
    .status-tracker-head { margin-bottom: 18px; }
    .status-tracker h2 { font-size: 14px; }
    .status-tracker .st-ref { font-size: 11px; }
    .tracker::before { top: 14px; left: 12px; right: 12px; }
    .tracker-fill { top: 14px; left: 12px; }
    .tstep-dot { width: 28px; height: 28px; font-size: 12px; margin-bottom: 8px; }
    .tstep.is-done .tstep-dot::before,
    .tstep.is-current .tstep-dot::before { width: 12px; height: 12px; }
    .tstep-l { font-size: 12px; }
    .tstep-meta { font-size: 10px; }
    /* Order info cards spacing. */
    .order-info-card { padding: 16px; }
    .order-info-card > h3,
    .oi-card > h3 { font-size: 14px; margin-bottom: 10px; }
    .info-block .ib-label,
    .info-block .ib-value { font-size: 13px; }
    /* Items in this order → stacked card layout (mirrors cart-line-v2). */
    .items-table { border: 0; background: transparent; box-shadow: none; padding: 0; }
    .items-table thead { display: none; }
    .items-table tbody { display: block; }
    .items-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 14px;
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    }
    .items-table tbody tr:last-child { margin-bottom: 0; }
    .items-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        text-align: left;
        font-size: 14px;
    }
    .items-table tbody td + td { border-top: 1px dashed rgba(15, 23, 42, 0.06); }
    .items-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted, #6b7280);
    }
    .items-table tbody td > * { min-width: 0; }
    .items-table .it-product { display: flex; align-items: center; gap: 10px; }
    .items-table .it-img { width: 44px; height: 44px; border-radius: 8px; }
    .items-table .it-name { font-size: 13px; }
    .items-table .it-qty { font-size: 13px; padding: 2px 8px; }
    /* Product cell (first <td>) on mobile: stack image + name flush-left,
       drop the redundant "PRODUCT" label since the image and name are
       self-explanatory. */
    .items-table tbody td:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .items-table tbody td:first-child::before { content: none; }
    .items-table tbody td:first-child + td { border-top: 1px dashed rgba(15, 23, 42, 0.06); }
    .items-table .it-total { font-weight: 700; color: var(--brand, #d23f4f); }
    /* Summary card tightening on mobile. */
    .summary-card-v2 { padding: 16px; }
    .summary-card-v2 .sum-title { font-size: 15px; }
    .summary-card-v2 .sum-grand { font-size: 20px; }
    .summary-card-v2 .sum-actions { flex-direction: column; }
    .summary-card-v2 .sum-actions .btn { width: 100%; }
}
/* ---------- Cart: tablet (769–1024px) ----------
   Tighten top-row columns and bottom-row padding so the wider
   layout still has comfortable breathing room. */
@media (max-width: 1024px) and (min-width: 769px) {
    .cart-line-top {
        grid-template-columns: 80px minmax(0, 1fr) 36px;
        column-gap: 14px;
    }
    .cart-line-v2 .cart-thumb { width: 80px; height: 80px; }
    .cart-line-v2 .qty-pill .qty-input { width: 44px; }
    .cart-line-bottom { padding-left: calc(80px + 14px); }
    .cs-val { font-size: 15px; }
    .cart-table-head { padding: 16px 20px; }
}
/* ---------- Cart: large phones (≤640px) ----------
   Tighten padding + qty pill so it fits comfortably. */
@media (max-width: 640px) {
    .cart-page, .checkout-page, .orders-page, .order-detail-page,
    .auth-page, .address-page, .address-form-page { padding: 24px 16px 48px; }
    .summary-head, .summary-rows, .summary-total,
    .form-actions-col, .trust-strip { padding-left: 18px; padding-right: 18px; }
    .total-amount { font-size: 20px; }
    .cart-table-head { padding: 16px 18px; }
    .tracker::before, .tracker-fill { left: 14%; right: 14%; }
    .tstep-l { font-size: 10px; }
    .tstep-dot { width: 32px; height: 32px; font-size: 12px; }
    .summary-card-v2 { position: static; }
    .addr-suggestions { max-height: 200px; }
    .addr-suggestions li { padding: 10px 10px; }
}
/* ---------- Cart: small phones (≤480px) ----------
   Thumb and qty buttons shrink further; name wraps to 2 lines. */
@media (max-width: 480px) {
    .checkout-section { padding: 16px; }
    .choice-card { padding: 14px; }
    .choice-card .choice-ico { width: 40px; height: 40px; font-size: 18px; }
    .step { padding: 4px 6px; gap: 8px; }
    .step-num { width: 28px; height: 28px; font-size: 12px; }
    .step-text strong { font-size: 12px; }
    .cart-page { padding: 20px 12px 40px; }
    .cart-line-v2 { padding: 12px 14px; }
    .cart-line-top { grid-template-columns: 60px minmax(0, 1fr) 32px; column-gap: 10px; }
    .cart-line-v2 .cart-thumb { width: 60px; height: 60px; }
    .cart-line-v2 .cart-thumb .qty-badge { min-width: 22px; height: 22px; font-size: 10px; top: -6px; right: -6px; padding: 0 6px; }
    .cart-line-v2 .cart-info .cart-name { font-size: 14px; white-space: normal; line-height: 1.35; }
    .cart-line-v2 .cart-info .cart-cat { font-size: 11px; }
    .cart-line-v2 .cart-info .cart-color { font-size: 11.5px; }
    .cart-line-v2 .cart-info .cart-color-swatch { width: 12px; height: 12px; }
    .cart-line-v2 .qty-pill { padding: 3px; gap: 2px; }
    .cart-line-v2 .qty-pill .qty-btn { width: 28px; height: 28px; font-size: 15px; }
    .cart-line-v2 .qty-pill .qty-input { width: 36px; height: 28px; font-size: 13px; }
    .cart-line-v2 .cart-subtotal .cs-val { font-size: 14px; }
    .cart-line-v2 .cart-subtotal .cs-label { font-size: 10px; }
    .cart-line-v2 .cart-remove { width: 32px; height: 32px; }
    .cart-line-v2 .cart-remove svg { width: 16px; height: 16px; }
    .cart-table-head { padding: 14px; }
    .cart-table-head h2 { font-size: 16px; }
    .summary-head { padding: 16px 18px; }
    .summary-head h2 { font-size: 16px; }
    .summary-rows, .summary-total { padding: 14px 18px; }
    .form-actions-col { padding: 14px 18px; }
    .trust-strip { padding: 14px 18px; flex-direction: column; gap: 10px; }
    .trust-strip .trust-item { font-size: 12px; }
    .empty-state-v2 { padding: 40px 20px; }
    .empty-state-v2 .emoji { font-size: 48px; }
    .empty-state-v2 h2 { font-size: 20px; }
    /* Hero stats panel drops below the heading on small phones. */
    .page-hero-v2 .ph-row { flex-direction: column; align-items: flex-start; }
    .page-hero-v2 .ph-stats { width: 100%; gap: 10px; }
    .page-hero-v2 .ph-stat { padding: 12px 14px; min-width: 0; }
    .page-hero-v2 .ph-stat-ico { width: 34px; height: 34px; border-radius: 11px; }
    .page-hero-v2 .ph-stat-ico svg { width: 18px; height: 18px; }
    .page-hero-v2 .ph-stat-n { font-size: 18px; }
    /* Order detail small phones: items table tighter, tracker tighter. */
    .order-detail-page { padding: 18px 10px 36px; }
    .items-table tbody tr { padding: 10px 12px; }
    .items-table tbody td { font-size: 13px; padding: 6px 0; }
    .items-table tbody td::before { font-size: 10px; }
    .items-table .it-img { width: 38px; height: 38px; }
    .items-table .it-name { font-size: 12px; }
    .status-tracker { padding: 12px; }
    .status-tracker h2 { font-size: 13px; }
    .status-tracker h2 .st-ico { width: 24px; height: 24px; border-radius: 7px; }
    .status-tracker h2 .st-ico svg { width: 14px; height: 14px; }
    .tracker::before { top: 12px; left: 10px; right: 10px; }
    .tracker-fill { top: 12px; left: 10px; }
    .tstep-dot { width: 24px; height: 24px; font-size: 11px; margin-bottom: 6px; }
    .tstep.is-done .tstep-dot::before,
    .tstep.is-current .tstep-dot::before { width: 10px; height: 10px; }
    .tstep-l { font-size: 11px; }
    .tstep-meta { font-size: 10px; min-height: 12px; }
    .tstep-l { font-size: 9px; }
}
/* ---------- Cart: extra-narrow (≤360px) ----------
   Belt-and-braces for very old / small Android devices. */
@media (max-width: 360px) {
    .cart-page { padding: 16px 10px 32px; }
    .cart-line-v2 { padding: 10px 12px; }
    .cart-line-top { grid-template-columns: 52px minmax(0, 1fr) 28px; column-gap: 8px; }
    .cart-line-v2 .cart-thumb { width: 52px; height: 52px; }
    .cart-line-v2 .qty-pill .qty-input { width: 30px; height: 26px; }
    .cart-line-v2 .qty-pill .qty-btn { width: 26px; height: 26px; font-size: 14px; }
    .cart-line-v2 .cart-remove { width: 28px; height: 28px; }
    .cart-line-v2 .cart-remove svg { width: 14px; height: 14px; }
    .cart-line-bottom { flex-wrap: wrap; }
}

/* ============================================================
   Product detail — brand chip
   ============================================================ */
.ph-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef2ff, #fbd0d6);
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #1a2238;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ph-brand:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(2, 12, 39,.15); }
.ph-brand-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #020c27;
    box-shadow: 0 0 0 3px rgba(2, 12, 39,.18);
}

/* ============================================================
   Product detail — tabs (Description / Specs / Highlights / Reviews)
   ============================================================ */
.pd-tabs {
    margin: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.pd-tab-strip {
    display: flex;
    gap: 4px;
    padding: 6px 12px 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
    overflow-x: auto;
    scrollbar-width: none;
}
.pd-tab-strip::-webkit-scrollbar { display: none; }

.pd-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    position: relative;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.pd-tab:hover { color: #0f172a; background: rgba(15,23,42,.04); }
.pd-tab.active { color: var(--brand-dark); background: #fff; }
.pd-tab.active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), #d11219);
}

.pd-panel {
    padding: 22px 24px 26px;
    animation: pd-fade .18s ease both;
}
.pd-panel[hidden] { display: none; }
.pd-panel.active { display: block; }
@keyframes pd-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pd-empty {
    color: #94a3b8;
    font-style: italic;
    margin: 0;
}

/* Rich-text content (CKEditor 5 output) */
.pd-prose { color: #1f2937; line-height: 1.7; font-size: 15px; }
.pd-prose p { margin: 0 0 12px; }
.pd-prose h1, .pd-prose h2, .pd-prose h3, .pd-prose h4 { margin: 18px 0 10px; line-height: 1.3; }
.pd-prose h1 { font-size: 22px; }
.pd-prose h2 { font-size: 19px; }
.pd-prose h3 { font-size: 17px; }
.pd-prose ul, .pd-prose ol { margin: 0 0 12px; padding-left: 22px; }
.pd-prose li { margin-bottom: 4px; }
.pd-prose a { color: #020c27; text-decoration: underline; text-underline-offset: 2px; }
.pd-prose blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid #1a2238;
    background: #f5f7ff;
    color: #475569;
    border-radius: 0 8px 8px 0;
}
.pd-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.pd-prose code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.pd-prose table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
.pd-prose table th, .pd-prose table td {
    border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left;
}
.pd-prose table th { background: #f8fafc; font-weight: 600; }

/* Specifications tab */
.pd-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.pd-spec-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px dashed #e5e7eb;
}
.pd-spec-list li:last-child { border-bottom: 0; }
.pd-spec-list li > span:first-child {
    flex: 0 0 140px;
    color: #64748b;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pd-spec-list li > strong {
    flex: 1;
    color: #0f172a;
    font-weight: 600;
}
.pd-spec-list .spec-tags { align-items: flex-start; }
.pd-spec-list .spec-tags > strong { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tag pill used in specs list and detail metadata */
.pd-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #020c27;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #fbd0d6;
}

/* Highlights tab */
.pd-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 18px;
}
.pd-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #1f2937;
    line-height: 1.5;
    font-size: 14.5px;
}
.pd-highlights .tick {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

@media (max-width: 640px) {
    .product-detail-shell { border-radius: 18px; margin: 0 0 28px; }
    .pd-panel { padding: 18px 16px 20px; }
    .pd-spec-list li > span:first-child { flex-basis: 110px; }
    .ph-brand { font-size: 11px; }
}

/* The OAuth trigger is a POST form so the inner button can keep the
   .btn-google look without inheriting .btn styling that targets
   <a> elements. */
.oauth-form { margin: 0; }
.oauth-form .btn-google {
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease,
        border-color 0.15s ease, transform 0.15s ease;
    box-shadow: var(--shadow-sm);
}
.btn-google:hover {
    background: #f8fafc;
    border-color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-md);
}
.btn-google:active { transform: translateY(1px); }
.btn-google:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.btn-google svg { flex-shrink: 0; }

/* ============================================================
   Wishlist
   ============================================================
   The navbar icon mirrors .cart-btn but uses the brand pink as a
   "saved" cue. The page layout mirrors the related-products
   card pattern already in this stylesheet so visual language stays
   consistent.
*/

.wishlist-btn { color: var(--muted); }
.wishlist-btn:hover { color: var(--brand); }
.wishlist-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--brand); color: white;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(209, 18, 25, 0.45);
    border: 2px solid var(--card);
}
.wishlist-badge.small {
    position: static; border: none; box-shadow: none;
    display: inline-grid; margin-left: 6px;
}

/* ----- Wishlist list page ----- */
.wishlist-page {
    padding: 28px 28px 80px 28px;
}

.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.wl-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .25s ease;
    display: flex; flex-direction: column;
}
.wl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wl-card-link {
    position: absolute; inset: 0; z-index: 1;
}
.wl-thumb {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: grid; place-items: center;
}
.wl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wl-noimg { color: #94a3b8; font-size: 13px; }
.wl-saved-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--brand); color: white;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(209, 18, 25, 0.4);
    z-index: 2;
}

.wl-body {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column;
    gap: 8px; flex: 1;
}
.wl-name {
    font-size: 14px; font-weight: 700; line-height: 1.35;
    color: var(--text); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.wl-name:hover { color: var(--brand); text-decoration: none; }

.wl-price-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.wl-price { font-size: 16px; font-weight: 800; color: var(--text); }
.wl-compare { font-size: 12px; color: var(--muted); text-decoration: line-through; }

.wl-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--muted); margin-top: 2px;
}
.wl-pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.wl-pill.ok { background: rgba(16, 185, 129, 0.12); color: #047857; }
.wl-pill.muted { background: rgba(100, 116, 139, 0.12); color: #475569; }
.wl-when { margin-left: auto; }

.wl-actions {
    margin-top: auto; padding-top: 10px;
    display: flex; gap: 8px;
    position: relative; z-index: 2;
}
.wl-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 9px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    font-family: inherit;
}
.wl-btn:active { transform: translateY(1px); }
.wl-btn.primary {
    background: var(--brand); color: white;
    box-shadow: 0 4px 12px rgba(209, 18, 25, 0.35);
}
.wl-btn.primary:hover { background: #c2115f; }
.wl-btn.ghost { background: var(--bg); color: var(--text); border-color: var(--border); }
.wl-btn.ghost:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.wl-btn.disabled {
    background: var(--bg); color: var(--muted);
    cursor: not-allowed; border-color: var(--border);
}
.wl-btn.lg { padding: 12px 18px; font-size: 14px; }

/* empty state */
.wl-empty {
    margin: 24px 0 60px;
}
.wl-empty-card {
    max-width: 520px; margin: 0 auto;
    background: var(--card);
    border: 1px dashed var(--border-strong);
    border-radius: 20px;
    padding: 44px 28px; text-align: center;
}
.wl-empty-ico {
    width: 92px; height: 92px; border-radius: 24px;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--brand-soft), #ffe2ee);
    color: var(--brand);
}
.wl-empty-card h2 { margin: 0 0 8px; font-size: 22px; }
.wl-empty-card p {
    color: var(--muted); margin: 0 0 22px; font-size: 14px;
    max-width: 360px; margin-left: auto; margin-right: auto;
    line-height: 1.55;
}

/* ----- Quick-action tiles on the profile page ----- */
.pp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 28px 28px 28px 28px;
}
.pp-tile {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.pp-tile::after {
    content: ""; position: absolute; right: -40px; top: -40px;
    width: 140px; height: 140px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c1, var(--brand)), var(--c2, #ff7a82));
    opacity: .05; transition: opacity .2s ease, transform .3s ease;
}
.pp-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
    text-decoration: none; color: var(--text);
}
.pp-tile:hover::after { opacity: .12; transform: scale(1.1); }
.pp-tile-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--c1, var(--brand)), var(--c2, #ff7a82));
    color: white;
    box-shadow: 0 8px 18px rgba(209, 18, 25, 0.25);
}
.pp-tile-icon svg { width: 22px; height: 22px; }
.pp-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pp-tile-k { font-size: 15px; font-weight: 700; }
.pp-tile-v { font-size: 13px; color: var(--muted); }
.pp-tile-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: 12px; font-weight: 700; color: var(--brand);
}

@media (max-width: 720px) {
    .wishlist-page { padding: 18px 18px 60px 18px; }
    .wl-title { font-size: 22px; }
    .wl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .wl-body { padding: 12px; }
    .wl-actions { flex-direction: column; }
    .wl-btn { width: 100%; }
}
@media (max-width: 480px) {
    .pp-tiles { grid-template-columns: 1fr; }
}

/* ---------- Reviews (product detail tab + small helpers) ---------- */
.stars-sm { font-size: 11px; letter-spacing: 0.5px; }

.rating-value-empty {
    color: var(--muted);
    font-weight: 700;
}
.rating-empty .stars {
    background: none;
    -webkit-text-fill-color: var(--muted);
    color: var(--muted);
    opacity: 0.85;
}

.reviews-shell { display: flex; flex-direction: column; gap: 22px; }

.reviews-summary {
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px; padding: 18px 20px;
    background: linear-gradient(135deg, rgba(2, 12, 39,0.08), rgba(225,29,72,0.06));
    border: 1px solid var(--border); border-radius: 16px;
    flex-wrap: wrap;
}
.reviews-summary-l { display: flex; align-items: center; gap: 16px; }
.reviews-big-num {
    font-size: 38px; font-weight: 800; line-height: 1;
    background: linear-gradient(120deg, #f59e0b, #d11219);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.reviews-summary-meta { display: flex; flex-direction: column; gap: 4px; }
.reviews-count-text { font-size: 13px; color: var(--muted); }

.reviews-cta {
    display: inline-flex; align-items: center; padding: 9px 16px;
    border-radius: 999px; font-weight: 700; font-size: 13px;
    background: linear-gradient(135deg, #9a0d14, #d11219);
    color: #fff; text-decoration: none;
    box-shadow: 0 10px 22px rgba(154, 13, 20,0.22);
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.reviews-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(154, 13, 20,0.32); filter: brightness(1.04); }
.reviews-cta-soft { background: #1f2937; box-shadow: none; }
.reviews-cta-soft:hover { background: #0f172a; }
.reviews-cta-locked {
    background: var(--bg); border: 1px dashed var(--border);
    color: var(--muted); cursor: not-allowed; box-shadow: none;
}

.reviews-summary-empty {
    background: var(--bg); border-style: dashed;
}
.reviews-summary-empty h3 {
    margin: 0 0 4px 0; font-size: 16px;
}
.reviews-empty-title { margin: 0; }
.reviews-empty-sub { margin: 0; color: var(--muted); font-size: 13px; }

.reviews-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.review-card {
    padding: 18px 20px;
    border: 1px solid var(--border); border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.review-card:hover { border-color: rgba(154, 13, 20,0.30); box-shadow: 0 10px 24px rgba(15,23,42,0.06); }

.review-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #9a0d14, #d11219);
    color: #fff; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
    flex: 0 0 auto;
    text-transform: uppercase;
}
.review-byline { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.review-author { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.review-verified {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    background: rgba(16,185,129,0.12); color: #047857;
    border: 1px solid rgba(16,185,129,0.28);
}
.review-date { font-size: 12px; color: var(--muted); }
.review-stars-wrap { flex: 0 0 auto; }

.review-title { margin: 6px 0 4px 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.review-body { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; }

.write-review {
    margin-top: 8px; padding: 20px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
}
.write-review-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px;
}
.write-review-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.verified-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(16,185,129,0.10); color: #047857;
    border: 1px solid rgba(16,185,129,0.28);
    font-size: 11px; font-weight: 700;
}

.write-review-form { display: flex; flex-direction: column; gap: 12px; }
.write-review-form fieldset { border: 0; padding: 0; margin: 0; }
.write-review-form legend { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

.rw-stars { display: inline-flex; gap: 4px; }
.rw-stars label {
    cursor: pointer; display: inline-flex;
    font-size: 22px; line-height: 1; color: #cbd5e1;
    transition: transform .12s ease, color .12s ease;
}
.rw-stars label:hover { transform: translateY(-1px); color: #f59e0b; }
.rw-stars input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
/* Fill from star 1 up to whichever star is checked (or hovered). */
.rw-stars label:has(input:checked),
.rw-stars label:has(~ label input:checked) { color: #f59e0b; }
.rw-stars label:has(input:checked) span,
.rw-stars label:has(~ label input:checked) span { color: #f59e0b; }
/* Hover preview: fill this star and all earlier stars. */
.rw-stars:hover label { color: #cbd5e1; }
.rw-stars label:hover,
.rw-stars label:has(~ label:hover) { color: #f59e0b; }
.rw-stars label:hover span,
.rw-stars label:has(~ label:hover) span { color: #f59e0b; }

.rw-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.rw-field input,
.rw-field textarea {
    font-family: inherit; font-size: 14px; color: var(--text);
    background: #fff;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 11px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rw-field input:focus,
.rw-field textarea:focus {
    outline: none; border-color: rgba(154, 13, 20,0.55);
    box-shadow: 0 0 0 4px rgba(154, 13, 20,0.14);
}
.rw-field textarea { resize: vertical; min-height: 96px; }
.rw-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
    .reviews-summary { flex-direction: column; align-items: flex-start; }
    .reviews-big-num { font-size: 32px; }
    .review-card { padding: 14px; }
    .review-card-head { flex-wrap: wrap; }
}

/* Home page styles live in static/css/home.css (loaded by templates/pages/home.html). */