:root {
    --primary: #C41230;
    --primary-dark: #9A0E25;
    --primary-light: rgba(196, 18, 48, 0.1);
    --secondary: #1E2476;
    --secondary-light: rgba(30, 36, 118, 0.1);
    --brand-gradient: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    --text: #222;
    --muted: #6b6b7a;
    --border: #e0e2ed;
    --bg: #f8f9fc;
    --white: #ffffff;
    --shadow: 0 18px 50px rgba(30, 36, 118, 0.13);
    --shadow-soft: 0 8px 24px rgba(30, 36, 118, 0.08);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 12px 28px rgba(30, 36, 118, 0.07);
    --body-gradient: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 38px;
    --transition: 0.25s ease;
    --transition-fast: 0.16s ease;
    --focus-ring: 0 0 0 3.5px rgba(196, 18, 48, 0.22);
    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Only a handful of specific button classes reset this today
       (buttons.css / .wishlist-btn etc.) — every other tappable element
       (a plain link, the admin device-preview frame's rounded border, any
       custom clickable div) still got the browser's default mobile tap
       highlight. On iOS Safari that's a translucent gray flash shaped
       exactly like the tapped element's box; on a large rounded-corner
       element like the preview frame's 40px-radius phone border, that
       reads as a big pale rounded/circular overlay flashing over the
       viewport the instant you tap it — the most concrete explanation
       found for the reported "white circle" on real touch devices, none
       of this app's own CSS/JS produces a matching shape. Resetting it
       globally removes that flash everywhere instead of chasing it
       selector by selector. */
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   Global Polish
========================= */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Font */
body { font-family: var(--font); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(196, 18, 48, 0.28);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(196, 18, 48, 0.52); }

/* Text selection */
::selection { background: rgba(30, 36, 118, 0.14); color: #0e1040; }

/* Focus ring — only keyboard navigation */
:focus-visible {
    outline: 2.5px solid var(--primary);
    outline-offset: 3px;
    border-radius: 8px;
}
:focus:not(:focus-visible) { outline: none; }

/* Cursor on all interactive controls */
button:not([disabled]),
[role="button"],
.hero-btn,
.secondary-btn,
.cat-btn,
.fav-btn,
.orders-action-btn,
.admin-rail-link,
.orders-tab,
.theme-toggle {
    cursor: pointer;
}

/* Input placeholder */
input::placeholder,
textarea::placeholder { color: #b8a8b4; font-weight: 400; }

/* =========================
   Toast Notifications
========================= */
#toastContainer {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

html[dir="rtl"] #toastContainer {
    right: auto;
    left: 24px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    max-width: 340px;
    padding: 13px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a1a2e;
    pointer-events: all;
    animation: toastIn 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
    border-left: 4px solid var(--primary);
}

.toast.toast-success { border-left-color: #28a745; }
.toast.toast-error   { border-left-color: #dc3545; }
.toast.toast-info    { border-left-color: #4a90d9; }

.toast.toast-exit {
    animation: toastOut 0.22s ease forwards;
}

.toast-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.95); }
}

html[data-theme="dark"] .toast {
    background: #2a1f28;
    color: #e8eaf6;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}

html, body {
    min-height: 100%;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--body-gradient);
    color: var(--text);
    transition: background 0.25s ease, color 0.25s ease;
    /* FIX 3: explicit touch-momentum scrolling for the page's natural
       scroll (there's no separate inner scroll container on this site —
       body/html scroll directly), so content never feels "stuck" under a
       finger swipe on iOS. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;
    color: inherit;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

main {
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px 28px 70px;
}

/* FIX 3: on the product details page, "Similar products" and "Recently
   viewed" are the last content before </main> — the fixed-position sticky
   Add-to-Bag bar (~75-85px tall) was overlapping their bottom edge since
   the page's own bottom padding didn't account for it. Scoped via :has()
   (already used above for .admin-dashboard-pro) so only pages that actually
   render the sticky bar get the extra clearance. */
main:has(.sticky-cart-bar) {
    padding-bottom: 100px;
}

.admin-dashboard-pro ~ main,
main:has(.admin-dashboard-pro) {
    padding-left: 16px;
    padding-right: 16px;
}

.site-footer {
    width: min(100%, 1440px);
    margin: 8px auto 36px;
    padding: 0 20px;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 252, 0.98));
    border: 1px solid rgba(224, 226, 237, 0.95);
    box-shadow: 0 18px 38px rgba(30, 36, 118, 0.08);
}

.site-footer-copy {
    display: grid;
    gap: 6px;
    max-width: 420px;
    text-align: center;
}

.site-footer-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #332a35;
}

.site-footer-subtitle {
    color: #7a6e79;
    line-height: 1.6;
    font-size: 0.96rem;
}

.site-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.site-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 210px;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.site-social-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.site-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.site-social-text {
    display: grid;
    gap: 2px;
}

.site-social-text strong {
    font-size: 1.04rem;
    line-height: 1;
}

.site-social-text small {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.88;
}

.site-social-link:hover {
    transform: translateY(-3px) scale(1.01);
    filter: saturate(1.06);
}

.instagram-link {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    box-shadow: 0 14px 28px rgba(225, 84, 102, 0.24);
}

.facebook-link {
    background: linear-gradient(135deg, #1877f2, #0b57d0);
    box-shadow: 0 14px 28px rgba(24, 119, 242, 0.22);
}

/* =========================
   Navbar
========================= */
.navbar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 32px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
}

html[data-theme="dark"] .navbar {
    background: rgba(17, 20, 36, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.logo a {
    font-size: 1.5rem;
    font-weight: 900;
    color: #111111;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.navbar nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.navbar nav a {
    color: #6f6470;
    font-weight: 600;
    transition: color var(--transition), transform var(--transition);
    position: relative;
}

.navbar nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar nav a:hover {
    color: var(--primary);
    transform: translateY(-1px);
}

.navbar nav a:hover::after { transform: scaleX(1); }

.navbar nav span {
    color: var(--primary-dark);
    font-weight: 700;
}

/* =========================
   Hero Modern 2026
========================= */
.hero-modern {
    position: relative;
    overflow: hidden;
    background: #111111;
    border-radius: 0;
    padding: 32px 48px;
    min-height: 320px;
    color: white;
    margin-bottom: 0;
    box-shadow: none;
    animation: fadeUp 0.7s ease;
    display: flex;
    align-items: center;
}

.hero-modern::before {
    display: none;
}

.hero-modern::after {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.hero-content span {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hero-content h1 {
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    line-height: 0.92;
    margin: 10px 0 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hero-content i {
    font-weight: 400;
    opacity: 0.88;
}

.hero-content p {
    font-size: 1rem;
    color: rgba(255,255,255,0.82);
    max-width: 480px;
    line-height: 1.55;
    margin-bottom: 0;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #111111;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease;
    cursor: pointer;
    border: none;
}

.hero-btn:hover {
    background: #f0f0f0;
    transform: none;
    box-shadow: none;
}

.hero-btn:active {
    background: #e0e0e0;
    transform: none;
    box-shadow: none;
}

.hero-btn-dark {
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(196, 18, 48, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn-dark:hover {
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #ffffff;
    transform: translateY(-1.5px);
    box-shadow: 0 8px 22px rgba(196, 18, 48, 0.48);
}

.hero-btn-dark:active { transform: scale(0.97); }

.hero-btn-outline {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1.5px);
}

.hero-btn-outline:active { transform: scale(0.97); }

/* MODULE 2: personalized 3rd hero CTA — deliberately a different accent
   (warm gold, not the brand crimson used by "Shop Men") so it reads as a
   distinct, high-impact "this one's just for you" option, not a 3rd
   generic category button. */
.hero-btn-recommended {
    background: linear-gradient(135deg, #f5b301, #d68a00);
    color: #1a1200;
    box-shadow: 0 4px 18px rgba(245, 179, 1, 0.45);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: hero-btn-recommended-glow 2.4s ease-in-out infinite;
}
.hero-btn-recommended:hover {
    background: linear-gradient(135deg, #f5b301, #d68a00);
    color: #1a1200;
    transform: translateY(-1.5px);
    box-shadow: 0 8px 26px rgba(245, 179, 1, 0.6);
}
.hero-btn-recommended:active { transform: scale(0.97); }
@keyframes hero-btn-recommended-glow {
    0%, 100% { box-shadow: 0 4px 18px rgba(245, 179, 1, 0.45); }
    50% { box-shadow: 0 4px 24px rgba(245, 179, 1, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-btn-recommended { animation: none; }
}

/* =========================
   Hero Slider (unified)
========================= */
.hero-slider {
    display: grid;          /* all slides share the same grid cell  */
    position: relative;
    overflow: hidden;
    background: #111111;
    animation: fadeUp 0.7s ease;
    min-height: 70vh;
    width: 100%;
}

.hero-slide {
    grid-area: 1 / 1;       /* stack all slides on top of each other */
    min-height: 70vh;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 32px 48px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    pointer-events: none;
}

@media (max-width: 600px) {
    .hero-slider,
    .hero-slide {
        min-height: 56vh;
    }
}

/* First slide keeps the original hero background image */
.hero-slide:first-child {
    background:
        linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.03) 100%),
        url("images/hero-z.png");
    background-size: cover;
    background-position: center center;
}
.hero-slide.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.32) 60%, transparent 100%);
}

.hero-nav {
    grid-area: 1 / 1;       /* same grid cell as slides */
    position: relative;
    align-self: center;
    z-index: 10;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .18s;
    display: flex; align-items: center; justify-content: center;
}
.hero-nav:hover { background: rgba(255,255,255,0.28); }
.hero-nav-prev { justify-self: start; margin-left: 20px; }
.hero-nav-next { justify-self: end;   margin-right: 20px; }

.hero-dots {
    grid-area: 1 / 1;       /* same grid cell */
    position: relative;
    align-self: end;
    justify-self: center;
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.hero-dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

.hero-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 600px) {
    .hero-slide { padding: 28px 24px; }
    .hero-nav { width: 38px; height: 38px; font-size: 1.5rem; }
}

/* =========================
   Admin Hero Banners
========================= */
.banner-uploader {
    border: 2px dashed rgba(193,59,111,0.3);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    color: #aaa;
}
.banner-uploader:hover { border-color: #c13b6f; background: rgba(193,59,111,0.04); }
.banner-uploader svg { display: block; margin: 0 auto 10px; opacity:.5; }
.banner-uploader p { margin: 0 0 4px; font-weight: 600; color: inherit; }

/* ── Image position grid (3x3 focal point picker) ── */
/* MODULE 4: streamlined to 3 clean presets (Top/Center/Bottom) instead of
   the old 9-button grid — horizontal position stays centered, which covers
   the vast majority of real banner crops and is far quicker to reason
   about than a 3x3 grid of arrows. */
.hb-position-grid {
    display: flex;
    gap: 6px;
}
.hb-pos-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: rgba(193,59,111,0.04);
    color: #c13b6f;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.hb-pos-btn:hover { background: rgba(193,59,111,0.12); }
.hb-pos-btn.is-active {
    background: #c13b6f;
    color: #fff;
    border-color: #c13b6f;
}

/* ── Text alignment toggle group ── */
.hb-align-group { display: flex; gap: 6px; }
.hb-align-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: rgba(193,59,111,0.04);
    color: #c13b6f;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.hb-align-btn:hover { background: rgba(193,59,111,0.12); }
.hb-align-btn.is-active {
    background: #c13b6f;
    color: #fff;
    border-color: #c13b6f;
}

/* ── Live banner preview — a mini fake navbar sits above the frame so the
   slide reads as "this is what sits right under your real header" instead
   of a disconnected black box floating in a padded settings card. ── */
.hb-live-preview-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px 12px 0 0;
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hb-live-preview-navbar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}

.hb-live-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 700;
    max-height: 420px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background-color: #111;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: clamp(16px, 4%, 48px);
}
.hb-live-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.32) 60%, transparent 100%);
}
.hb-live-preview-content {
    position: relative;
    z-index: 2;
    max-width: 70%;
    color: #fff;
    text-align: left;
}
.hb-live-preview-content h1 {
    margin: 0 0 8px;
    line-height: 1.05;
    color: #fff;
}
.hb-live-preview-content p {
    margin: 0;
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    color: rgba(255,255,255,0.88);
}
@media (max-width: 640px) {
    .hb-live-preview-content { max-width: 90%; }
}

/* MODULE 4: the old approach made the preview position:sticky inside the
   same narrow column as the fields below it — on a long form that reads as
   a floating black box awkwardly chasing the scroll. Replaced with a
   balanced 2-column grid (form left, STATIC framed preview card right) so
   the preview never needs to move at all. */
.hb-builder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .hb-builder-grid { grid-template-columns: 1fr; }
}

.hb-builder-preview {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.hb-preview-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c13b6f;
    margin: 0 0 10px;
}

.hb-device-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 9999px;
    background: rgba(193,59,111,0.08);
    margin-bottom: 12px;
}
.hb-device-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: none;
    background: none;
    color: #c13b6f;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.hb-device-btn.is-active { background: #c13b6f; color: #fff; }

/* Desktop crop: the real 1920x600 banner ratio. Mobile crop: a narrower
   phone-like frame so the admin can see how the same image/position/zoom
   will actually read on a phone hero, without needing a second upload. */
.hb-live-preview[data-device="mobile"] {
    aspect-ratio: 9 / 13;
    max-width: 240px;
    max-height: 340px;
    margin: 0 auto;
}

.hb-position-zoom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}

.hb-section-divider {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c13b6f;
    padding-top: 10px;
    padding-bottom: 4px;
    border-top: 1px dashed rgba(193,59,111,0.25);
    margin-top: 6px;
}

.hb-style-toggles { padding-top: 6px; }
.hb-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: rgba(193,59,111,0.04);
    font-size: 0.82rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.hb-toggle-chip:has(input:checked) {
    background: #c13b6f;
    color: #fff;
    border-color: #c13b6f;
}
.hb-toggle-chip input { width: 16px; height: 16px; accent-color: #fff; }

.banners-list { display: flex; flex-direction: column; gap: 16px; }

.banner-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 16px;
    border: 1.5px solid rgba(193,59,111,0.12);
    background: rgba(255,255,255,0.5);
    transition: border-color .15s;
}
html[data-theme="dark"] .banner-item {
    background: rgba(22,18,36,0.6);
    border-color: rgba(193,59,111,0.18);
}
.banner-item:hover { border-color: rgba(193,59,111,0.3); }
.banner-item-inactive { opacity: .55; }

.banner-thumb {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.banner-inactive-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 8px;
}

.banner-meta { flex: 1; }
.banner-meta strong { display: block; font-size: .92rem; margin-bottom: 4px; }
.banner-meta p { font-size: .8rem; color: #888; margin-bottom: 6px; }
.banner-btns-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.banner-btn-tag {
    font-size: .7rem;
    background: rgba(193,59,111,0.1);
    border: 1px solid rgba(193,59,111,0.2);
    color: #c13b6f;
    padding: 2px 8px;
    border-radius: 8px;
}

.banner-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) {
    .banner-item { flex-direction: column; }
    .banner-thumb { width: 100%; height: 140px; }
    .banner-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ── Edit Modal ── */
.hb-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    padding: 20px;
}
.hb-modal {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 1040px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .hb-modal {
    background: #1a1528;
    color: #e8eaf6;
}
.hb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid rgba(193,59,111,0.15);
}
.hb-modal-head h3 { font-size: 1.1rem; font-weight: 800; }
.hb-modal-close {
    background: none; border: none; font-size: 1.1rem;
    cursor: pointer; color: inherit; padding: 4px 8px;
}

/* =========================
   Categories + Filter
========================= */
.filters-categories-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.categories-modern {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    color: #625861;
    font-weight: 700;
    border: 1.5px solid rgba(235, 215, 225, 0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: transform 0.26s cubic-bezier(0.34,1.2,0.64,1), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
    backdrop-filter: blur(10px);
}

.cat-btn:hover {
    transform: translateY(-3px) scale(1.03);
    background: #f4f5fb;
    color: var(--primary-dark);
    border-color:  rgba(196, 18, 48, 0.15);
    box-shadow: 0 8px 20px  rgba(196, 18, 48, 0.15);
}

.cat-btn.active {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 26px  rgba(196, 18, 48, 0.15), 0 0 0 3px  rgba(196, 18, 48, 0.15);
}

.cat-btn:active { transform: scale(0.97); }

.mini-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.78);
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: var(--shadow-soft);
}

.mini-filter-form input,
.mini-filter-form select {
    padding: 12px 14px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    outline: none;
    background: white;
    min-width: 180px;
}

.mini-filter-form input:focus,
.mini-filter-form select:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.mini-filter-form button {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 800;
    transition: 0.25s ease;
}

.mini-filter-form button:hover {
    transform: translateY(-1px);
}

/* =========================
   Products
========================= */
.products-modern {
    margin-top: 10px;
}

/* SPA category-pill filtering: a brief, subtle dim while the grid fragment
   is being fetched — no layout shift, no spinner overlay, since the swap
   is usually well under a second. */
#homeProductsGrid {
    overflow-anchor: none;
}

#homeProductsGrid.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.products-grid-2026 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.product-card-2026 {
    background: rgba(255,255,255,0.9);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.34s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.34s ease, border-color 0.34s ease;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(240, 218, 227, 0.7);
    backdrop-filter: blur(12px);
    animation: fadeUp 0.6s ease both;
    will-change: transform;
}

.product-card-2026:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px  rgba(196, 18, 48, 0.15), 0 0 0 1.5px  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
}

.product-card-2026.is-out-of-stock .product-img img {
    filter: grayscale(0.35);
    opacity: 0.62;
}

.product-card-2026.is-out-of-stock:hover .product-img img {
    transform: none;
}

.product-img {
    position: relative;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.product-card-2026:hover .product-img img {
    transform: scale(1.06);
}

.fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: rgba(255,255,255,0.94);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #C41230;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background var(--transition), box-shadow var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fav-btn:hover {
    transform: scale(1.14);
    background: #f4f5fb;
    box-shadow: 0 6px 20px  rgba(196, 18, 48, 0.15);
}

.fav-btn:active { transform: scale(0.96); }

.product-info {
    padding: 16px;
}

.product-info h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: #2b242b;
}

.product-info p {
    color: #7b7078;
    margin-bottom: 6px;
    font-size: 0.96rem;
}

.product-category {
    font-size: 0.88rem;
    color: #9A0E25 !important;
    font-weight: 700;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 10px;
}

.price-row strong {
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.product-points-price {
    margin: 4px 0 0;
    color: #9b4e6f;
    font-size: 0.88rem;
    font-weight: 700;
}

.product-points-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}

.points-earned-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #1a6b3a, #25a05a);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.points-gift-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #6b2a5e, #c13b6f);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.product-stock-badge,
.details-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(42, 35, 42, 0.78);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.product-stock-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    top: auto;
    right: auto;
    padding: 5px 11px;
    font-size: 0.76rem;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(42, 35, 42, 0.22);
}

/* Shrink heart button inside product grids */
.products-grid-2026 .fav-btn-circle,
.product-card-2026 .fav-btn-circle {
    min-width: 38px;
    width: 38px;
    height: 38px;
    top: 10px;
    right: 10px;
}

.details-stock-badge {
    margin-left: 10px;
    padding: 8px 16px;
    font-size: 0.9rem;
    vertical-align: middle;
}

.price-row button {
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 10px rgba(196, 18, 48, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-row button:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.4);
}

.price-row button:active {
    transform: scale(0.97);
}

.price-row button.is-disabled,
.details-add-cart-btn.is-disabled {
    background: #b7adb5;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}

.price-row button.is-disabled:hover,
.details-add-cart-btn.is-disabled:hover {
    transform: none;
}

.empty-state {
    background: rgba(255,255,255,0.9);
    padding: 48px 34px;
    border-radius: 24px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.empty-state h2,
.empty-state h3 {
    margin-bottom: 8px;
    color: #1a1a2e;
}

.empty-state p {
    color: #7a6d76;
    margin-bottom: 22px;
}

.empty-state-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: block;
}

.empty-cart-box {
    text-align: center;
    padding: 48px 24px;
}

.empty-cart-box .empty-state-icon {
    margin-bottom: 20px;
}

/* =========================
/* Login / Signup
========================= */
.login-page-body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
}

.login-left-panel {
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    color: white;
    padding: 42px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 700;
}

.login-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.login-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    padding: 4px;
}

.login-center-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 0;
}

.login-hero-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.2);
}

.login-left-content h1 {
    font-size: clamp(2.2rem, 4vw, 4.3rem);
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 18px;
    max-width: 520px;
}

.login-left-content h1 span {
    font-style: italic;
    font-weight: 500;
}

.login-left-content p {
    font-size: 1.15rem;
    opacity: 0.95;
}

.login-right-panel {
    background: #fffdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-box {
    width: 100%;
    max-width: 460px;
}

.login-box h2 {
    font-size: 3rem;
    color: #2d2830;
    margin-bottom: 10px;
}

.login-subtitle {
    color: #777;
    margin-bottom: 22px;
}

.login-form-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form-modern label {
    font-weight: 700;
    color: #444;
    margin-top: 4px;
}

.login-form-modern input[type="text"],
.login-form-modern input[type="email"],
.login-form-modern input[type="password"],
.login-form-modern input[type="tel"] {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    outline: none;
    background: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.login-form-modern input:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

/* --- تعديل حاوية الباسورد --- */
.password-container {
    position: relative;
    width: 100%;
}

.password-container input {
    padding-right: 45px !important;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    user-select: none;
    opacity: 0.7;
    z-index: 5;
    transition: opacity 0.2s;
}

.toggle-password:hover {
    opacity: 1;
}

.login-row-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-weight: 500 !important;
    margin: 0 !important;
}

.remember-me input {
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.forgot-link {
    color: #C41230;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 600;
}

.forgot-link-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.login-btn-modern {
    width: 100%;
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.2s;
}

.login-btn-modern:active {
    transform: scale(0.98);
}

.login-error {
    background: #ffe6ea;
    color: #b4234f;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 500;
}

.pw-strength-msg {
    color: #b4234f;
    font-size: 0.82rem;
    margin: -8px 0 12px;
    line-height: 1.4;
}
html[data-theme="dark"] .pw-strength-msg { color: #ff8fa8; }

/* --- تعديل الـ Divider ليكون احترافي (Line - Text - Line) --- */
.login-divider {
    text-align: center;
    color: #999;
    margin: 25px 0 15px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e0e2ed;
}

.login-divider:not(:empty)::before {
    margin-right: 15px;
}

.login-divider:not(:empty)::after {
    margin-left: 15px;
}

/* --- تعديل أزرار السوشيال ميديا لتدعم الأيقونات --- */
.social-login-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* مسافة بين الصورة والكلمة */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.social-btn img {
    width: 20px; /* حجم أيقونة جوجل */
    height: 20px;
}

.social-btn:hover {
    background-color: #f7f7f7;
}

.bottom-auth-link {
    margin-top: 18px;
    color: #666;
    text-align: center;
}

.bottom-auth-link a {
    color: #C41230;
    font-weight: 700;
    text-decoration: none;
}
/* =========================
   Other pages
========================= */
.page-title {
    margin-bottom: 20px;
    color: var(--primary-dark);
    font-size: 2rem;
    font-weight: 800;
}

.simple-page {
    background: rgba(255,255,255,0.92);
    border: 1px solid #f1d9e3;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 8px 24px  rgba(196, 18, 48, 0.15);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.dashboard-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    text-align: center;
}

.dashboard-card p {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
}

/* =========================
   Modern Contact Page
========================= */

.contact-page-modern {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px 0;
}

.contact-card-modern {
    width: 100%;
    max-width: 1050px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #f1d9e3;
    border-radius: 30px;
    padding: 34px;
    box-shadow: 0 18px 45px  rgba(196, 18, 48, 0.15);
}

.contact-left {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    border-radius: 26px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 16px;
    width: fit-content;
}

.contact-left h1 {
    font-size: 3rem;
    margin-bottom: 14px;
}

.contact-left p {
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 24px;
}

.contact-info-box {
    display: grid;
    gap: 12px;
    font-weight: 700;
}

.contact-info-box div {
    background: rgba(255,255,255,0.16);
    padding: 13px 15px;
    border-radius: 16px;
}

.contact-right {
    display: flex;
    align-items: center;
}

.contact-form-modern {
    width: 100%;
    display: grid;
    gap: 16px;
}

.contact-topic-label {
    font-weight: 700;
    color: #4c424c;
    margin-bottom: -8px;
}

.contact-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.contact-topic-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.contact-topic-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.contact-topic-pill:hover {
    border-color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

.contact-topic-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.contact-topic-error {
    color: #C41230;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: -8px;
}

@media (max-width: 560px) {
    .contact-topic-grid {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .contact-topic-label {
    color: var(--text-strong);
}

html[data-theme="dark"] .contact-topic-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text, #cfd3ec);
}

html[data-theme="dark"] .contact-topic-pill:hover {
    background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .contact-topic-pill.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}

.contact-form-modern input,
.contact-form-modern textarea {
    width: 100%;
    border: 1px solid #e0e2ed;
    border-radius: 18px;
    padding: 16px 18px;
    outline: none;
    background: #fff;
    font-size: 1rem;
    transition: 0.25s ease;
}

.contact-form-modern textarea {
    resize: vertical;
}

.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.contact-form-modern button {
    border: none;
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s ease;
}

.contact-form-modern button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px  rgba(196, 18, 48, 0.15);
}

.success-msg {
    background: #e8fff1;
    color: #23784b;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
    font-weight: 700;
}

@media (max-width: 850px) {
    .contact-card-modern {
        grid-template-columns: 1fr;
    }

    .contact-left h1 {
        font-size: 2.3rem;
    }
}

.contact-link {
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.contact-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}


.chatbot-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.chatbot-header {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
}

.chatbot-header h3 {
    margin-bottom: 4px;
    font-size: 1rem;
}

.chatbot-header p {
    font-size: 0.82rem;
    opacity: 0.88;
}

.chatbot-header button {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.chatbot-messages {
    padding: 16px;
    height: 280px;
    overflow-y: auto;
    background: #fff9fc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bot-msg,
.user-msg {
    max-width: 82%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.94rem;
    line-height: 1.5;
}

.bot-msg {
    background: #f7e3ec;
    color: #5d3a49;
    align-self: flex-start;
}

.user-msg {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    align-self: flex-end;
}

.chatbot-input-row {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: white;
    border-top: 1px solid #f0d8e1;
}

.chatbot-input-row input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e0e2ed;
    outline: none;
}

/* تنسيق شبكة المنتجات */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    padding: 20px;
}

/* تنسيق كارت المنتج */
.product-card {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* تنسيق دائرة القلب اللي فوق الصورة */
.heart-circle {
    background: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.2s;
}

.heart-circle:hover {
    transform: scale(1.1);
}

/* ألوان حالة القلب (مهمة جداً للربط مع الباك اند) */
.heart-red {
    color: #ff4d4d !important; /* اللون الأحمر للمنتجات المضافة فعلاً */
}

.heart-gray {
    color: #ccc !important; /* اللون الرمادي للمنتجات العادية */
}

/* تنسيق صورة المنتج */
.product-image img {
    max-width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
}

/* زر الإضافة للعربة */
.add-to-cart-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 25px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* =========================
   Animations
========================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px) {
    .products-grid,
    .products-grid-2026 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-left-panel {
        min-height: 320px;
    }

    .login-left-content h1 {
        font-size: 2.4rem;
    }

    .login-right-panel {
        padding: 24px 18px;
    }

    .login-box h2 {
        font-size: 2.2rem;
    }

    .filters-categories-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .mini-filter-form {
        width: 100%;
    }

    .mini-filter-form input,
    .mini-filter-form select {
        min-width: unset;
        width: 100%;
    }

    .products-grid,
    .products-grid-2026 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .navbar {
        padding: 16px 18px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .chatbot-panel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 88px;
    }

    .chatbot-fab {
        right: 18px;
        bottom: 18px;
    }
}

@media (max-width: 560px) {
    .products-grid,
    .products-grid-2026,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hero-modern {
        padding: 28px 22px;
        min-height: 340px;
    }

    .hero-content h1 {
        font-size: 2.1rem;
    }

    .login-left-panel {
        padding: 28px 24px;
    }

    .login-right-panel {
        padding: 20px 14px;
    }

    .login-row-small {
        flex-direction: column;
        align-items: flex-start;
    }

    .social-login-row {
        grid-template-columns: 1fr;
    }
}
/* =========================
   CART / CHECKOUT / SUCCESS
========================= */

.cart-page,
.checkout-page,
.success-page {
    padding-top: 10px;
}

.cart-shell,
.checkout-layout {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr;
    gap: 24px;
    align-items: start;
}

.cart-main-card,
.cart-summary-card,
.checkout-form-card,
.checkout-summary-card,
.success-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid #f1d9e3;
    border-radius: 28px;
    box-shadow: 0 10px 30px  rgba(196, 18, 48, 0.15);
}

.cart-main-card,
.checkout-form-card {
    padding: 28px;
}

.cart-summary-card,
.checkout-summary-card {
    padding: 24px;
    position: sticky;
    top: 96px;
}

.cart-page-head h1,
.checkout-form-card h2,
.checkout-summary-card h2 {
    font-size: 2.2rem;
    color: #231c24;
    margin-bottom: 8px;
}

.cart-page-head p {
    color: #7b7078;
    margin-bottom: 22px;
}

.cart-item-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 14px;
    border-top: 1px solid rgba(243, 225, 232, 0.8);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.cart-item-card:first-of-type { border-top: none; }

.cart-item-card:hover { background: rgba(255, 246, 250, 0.7); }

.cart-item-left {
    display: flex;
    gap: 16px;
    flex: 1;
}

.cart-item-image {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    overflow: hidden;
    background: #faf4f7;
    flex-shrink: 0;
}

.cart-item-image img,
.summary-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.cart-item-brand {
    color: #9A0E25;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 6px;
}

.cart-item-info p {
    color: #6f6470;
    margin-bottom: 5px;
}

.cart-line-total {
    color: #231c24 !important;
    font-weight: 700;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 170px;
}

.qty-form {
    display: flex;
    gap: 8px;
}

.qty-form input {
    width: 90px;
    padding: 12px;
    border: 1px solid #e0e2ed;
    border-radius: 12px;
}

.qty-form button,
.remove-btn,
.promo-row button {
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
}

.qty-form button,
.checkout-btn-big,
.promo-row button {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
}

.remove-btn {
    background: #f4f5fb;
    color: #c14471;
    border: 1px solid #f3cddd;
}

.summary-lines,
.summary-totals {
    margin-top: 14px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: #5e5560;
}

.summary-note {
    margin: 12px 0 18px;
    color: #8a7e87;
    font-size: 0.94rem;
}

.checkout-btn-big {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 16px;
    padding: 16px 18px;
    font-weight: 800;
    margin-top: 14px;
    box-shadow: 0 12px 24px  rgba(196, 18, 48, 0.15);
}

.continue-shopping-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #7d6f78;
    font-weight: 600;
}

.primary-link-btn {
    display: inline-block;
    margin-top: 12px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
}

/* Checkout top area */
.checkout-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding: 10px 2px;
}

.back-link,
.secure-checkout {
    color: #5d5560;
    font-weight: 600;
}

.checkout-brand {
    font-size: 2rem;
    font-weight: 800;
    color: #9d2d49;
}

.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 26px;
    padding: 18px 12px;
    background: rgba(255, 241, 246, 0.9);
    border-radius: 24px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.step > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #bcc9dd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    transition: background 0.25s ease;
}

.step small {
    font-size: 0.74rem;
    font-weight: 700;
    color: #8a7e87;
    white-space: nowrap;
    text-align: center;
    line-height: 1.5;
}

.step.active > span {
    background: linear-gradient(135deg, #1E2476, #C41230);
}

.step.active small {
    color: #1E2476;
}

.step.is-done > span {
    background: #22c55e;
}

.step-done-label {
    color: #22c55e;
    font-weight: 800;
}

/* ── MODULE 1: Luxury payment method card grid ── */
.payment-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.payment-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.payment-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-card:hover {
    border-color: #cbd5e1;
}

.payment-card.is-selected {
    border-color: #0f172a;
    background: #f8fafc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.payment-card-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    position: relative;
    transition: border-color 0.2s ease;
}

.payment-card.is-selected .payment-card-radio {
    border-color: #0f172a;
}

.payment-card.is-selected .payment-card-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #0f172a;
}

.payment-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.payment-card-icon svg {
    width: 20px;
    height: 20px;
}

.payment-card.is-selected .payment-card-icon {
    background: #0f172a;
    color: #fff;
}

.payment-card-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.payment-card-copy strong {
    font-size: 0.92rem;
}

.payment-card-desc {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

.payment-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.payment-accordion.is-open {
    max-height: 320px;
    margin: -6px 0 14px;
}

.payment-accordion-inner {
    padding: 16px 18px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 14px;
}

.payment-accordion-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin: 0 0 10px;
}

.payment-copy-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    margin-bottom: 10px;
}

.payment-copy-pill span {
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.92rem;
    direction: ltr;
}

.payment-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 9999px;
    border: none;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 0.76rem;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.payment-copy-btn:hover {
    background: #1e293b;
}

.payment-copy-btn.is-copied {
    background: #059669;
}

.payment-accordion-note {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 14px;
}

@media (max-width: 640px) {
    .payment-card-grid {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .payment-card {
    background: #111424;
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .payment-card.is-selected {
    background: #111424;
    border-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .payment-card-radio {
    border-color: rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .payment-card.is-selected .payment-card-radio {
    border-color: #ffffff;
}

html[data-theme="dark"] .payment-card.is-selected .payment-card-radio::after {
    background: #ffffff;
}

html[data-theme="dark"] .payment-card-desc {
    color: var(--text-soft);
}

html[data-theme="dark"] .payment-accordion-inner {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .payment-copy-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .payment-accordion-note {
    color: var(--text-soft);
}

.step-line {
    width: 68px;
    height: 3px;
    background: #c9d2df;
    border-radius: 999px;
    align-self: center;
    margin-bottom: 22px;
    transition: background 0.25s ease;
}

.step-line.active {
    background: linear-gradient(90deg, #1E2476, #C41230);
}

.checkout-form-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-form-modern label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #4c424c;
}

.floating-field {
    position: relative;
}

.floating-field input {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

.floating-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 0.95rem;
    font-weight: 500 !important;
    color: #8a7e87;
    pointer-events: none;
    transition: all 0.18s ease;
    background: transparent;
}

html[dir="rtl"] .floating-field label {
    left: auto;
    right: 16px;
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
    top: 11px;
    transform: translateY(0);
    font-size: 0.68rem;
    font-weight: 700 !important;
    color: #C41230;
}

/* ── MODULE 2: Guest-checkout "Unlock 10% OFF" intercept modal ── */
.guest-discount-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    padding: 20px;
}

.guest-discount-modal-backdrop[hidden] {
    display: none;
}

.guest-discount-modal {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    animation: guestDiscountModalIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes guestDiscountModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.guest-discount-modal h2 {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 14px;
    color: #17141c;
}

.guest-discount-modal h2 span {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #6f6470;
    margin-top: 4px;
}

.guest-discount-modal p {
    color: #6f6470;
    line-height: 1.7;
    font-size: 0.92rem;
    margin-bottom: 22px;
}

.guest-discount-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guest-discount-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid #e0e2ed;
    color: #17141c;
    background: #fff;
    transition: all 0.2s ease;
}

.guest-discount-btn:hover {
    border-color: #C41230;
    transform: translateY(-1px);
}

.guest-discount-btn-account {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    border-color: transparent;
}

.guest-discount-btn-account:hover {
    color: #fff;
    opacity: 0.92;
}

.guest-discount-skip {
    display: block;
    width: 100%;
    margin-top: 18px;
    background: none;
    border: none;
    color: #8a7e87;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.guest-discount-skip:hover {
    color: #C41230;
}

html[data-theme="dark"] .guest-discount-modal {
    background: var(--surface, #1a1620);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .guest-discount-modal h2 {
    color: var(--text-strong);
}

html[data-theme="dark"] .guest-discount-modal p,
html[data-theme="dark"] .guest-discount-modal h2 span {
    color: var(--text-soft);
}

html[data-theme="dark"] .guest-discount-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
}

.checkout-form-modern input,
.checkout-form-modern select {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    outline: none;
    background: #fff;
}

.checkout-form-modern select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%238a7e87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

html[dir="rtl"] .checkout-form-modern select {
    background-position: left 16px center;
    padding-right: 16px;
    padding-left: 40px;
}

.checkout-form-modern input:focus,
.checkout-form-modern select:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.checkout-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.shipping-methods {
    margin-top: 8px;
}

.shipping-option {
    border: 1px solid #e0e2ed;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.active-option {
    border-color: #f2a5c1;
    background: #fff7fa;
}

.shipping-option p {
    color: #8a7e87;
    margin-top: 4px;
}

/* Checkout summary */
.summary-product {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.summary-product-image {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    background: #f6f0f4;
}

.summary-product-qty-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.summary-product-brand,
.summary-product-info span {
    font-size: 0.86rem;
    color: #9b4e6f;
    font-weight: 700;
}

.summary-product-info h4 {
    margin-top: 4px;
    font-size: 1rem;
}

.summary-product-size-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
}

.applied-promo-badge {
    background: #fff0f5;
    border: 1px solid #f2a5c1;
    color: #9b4e6f;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 0.9rem;
    margin: 12px 0;
}

.applied-promo-badge strong {
    color: #C41230;
}

.welcome-promo-banner {
    text-align: center;
    padding: 18px 20px;
    margin: 20px 0;
    font-size: 1rem;
    line-height: 1.6;
}

.welcome-promo-banner strong {
    display: inline-block;
    margin-top: 6px;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

.promo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin: 18px 0;
}

.promo-row input {
    padding: 14px 16px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
}

.promo-row-pill input {
    border-radius: 999px;
    background: #f8fafc;
}

.promo-row-pill button {
    border-radius: 999px;
}

.total-line {
    border-top: 1px solid #f0dfe6;
    margin-top: 8px;
    padding-top: 16px;
}

.total-line strong {
    font-weight: 900;
    font-size: 1.15rem;
}

.summary-line-points-earn span:last-child {
    color: #16a34a;
    font-weight: 800;
}

.summary-secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

/* Success page */
.success-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.success-card {
    width: 100%;
    max-width: 620px;
    padding: 40px 32px;
    text-align: center;
    animation: fadeUp 0.7s ease;
}

.success-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: #e8fff1;
    color: #27a36a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
}

.success-card h1 {
    font-size: 3rem;
    margin-bottom: 12px;
    color: #231c24;
}

.success-card p {
    color: #726773;
    line-height: 1.7;
    margin-bottom: 20px;
}

.success-order-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fc;
    border: 1px solid #f1dce5;
    border-radius: 18px;
    padding: 16px 18px;
    margin: 18px 0 22px;
}

.success-order-box strong {
    color: #C41230;
}

.order-tracker {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 20px;
}

.order-tracker::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 22px;
    height: 3px;
    background: #f1dce5;
    z-index: 0;
}

.order-track-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
    color: #8a7c87;
}

.order-track-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #f1dce5;
    background: #fff;
    color: #9b8b97;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.order-track-step strong {
    color: #5b4f59;
    font-size: 0.92rem;
}

.order-track-step small {
    font-weight: 700;
    line-height: 1.35;
}

.order-track-step.complete .order-track-dot,
.order-track-step.current .order-track-dot {
    border-color: #C41230;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    box-shadow: 0 10px 22px  rgba(196, 18, 48, 0.15);
}

.order-track-step.current strong {
    color: #c42f69;
}

.order-track-step.cancelled .order-track-dot {
    border-color: #9a8f96;
    background: #6d6270;
    color: #fff;
}

.order-track-step.cancelled strong {
    color: #6d6270;
}

.track-order-link {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
}

.order-tracking-card {
    max-width: 860px;
}

.success-btn {
    margin-top: 8px;
}

.cancel-order-link {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

/* Responsive */
@media (max-width: 980px) {
    .cart-shell,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-card,
    .checkout-summary-card {
        position: static;
    }
}

@media (max-width: 700px) {
    .order-tracker {
        grid-template-columns: 1fr;
    }

    .order-tracker::before {
        display: none;
    }

    .cart-item-card {
        flex-direction: column;
    }

    .cart-item-actions {
        min-width: unset;
    }

    .checkout-grid-2 {
        grid-template-columns: 1fr;
    }

    .checkout-topbar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .checkout-brand {
        font-size: 1.5rem;
    }

    .success-card h1 {
        font-size: 2.2rem;
    }
}
/* =========================
   Chatbot
========================= */
.chatbot-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 14px 28px  rgba(196, 18, 48, 0.15);
    z-index: 1200;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chatbot-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 18px 32px  rgba(196, 18, 48, 0.15);
}

.chatbot-panel {
    position: fixed;
    right: 24px;
    bottom: 100px;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.14);
    overflow: hidden;
    z-index: 1300;
    transform: translateY(25px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    border: 1px solid #f0d8e1;
}

.chatbot-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.chatbot-header {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
}

.chatbot-header h3 {
    margin-bottom: 4px;
    font-size: 1rem;
}

.chatbot-header p {
    font-size: 0.82rem;
    opacity: 0.88;
}

.chatbot-header button {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.chatbot-messages {
    padding: 16px;
    height: 280px;
    overflow-y: auto;
    background: #fff9fc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bot-msg,
.user-msg {
    max-width: 82%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.94rem;
    line-height: 1.5;
}

.bot-msg {
    background: #f7e3ec;
    color: #5d3a49;
    align-self: flex-start;
}

.user-msg {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    align-self: flex-end;
}

.chatbot-input-row {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: white;
    border-top: 1px solid #f0d8e1;
}

.chatbot-input-row input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e0e2ed;
    outline: none;
}

.chatbot-input-row button {
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-weight: 700;
    cursor: pointer;
}
.categories-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.category-card-modern {
    background: rgba(255,255,255,0.9);
    border: 1px solid #f1d9e3;
    border-radius: 24px;
    padding: 26px 22px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.category-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 30px  rgba(196, 18, 48, 0.15);
}

.category-card-content {
    text-align: center;
}

.category-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-size: 1.2rem;
}

.category-card-content h3 {
    margin-bottom: 8px;
    color: #1a1a2e;
}

.category-card-content p {
    color: #7a6d76;
    font-size: 0.95rem;
}

@media (max-width: 1100px) {
    .categories-grid-modern {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .categories-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .categories-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* ❤️ Favorite Button Circle — glassmorphic, floats on the product photo */
.fav-btn-circle {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 42px;
    height: 42px;

    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10;
}

/* 🔥 Hover Effect */
.fav-btn-circle:hover {
    transform: scale(1.06);
    background: rgba(0, 0, 0, 0.65);
}

/* 💥 Click Effect */
.fav-btn-circle:active {
    transform: scale(0.9);
}

/* ✨ يخلي الصورة relative عشان القلب يثبت عليها */
.product-img {
    position: relative;
}

/* ===== Restore Product Card Text Style ===== */

.product-info {
    padding: 16px !important;
    text-align: left !important;
}

.product-info h3 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #2b242b !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
}

.product-info p {
    color: #7b7078 !important;
    margin-bottom: 8px !important;
    font-size: 0.96rem !important;
    text-align: left !important;
}

.product-category {
    font-size: 0.88rem !important;
    color: #9A0E25 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px !important;
    gap: 10px !important;
}

.price-row strong {
    color: #9A0E25 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

.add-cart-btn {
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 9px 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 10px rgba(196, 18, 48, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.add-cart-btn.is-disabled {
    background: var(--bg-muted, #f1f5f9) !important;
    color: var(--text-muted, #94a3b8) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .add-cart-btn.is-disabled {
    background: #161a30 !important;
    color: #64748b !important;
}

.add-cart-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.4) !important;
}

.add-cart-btn:active { transform: scale(0.97); }


.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
}

.nav-drop-title {
    color: #111111;
    font-weight: 700;
    cursor: pointer;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 200px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 6px;
    z-index: 9999;
    border: 1px solid #e5e5e5;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 4px;
    color: #111111;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: #f5f5f5;
    color: #111111;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 250px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    padding: 10px;
    z-index: 9999;
    border: 1px solid #f1d9e3;

    /* 🔥 الحل هنا */
    max-height: 400px;   /* ارتفاع ثابت */
    overflow-y: auto;    /* يعمل Scroll */
}


.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.notification-bell:hover {
    background: #eef2f7;
    color: #0f172a;
}

.notification-bell svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d72673;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    width: min(340px, calc(100vw - 28px));
    max-height: min(430px, calc(100vh - 150px));
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #f1d9e3;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
    padding: 10px;
    display: none;
    z-index: 9999;
    overscroll-behavior: contain;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.notification-dropdown.show-notification-dropdown {
    display: block;
}

.notification-footer-link {
    display: block;
    text-align: center;
    margin-top: 6px;
    padding: 12px 10px;
    border-top: 1px solid #f1d9e3;
    border-radius: 0 0 14px 14px;
    color: var(--primary, #C41230);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
}

.notification-footer-link:hover {
    background: #faf1f5;
}

html[data-theme="dark"] .notification-footer-link {
    border-top-color: var(--dropdown-border);
    color: #ff9ec3;
}

html[data-theme="dark"] .notification-footer-link:hover {
    background: var(--dropdown-link-hover);
}

.accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

html[dir="rtl"] .accordion-toggle {
    text-align: right;
}

.accordion-toggle h4 {
    margin: 0;
}

.accordion-arrow {
    font-size: 1.1rem;
    color: var(--muted, #6b6b7a);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 10px;
}

html[dir="rtl"] .accordion-arrow {
    margin-left: 0;
    margin-right: 10px;
}

.accordion-toggle[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content[hidden] {
    display: none;
}

.notification-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f1d9e3;
    color: #9A0E25;
}

.notification-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-head span,
.notification-item span {
    color: #8a7c87;
    font-size: 0.82rem;
    font-weight: 800;
}

.notification-item,
.notification-empty {
    padding: 12px 10px;
    border-radius: 12px;
}

.notification-item {
    display: block;
    color: inherit;
    min-width: 0;
}

.notification-item:hover {
    background: #fff3f8;
}

.notification-item + .notification-item {
    border-top: 1px solid #f6e5ec;
}

.notification-item strong {
    display: block;
    color: #2d2430;
    font-size: 0.95rem;
    line-height: 1.35;
}

.notification-item p {
    margin: 5px 0;
    color: #6f6470;
    line-height: 1.4;
}

.stock-alert-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

html[dir="rtl"] .stock-alert-badge {
    margin-left: 0;
    margin-right: 6px;
}

.stock-alert-out {
    background: rgba(196, 18, 48, 0.12);
    color: #C41230;
    border: 1px solid rgba(196, 18, 48, 0.25);
}

.stock-alert-low {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.25);
}

html[data-theme="dark"] .stock-alert-out {
    background: rgba(196, 18, 48, 0.18);
    color: #ff8fa8;
    border-color: rgba(196, 18, 48, 0.3);
}

html[data-theme="dark"] .stock-alert-low {
    background: rgba(217, 119, 6, 0.18);
    color: #fbbf24;
    border-color: rgba(217, 119, 6, 0.3);
}

.notification-item b {
    color: var(--primary);
    font-weight: 900;
}

.notification-stage-label {
    overflow-wrap: anywhere;
}

.notification-empty {
    color: #7a6d76;
    font-weight: 700;
}

html[dir="rtl"] .notification-menu {
    direction: rtl;
}

html[dir="rtl"] .notification-dropdown {
    right: auto;
    left: 0;
    text-align: right;
}

html[dir="rtl"] .notification-head {
    flex-direction: row-reverse;
}

html[data-theme="dark"] .notification-dropdown {
    background: rgba(18, 22, 45, 0.98);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .notification-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #ff9cc5;
}

html[data-theme="dark"] .notification-item + .notification-item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .notification-item:hover {
    background: rgba(255, 91, 151, 0.1);
}

html[data-theme="dark"] .notification-item strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .notification-item p,
html[data-theme="dark"] .notification-head span,
html[data-theme="dark"] .notification-item span,
html[data-theme="dark"] .notification-empty {
    color: var(--text-soft);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 18px  rgba(196, 18, 48, 0.15);
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    background: white;
    width: 210px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
    padding: 10px;
    display: none;
    z-index: 9999;
    border: 1px solid #f1d9e3;
}

.user-dropdown.show-user-dropdown {
    display: block;
}

.user-dropdown p {
    font-weight: 800;
    color: #9A0E25;
    padding: 10px;
    border-bottom: 1px solid #f1d9e3;
    margin-bottom: 6px;
}

.user-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #6f6470;
    font-weight: 700;
}

.user-dropdown a:hover {
    background: #f4f5fb;
    color: #C41230;
}


.profile-page {
    display: flex;
    justify-content: center;
    padding: 50px 20px;
}

.profile-card {
    width: 100%;
    max-width: 550px;
    background: white;
    border-radius: 28px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 18px 45px  rgba(196, 18, 48, 0.15);
    border: 1px solid #f1d9e3;
}

.profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-size: 36px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card h1 {
    color: #2b242b;
    margin-bottom: 8px;
}

.profile-role {
    color: #C41230;
    font-weight: 800;
    margin-bottom: 20px;
}

.profile-info {
    text-align: left;
    background: #f8f9fc;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 22px;
}

.profile-info p {
    margin-bottom: 10px;
    color: #6f6470;
}

.profile-btn,
.profile-form button {
    display: inline-block;
    width: 100%;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 14px;
    font-weight: 800;
    cursor: pointer;
}

.profile-form {
    text-align: left;
    display: grid;
    gap: 12px;
}

.profile-form label {
    font-weight: 700;
    color: #444;
}

.profile-form input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    outline: none;
}

.payment-section {
    margin-top: 28px;
}

.payment-section h2 {
    margin-bottom: 16px;
    color: #2b242b;
}

.payment-option {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #f1cddd;
    border-radius: 18px;
    margin-bottom: 14px;
    cursor: pointer;
    background: #fff;
    transition: 0.25s ease;
}

.payment-option:hover {
    border-color: #ec4f8f;
    background: #fff7fb;
}

.payment-option input {
    margin-top: 5px;
    accent-color: #ec4f8f;
}

.payment-option strong {
    color: #2b242b;
}

.payment-option p {
    color: #777;
    margin-top: 4px;
}

.payment-option-copy {
    width: 100%;
}

.payment-option-copy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.card-brand-visual {
    position: relative;
    width: 176px;
    min-height: 92px;
    padding: 16px 18px;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 36%),
        linear-gradient(135deg, #30244a, #1a5fd0 56%, #6ac1ff 100%);
    box-shadow: 0 16px 26px rgba(26, 41, 95, 0.18);
}

.card-brand-chip {
    width: 32px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f6d07e, #c8962d);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

.card-brand-wave {
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.card-brand-logos {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.visa-badge {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
}

.mastercard-badge {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mastercard-circle {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    opacity: 0.95;
}

.mastercard-red {
    left: 4px;
    background: #eb5757;
}

.mastercard-gold {
    right: 4px;
    background: #f2b94b;
}

.card-details,
.wallet-details {
    display: none;
    gap: 14px;
    margin: 10px 0 18px;
}

.card-details input,
.wallet-details input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    outline: none;
}

.card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


.product-img {
    position: relative;
}

.product-details-link {
    display: block;
}

.product-details-link img {
    width: 100%;
    cursor: pointer;
}

.fav-btn-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}


.product-img::before,
.product-img::after {
    pointer-events: none !important;
}

.product-details-link {
    display: block;
    cursor: pointer;
}

.product-name-link {
    color: inherit;
    text-decoration: none;
}

.product-name-link:hover {
    color: #c13b6f;
}

.product-img::before,
.product-img::after {
    pointer-events: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   PDP — expansive edge-aware canvas (no floating centered card), a
   58/42 split with a large portrait gallery on the left and a sticky
   commerce rail on the right. Replaces the old cramped
   max-width:1150px pink-gradient card. */
.product-details-page {
    min-height: 100vh;
    background: var(--bg, #f8f9fc);
}

.product-details-card {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 48px;
    background: transparent;
    padding: 24px 48px 100px;
    border-radius: 0;
    box-shadow: none;
    align-items: start;
}

@media (max-width: 768px) {
    .product-details-card {
        padding: 16px 16px 100px;
        gap: 24px;
    }
}

.product-image-stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    perspective: 1600px;
    position: relative;
}

/* Description/Materials/Shipping accordions sit directly under the
   gallery in the left column — the right rail is reserved for core
   purchase controls only. align-self:stretch overrides the flex column's
   align-items:center so this content uses the full column width instead
   of shrinking to fit centered. */
.pdp-left-accordions {
    align-self: stretch;
    width: 100%;
    margin-top: 12px;
}

.product-image-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--surface-muted, #f2f2f6);
    border-radius: 20px;
    padding: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 8px 28px rgba(20, 20, 30, 0.08);
    overflow: hidden;
}

.product-image-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Micro-zoom on hover — the full-bleed portrait image itself scales,
   clipped by the image box's own overflow:hidden so it never spills. */
.product-image-box:hover .product-image-preview {
    transform: scale(1.04);
}

.product-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* MODULE 2 — Adidas-style 2-column photo gallery grid: every image is its
   own tile, always visible, no single "hero" + carousel. */
.pdp-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.pdp-photo-cell {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-muted, #f2f2f6);
    aspect-ratio: 3 / 4;
}

.pdp-photo-cell:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

.pdp-photo-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    image-rendering: -webkit-optimize-contrast;
}

.pdp-photo-cell:hover .pdp-photo-media {
    transform: scale(1.04);
}

.pdp-photo-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

/* Expandable gallery — "View More / View Less" (Module 2) */
.pdp-photo-cell-extra {
    transition: opacity 0.25s ease;
}
.pdp-gallery-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #111;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pdp-gallery-expand-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}
.pdp-gallery-expand-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.pdp-gallery-expand-btn.is-expanded .pdp-gallery-expand-arrow {
    transform: rotate(180deg);
}
html[data-theme="dark"] .pdp-gallery-expand-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}
html[data-theme="dark"] .pdp-gallery-expand-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .pdp-photo-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pdp-photo-grid::-webkit-scrollbar {
        display: none;
    }

    .pdp-photo-cell,
    .pdp-photo-cell:first-child:nth-last-child(odd) {
        flex: 0 0 85%;
        scroll-snap-align: center;
        aspect-ratio: 4 / 5;
    }

    .pdp-photo-dots {
        display: flex;
    }
}

/* Sticky commerce rail — stays in view as the customer scrolls through
   the gallery on the left. Capped height + its own scroll so a very tall
   rail (long description accordions expanded) can't get clipped against
   the viewport. */
.product-text-box {
    position: sticky;
    top: 110px;
    height: fit-content;
    align-self: start;
    padding-left: 20px;
}

@media (max-width: 768px) {
    .product-text-box {
        padding-left: 0;
    }
}

@media (max-width: 900px) {
    .product-text-box {
        position: static;
        height: auto;
    }
}

/* MODULE 4/5 (natural scroll): the PDP used to lock .product-details-page
   to a fixed viewport height with overflow:hidden ("above-the-fold
   containment"), trapping the whole hero+rail in an inner scroll box that
   fought the browser's own scrollbar. Removed outright — the page now
   scrolls the normal way; .product-text-box's own position:sticky (see
   its base rule above) is what keeps the buy rail in view while the left
   column's gallery/description/accordions scroll past it. */

/* MODULE 1: arrows are now positioned INSIDE #productImageBox (which is
   already position:relative; overflow:hidden — see above), anchored
   absolutely so they never sit outside the image edge regardless of card
   width. Translucent-black circular buttons per spec, not the old
   pink-glass style, since they now overlay the photo directly. */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    /* Smooth touch targets, no ghost-click / double-fire on mobile. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.gallery-arrow-prev {
    left: 16px;
}

.gallery-arrow-next {
    right: 16px;
}

.gallery-arrow:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: translateY(-50%) scale(1.08);
}

.gallery-arrow:active {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(0.96);
}

.gallery-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.product-gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    width: min(100%, 440px);
    margin: 0 auto;
}

.product-gallery-thumb {
    width: 72px;
    height: 72px;
    padding: 5px;
    border: 1px solid rgba(193, 59, 111, 0.2);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.product-gallery-thumb.is-active,
.product-gallery-thumb:hover {
    border-color: #c13b6f;
    box-shadow: 0 10px 18px rgba(193, 59, 111, 0.16);
    transform: translateY(-2px);
}

.product-image-save {
    top: 18px;
    right: 18px;
    z-index: 3;
}

/* Pagination dots: hidden by default (desktop keeps the thumbnail strip),
   swapped in on mobile below. */
.product-gallery-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(43, 36, 43, 0.22);
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.gallery-dot.is-active {
    background: #C41230;
    width: 18px;
    border-radius: 3px;
}

.product-image-immersive-view {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(58vw, 520px);
    height: min(72vh, 520px);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
    transition: opacity 0.22s ease;
    overflow: visible;
}

.product-image-shine {
    position: absolute;
    inset: -30%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.45),
        rgba(255, 255, 255, 0.05) 24%,
        transparent 46%
    );
    opacity: 0.95;
    pointer-events: none;
    transform: translateZ(34px);
}

.product-image-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(34, 22, 31, 0.42);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 1990;
}

.product-image-rotator {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 420px;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.product-image-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 20px;
    transform: translateZ(58px);
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.12));
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.product-image-face-back {
    transform: rotateY(180deg) translateZ(58px);
}

.product-image-stage.is-immersive .product-image-backdrop {
    opacity: 1;
}

.product-image-stage.is-immersive .product-image-box {
    box-shadow: 0 26px 52px rgba(193, 59, 111, 0.12);
}

.product-image-stage.is-immersive .product-image-immersive-view {
    opacity: 1;
}

.product-image-stage.is-immersive .product-image-rotator {
    width: 100%;
    max-width: none;
    height: 100%;
    animation: productSpin360 2.4s linear infinite;
}

.product-image-stage.is-immersive .product-image-face {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.16));
    background: transparent;
}

.product-image-stage.is-immersive .product-image-shine {
    animation: productShineSweep 2.4s linear infinite;
    inset: -10%;
    opacity: 0.75;
}

.product-image-stage.is-immersive .product-image-preview {
    opacity: 0;
}

.product-image-stage.is-immersive .product-image-save {
    position: fixed;
    top: calc(50% - min(36vh, 260px) + 18px);
    right: calc(50% - min(29vw, 260px) + 18px);
    z-index: 2010;
}

.product-image-stage.is-immersive .product-image-box::before {
    opacity: 0.18;
}

.product-text-box h1 {
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong, #17141c);
    margin: 4px 0 4px;
}

.product-text-box h3 {
    display: inline;
    color: var(--text-soft, #6b6b7a);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Micro-header — "MEN / RUNNING · NIKE" tracking-caps, not a pill badge. */
.details-category {
    display: inline;
    background: none;
    color: var(--text-soft, #6b6b7a);
    padding: 0;
    border-radius: 0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.details-category + h3::before {
    content: "•";
    margin: 0 6px;
    opacity: 0.5;
}

/* Compact single-row rating summary (Module 2) — replaces the old
   two-line "Rating: X" + "N reviews" text stack, both for a cleaner look
   and to free up vertical space for the strict above-the-fold PDP layout. */
.details-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-strong, #17141c);
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
}
.details-rating-stars {
    display: inline-flex;
    gap: 1px;
}
.details-rating-stars svg {
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 1.2;
}
.details-rating-stars svg.is-filled {
    fill: #f5b301;
    stroke: #f5b301;
}
html[data-theme="dark"] .details-rating-stars svg { stroke: #475569; }

.details-review-meta {
    color: #8c7f8f;
    font-size: 13px;
    font-weight: 500;
}
.details-rating-row:hover .details-review-meta { text-decoration: underline; }

/* Full .details-price rule (flex row: final price + struck original +
   discount badge) lives further down the file, near the other
   .details-price-* / .details-discount-badge rules it was consolidated
   with — kept there instead of duplicated here. */

.details-section {
    margin-top: 22px;
}

.details-section h4 {
    color: #2b2230;
    font-size: 18px;
    margin-bottom: 8px;
}

.details-section p {
    color: #6f6670;
    line-height: 1.8;
    font-size: 16px;
}

.details-add-cart-btn {
    margin-top: 30px;
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(196, 18, 48, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-add-cart-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 22px rgba(196, 18, 48, 0.48);
}

.details-add-cart-btn:active { transform: scale(0.97); }

.details-add-cart-btn:disabled,
.details-add-cart-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.related-products-panel {
    width: min(1500px, calc(100% - 64px));
    margin: 24px auto 28px;
    padding: 4px 0 10px;
}

.related-products-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 18px;
}

.related-products-header h2 {
    color: var(--text);
    font-size: 28px;
    margin: 0;
}

/* FIX 2 (streamline): this used to be a bulky padded/bordered "card" that
   sat under the product taking up a full block of the layout. It's now a
   slim, single-line tag — small dot + text, no background block — so it
   reads as a lightweight hint rather than blocking the screen. */
.related-products-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    color: #7b6171;
    font-size: 13px;
    font-weight: 600;
    /* No text-align here — inherits from .related-products-panel, which
       already flips to right-aligned under html[dir="rtl"]. */
}

.related-products-hint::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C41230;
    flex-shrink: 0;
}

html[data-theme="dark"] .related-products-hint {
    color: var(--text-soft);
}

.related-products-carousel {
    position: relative;
}

.related-products-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 310px);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: 6px 2px 16px;
    scrollbar-color:  rgba(196, 18, 48, 0.15) transparent;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.related-products-row::-webkit-scrollbar {
    display: none;
}

.related-products-carousel::before,
.related-products-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 16px;
    width: 76px;
    z-index: 2;
    pointer-events: none;
}

.related-products-carousel::before {
    left: 0;
    background: linear-gradient(90deg, #fff8fc 8%, rgba(255, 248, 252, 0));
}

.related-products-carousel::after {
    right: 0;
    background: linear-gradient(270deg, #fff8fc 8%, rgba(255, 248, 252, 0));
}

.related-carousel-btn {
    position: absolute;
    top: 86px;
    z-index: 4;
    width: 48px;
    height: 48px;
    border: 1px solid  rgba(196, 18, 48, 0.15);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(45, 24, 39, 0.16);
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.related-carousel-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 18px 34px rgba(45, 24, 39, 0.2);
}

.related-carousel-btn:disabled {
    opacity: 0.32;
    cursor: default;
    box-shadow: none;
}

.related-carousel-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.related-carousel-btn-left {
    left: 12px;
}

.related-carousel-btn-right {
    right: 12px;
}

.related-product-card {
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: 172px 1fr;
    min-height: 408px;
    border: 1px solid  rgba(196, 18, 48, 0.15);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(45, 24, 39, 0.08);
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.35s ease;
}

/* Module 3 — staggered entrance the instant the size-gated carousel
   populates, instead of the cards just snapping into existence. Applied
   right before insertion (no transition yet) and removed a frame later so
   the transition above actually animates opacity/transform in. */
.related-product-card.related-card-entering {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}

.related-product-card:hover {
    transform: translateY(-3px);
    border-color:  rgba(196, 18, 48, 0.15);
    box-shadow: 0 22px 42px rgba(45, 24, 39, 0.13);
}

.related-product-image {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(255, 244, 250, 0.96), rgba(255, 255, 255, 0.9));
    padding: 18px;
    border-bottom: 1px solid  rgba(196, 18, 48, 0.15);
}

.related-product-image img {
    width: 100%;
    height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.1));
    transition: transform 0.22s ease;
}

.related-product-card:hover .related-product-image img {
    transform: scale(1.04);
}

.related-product-copy {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px;
}

.related-product-copy .product-name-link {
    min-height: 50px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

.related-product-copy .product-brand {
    min-height: 22px;
    margin: 0;
}

.related-match-reason {
    min-height: 42px;
    margin: 0;
    border-radius: 14px;
    background: rgba(255, 91, 151, 0.08);
    color: #7b6171;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    padding: 10px 12px;
}

.related-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.related-product-bottom strong {
    color: var(--primary);
    font-size: 18px;
}

.related-product-bottom span {
    flex: 0 0 auto;
    max-width: 120px;
    border-radius: 999px;
    background: rgba(41, 33, 45, 0.06);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    padding: 7px 10px;
    text-align: center;
}

.pdp-section-divider {
    width: min(1600px, calc(100% - 64px));
    margin: 12px auto 0;
    border: none;
    border-top: 1px solid var(--outline-soft, rgba(196, 18, 48, 0.12));
}

.product-reviews-panel {
    width: min(1600px, calc(100% - 64px));
    margin: 18px auto 64px;
}

.product-reviews-card {
    background:
        radial-gradient(circle at top right, rgba(255, 214, 229, 0.28), transparent 22%),
        linear-gradient(180deg, rgba(255, 252, 254, 0.98), rgba(255, 246, 250, 0.96));
    border: 1px solid var(--outline-soft);
    border-radius: 34px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.product-reviews-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.reviews-eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.product-reviews-header h2,
.review-form-shell h3,
.reviews-list-shell h3 {
    color: var(--text);
}

.reviews-summary {
    min-width: 130px;
    padding: 18px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 91, 151, 0.16), rgba(255, 255, 255, 0.82));
    border: 1px solid  rgba(196, 18, 48, 0.15);
    text-align: center;
}

.reviews-summary strong {
    display: block;
    color: var(--text);
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.reviews-summary span,
.review-helper-text,
.review-date,
.review-empty-state,
.review-card p {
    color: var(--text-soft);
}

.review-feedback-message {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    margin-bottom: 22px;
}

.review-feedback-message svg {
    flex-shrink: 0;
}

.review-feedback-message.is-success {
    background: #ecfdf5;
    color: #065f46 !important;
    border: 1px solid #a7f3d0;
}

.review-feedback-message.is-error {
    background: #fef2f2;
    color: #991b1b !important;
    border: 1px solid #fecaca;
}

html[data-theme="dark"] .review-feedback-message.is-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .review-feedback-message.is-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.product-reviews-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 28px;
}

.review-form-shell,
.reviews-list-shell {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--outline-soft);
    border-radius: 28px;
    padding: 26px;
    box-shadow: 0 16px 36px  rgba(196, 18, 48, 0.15);
}

.review-form {
    display: grid;
    gap: 14px;
}

.review-form label {
    color: var(--text);
    font-weight: 700;
}

.review-form textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--outline-soft);
    background: var(--input-bg, rgba(255, 255, 255, 0.96));
    color: var(--text);
    padding: 14px 16px;
}

.review-form textarea::placeholder {
    color: var(--text-soft);
}

.star-rating-group {
    display: flex;
    gap: 6px;
}

.star-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #d8ccd4;
    transition: color 0.15s, transform 0.1s;
    padding: 0 2px;
    line-height: 1;
}

.star-btn.is-active {
    color: #f5a623;
}

.star-btn:hover {
    transform: scale(1.2);
}

.review-form textarea {
    resize: vertical;
    min-height: 140px;
}

.review-submit-btn {
    width: fit-content;
    margin-top: 10px;
}

.review-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff5b97, #dc4376);
    color: #fff;
    font-weight: 800;
    margin-top: 10px;
}

.reviews-list {
    display: grid;
    gap: 16px;
}

.review-card {
    border-radius: 22px;
    border: 1px solid  rgba(196, 18, 48, 0.15);
    background: rgba(255, 255, 255, 0.84);
    padding: 20px;
}

.review-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.review-card strong,
.review-stars {
    color: var(--text);
}

.review-stars {
    font-weight: 800;
    color: var(--primary);
}

.review-date {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

.review-empty-state {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 22px;
    border: 1px dashed  rgba(196, 18, 48, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: var(--text-soft);
}
.review-empty-state svg { opacity: 0.5; }

/* ── Star glyphs (form selector, card ratings, summary) — shared SVG look ── */
.star-btn { background: none; border: none; cursor: pointer; padding: 2px; line-height: 1; transition: transform 0.12s ease; }
.star-btn svg { width: 28px; height: 28px; fill: #d8ccd4; stroke: none; transition: fill 0.15s ease, filter 0.15s ease; }
.star-btn.is-active svg { fill: #f5a623; filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.55)); }
.star-btn:hover { transform: scale(1.15); }
.star-rating-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.star-rating-microlabel { margin-left: 8px; font-size: 0.82rem; font-weight: 700; color: var(--primary, #C41230); min-height: 1.2em; }

.rr-score-stars svg, .review-stars svg { fill: #d8ccd4; }
.rr-score-stars svg.is-filled, .review-stars svg.is-filled { fill: #f5a623; }
.review-stars { display: inline-flex; gap: 1px; }

/* ── Social proof ribbon ── */
.rr-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    padding: 22px 26px;
    margin-bottom: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 91, 151, 0.1), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(196, 18, 48, 0.14);
}
.rr-score-block { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.rr-score-big { font-size: 3rem; font-weight: 900; line-height: 1; color: var(--text); }
.rr-score-stars { display: inline-flex; gap: 2px; margin: 2px 0; }
.rr-score-count { font-size: 0.85rem; color: var(--text-soft); }
.rr-recommend { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.85rem; color: var(--text-soft); }
.rr-recommend svg { color: #2fae66; flex-shrink: 0; }
.rr-recommend strong { color: var(--text); }

.rr-histogram { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 220px; max-width: 420px; }
.rr-hist-row {
    display: grid;
    grid-template-columns: 34px 1fr 38px;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 8px;
    font-family: inherit;
}
.rr-hist-row:hover { background: rgba(196, 18, 48, 0.06); }
.rr-hist-row.is-active { background: rgba(196, 18, 48, 0.1); }
.rr-hist-label { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 700; color: var(--text-soft); }
.rr-hist-label svg { fill: #f5a623; }
.rr-hist-track { height: 7px; border-radius: 9999px; background: rgba(148, 163, 184, 0.25); overflow: hidden; }
.rr-hist-fill { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #f5a623, #f5c34d); }
.rr-hist-pct { font-size: 0.76rem; color: var(--text-soft); text-align: right; }

/* ── Fit chips ── */
.rr-fit-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Review textarea + char counter ── */
.rr-textarea-wrap { position: relative; }
.rr-char-count { position: absolute; bottom: 10px; right: 14px; font-size: 0.72rem; color: var(--text-soft); pointer-events: none; }
html[dir="rtl"] .rr-char-count { right: auto; left: 14px; }

/* ── Photo upload ── */
.rr-photo-upload-label {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    padding: 9px 16px; border-radius: 9999px; border: 1px dashed var(--outline-soft);
    color: var(--text-soft); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.rr-photo-upload-label:hover { border-color: var(--primary, #C41230); color: var(--primary, #C41230); }

/* ── Review card extras: avatar, verified badge, fit tag, photo, helpful ── */
.review-card-who { display: flex; align-items: flex-start; gap: 10px; }
.review-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #fff; font-weight: 800; font-size: 0.85rem;
}
.review-verified-badge {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
    padding: 2px 8px; border-radius: 9999px; background: rgba(47, 174, 102, 0.14);
    color: #2fae66; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}
.review-fit-tag {
    display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 9999px;
    background: rgba(148, 163, 184, 0.16); color: var(--text-soft); font-size: 0.72rem; font-weight: 700;
}
.review-photo { display: block; max-width: 120px; border-radius: 12px; margin: 10px 0 4px; cursor: zoom-in; }
.review-helpful-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 7px 14px; border-radius: 9999px; border: 1px solid var(--outline-soft);
    background: none; color: var(--text-soft); font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.review-helpful-btn:hover { border-color: var(--primary, #C41230); color: var(--primary, #C41230); }
.review-helpful-btn.is-voted { background: rgba(196, 18, 48, 0.1); border-color: transparent; color: var(--primary, #C41230); }

/* ── Admin review moderation (delete / store reply) ── */
.review-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-card-actions .review-helpful-btn { margin-top: 0; }
.review-admin-btn {
    margin-top: 12px; padding: 7px 14px; border-radius: 9999px; border: 1px solid transparent;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.review-reply-btn { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.review-reply-btn:hover { background: rgba(37, 99, 235, 0.18); }
.review-delete-btn { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.review-delete-btn:hover { background: #e11d48; color: #fff; }

/* ── Customer self-service (edit / delete own review) ── */
.review-owner-btn {
    margin-top: 12px; padding: 7px 14px; border-radius: 9999px; border: 1px solid transparent;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.review-edit-btn { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.review-edit-btn:hover { background: rgba(37, 99, 235, 0.18); }

.rr-current-photo-label {
    display: block; font-size: 0.75rem; color: var(--text-soft); margin-top: -6px;
}

/* ── /recommended — curated "Recommended for You" page ── */
.reco-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    border-radius: 34px;
    padding: 40px 44px;
    color: #fff;
    margin-bottom: 30px;
    box-shadow: 0 22px 55px  rgba(196, 18, 48, 0.15);
}

.reco-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 16px;
}

.reco-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 10px;
    color: #fff;
}

.reco-hero-context {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 720px;
    opacity: 0.95;
    margin-bottom: 16px;
}

.order-receipt-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 3px 10px;
    border-radius: 9999px;
    text-decoration: underline;
    font-weight: 700;
    color: #fff;
    transition: background 0.18s ease;
}

.order-receipt-chip:hover {
    background: rgba(255, 255, 255, 0.32);
}

.reco-browse-link {
    display: inline-block;
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
    opacity: 0.9;
}

.reco-browse-link:hover {
    opacity: 1;
}

.reco-grid-section {
    margin-bottom: 40px;
}

.reco-card {
    position: relative;
}

.reco-match-tag {
    display: block;
    text-align: center;
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
}

.reco-match-tag-alt {
    background: linear-gradient(135deg, #f5b301, #d68a00);
    color: #1a1200;
}

.reco-quickview-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary, #C41230);
    text-decoration: none;
}

.reco-quickview-link:hover {
    text-decoration: underline;
}

html[data-theme="dark"] .reco-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 30%),
        linear-gradient(135deg, #5a1f3a, #3b1835 48%, #1d1422);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
}

html[dir="rtl"] .reco-hero {
    direction: rtl;
    text-align: right;
}

@media (max-width: 560px) {
    .reco-hero {
        padding: 28px 22px;
        border-radius: 26px;
    }
}

.review-reply-composer { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(148, 163, 184, 0.08); }
.review-reply-composer textarea {
    width: 100%; border-radius: 12px; border: 1px solid var(--outline-soft);
    background: var(--input-bg, #fff); color: var(--text); padding: 10px 12px; resize: vertical; min-height: 70px;
}
.review-reply-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.review-reply-composer-actions button {
    padding: 7px 14px; border-radius: 9999px; border: none; font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.btn-cancel-reply { background: rgba(148, 163, 184, 0.16); color: var(--text-soft); }
.btn-send-reply { background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25)); color: #fff; }

.review-store-reply {
    margin-top: 12px; padding: 12px 14px; border-radius: 14px;
    background: rgba(37, 99, 235, 0.06); border: 1px dashed rgba(37, 99, 235, 0.3);
}
.review-store-reply-badge {
    display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 9999px;
    background: #2563eb; color: #fff; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}
.review-store-reply p { margin: 0; color: var(--text); font-size: 0.86rem; line-height: 1.5; }

html[dir="rtl"] .product-details-card {
    grid-template-columns: 55% 45%;
}

html[dir="rtl"] .product-text-box,
html[dir="rtl"] .details-section,
html[dir="rtl"] .details-rating-row,
html[dir="rtl"] .details-price,
html[dir="rtl"] .details-review-meta,
html[dir="rtl"] .related-products-panel,
html[dir="rtl"] .review-form-shell,
html[dir="rtl"] .reviews-list-shell,
html[dir="rtl"] .review-card {
    text-align: right;
}

html[dir="rtl"] .details-breadcrumbs {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .product-image-box {
    order: 2;
}

html[dir="rtl"] .product-text-box {
    order: 1;
}

@media (max-width: 900px) {
    .product-details-card {
        grid-template-columns: 1fr;
    }

    .product-reviews-panel {
        width: min(1600px, calc(100% - 32px));
    }

    .related-products-panel {
        width: min(1600px, calc(100% - 32px));
        margin-top: -24px;
        padding: 24px;
    }

    .related-products-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .related-products-row {
        grid-auto-columns: minmax(210px, 74vw);
    }

    .related-products-carousel::before,
    .related-products-carousel::after {
        width: 46px;
    }

    .related-carousel-btn {
        top: 78px;
        width: 42px;
        height: 42px;
    }

    .related-carousel-btn-left {
        left: 8px;
    }

    .related-carousel-btn-right {
        right: 8px;
    }

    .product-reviews-card {
        padding: 24px;
    }

    .product-reviews-header,
    .product-reviews-grid,
    .review-card-top {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .product-details-card {
        padding: 14px;
    }

    .product-image-box {
        min-height: 0;
        aspect-ratio: 1 / 1;
        width: 100%;
        padding: 10px;
    }

    main {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Arrows live inside #productImageBox now (see the universal
       .gallery-arrow rules above) and stay absolutely positioned at every
       width, so no mobile-specific override is needed here anymore. Just
       pull them in a little tighter on narrow cards. */
    .gallery-arrow-prev {
        left: 10px;
    }

    .gallery-arrow-next {
        right: 10px;
    }

    .product-image-box img {
        height: auto;
        animation: none !important;
    }

    .product-image-rotator {
        height: 320px;
        animation: none !important;
    }

    .product-image-shine {
        animation: none !important;
    }

    .product-image-backdrop {
        display: none;
    }
}

@keyframes productSpin360 {
    0% {
        transform: rotateY(0deg) rotateX(4deg) scale(1.02);
    }
    100% {
        transform: rotateY(360deg) rotateX(4deg) scale(1.02);
    }
}

@keyframes productShineSweep {
    0% {
        transform: translate3d(-18%, -4%, 34px) rotate(0deg);
        opacity: 0.45;
    }
    50% {
        transform: translate3d(12%, 4%, 34px) rotate(10deg);
        opacity: 0.9;
    }
    100% {
        transform: translate3d(-18%, -4%, 34px) rotate(0deg);
        opacity: 0.45;
    }
}

/* =========================
   Admin Dashboard Pro
========================= */
.nav-admin {
    display: flex;
    align-items: center;
}

.nav-admin a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 95, 158, 0.16),  rgba(196, 18, 48, 0.15));
    color: var(--primary-dark);
    font-weight: 800;
    border: 1px solid  rgba(196, 18, 48, 0.15);
    box-shadow: 0 8px 18px  rgba(196, 18, 48, 0.15);
}

.nav-admin a:hover {
    background: linear-gradient(135deg, rgba(255, 95, 158, 0.22),  rgba(196, 18, 48, 0.15));
    color: var(--primary-dark);
}

.user-avatar {
    overflow: hidden;
    border: none;
}

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

.admin-dashboard-pro {
    padding-top: 10px;
    width: 100%;
}

/* =========================
   Analytics Page
========================= */
.an-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.an-kpi-card {
    background: var(--white, #fff);
    border-radius: 20px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 18px  rgba(196, 18, 48, 0.15);
    border: 1px solid  rgba(196, 18, 48, 0.15);
    transition: box-shadow 0.2s;
}

.an-kpi-card:hover {
    box-shadow: 0 8px 28px  rgba(196, 18, 48, 0.15);
}

.an-kpi-ring-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.an-kpi-ring {
    width: 56px;
    height: 56px;
    transform: rotate(-90deg);
}

.an-ring-track {
    fill: none;
    stroke:  rgba(196, 18, 48, 0.15);
    stroke-width: 5;
}

.an-ring-fill {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.8s ease;
}

.an-kpi-ring-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.an-kpi-body {
    min-width: 0;
}

.an-kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted, #6f6470);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.an-kpi-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text, #222);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-kpi-sub {
    font-size: 0.78rem;
    color: var(--muted, #6f6470);
    margin-top: 2px;
}

/* Chart rows */
.an-chart-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.an-chart-panel {
    background: var(--white, #fff);
    border-radius: 20px;
    padding: 22px 20px 18px;
    box-shadow: 0 4px 18px  rgba(196, 18, 48, 0.15);
    border: 1px solid  rgba(196, 18, 48, 0.15);
}

.an-chart-panel-lg {
    /* default, takes 1.6fr */
}

.an-transactions-panel {
    margin-bottom: 40px;
}

.an-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.an-panel-head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #222);
    margin-top: 2px;
}

.an-revenue-total {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary, #C41230);
    margin-top: 4px;
}

.an-canvas-wrap {
    position: relative;
    height: 220px;
}

.an-canvas-doughnut {
    height: 180px;
}

/* Doughnut legend */
.an-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.an-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text, #222);
}

.an-legend-item strong {
    margin-left: auto;
    font-weight: 700;
}

.an-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Table tweaks */
.an-table code {
    font-size: 0.78rem;
    background:  rgba(196, 18, 48, 0.15);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--primary, #C41230);
}

/* Dark mode */
html[data-theme="dark"] .an-kpi-card,
html[data-theme="dark"] .an-chart-panel {
    background: #2a1f28;
    border-color: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .an-kpi-value,
html[data-theme="dark"] .an-panel-head h2,
html[data-theme="dark"] .an-legend-item {
    color: #e8eaf6;
}

html[data-theme="dark"] .an-ring-track {
    stroke: rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 1100px) {
    .an-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .an-chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .an-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================
   Admin Orders Page
========================= */
.orders-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.orders-search-input {
    flex: 1;
    min-width: 220px;
    border: 1px solid var(--border, #e0e2ed);
    border-radius: 14px;
    padding: 11px 16px;
    font-size: 0.92rem;
    background: var(--input-bg, #fff);
    color: var(--text, #222);
    outline: none;
    transition: border-color 0.18s;
}

.orders-search-input:focus {
    border-color: var(--primary, #C41230);
}

/* Status tabs */
.orders-status-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border, #e0e2ed);
    padding-bottom: 0;
}

.orders-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px 10px 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted, #6f6470);
    text-decoration: none;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.orders-tab:hover {
    color: var(--primary, #C41230);
}

.orders-tab.active {
    color: var(--primary, #C41230);
    border-color: var(--border, #e0e2ed);
    border-bottom-color: var(--white, #fff);
    background: var(--white, #fff);
}

html[data-theme="dark"] .orders-tab.active {
    border-bottom-color: #2a1f28;
    background: #2a1f28;
}

.orders-tab-count {
    background:  rgba(196, 18, 48, 0.15);
    color: var(--primary, #C41230);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Table */
.orders-table td { vertical-align: top; padding: 14px 12px; }

.orders-customer-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orders-customer-cell strong { font-size: 0.9rem; }

.orders-customer-cell span {
    font-size: 0.78rem;
    color: var(--muted, #6f6470);
}

.orders-date-cell {
    font-size: 0.83rem;
    color: var(--muted, #6f6470);
    white-space: nowrap;
}

.order-number-code {
    font-family: monospace;
    font-size: 0.82rem;
    background:  rgba(196, 18, 48, 0.15);
    color: var(--primary, #C41230);
    padding: 3px 8px;
    border-radius: 7px;
    white-space: nowrap;
}

.order-number-link {
    text-decoration: none;
}
.order-number-link:hover .order-number-code {
    background:  rgba(196, 18, 48, 0.15);
    text-decoration: underline;
}

/* ===== Admin Order Detail Page ===== */
.admin-order-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.admin-order-detail-hero .eyebrow { margin-bottom: 4px; }
.admin-order-detail-hero h1 { margin: 0 0 4px; font-size: 1.7rem; }
.admin-order-detail-hero p { color: #888; margin: 0; }
/* ══════════════════════════════════════════════════════════════════
   MODULE 2: Thermal shipping label — hidden on screen, only rendered
   inside @media print (see far below) while body has
   .printing-thermal-label, so a normal Ctrl+P on this page still prints
   the regular admin layout, and the label only appears via its own
   dedicated button.
   ══════════════════════════════════════════════════════════════════ */
.thermal-label-print {
    display: none;
}

.admin-order-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .admin-order-detail-layout { grid-template-columns: 1fr; }
}
.admin-order-detail-panel {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,0.07);
    margin-bottom: 20px;
}
.admin-order-detail-panel h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.admin-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #f7f7f7;
}
.admin-detail-row:last-child { border-bottom: none; }
.admin-detail-row span { color: #888; }
.admin-detail-row strong { color: #222; text-align: right; }
.admin-order-item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}
.admin-order-item-card:last-child { border-bottom: none; }
.admin-order-item-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #eee;
    flex-shrink: 0;
}
.admin-order-item-info { flex: 1; min-width: 0; }
.admin-order-item-info .item-cat { font-size: 0.72rem; color: #aaa; text-transform: uppercase; margin-bottom: 2px; }
.admin-order-item-info .item-name { font-weight: 600; font-size: 0.9rem; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-order-item-info .item-brand { font-size: 0.78rem; color: #888; }
.admin-order-item-info .item-qty { font-size: 0.8rem; color: #666; margin-top: 3px; }
.admin-order-item-price { font-weight: 700; font-size: 0.95rem; color: var(--primary, #C41230); white-space: nowrap; }
.admin-order-status-form { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.admin-order-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: #888; text-decoration: none; margin-bottom: 18px; }
.admin-order-back-btn:hover { color: var(--primary, #C41230); }

.orders-payment-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(74,144,217,0.1);
    color: #4a90d9;
    text-transform: capitalize;
}

/* Action buttons */
.orders-action-btn {
    border: none;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    white-space: nowrap;
}

.orders-action-btn.is-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.55;
}

.admin-order-locked-note {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0;
}

.orders-action-btn:hover { opacity: 0.85; transform: scale(1.03); }

.btn-confirm {
    background: linear-gradient(135deg, #C41230, #ff7aa2);
    color: #fff;
}

.btn-ship {
    background: linear-gradient(135deg, #4a90d9, #6ab0f5);
    color: #fff;
}

.btn-deliver {
    background: linear-gradient(135deg, #28a745, #48c96a);
    color: #fff;
}

.btn-cancel {
    background: transparent;
    color: #9A0E25;
    border: 1px solid rgba(196, 18, 48, 0.3);
}

.orders-action-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.orders-row:hover { background:  rgba(196, 18, 48, 0.15); }

@media (max-width: 900px) {
    .orders-table thead th:nth-child(3),
    .orders-table td:nth-child(3) { display: none; }
}

.admin-dashboard-pro .hero-btn,
.admin-dashboard-pro .secondary-btn,
.admin-dashboard-pro .text-link {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.admin-dashboard-pro .hero-btn:hover,
.admin-dashboard-pro .secondary-btn:hover {
    transform: translateY(-2px);
}

.admin-workspace {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.admin-rail,
.admin-panel-pro,
.admin-shell-header,
.admin-kpi-card-pro {
    border: 1px solid rgba(30, 36, 118, 0.12);
    box-shadow: 0 22px 48px rgba(30, 36, 118, 0.08);
}

.admin-rail {
    position: sticky;
    top: 96px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    border-radius: 28px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-rail-brand h2 {
    font-size: 1.7rem;
    line-height: 1;
    margin: 8px 0 10px;
    color: #2e2430;
}

.admin-rail-brand p {
    font-size: 0.82rem;
    line-height: 1.55;
}

.admin-rail-brand p,
.admin-kpi-card-pro p,
.admin-alert-card p,
.admin-list-item p,
.admin-empty-state p,
.admin-inline-message,
.admin-stat-row span,
.chart-row-head span,
.admin-shell-header p,
.admin-panel-meta,
.admin-table td,
.admin-modern-form label,
.admin-modern-form input,
.admin-modern-form select,
.admin-modern-form textarea {
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--primary-dark);
}

.admin-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-rail-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #625966;
    font-weight: 800;
    font-size: 0.93rem;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.admin-rail-link:hover,
.admin-rail-link.active {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    transform: translateX(5px);
    box-shadow: 0 14px 32px rgba(196, 18, 48, 0.22);
}

.admin-rail-link:active { transform: translateX(2px) scale(0.99); }

.admin-rail-link-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity var(--transition);
}

.admin-rail-link:hover .admin-rail-link-dot,
.admin-rail-link.active .admin-rail-link-dot {
    transform: scale(1.35);
    opacity: 1;
    background: rgba(255,255,255,0.92);
}

.admin-rail-card {
    background: linear-gradient(180deg, rgba(30, 36, 118, 0.05), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(30, 36, 118, 0.1);
    border-radius: 20px;
    padding: 16px;
}

.admin-rail-card-soft {
    background: linear-gradient(180deg, rgba(196, 18, 48, 0.04), rgba(255, 255, 255, 0.98));
}

.admin-rail-card strong {
    display: block;
    margin: 6px 0 8px;
    color: #2d2430;
    font-size: 1.08rem;
}

.admin-rail-stats {
    display: grid;
    gap: 14px;
}

.admin-rail-stats span {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.admin-rail-stats strong {
    margin: 0;
    font-size: 1.5rem;
}

.admin-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-shell-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    border-radius: 38px;
    padding: 34px 38px;
    color: #fff;
}

.admin-shell-header .eyebrow,
.admin-shell-header p,
.admin-shell-header h1 {
    color: #fff;
}

.admin-shell-header h1 {
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    line-height: 0.95;
    margin: 10px 0 16px;
    font-weight: 900;
}

.admin-shell-header p:last-child {
    max-width: 640px;
    font-size: 1.08rem;
    line-height: 1.7;
    opacity: 0.96;
}

.admin-shell-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 360px;
}

.admin-shell-actions-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    max-width: 360px;
}

.admin-export-orders-btn {
    width: 100%;
    background: #1a7a36;
    color: #ffffff;
}

.admin-export-orders-btn:hover {
    background: #15602b;
    color: #ffffff;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 14px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: #63586a;
    font-weight: 800;
    border: 1.5px solid rgba(30, 36, 118, 0.15);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}

.secondary-btn:hover {
    color: var(--primary-dark);
    background: #fff;
    border-color:  rgba(196, 18, 48, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px  rgba(196, 18, 48, 0.15);
}

.secondary-btn:active { transform: scale(0.98); }

.admin-kpi-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.admin-kpi-band .admin-kpi-topline {
    flex-wrap: wrap;
    row-gap: 8px;
}

.admin-kpi-band .admin-kpi-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.admin-kpi-band .admin-kpi-chip {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .admin-kpi-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-kpi-card-pro {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    padding: 24px 26px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.3s ease;
    will-change: transform;
}

.admin-kpi-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.admin-kpi-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 56px  rgba(196, 18, 48, 0.15);
}

.admin-kpi-card-pro strong {
    display: block;
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
    line-height: 0.95;
    color: #2d2330;
    margin: 10px 0 14px;
}

.admin-kpi-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-kpi-label {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--primary-dark);
}

.admin-kpi-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(196, 18, 48, 0.10);
    color: var(--primary-dark);
    font-weight: 800;
}

.admin-kpi-chip-muted {
    background: rgba(153, 126, 144, 0.14);
    color: #746572;
}

.admin-kpi-chip-warm {
    background: rgba(255, 199, 94, 0.24);
    color: #9f6f00;
}

.accent-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(30, 36, 118, 0.04));
}

.warning-card {
    background: linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(255, 255, 255, 0.96));
}

.blue-card {
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.purple-card {
    background: linear-gradient(180deg, rgba(248, 245, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.green-card {
    background: linear-gradient(180deg, rgba(243, 252, 246, 0.98), rgba(255, 255, 255, 0.96));
}

.admin-kpi-chip-blue {
    background: rgba(74, 144, 217, 0.15);
    color: #1a5fa0;
}

.admin-kpi-chip-purple {
    background: rgba(155, 89, 182, 0.15);
    color: #6c3999;
}

.admin-kpi-chip-green {
    background: rgba(40, 167, 69, 0.15);
    color: #1a7a36;
}

/* ===== Orders KPI Cards ===== */
.orders-kpi-band {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.okpi-card {
    position: relative;
    background: rgba(255,255,255,0.94);
    border-radius: 24px;
    padding: 22px 20px 18px;
    border: 1.5px solid rgba(235, 215, 225, 0.8);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.3s ease;
    will-change: transform;
    animation: scaleIn 0.4s ease both;
}

.okpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 24px 24px 0 0;
}

.okpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.09);
}

.okpi-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.okpi-body {
    flex: 1;
}

.okpi-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 4px;
}

.okpi-value {
    display: block;
    font-size: clamp(2.2rem, 2.8vw, 3rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.okpi-sub {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
}

.okpi-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    width: fit-content;
}

/* ---- Color variants ---- */
.okpi-pink::before  { background: linear-gradient(90deg, #C41230, #ff8fa8); }
.okpi-amber::before { background: linear-gradient(90deg, #f5a623, #ffd166); }
.okpi-blue::before  { background: linear-gradient(90deg, #4a90d9, #74b7f5); }
.okpi-purple::before{ background: linear-gradient(90deg, #9b59b6, #c68de0); }
.okpi-green::before { background: linear-gradient(90deg, #28a745, #56d079); }
.okpi-grey::before  { background: linear-gradient(90deg, #6b7280, #a3a9b4); }

.okpi-pink  .okpi-label { color: #9A0E25; }
.okpi-amber .okpi-label { color: #a06800; }
.okpi-blue  .okpi-label { color: #2060ab; }
.okpi-purple .okpi-label{ color: #6c3999; }
.okpi-green .okpi-label { color: #1a7a36; }
.okpi-grey  .okpi-label { color: #4b5563; }

.okpi-pink  .okpi-value { color: #2d2330; }
.okpi-amber .okpi-value { color: #2d2330; }
.okpi-blue  .okpi-value { color: #2d2330; }
.okpi-purple .okpi-value{ color: #2d2330; }
.okpi-green .okpi-value { color: #2d2330; }
.okpi-grey  .okpi-value { color: #2d2330; }

.okpi-pink  .okpi-badge { background:  rgba(196, 18, 48, 0.15);  color: #9A0E25; }
.okpi-amber .okpi-badge { background: rgba(245,166,35,0.14); color: #8c5a00; }
.okpi-blue  .okpi-badge { background: rgba(74,144,217,0.12); color: #2060ab; }
.okpi-purple .okpi-badge{ background: rgba(155,89,182,0.12); color: #6c3999; }
.okpi-green .okpi-badge { background: rgba(40,167,69,0.12);  color: #1a7a36; }
.okpi-grey  .okpi-badge { background: rgba(107,114,128,0.14); color: #4b5563; }

/* Stagger */
.okpi-card:nth-child(1) { animation-delay: 0.05s; }
.okpi-card:nth-child(2) { animation-delay: 0.10s; }
.okpi-card:nth-child(3) { animation-delay: 0.15s; }
.okpi-card:nth-child(4) { animation-delay: 0.20s; }
.okpi-card:nth-child(5) { animation-delay: 0.25s; }
.okpi-card:nth-child(6) { animation-delay: 0.30s; }

@media (max-width: 1200px) {
    .orders-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .orders-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark mode */
html[data-theme="dark"] .okpi-card {
    background: rgba(18, 22, 45, 0.94);
    border-color: rgba(90, 68, 88, 0.7);
}
html[data-theme="dark"] .okpi-pink  .okpi-label  { color: #ff8ab4; }
html[data-theme="dark"] .okpi-amber .okpi-label  { color: #ffc966; }
html[data-theme="dark"] .okpi-blue  .okpi-label  { color: #74b7f5; }
html[data-theme="dark"] .okpi-purple .okpi-label { color: #c68de0; }
html[data-theme="dark"] .okpi-green .okpi-label  { color: #56d079; }
html[data-theme="dark"] .okpi-grey  .okpi-label  { color: #b6bcc7; }
html[data-theme="dark"] .okpi-value { color: #e8eaf6 !important; }
html[data-theme="dark"] .okpi-badge { opacity: 0.9; }

.admin-shell-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
    gap: 24px;
    align-items: start;
}

.admin-shell-main,
.admin-shell-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-split-grid,
.admin-chart-grid,
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-region-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 12px;
}

.admin-region-picker input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #ebd8e0;
    background: #fff;
    font: inherit;
    outline: none;
    color: var(--muted);
}

.admin-region-picker input:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px rgba(196, 18, 48, 0.15);
}

.admin-region-picker input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .admin-region-picker { grid-template-columns: 1fr; }
}

html[data-theme="dark"] .admin-region-picker input {
    background: rgba(15, 18, 38, 0.97);
    border-color: rgba(50, 60, 120, 0.6);
    color: #e8eaf6;
}

.form-section-divider {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(30,36,118,.5);
    padding: 6px 0 4px;
    border-bottom: 1.5px solid rgba(30,36,118,.1);
    margin-top: 6px;
}
html[data-theme="dark"] .form-section-divider {
    color: rgba(180,170,220,.5);
    border-bottom-color: rgba(120,100,180,.18);
}

.admin-panel-pro {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 30px;
    padding: 24px;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.admin-panel-head h2 {
    color: #261f29;
    font-size: 1.32rem;
    margin-top: 6px;
}

.admin-panel-head-centered {
    justify-content: center;
}

.admin-panel-head-copy-centered {
    width: 100%;
    text-align: center;
}

.admin-panel-head-copy-centered .eyebrow,
.admin-panel-head-copy-centered h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.admin-panel-meta {
    font-size: 0.92rem;
    font-weight: 700;
}

.text-link {
    color: var(--primary-dark);
    font-weight: 800;
}

.text-link:hover {
    color: var(--primary);
}

.admin-chart-card {
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 248, 251, 0.98), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(241, 222, 231, 0.92);
}

.admin-chart-card h3 {
    margin-bottom: 16px;
    color: #2d2430;
}

.chart-stack {
    display: grid;
    gap: 16px;
}

.chart-row {
    display: grid;
    gap: 8px;
}

.chart-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chart-row-head strong {
    color: #302731;
}

.chart-bar-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #f3e6eb;
    overflow: hidden;
}

.chart-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
}

.chart-fill-primary {
    background: linear-gradient(90deg, #E8304A, #C41230);
}

.chart-fill-secondary {
    background: linear-gradient(90deg, #ff9aa7, #ff8579);
}

.chart-fill-tertiary {
    background: linear-gradient(90deg, #c78cff, #C41230);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(242, 225, 232, 0.8);
    vertical-align: middle;
}

.admin-table th {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-dark);
    font-weight: 900;
    background: rgba(255, 246, 250, 0.7);
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-table thead tr th:first-child { border-radius: 14px 0 0 14px; }
.admin-table thead tr th:last-child  { border-radius: 0 14px 14px 0; }

.admin-table tbody tr {
    transition: background var(--transition-fast);
}

.admin-table tbody tr:hover { background: rgba(255, 246, 250, 0.55); }

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-paid {
    background: rgba(66, 190, 125, 0.14);
    color: #1a8a4e;
    border: 1px solid rgba(66, 190, 125, 0.22);
}

.status-pending {
    background: rgba(255, 187, 61, 0.15);
    color: #8c5a00;
    border: 1px solid rgba(255, 187, 61, 0.28);
}

.status-neutral {
    background: rgba(153, 126, 144, 0.12);
    color: #6d6270;
    border: 1px solid rgba(153, 126, 144, 0.2);
}

.status-shipped {
    background: rgba(72, 142, 235, 0.13);
    color: #2060ab;
    border: 1px solid rgba(72, 142, 235, 0.22);
}

.status-delivered {
    background: rgba(32, 174, 136, 0.13);
    color: #14745b;
    border: 1px solid rgba(32, 174, 136, 0.22);
}

.status-cancelled {
    background: rgba(120, 120, 130, 0.13);
    color: #5a5560;
    border: 1px solid rgba(120, 120, 130, 0.24);
    text-decoration: line-through;
}

.status-returned {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.25);
}

/* Mobile "Latest Orders" cards — parallel rendering to .admin-table, shown
   instead of it below 768px (toggle lives in the @media block further
   down). Hidden by default so desktop/tablet keeps the real table. */
.admin-orders-cards {
    display: none;
}

.admin-order-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 14px;
    border: 1px solid rgba(30, 36, 118, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.admin-order-card:last-child {
    margin-bottom: 0;
}

.admin-order-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-order-card-id {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
    /* Truncate neatly instead of wrapping/overflowing — the full number is
       still available via the title tooltip and the order-detail link. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-order-card-top .status-pill {
    flex-shrink: 0;
}

.admin-order-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.admin-order-card-amount {
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 900;
}

.admin-order-card-payment {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: capitalize;
}

html[data-theme="dark"] .admin-order-card {
    background: rgba(22, 18, 36, 0.9);
    border-color: rgba(80, 60, 100, 0.28);
}

.admin-status-btn {
    min-width: 92px;
    padding: 9px 14px;
}

.admin-alert-list,
.admin-list,
.admin-stat-stack {
    display: grid;
    gap: 14px;
}

.admin-alert-card,
.admin-list-item,
.admin-stat-row,
.admin-inline-message,
.admin-empty-state {
    border-radius: 22px;
    border: 1px solid rgba(241, 223, 231, 0.95);
    background: linear-gradient(180deg, rgba(255, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.subcat-group-header {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #c13b6f;
    margin: 12px 0 4px 4px;
}

.admin-alert-card {
    padding: 18px;
}

.admin-alert-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-alert-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(196, 18, 48, 0.15);
}

.admin-alert-card strong,
.admin-list-item strong,
.admin-stat-row strong,
.admin-empty-state h3 {
    color: #2d2430;
}

.admin-alert-card span {
    display: inline-block;
    margin: 10px 0 8px;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-dark);
}

.admin-alert-card.warning {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-alert-card.info {
    background: linear-gradient(180deg, rgba(247, 244, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-alert-card.good {
    background: linear-gradient(180deg, rgba(242, 255, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-list-item,
.admin-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.admin-list-item-expandable {
    flex-direction: column;
    align-items: stretch;
}

.admin-list-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    flex-wrap: wrap;
}

.gov-regions-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(196, 18, 48, 0.18);
}

.gov-add-region-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.gov-add-region-form input[type="text"] {
    flex: 1 1 200px;
}

.gov-regions-list {
    display: grid;
    gap: 10px;
}

.gov-region-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(196, 18, 48, 0.04);
    border: 1px solid rgba(241, 223, 231, 0.95);
}

html[data-theme="dark"] .gov-regions-panel {
    border-top-color: rgba(120, 60, 90, 0.3);
}

html[data-theme="dark"] .gov-region-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(50, 60, 120, 0.3);
}

.admin-list-item strong {
    display: block;
    margin-bottom: 4px;
}

.recent-users-list .admin-list-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    min-height: 88px;
    padding: 18px 20px;
}

.recent-users-list .recent-user-copy {
    grid-column: 2;
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.recent-users-list .recent-user-copy strong {
    font-size: 1rem;
}

.recent-users-list .recent-user-copy p {
    margin: 0;
    font-size: 0.96rem;
    overflow-wrap: break-word;
}

.promo-code-item {
    display: grid;
    gap: 14px;
    align-items: stretch;
    padding: 18px 20px;
}

.promo-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.promo-code-header strong {
    margin-bottom: 0;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

.promo-description {
    margin: 0;
    color: #6a5f6b;
    line-height: 1.7;
    font-size: 1rem;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.promo-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.promo-inline-form {
    margin: 0;
}

.promo-edit-panel {
    width: auto;
}

.promo-edit-panel summary {
    list-style: none;
}

.promo-edit-panel summary::-webkit-details-marker {
    display: none;
}

.promo-edit-form {
    margin-top: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(241, 223, 231, 0.95);
    background: rgba(255, 255, 255, 0.94);
    min-width: min(100%, 520px);
    box-shadow: 0 16px 32px  rgba(196, 18, 48, 0.15);
}

.promo-form-actions {
    display: flex;
    justify-content: flex-end;
}

.promo-action-btn {
    min-width: 110px;
    justify-content: center;
}

.promo-code-item .status-pill {
    flex-shrink: 0;
}

html[dir="rtl"] .promo-code-header,
html[dir="rtl"] .promo-actions-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .promo-description {
    text-align: right;
}

html[dir="rtl"] .site-footer-inner,
html[dir="rtl"] .site-social-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .site-footer-copy,
html[dir="rtl"] .site-social-text {
    text-align: center;
}

.compact-list .admin-list-item {
    padding: 14px 16px;
}

.admin-modern-form {
    display: grid;
    gap: 16px;
}

.admin-mini-form .hero-btn {
    width: 100%;
}

.form-field {
    display: grid;
    gap: 8px;
}

.admin-modern-form label {
    font-weight: 800;
}

.admin-modern-form input,
.admin-modern-form select,
.admin-modern-form textarea {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #ebd8e0;
    background: #fff;
    font: inherit;
    outline: none;
}

.admin-modern-form textarea {
    line-height: 1.6;
    resize: vertical;
}

.admin-modern-form input:focus,
.admin-modern-form select:focus,
.admin-modern-form textarea:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.admin-inline-message,
.admin-empty-state {
    padding: 18px;
}

.admin-empty-state {
    text-align: center;
}

.admin-dashboard-gallery-panel {
    overflow: hidden;
}

.admin-dashboard-gallery-head {
    align-items: flex-start;
}

.admin-dashboard-gallery-copy {
    max-width: 760px;
    line-height: 1.7;
    color: var(--muted);
}

.admin-powerbi-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffe083, #ffbf3c);
    color: #5a3d00;
    font-weight: 900;
    border: 1px solid rgba(255, 191, 60, 0.55);
    box-shadow: 0 18px 30px rgba(255, 191, 60, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.admin-powerbi-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px rgba(255, 191, 60, 0.26);
    filter: saturate(1.04);
}

.admin-powerbi-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.admin-powerbi-icon svg {
    width: 22px;
    height: 22px;
}

.admin-dashboard-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-dashboard-shot {
    position: relative;
    display: block;
    min-height: 280px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(240, 220, 229, 0.9);
    background: linear-gradient(180deg, rgba(255, 248, 251, 0.98), rgba(255, 255, 255, 0.96));
    box-shadow: 0 18px 34px  rgba(196, 18, 48, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.admin-dashboard-shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 42px  rgba(196, 18, 48, 0.15);
}

.admin-dashboard-shot::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(38, 31, 41, 0), rgba(38, 31, 41, 0.74));
    pointer-events: none;
}

.admin-dashboard-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.admin-dashboard-shot-feature {
    grid-column: span 2;
    min-height: 360px;
}

.admin-dashboard-shot-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 1;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

@media (max-width: 1060px) {
    /* minmax(0, 1fr) — not bare 1fr — so the single track can shrink below
       its widest descendant's min-content width (the orders table, the
       header action-button row, etc.). A bare `1fr` track's automatic
       minimum size is its content's min-content size, which silently forced
       the entire page wider than the viewport on mobile (same root cause as
       the earlier navbar-logo overflow bug: grid/flex items don't shrink
       past their content's intrinsic width unless min-width:0 is explicit). */
    .admin-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-rail {
        position: static;
    }

    .admin-shell-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .admin-shell-header {
        flex-direction: column;
        padding: 28px 24px;
    }

    .admin-shell-actions {
        justify-content: flex-start;
        max-width: none;
    }

    /* minmax(0, 1fr): same fix as .admin-workspace above — a bare 1fr track
       won't shrink below its content's min-content width. */
    .admin-kpi-band,
    .orders-kpi-band,
    .admin-chart-grid,
    .admin-split-grid,
    .admin-form-grid,
    .admin-dashboard-gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-kpi-card-pro {
        min-height: unset;
    }

    .admin-dashboard-shot-feature {
        grid-column: auto;
        min-height: 300px;
    }
}

@media (max-width: 700px) {
    main {
        width: 100%;
        padding: 18px 14px 56px;
    }

    .admin-rail,
    .admin-panel-pro {
        padding: 18px;
        border-radius: 24px;
    }

    .admin-shell-header {
        border-radius: 28px;
    }

    .admin-shell-header h1 {
        font-size: 2.4rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 14px 10px;
    }
}

@media (max-width: 768px) {
    /* ── FIX 1: overflow backstop ─────────────────────────────
       The actual overflow source (a bare `1fr` grid track refusing to
       shrink below its widest descendant) is fixed above at the
       .admin-workspace/.admin-shell-grid/.admin-kpi-band level. This is a
       defensive belt-and-braces layer on top: clip anything that still
       tries to push past the container edge (e.g. the .admin-rail-link
       active-state translateX(5px) hover/active shift) instead of letting
       it silently widen the page's scrollable area. */
    .admin-dashboard-pro,
    .admin-workspace,
    .admin-shell,
    .admin-shell-grid,
    .admin-shell-main,
    .admin-shell-side {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ── FIX 2: orders table -> stacked cards ─────────────────
       Swap the two parallel renderings from the template — the table (with
       nowhere to shrink a 4th "Status" column) hands off to
       .admin-order-card, which stacks order id + status on one line and
       amount + payment on the next. */
    .admin-table-wrap {
        display: none;
    }

    .admin-orders-cards {
        display: block;
    }

    /* ── FIX 3: compact dashboard header ───────────────────────
       .admin-shell-actions already wraps (flex-wrap:wrap, set above) so the
       4 action buttons never force horizontal scroll; this just tightens
       spacing now that they're stacked under the heading on a narrow
       screen. The *site* header/logo/icon-cluster overflow was already
       fixed separately in the shared navbar (see the header media query). */
    .admin-shell-header {
        padding: 24px 20px;
    }

    .admin-shell-actions {
        max-width: 100%;
        width: 100%;
    }

    .admin-shell-actions a {
        flex: 1 1 auto;
        text-align: center;
    }

    /* ── FIX 4: metric & analytics cards ───────────────────────
       Column layout, full width, and text/bars that can never exceed their
       card regardless of how long a category or payment-method label is. */
    .admin-kpi-card-pro,
    .admin-panel-pro,
    .admin-rail-card,
    .admin-alert-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
    }

    .admin-kpi-band,
    .admin-split-grid,
    .admin-chart-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .chart-row-head span,
    .admin-alert-card strong,
    .admin-alert-card p,
    .admin-rail-card strong {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .chart-bar-track {
        max-width: 100%;
    }

    /* The active/hover nav-link shift is a hover affordance that doesn't
       apply on touch anyway, and translateX ink can nudge scrollWidth past
       the viewport on some engines even with overflow-x:hidden upstream —
       simplest to just not shift it on mobile. */
    .admin-rail-link:hover,
    .admin-rail-link.active {
        transform: none;
    }

    /* ── FIX 5: safe bottom margin ──────────────────────────────
       The floating AI chatbot FAB docks bottom-right on every page; on the
       dashboard specifically the last content before the footer is the
       Operational Alerts / Snapshots cards, which it would otherwise sit
       on top of. */
    main:has(.admin-dashboard-pro) {
        padding-bottom: 80px;
    }
}

/* =========================
   Restored Shared UI
========================= */
.navbar {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #ffffff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #111111;
}

.site-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    min-width: 0;
    flex-wrap: nowrap;
}

.nav-links-cluster {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    min-width: 0;
    flex: 1;
    flex-wrap: nowrap;
}

.nav-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-shrink: 0;
}

/* MODULE 4: exact 44px pill with a concentric 34px submit circle nestled
   inside its right edge (5px breathing room top/bottom/right) — was 48px
   overall with a 40px button before, close but not the precise spec size. */
.nav-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    height: 44px;
    padding: 5px;
    border-radius: 9999px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    flex: 1 1 480px;
    max-width: 640px;
    min-width: 220px;
    overflow: hidden;
    box-sizing: border-box;
    transition: var(--btn-transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
}

.nav-search-form:focus-within {
    border-color: rgba(196, 18, 48, 0.35);
    background: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(196, 18, 48, 0.08);
    transform: scale(1.015);
}

.nav-search-form input {
    width: 100%;
    height: 100%;
    padding: 0 8px 0 14px;
    border-radius: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: #111;
}

.nav-search-form input:focus {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

/* Sleek integrated icon button — a concentric circle centered inside the
   pill's right side, not a separate shape bolted onto the end. */
.nav-search-form button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: var(--btn-transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: 0 2px 8px rgba(196, 18, 48, 0.3);
}

.nav-search-form button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-search-form button:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.42);
}

.nav-search-form button:active { transform: scale(0.96); }

.nav-search-form .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.nav-primary > a,
.nav-drop-title {
    color: #111111;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.18s ease;
}

.nav-primary > a:hover,
.nav-drop-title:hover {
    color: #555555;
}

.nav-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nav-cart-icon {
    font-size: 1.08rem;
    line-height: 1;
}

.nav-dropdown {
    position: relative;
}

.nav-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.language-toggle {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: 0.18s ease;
}

.language-toggle:hover {
    background: #eef2f7;
    color: #0f172a;
    transform: none;
    box-shadow: none;
}

.nav-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 6px;
    background: #111111;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background 0.18s ease;
}

.nav-signup:hover {
    background: #333333;
}

.nav-wishlist-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    padding: 6px;
    border-radius: 6px;
    transition: color 0.18s ease;
    line-height: 1;
}

.nav-wishlist-link:hover {
    color: #e53e3e;
}

.hero-modern {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 320px;
    background:
        linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.03) 100%),
        url("images/hero-z.png");
    background-size: cover;
    background-position: center center;
    border-radius: 0;
    box-shadow: none;
    padding: 32px 48px;
    margin: 0;
    position: relative;
    text-align: left;
}

html[dir="rtl"] body,
body.rtl-layout {
    text-align: right;
}

html[dir="rtl"] .navbar {
    direction: rtl;
}

html[dir="rtl"] .nav-account {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .nav-search-form input,
html[dir="rtl"] .chatbot-input-row input {
    text-align: right;
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .section-header,
html[dir="rtl"] .section-header-left,
html[dir="rtl"] .empty-state,
html[dir="rtl"] .product-info {
    text-align: right;
}

html[dir="rtl"] .price-row,
html[dir="rtl"] .product-meta-top,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .nav-primary,
html[dir="rtl"] .nav-links-cluster {
    flex-direction: row-reverse;
}

html[dir="rtl"] .user-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .chatbot-header,
html[dir="rtl"] .chatbot-input-row {
    direction: rtl;
}

.hero-content {
    max-width: 680px;
    position: relative;
    z-index: 2;
    text-align: left;
}

.hero-content h1 {
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    line-height: 0.92;
    max-width: 680px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 10px 0 16px;
}

.hero-content span {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hero-content p {
    font-size: 1rem;
    color: rgba(255,255,255,0.82);
    max-width: 480px;
    line-height: 1.55;
    margin-bottom: 0;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hero-stats {
    display: none;
}

.last-order-recommendations {
    display: grid;
    gap: 22px;
    margin: 28px 0 34px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 229, 0.46), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 251, 0.92));
    border: 1px solid rgba(238, 220, 228, 0.95);
    box-shadow: 0 18px 42px  rgba(196, 18, 48, 0.15);
}

.last-order-recommendations-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.last-order-recommendations-copy {
    max-width: 780px;
}

.last-order-recommendations-copy h2 {
    color: var(--text);
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.05;
    margin: 6px 0 10px;
}

.last-order-recommendations-copy p {
    color: var(--text-soft);
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

.last-order-badge {
    flex: 0 0 auto;
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 91, 151, 0.09);
    border: 1px solid  rgba(196, 18, 48, 0.15);
}

.last-order-badge span {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.last-order-badge strong {
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.25;
}

.last-order-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.last-order-product-card {
    display: grid;
    grid-template-rows: 138px 1fr;
    min-height: 336px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid  rgba(196, 18, 48, 0.15);
    box-shadow: 0 12px 28px rgba(45, 24, 39, 0.07);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.last-order-product-card:hover {
    transform: translateY(-5px);
    border-color:  rgba(196, 18, 48, 0.15);
    box-shadow: 0 18px 34px rgba(45, 24, 39, 0.12);
}

.last-order-product-image {
    display: grid;
    place-items: center;
    padding: 16px;
    background: linear-gradient(145deg, rgba(255, 244, 250, 0.98), rgba(255, 255, 255, 0.94));
    border-bottom: 1px solid  rgba(196, 18, 48, 0.15);
}

.last-order-product-image img {
    width: 100%;
    height: 106px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.1));
    transition: transform 0.24s ease;
}

.last-order-product-card:hover .last-order-product-image img {
    transform: scale(1.04);
}

.last-order-product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.last-order-product-info .product-name-link {
    min-height: 44px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.last-order-product-info .product-brand {
    margin: 0;
    min-height: 22px;
}

.last-order-match-reason {
    margin: 0;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 91, 151, 0.08);
    color: #7b6171;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
}

.last-order-product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.last-order-product-bottom strong {
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.25;
}

.last-order-product-bottom .add-cart-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.86rem;
}

.recommendations-page,
.order-details-page {
    width: min(1500px, calc(100% - 64px));
    margin: 28px auto 70px;
}

.recommendations-hero,
.order-details-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 229, 0.42), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 251, 0.92));
    border: 1px solid rgba(238, 220, 228, 0.95);
    box-shadow: 0 18px 42px  rgba(196, 18, 48, 0.15);
    margin-bottom: 24px;
}

.recommendations-hero h1,
.order-details-hero h1 {
    color: var(--text);
    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1;
    margin: 8px 0 12px;
}

.recommendations-hero p,
.order-details-hero p {
    max-width: 720px;
    color: var(--text-soft);
    line-height: 1.7;
    margin: 0;
}

.recommendations-order-link {
    text-decoration: none;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.recommendation-card {
    display: grid;
    grid-template-rows: 170px 1fr;
    min-height: 388px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid  rgba(196, 18, 48, 0.15);
    box-shadow: 0 12px 28px rgba(45, 24, 39, 0.07);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.recommendation-card:hover {
    transform: translateY(-5px);
    border-color:  rgba(196, 18, 48, 0.15);
    box-shadow: 0 18px 34px rgba(45, 24, 39, 0.12);
}

.recommendation-card-image {
    display: grid;
    place-items: center;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255, 244, 250, 0.98), rgba(255, 255, 255, 0.94));
    border-bottom: 1px solid  rgba(196, 18, 48, 0.15);
}

.recommendation-card-image img {
    width: 100%;
    height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.1));
    transition: transform 0.24s ease;
}

.recommendation-card:hover .recommendation-card-image img {
    transform: scale(1.04);
}

.recommendation-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
}

.recommendation-card-body .product-name-link {
    min-height: 48px;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recommendation-card-body .product-brand {
    margin: 0;
    min-height: 22px;
}

.recommendation-match-reason {
    margin: 0;
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(255, 91, 151, 0.08);
    color: #7b6171;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
}

.recommendation-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.recommendation-card-bottom strong {
    color: var(--primary);
    font-size: 1.04rem;
}

.recommendation-card-bottom .add-cart-btn {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.86rem;
}

.recommendations-empty {
    margin-top: 24px;
}

.order-details-total {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    min-width: 190px;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(255, 91, 151, 0.09);
    border: 1px solid  rgba(196, 18, 48, 0.15);
}

.order-details-total span {
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.order-details-total strong {
    color: var(--primary);
    font-size: 1.2rem;
}

.order-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
}

.order-items-panel,
.order-summary-panel {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(238, 220, 228, 0.95);
    box-shadow: 0 14px 34px  rgba(196, 18, 48, 0.15);
    padding: 24px;
}

.order-items-list {
    display: grid;
    gap: 14px;
}

.order-item-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 247, 251, 0.72);
    border: 1px solid  rgba(196, 18, 48, 0.15);
}

.order-item-image {
    display: grid;
    place-items: center;
    height: 94px;
    border-radius: 16px;
    background: #fff;
}

.order-item-image img {
    width: 88px;
    height: 78px;
    object-fit: contain;
}

.order-item-copy .product-name-link {
    display: inline-block;
    color: var(--text);
    font-weight: 850;
    margin: 5px 0;
}

.order-item-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

.order-item-card > strong {
    color: var(--primary);
    white-space: nowrap;
}

.order-summary-panel {
    align-self: start;
    display: grid;
    gap: 16px;
}

.order-summary-panel h2 {
    color: var(--text);
    margin: 0 0 4px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--text-soft);
}

.order-summary-row strong {
    color: var(--text);
}

.order-summary-total {
    border-top: 1px solid  rgba(196, 18, 48, 0.15);
    padding-top: 16px;
}

.order-summary-total strong {
    color: var(--primary);
    font-size: 1.15rem;
}

/* ══════════════════════════════════════════════════════════════════
   MODULE 2: Customer invoice (PDF export source)
   Positioned off-screen rather than display:none — html2canvas (used by
   html2pdf.js) needs the element actually laid out with real dimensions
   to rasterize it; display:none elements have zero size and produce a
   blank PDF. Plain black-on-white styling regardless of site theme/RTL,
   since this becomes a standalone document customers forward elsewhere.
   ══════════════════════════════════════════════════════════════════ */
/* html2canvas (used by html2pdf.js) needs the target element genuinely
   laid out in normal document flow with real, measured dimensions —
   display:none produces a 0x0 canvas, and BOTH position:fixed and an
   extreme off-screen offset (left:-9999px) were tried and confirmed
   (via direct html2canvas debugging) to silently produce a blank/zero-
   height canvas too. The reliable pattern: keep .invoice-sheet itself
   in normal static flow, and collapse the OUTER wrapper to zero visible
   height instead — the click handler below expands the wrapper only for
   the instant html2canvas captures it. */
.invoice-sheet-wrap {
    height: 0;
    overflow: hidden;
}

/* ── Invoice preview modal ──────────────────────────────────────────
   Shows a scaled clone of #invoiceContent (fixed mm-based width) so it
   fits any viewport, 360px phones through desktop, without ever getting
   cut off horizontally. */
.invoice-preview-modal[hidden] { display: none; }
.invoice-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.invoice-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.65);
}
.invoice-preview-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--surface, #f4f4fa);
    border-radius: 16px;
    padding: 16px;
    max-width: min(94vw, 720px);
    max-height: 90vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.invoice-preview-modal-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-strong, #1a1a1a);
    padding: 4px 8px;
    margin-bottom: 6px;
}
.invoice-preview-modal-stage {
    overflow: auto;
    border-radius: 10px;
    background: #d9d9e6;
    display: flex;
    justify-content: center;
    padding: 12px 0;
}
.invoice-preview-modal-scaler {
    transform-origin: top left;
    flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.invoice-sheet {
    width: 190mm;
    background: #ffffff;
    color: #1a1a1a;
    padding: 12mm;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    direction: ltr;
    text-align: left;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.invoice-brand {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.invoice-meta {
    text-align: right;
    font-size: 0.85rem;
    color: #444;
}

.invoice-customer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.invoice-customer > div {
    flex: 1;
}

.invoice-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 4px;
}

.invoice-customer p {
    margin: 2px 0;
    font-size: 0.88rem;
}

.invoice-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.invoice-items th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
    border-bottom: 2px solid #1a1a1a;
    padding: 6px 8px;
}

.invoice-items td {
    padding: 10px 8px;
    border-bottom: 1px solid #ddd;
    font-size: 0.85rem;
    vertical-align: middle;
}

.invoice-item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invoice-item-cell img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.invoice-totals {
    width: 260px;
    margin-left: auto;
    margin-bottom: 24px;
}

.invoice-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.88rem;
    color: #444;
}

.invoice-grand-total {
    border-top: 2px solid #1a1a1a;
    margin-top: 6px;
    padding-top: 8px !important;
    font-weight: 900;
    font-size: 1.05rem !important;
    color: #1a1a1a !important;
}

.invoice-footer {
    text-align: center;
    font-size: 0.8rem;
    color: #777;
    border-top: 1px solid #ddd;
    padding-top: 14px;
}

.catalog-toolbar {
    display: grid;
    gap: 18px;
    margin: 8px 0 24px;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.section-header-left {
    margin-bottom: 0;
}

.section-header h2 {
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    color: #251e28;
    margin-top: 8px;
}

.section-meta {
    color: #7c6d78;
    font-weight: 700;
}

/* ═══════════════════════════════════════
   CATALOG SIDEBAR LAYOUT
═══════════════════════════════════════ */
.catalog-page { padding: 24px 0; }

.catalog-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Sidebar ── */
.catalog-sidebar {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(238,220,228,0.8);
    border-radius: 24px;
    padding: 20px;
    position: sticky;
    top: 88px;
    box-shadow: 0 4px 20px rgba(193,59,111,0.07);
}
html[data-theme="dark"] .catalog-sidebar {
    background: rgba(22,18,36,0.97);
    border-color: rgba(193,59,111,0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

.sidebar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid rgba(193,59,111,0.12);
}
.sidebar-title {
    font-size: 0.88rem;
    font-weight: 800;
    flex: 1;
    letter-spacing: .02em;
}
.sidebar-clear-all {
    font-size: 0.72rem;
    color: #c13b6f;
    text-decoration: none;
    font-weight: 600;
}
.sidebar-clear-all:hover { text-decoration: underline; }
.sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    padding: 2px 6px;
}

/* ── Sidebar form groups ── */
.sf-group { margin-bottom: 16px; }

/* Collapsible accordion (Module 6) — deliberately no markup change needed
   in any of the individual filter partials (_catalog_category_pills.html,
   _catalog_color_dropdown.html, etc.): .sf-label toggles a `.is-collapsed`
   class on its parent .sf-group (see the delegated click handler in
   product_list.html), and this sibling-combinator rule hides every OTHER
   direct child of that .sf-group — so it works uniformly across every
   filter group's markup without touching six separate template files. */
.sf-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
    margin-bottom: 7px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.sf-label::after {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-right: 1.5px solid #aaa;
    border-bottom: 1.5px solid #aaa;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-inline-start: 8px;
}
.sf-group.is-collapsed .sf-label::after {
    transform: rotate(-45deg);
}
.sf-group.is-collapsed > :not(.sf-label) {
    display: none !important;
}
.sf-input, .sf-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1.5px solid rgba(193,59,111,0.18);
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.83rem;
    box-sizing: border-box;
    transition: border-color .15s;
}
.sf-input:focus, .sf-select:focus {
    outline: none;
    border-color: #c13b6f;
}
.sf-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sf-price-row .sf-input { flex: 1; }
.sf-price-sep { font-size: 0.8rem; color: #aaa; flex-shrink: 0; }

/* ── Dual-range price slider (Module 6) ── */
.sf-price-tags {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sf-price-tag {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(193, 59, 111, 0.1);
    color: #c13b6f;
}
.sf-price-track-wrap {
    position: relative;
    height: 20px;
}
.sf-price-track,
.sf-price-track-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 4px;
    pointer-events: none;
}
.sf-price-track {
    left: 0;
    right: 0;
    background: rgba(193, 59, 111, 0.15);
}
.sf-price-track-fill {
    background: #c13b6f;
}
.sf-price-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.sf-price-range::-webkit-slider-runnable-track {
    background: transparent;
}
.sf-price-range::-moz-range-track {
    background: transparent;
}
.sf-price-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #c13b6f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    margin-top: 0;
}
.sf-price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #c13b6f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.sf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sf-chip {
    padding: 4px 11px;
    border-radius: 12px;
    border: 1.5px solid rgba(193,59,111,0.2);
    background: transparent;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sf-chip:hover { border-color: #cbd5e1; background: rgba(148,163,184,0.16); }
.sf-chip.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.sf-chip-sq { min-width: 38px; justify-content: center; font-size: 0.78rem; font-weight: 700; }
.sf-chip-clear { color: #c13b6f; border-color: rgba(193,59,111,.3); padding: 4px 8px; }
.sf-chip-clear:hover { background: rgba(193,59,111,.1); }
.sf-chip-check {
    display: inline-flex;
    color: currentColor;
}
.sf-color-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}

/* ── MODULE 3: Luxury filter rail — pills / size grid / color swatches ── */
.sf-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Category & Gender pills — a step bolder than the generic .sf-chip since
   this is the primary, always-visible top-level filter. */
.sf-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sf-pill:hover { border-color: #cbd5e1; background: rgba(148,163,184,0.16); }
.sf-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.sf-pill-check {
    display: inline-flex;
    color: currentColor;
}

/* Footwear size — geometric grid of square pills, solid crimson when active */
.sf-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 7px;
}
.sf-size-pill {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sf-size-pill:hover { border-color: #cbd5e1; background: rgba(148,163,184,0.16); }
.sf-size-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* Color — circular swatches with a border ring when active */
.sf-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-color-swatch {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}
.sf-color-swatch-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--swatch-color, #ccc);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.sf-color-swatch:hover { border-color: #cbd5e1; }
.sf-color-swatch.is-active {
    border-color: #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18);
}

html[data-theme="dark"] .sf-pill,
html[data-theme="dark"] .sf-size-pill,
html[data-theme="dark"] .sf-chip {
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: var(--text, #cfd3ec);
}
html[data-theme="dark"] .sf-pill:hover,
html[data-theme="dark"] .sf-size-pill:hover,
html[data-theme="dark"] .sf-chip:hover {
    background: rgba(255,255,255,0.09);
}
html[data-theme="dark"] .sf-pill.is-active,
html[data-theme="dark"] .sf-size-pill.is-active,
html[data-theme="dark"] .sf-chip.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .sf-color-swatch.is-active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
/* ── Sidebar custom dropdown ── */
.sf-dropdown { position: relative; }

.sf-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1.5px solid rgba(193,59,111,0.18);
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.83rem;
    cursor: pointer;
    text-align: left;
    gap: 5px;
    transition: border-color .15s;
    box-sizing: border-box;
}
.sf-dd-trigger:hover,
.sf-dropdown.is-open .sf-dd-trigger { border-color: #c13b6f; }

.sf-dd-arrow {
    margin-left: auto;
    font-size: 0.65rem;
    opacity: .5;
    transition: transform .2s;
    flex-shrink: 0;
}
.sf-dropdown.is-open .sf-dd-arrow { transform: rotate(180deg); opacity: .9; }

.sf-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid rgba(193,59,111,0.18);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 50;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}
html[data-theme="dark"] .sf-dd-panel {
    background: #1a1528;
    border-color: rgba(193,59,111,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sf-dropdown.is-open .sf-dd-panel { display: block; }

.sf-dd-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: none;
    border: none;
    color: inherit;
    font-size: 0.83rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    box-sizing: border-box;
}
.sf-dd-item:hover { background: rgba(193,59,111,0.07); }
.sf-dd-item.selected {
    background: rgba(193,59,111,0.1);
    color: #c13b6f;
    font-weight: 700;
}
.sf-dd-item + .sf-dd-item { border-top: 1px solid rgba(193,59,111,0.07); }

.sf-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1.5px solid rgba(193,59,111,0.1);
}
.sf-apply-btn {
    width: 100%;
    padding: 11px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg,#c13b6f,#9b2355);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
}
.sf-apply-btn:hover { opacity: .88; }
.sf-reset-btn {
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: transparent;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: background .15s;
}
.sf-reset-btn:hover { background: rgba(193,59,111,0.06); }

/* ── Catalog main ── */
.catalog-main { min-width: 0; overflow-anchor: none; }
.catalog-main.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.catalog-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}
.catalog-title { font-size: 1.6rem; font-weight: 800; margin: 0; }
.catalog-count { font-size: 0.82rem; color: #888; }

/* ── Active filter bar ── */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.af-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(193,59,111,0.1);
    border: 1.5px solid rgba(193,59,111,0.25);
    font-size: 0.76rem;
    font-weight: 600;
    color: #c13b6f;
}
.af-chip button {
    background: none; border: none; cursor: pointer;
    font-size: 0.7rem; color: inherit; padding: 0 2px; line-height: 1;
}

/* ── Catalog grid ── */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* ── Mobile filter button ── */
.mob-filter-btn {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 20px;
    border: 1.5px solid rgba(193,59,111,0.3);
    background: transparent;
    color: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 16px;
}
.mob-filter-badge {
    background: #c13b6f;
    color: #fff;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 0.68rem;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 299;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.is-visible { display: block; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .mob-filter-btn { display: inline-flex; }
    .catalog-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 280px;
        border-radius: 0 24px 24px 0;
        z-index: 300;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 4px 0 30px rgba(0,0,0,0.15);
    }
    .catalog-sidebar.is-open { transform: translateX(0); }
    .sidebar-close-btn { display: block; }
}

.catalog-filter-panel {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) repeat(4, minmax(120px, 1fr)) auto;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(238, 220, 228, 0.9);
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.1);
}

.filter-field-full {
    grid-column: 1 / -1;
}

.color-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.color-filter-label {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.color-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-btn {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1.5px solid rgba(193,59,111,0.2);
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.color-btn:hover {
    border-color: #c13b6f;
    background: rgba(193,59,111,0.07);
}
.color-btn.active {
    background: #c13b6f;
    border-color: #c13b6f;
    color: #fff;
}
.color-btn-clear {
    color: #c13b6f;
    border-color: rgba(193,59,111,0.35);
}
.color-btn-clear:hover {
    background: rgba(193,59,111,0.1);
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
    display: inline-block;
}
.color-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.color-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: transparent;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.color-filter-toggle:hover,
.color-filter-toggle.has-active {
    border-color: #c13b6f;
    background: rgba(193,59,111,0.06);
}
.color-active-chip {
    background: #c13b6f;
    color: #fff;
    border-radius: 8px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 700;
}
.color-toggle-arrow {
    font-size: 0.75rem;
    opacity: 0.6;
}
.color-filter-dropdown {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1.5px solid rgba(193,59,111,0.15);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
}

.size-btn {
    min-width: 40px;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

/* ── Inline filters strip (size + color) ── */
.inline-filters-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(238,220,228,0.7);
    backdrop-filter: blur(4px);
}
.dark-mode .inline-filters-strip {
    background: rgba(30,27,46,0.7);
    border-color: rgba(193,59,111,0.2);
}
.inline-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inline-filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 62px;
    color: #888;
}
.inline-filter-row + .inline-filter-row {
    border-top: 1px solid rgba(193,59,111,0.1);
    padding-top: 6px;
}
.inline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── xbtn: tiny chips inside filter panels ── */
.xbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1.5px solid rgba(193,59,111,0.2);
    background: transparent;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.xbtn:hover { border-color: #c13b6f; background: rgba(193,59,111,0.07); }
.xbtn.active { background: #c13b6f; border-color: #c13b6f; color: #fff; }
.xbtn-clear { color: #c13b6f; border-color: rgba(193,59,111,.35); font-size: 0.72rem; }
.xbtn-clear:hover { background: rgba(193,59,111,.1); }

.filter-field {
    display: grid;
    gap: 5px;
}

.filter-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #5c4f59;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #e0e2ed;
    background: #fff;
    outline: none;
}

.filter-field input:focus,
.filter-field select:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.filter-actions {
    display: flex;
    align-items: end;
    gap: 12px;
}

.filter-actions .add-cart-btn,
.filter-actions .secondary-btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.filter-actions .secondary-btn {
    min-width: auto;
    box-shadow: none;
    border: 1px solid #e0e2ed;
}

.product-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.product-rating {
    font-size: 0.9rem;
    font-weight: 800;
    color: #7e7280;
}

.product-brand {
    font-size: 0.94rem;
}

/* Wishlist card: which colorway was actually favorited, so a shopper
   never has to hunt through swatches to find it again. */
.wishlist-color-tag {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(196, 18, 48, 0.08);
    color: #C41230;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
}
html[data-theme="dark"] .wishlist-color-tag {
    background: rgba(255, 107, 128, 0.14);
    color: #ff6b80;
}

.fav-btn-circle {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fav-btn-circle:hover {
    transform: scale(1.06);
    background: rgba(0, 0, 0, 0.65);
}

.fav-btn-circle.is-active {
    transform: scale(1.06);
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    border-color: transparent;
}

.wishlist-label {
    font-size: 0.88rem;
    font-weight: 800;
}

.profile-page-modern {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 0 8px;
}

.profile-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-cover {
    height: 160px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255, 95, 158, 0.18),  rgba(196, 18, 48, 0.15));
}

/* ══════════════════════════════════════════════════════════════════
   Customer "My Messages" page — was hardcoded background:var(--white,#fff)
   and a bare background:#f9f4f6 hex with no class/selector at all, so
   dark mode couldn't touch it. Rebuilt with real classes bound to the
   already-theme-aware --surface/--surface-muted/--border/--text-strong/
   --text-soft variables (same ones .profile-card-modern uses below).
   ══════════════════════════════════════════════════════════════════ */
.messages-page {
    display: flex;
    justify-content: center;
    padding: 50px 20px;
}

.messages-card {
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text);
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 18px 45px rgba(196, 18, 48, 0.15);
    border: 1px solid var(--border);
}

.messages-title {
    margin: 6px 0 8px;
    color: var(--text-strong);
}

.messages-intro {
    color: var(--text-soft);
    margin-bottom: 24px;
}

.messages-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.messages-thread-topic-icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
}

.messages-thread-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.messages-thread-item:hover {
    border-color: rgba(196, 18, 48, 0.3);
}

.messages-thread-copy {
    min-width: 0;
}

.messages-thread-copy strong {
    display: block;
    color: var(--text-strong);
}

.messages-thread-copy span {
    display: block;
    color: var(--text-soft);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-thread-badge {
    flex-shrink: 0;
}

.messages-empty-state {
    text-align: center;
    padding: 40px 0;
    color: var(--text-soft);
}

.messages-empty-state .hero-btn {
    display: inline-block;
    margin-top: 14px;
}

.profile-card-modern {
    position: relative;
    width: 100%;
    max-width: 1120px;
    box-sizing: border-box;
    /* auto/auto (not a positive left/right value) — centers the card without
       ever pushing it past its parent's edge. */
    margin: -88px auto 0;
    padding: 34px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(239, 220, 228, 0.92);
    box-shadow: 0 24px 52px  rgba(196, 18, 48, 0.15);
    text-align: left;
}

.profile-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    max-width: 100%;
}

.profile-topbar > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-topbar h1 {
    font-size: clamp(2.3rem, 3.6vw, 3.4rem);
    margin: 10px 0 12px;
    color: #241d27;
}

.profile-subtitle {
    max-width: 650px;
    width: 100%;
    line-height: 1.7;
    color: #6e6170;
    white-space: normal;
    overflow-wrap: anywhere;
}

.profile-hero-block {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 247, 250, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(242, 222, 230, 0.95);
    margin-bottom: 24px;
}

.profile-avatar-display {
    width: 132px;
    height: 132px;
    flex-shrink: 0;
    border: none;
    overflow: hidden;
    box-shadow: 0 18px 36px  rgba(196, 18, 48, 0.15);
}

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

.profile-identity {
    /* Flex items default to min-width:auto (content's min-content size) —
       without this, the unbreakable email text below would force
       .profile-hero-block wider than its container instead of wrapping. */
    min-width: 0;
    flex: 1 1 auto;
}

.profile-identity h2 {
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: #221c26;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.profile-email {
    font-size: 1.04rem;
    color: #6f6470;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.profile-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 95, 158, 0.15),  rgba(196, 18, 48, 0.15));
    color: var(--primary-dark);
    font-weight: 800;
}

.profile-badge-muted {
    background: rgba(120, 106, 117, 0.1);
    color: #65596a;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-detail-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(239, 220, 228, 0.92);
}

.profile-detail-card span {
    display: inline-block;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-dark);
    font-weight: 900;
    margin-bottom: 10px;
}

/* Email/phone values are unbreakable strings (no spaces) — without this,
   their full-text width becomes the grid track's minimum, pushing the card
   past its container instead of wrapping onto a second line. */
.profile-detail-card strong,
.profile-detail-card span,
.profile-detail-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.profile-detail-card p {
    color: #6f6470;
    line-height: 1.65;
}

.profile-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.profile-photo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 18, 26, 0.72);
    backdrop-filter: blur(8px);
}

.profile-photo-dialog {
    position: relative;
    z-index: 2;
    width: min(92vw, 980px);
    max-height: 88vh;
    margin: 6vh auto;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.profile-photo-dialog img {
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
    background: #fff;
}

.profile-photo-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    border: none;
    background: rgba(37, 29, 39, 0.9);
    color: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
}

.profile-photo-fallback {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    font-size: 9rem;
    font-weight: 900;
}

.show-profile-modal {
    opacity: 1;
    pointer-events: auto;
}

.profile-edit-card {
    max-width: 1180px;
    margin: 18px auto 0;
}

.profile-edit-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.profile-edit-preview,
.profile-edit-form-wrap {
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 248, 251, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(239, 220, 228, 0.92);
}

.profile-edit-preview {
    text-align: center;
}

.profile-edit-preview .profile-avatar-display {
    width: 168px;
    height: 168px;
    margin: 0 auto 16px;
}

.profile-preview-copy strong {
    display: block;
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.profile-preview-copy p,
.form-help-text {
    color: #6f6470;
    line-height: 1.7;
}

.hidden-preview-image,
.hidden-profile-fallback {
    display: none !important;
}

.profile-form {
    display: grid;
    gap: 14px;
}

.profile-form label {
    margin-top: 4px;
    font-size: 0.98rem;
    font-weight: 800;
    color: #4e4450;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="file"] {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #e0e2ed;
    background: #fff;
    outline: none;
}

.profile-form input:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.profile-form button {
    margin-top: 10px;
}

.profile-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #5f5460;
}

.profile-checkbox-row input {
    width: 18px;
    height: 18px;
    accent-color: #C41230;
}

/* ── Universal obsidian toggle pill — category/audience checkboxes across
   admin forms (add/update product, departments). Replaces the raw native
   checkbox (which rendered as an unstyled red-accent box) with a hidden
   input + a styled pill span holding the checkmark, exactly matching the
   /admin/departments audience-pill reference. ── */
.chip {
    cursor: pointer;
}

.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.chip .pill-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-weight: 500;
    font-size: 0.86rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.chip .pill-content::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 10px;
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s ease;
}

.chip input:checked + .pill-content {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #0f172a;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.chip input:checked + .pill-content::before {
    content: "\2713";
    width: auto;
    opacity: 1;
    font-size: 0.8rem;
}

.chip:hover .pill-content {
    border-color: #cbd5e1;
}

.chip input:focus-visible + .pill-content {
    outline: 2px solid #e11d48;
    outline-offset: 2px;
}

html[data-theme="dark"] .chip .pill-content {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    color: var(--text, #cfd3ec);
}

html[data-theme="dark"] .chip:hover .pill-content {
    background: rgba(255,255,255,0.09);
}

html[data-theme="dark"] .chip input:checked + .pill-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}

@media (max-width: 1180px) {
    .catalog-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filter-field.filter-search,
    .filter-actions {
        grid-column: span 3;
    }
}

@media (max-width: 1440px) {
    .navbar {
        padding-inline: 28px;
        gap: 22px;
    }

    .site-nav,
    .nav-links-cluster {
        gap: 12px;
    }

    .nav-primary {
        gap: 14px;
    }

    .nav-search-form {
        flex-basis: 330px;
        min-width: 230px;
    }
}

@media (max-width: 1220px) {
    .navbar {
        padding-inline: 22px;
        gap: 18px;
    }

    .logo a {
        font-size: 1.35rem;
    }

    .nav-primary {
        gap: 11px;
    }

    .nav-primary > a,
    .nav-drop-title {
        font-size: 0.95rem;
    }

    .nav-search-form {
        flex-basis: 270px;
        min-width: 210px;
    }

    .nav-account {
        gap: 8px;
    }

    .language-toggle {
        padding-inline: 13px;
    }
}

@media (max-width: 980px) {
    .navbar {
        grid-template-columns: auto auto;
    }

    .nav-toggle {
        display: inline-flex;
        justify-self: end;
    }

    .site-nav {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 12px;
    }

    .site-nav.nav-open {
        display: grid;
    }

    .nav-links-cluster,
    .nav-primary,
    .nav-account {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .nav-primary {
        gap: 6px;
    }

    .nav-search-form {
        width: 100%;
    }

    .nav-search-form input {
        width: 100%;
    }

    .nav-primary > a,
    .nav-drop-title,
    .nav-admin a,
    .nav-signup {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .nav-dropdown-menu {
        position: static;
        margin-top: 10px;
        box-shadow: none;
    }

    .nav-dropdown.dropdown-open .nav-dropdown-menu {
        display: block;
    }

    .nav-account {
        align-items: stretch;
    }

    .user-menu {
        width: 100%;
        justify-content: flex-start;
    }

    .user-dropdown {
        right: auto;
        left: 0;
        top: 56px;
    }

    .hero-modern {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .last-order-recommendations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recommendations-hero,
    .order-details-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .recommendations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-details-layout {
        grid-template-columns: 1fr;
    }

    .last-order-recommendations-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .last-order-badge {
        width: 100%;
    }

    .catalog-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .filter-field.filter-search,
    .filter-actions {
        grid-column: span 2;
    }

    .profile-topbar,
    .profile-hero-block,
    .profile-edit-layout {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    /* minmax(0, 1fr) — a bare 1fr track won't shrink below its content's
       min-content width, and an unbreakable string (an email address has no
       spaces to wrap at) contributes its FULL text width as that minimum —
       silently forcing the card, and the page, wider than the viewport. */
    .profile-details-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .navbar {
        padding: 16px 18px;
    }

    .site-footer {
        padding: 0 16px;
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px 18px;
    }

    .site-social-links {
        justify-content: center;
    }

    .site-social-link {
        min-width: 0;
        width: 100%;
    }

    .site-footer-copy {
        max-width: none;
    }

    .logo a {
        font-size: 1.35rem;
    }

    .hero-modern {
        padding: 36px 28px;
        min-height: 420px;
        border-radius: 0;
    }

    .hero-content h1 {
        font-size: 2.6rem;
    }

    .last-order-recommendations {
        padding: 20px;
        border-radius: 24px;
    }

    .last-order-recommendations-grid {
        grid-template-columns: 1fr;
    }

    .recommendations-page,
    .order-details-page {
        width: min(1500px, calc(100% - 32px));
        margin-top: 18px;
    }

    .recommendations-hero,
    .order-details-hero,
    .order-items-panel,
    .order-summary-panel {
        padding: 20px;
        border-radius: 24px;
    }

    .recommendations-grid {
        grid-template-columns: 1fr;
    }

    .order-item-card {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .order-item-card > strong {
        grid-column: 2;
    }

    .catalog-filter-panel,
    .profile-card-modern,
    .profile-edit-preview,
    .profile-edit-form-wrap {
        padding: 18px;
    }

    .catalog-filter-panel {
        grid-template-columns: 1fr;
    }

    .filter-field.filter-search,
    .filter-actions {
        grid-column: auto;
    }

    .products-grid-2026 {
        grid-template-columns: 1fr;
    }

    .profile-cover {
        height: 110px;
    }

    .profile-card-modern {
        margin-top: -60px;
        padding: 22px;
    }

    .profile-hero-block {
        padding: 18px;
    }

    .profile-avatar-display {
        width: 84px;
        height: 84px;
    }

    .profile-identity h2 {
        font-size: 1.5rem;
    }

    .profile-badges {
        margin-top: 10px;
    }

    /* Visual refinement: a tighter, list-like card scale on mobile than the
       desktop card grid uses. Spacing between cards comes from
       .profile-details-grid's `gap` (already set) rather than a
       margin-bottom here, which would double up with the grid gap. */
    .profile-detail-card {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .profile-photo-dialog {
        width: calc(100vw - 22px);
        margin: 5vh auto;
    }

    .profile-photo-fallback {
        min-height: 280px;
        font-size: 5.5rem;
    }
}

/* =========================
   Admin Pages Restore
========================= */
.admin-dashboard:not(.admin-dashboard-pro) {
    display: grid;
    gap: 24px;
    padding-top: 18px;
}

.admin-dashboard:not(.admin-dashboard-pro) .page-title {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    color: #261f2a;
    margin: 10px 0 14px;
    line-height: 0.98;
}

.admin-subtitle {
    max-width: 760px;
    color: #6b6270;
    line-height: 1.7;
    font-size: 1.05rem;
}

.admin-hero,
.admin-panel,
.admin-kpi-card,
.admin-feature-card,
.admin-message-card {
    border: 1px solid rgba(238, 219, 228, 0.96);
    box-shadow: 0 18px 44px  rgba(196, 18, 48, 0.15);
}

.admin-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    padding: 28px 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 248, 251, 0.98), rgba(255, 255, 255, 0.96));
}

.admin-hero-compact {
    padding: 24px 28px;
}

.admin-quick-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 240px;
}

.admin-mini-stat {
    min-width: 140px;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 240, 246, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(240, 218, 227, 0.92);
    text-align: center;
}

.admin-mini-stat strong {
    display: block;
    font-size: 1.8rem;
    color: var(--primary-dark);
    line-height: 1;
    margin-bottom: 6px;
}

.admin-mini-stat span {
    font-size: 0.92rem;
    color: #6e6370;
    font-weight: 700;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.admin-kpi-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-kpi-card {
    padding: 22px 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
}

.admin-kpi-card strong {
    display: block;
    margin: 10px 0 12px;
    color: #2b2430;
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 0.95;
}

.admin-kpi-card p {
    color: #6e6370;
    line-height: 1.65;
}

.admin-kpi-card .admin-kpi-label {
    display: inline-block;
    margin-bottom: 2px;
}

.admin-panel {
    padding: 24px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.95);
}

.admin-dashboard-layout,
.admin-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 22px;
    align-items: start;
}

/* Shipping page's own grid — deliberately separate from the shared
   .admin-form-layout (used by many other admin pages) so its exact
   proportions/max-width can be tuned here without touching anything
   else. Strict 2-column, no absolute positioning anywhere in this page,
   so the two cards can never overlap regardless of content length. */
.shipping-page-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    .shipping-page-grid {
        grid-template-columns: 1fr;
    }
}

.admin-main-column,
.admin-side-column {
    display: grid;
    gap: 22px;
}

.single-column-grid {
    grid-template-columns: 1fr !important;
}

.form-field-full {
    grid-column: 1 / -1;
}

.admin-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.admin-product-card {
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(240, 221, 229, 0.95);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.admin-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 34px  rgba(196, 18, 48, 0.15);
}

.admin-product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff7fb;
}

.admin-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-product-badges {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.status-featured {
    background: rgba(255, 187, 61, 0.18);
    color: #8c5a00;
    border: 1px solid rgba(255, 187, 61, 0.32);
}

html[data-theme="dark"] .status-featured {
    background: rgba(255, 187, 61, 0.14);
    border-color: rgba(255, 187, 61, 0.26);
}

.admin-current-images-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-current-images-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background: #fff7fb;
}

.admin-product-content {
    padding: 18px;
}

.admin-product-content h3 {
    color: #27202b;
    font-size: 1.28rem;
    margin: 8px 0 6px;
    min-height: 58px;
}

.admin-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 16px;
    color: #6f6570;
}

.admin-product-meta strong {
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.admin-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.admin-product-actions .secondary-btn {
    min-width: 0;
    width: 100%;
}

.admin-message-grid {
    display: grid;
    gap: 18px;
}

.admin-message-card {
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-message-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-message-top-spread {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.admin-message-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: white;
    font-weight: 900;
    flex-shrink: 0;
}

.admin-message-headings strong {
    display: block;
    font-size: 1.06rem;
    color: #2d2430;
    margin-bottom: 4px;
}

.admin-message-headings span {
    color: #796d79;
    font-weight: 700;
}

.admin-message-body {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(240, 221, 229, 0.92);
}

.admin-message-body p {
    color: #5f5561;
    line-height: 1.8;
}

.admin-feature-card {
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 240, 246, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-feature-card strong {
    display: block;
    font-size: 1.5rem;
    color: #2a2230;
    margin-bottom: 8px;
}

.admin-feature-card p {
    color: #6e6370;
    line-height: 1.7;
}

.admin-search-panel {
    margin-bottom: 18px;
    grid-template-columns: minmax(260px, 1fr) auto;
}

.admin-search-panel .filter-field.filter-search,
.admin-search-panel .filter-actions {
    grid-column: auto;
}

.danger-btn {
    border-color:  rgba(196, 18, 48, 0.15);
    color: #9A0E25;
    background: rgba(255, 245, 248, 0.98);
}

.danger-btn:hover {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
}

.admin-category-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

.admin-shipping-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-inline-price-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.users-page-layout {
    grid-template-columns: 1fr;
}

.users-directory-panel,
.users-orders-panel {
    scroll-margin-top: 120px;
}

.users-table-wrap {
    overflow-x: visible;
}

.users-table {
    width: 100%;
    table-layout: fixed;
}

.users-table th,
.users-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

/* ID, Name, Email, Phone, Total Price, Points, Role, Action — 8 columns.
   Kept in sync with the actual <th> count in users.html; a column added
   there without a matching width here is exactly what broke this layout
   last time (the real last column silently got 0% under table-layout:fixed). */
.users-table th:nth-child(1),
.users-table td:nth-child(1) {
    width: 5%;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
    width: 13%;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
    width: 18%;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
    width: 10%;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
    width: 10%;
}

.users-table th:nth-child(6),
.users-table td:nth-child(6) {
    width: 7%;
}

.users-table th:nth-child(7),
.users-table td:nth-child(7) {
    width: 11%;
    min-width: 110px;
}

.users-table th:nth-child(8),
.users-table td:nth-child(8) {
    width: 26%;
}

/* Compact action buttons — three of them (Edit / Edit Points / Delete)
   have to fit one row inside the Action column without wrapping onto a
   second line or bleeding past the cell. Scoped to this table only, not
   .secondary-btn/.danger-btn globally (those are reused on many other
   admin pages at their normal size). */
.users-table .admin-category-actions {
    flex-wrap: nowrap;
}
.users-table .admin-category-actions .secondary-btn,
.users-table .admin-category-actions button {
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.users-table .amount-cell {
    color: #c42f69;
    font-weight: 800;
}

.users-directory-panel .admin-search-panel {
    grid-template-columns: minmax(0, 1fr) auto;
}

.users-directory-panel .filter-field.filter-search input {
    width: 100%;
}

.users-orders-panel .order-search-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
}

.users-orders-panel .filter-field.filter-search input {
    width: 100%;
}

.users-directory-panel .admin-category-actions {
    flex-wrap: wrap;
}

@media (max-width: 1240px) {
    .admin-kpi-grid,
    .admin-kpi-grid-compact,
    .admin-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-layout,
    .admin-form-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .admin-hero {
        flex-direction: column;
        padding: 22px;
    }

    .admin-quick-actions {
        min-width: 0;
        justify-content: flex-start;
    }

    .admin-kpi-grid,
    .admin-kpi-grid-compact,
    .admin-product-grid,
    .admin-chart-grid,
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-search-panel {
        grid-template-columns: 1fr;
    }

    .users-table {
        table-layout: auto;
    }

    .admin-message-top-spread {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .admin-panel,
    .admin-kpi-card,
    .admin-message-card {
        padding: 18px;
        border-radius: 22px;
    }

    .admin-product-content h3 {
        min-height: unset;
    }

    .admin-product-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Auth Refresh
========================= */
.login-page-body {
    background:
        radial-gradient(circle at top left, rgba(255, 190, 219, 0.2), transparent 24%),
        linear-gradient(180deg, #fafbfd 0%, #f5f6fb 100%);
}

.login-left-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
}

.login-left-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 40%),
        radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.15), transparent 40%);
    pointer-events: none;
}

.login-brand,
.login-left-content {
    position: relative;
    z-index: 1;
}

.login-brand {
    font-weight: 800;
}

.login-brand-logo {
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.85rem !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 18px;
}

.login-left-content {
    max-width: 560px;
}

.login-left-content h1 {
    line-height: 1.02;
    font-weight: 900;
    text-wrap: balance;
}

.login-left-content h1 span {
    font-weight: 600;
}

.login-left-content p {
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 500px;
}

.auth-quote {
    margin-top: 18px;
    font-size: 0.98rem;
    font-weight: 700;
    opacity: 0.95;
}

.login-right-panel {
    background: linear-gradient(180deg, rgba(255, 253, 253, 0.98), rgba(255, 248, 251, 0.98));
}

.login-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(239, 220, 228, 0.92);
    border-radius: 30px;
    padding: 34px 34px 30px;
    box-shadow: 0 20px 46px  rgba(196, 18, 48, 0.15);
    backdrop-filter: blur(10px);
}

.login-box h2 {
    font-size: clamp(2.4rem, 4vw, 3.3rem);
    line-height: 1;
}

.login-subtitle {
    color: #776b78;
    margin-bottom: 24px;
    line-height: 1.7;
}

.login-form-modern label {
    font-weight: 800;
    color: #443b46;
}

.login-form-modern input[type="text"],
.login-form-modern input[type="email"],
.login-form-modern input[type="password"],
.login-form-modern input[type="tel"],
.login-form-modern input[type="number"],
.login-form-modern select {
    min-height: 56px;
    border-radius: 16px;
    font-size: 15px;
}

.password-container input {
    padding-right: 72px !important;
}

.toggle-password {
    font-size: 0.9rem;
    font-weight: 800;
    color: #84556b;
}

/* ── Signup page re-architecture — scoped to .signup-box only so the
   login page keeps its existing look untouched. ── */
.signup-box {
    border-radius: 20px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 40px;
}

.signup-box .login-form-modern input[type="text"],
.signup-box .login-form-modern input[type="email"],
.signup-box .login-form-modern input[type="tel"],
.signup-box .login-form-modern input[type="number"],
.signup-box .login-form-modern input[type="password"] {
    height: 48px;
    background: #f8fafc;
    border-radius: 12px;
    border-color: #e2e8f0;
}

.signup-box .login-form-modern input:focus {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-row-2col .form-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gender-segment {
    display: flex;
    gap: 8px;
}

.gender-segment-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gender-segment-btn:hover {
    border-color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

.gender-segment-btn.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

@media (max-width: 560px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ── Compact zero-scroll signup layout ──────────────────────────────────
   Scoped to .signup-page-body so the login page is untouched. Goal: every
   field + submit + "Already have an account?" fits in one 100vh viewport
   on desktop — paired 2-col rows (added in signup.html) do most of the
   work; the rest is tighter padding/gaps/type-scale than the base
   .login-box, plus a max-height + internal scroll on the right panel as a
   safety net for unusually short viewports rather than ever growing the
   whole page. */
.signup-page-body .login-page {
    min-height: 100vh;
    height: 100vh;
}

.signup-page-body .login-right-panel {
    max-height: 100vh;
    overflow-y: auto;
    padding: 16px;
}

.signup-page-body .signup-box {
    padding: 26px 32px 24px;
    width: 100%;
    max-width: 480px;
}

.signup-page-body .login-box h2 {
    font-size: 1.7rem;
    margin: 0 0 4px;
}

.signup-page-body .login-subtitle {
    margin-bottom: 14px;
    font-size: 0.88rem;
}

.signup-page-body .login-form-modern {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signup-page-body .login-form-modern label {
    font-size: 0.78rem;
    margin-bottom: 2px;
    display: inline-block;
}

.signup-page-body .form-row-2col {
    gap: 10px;
}

.signup-page-body .form-row-2col .form-col {
    gap: 4px;
}

.signup-page-body .signup-box .login-form-modern input[type="text"],
.signup-page-body .signup-box .login-form-modern input[type="email"],
.signup-page-body .signup-box .login-form-modern input[type="tel"],
.signup-page-body .signup-box .login-form-modern input[type="number"],
.signup-page-body .signup-box .login-form-modern input[type="password"] {
    height: 42px;
    font-size: 0.9rem;
    padding-left: 12px;
    padding-right: 12px;
}

.signup-page-body .gender-segment-btn {
    padding: 9px 14px;
    font-size: 0.84rem;
}

.signup-page-body .pw-strength-msg {
    font-size: 0.72rem;
    margin: 2px 0 0;
}

.signup-page-body .login-btn-modern {
    margin-top: 4px;
    min-height: 46px;
}

.signup-page-body .bottom-auth-link {
    margin-top: 12px;
    font-size: 0.85rem;
}

.signup-page-body .login-left-panel {
    padding: 32px 40px;
}

.signup-page-body .login-left-content h1 {
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    margin-bottom: 12px;
}

.signup-page-body .login-left-content p {
    font-size: 1rem;
}

@media (max-width: 900px) {
    /* Desktop is the "zero-scroll" target per spec; on the stacked mobile
       layout (inherited from the shared .login-page breakpoint above)
       scrolling is normal, so just stop forcing a fixed 100vh height here. */
    .signup-page-body .login-page {
        height: auto;
        min-height: 100vh;
    }
    .signup-page-body .login-right-panel {
        max-height: none;
        overflow-y: visible;
    }
}

html[data-theme="dark"] .signup-box {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .signup-box .login-form-modern input[type="text"],
html[data-theme="dark"] .signup-box .login-form-modern input[type="email"],
html[data-theme="dark"] .signup-box .login-form-modern input[type="tel"],
html[data-theme="dark"] .signup-box .login-form-modern input[type="number"],
html[data-theme="dark"] .signup-box .login-form-modern input[type="password"] {
    background: #111424;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .gender-segment-btn {
    background: #111424;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text, #cfd3ec);
}

html[data-theme="dark"] .gender-segment-btn:hover {
    background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .gender-segment-btn.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}

.forgot-link {
    font-weight: 700;
}

.login-btn-modern {
    border-radius: 16px;
    padding: 17px;
    font-weight: 800;
    box-shadow: 0 16px 28px rgba(30, 36, 118, 0.22);
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(196, 18, 48, 0.28);
}

.login-error {
    border-radius: 14px;
    font-weight: 700;
    border: 1px solid #e0e3f5;
}

.social-btn {
    border: 1px solid #e0e2ed;
    border-radius: 16px;
    padding: 14px 12px;
    transition: background 0.3s, transform 0.2s, border-color 0.2s;
    font-weight: 700;
    background: #fff;
}

.social-btn:hover {
    background-color: #f4f5fb;
    border-color: #c0c4e0;
    transform: translateY(-1px);
}

.bottom-auth-link {
    margin-top: 20px;
    line-height: 1.7;
}

.bottom-auth-link a:hover,
.forgot-link:hover {
    color: #9A0E25;
}

/* =========================
   Theme Toggle + Dark Mode
========================= */
:root {
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-muted: rgba(255, 248, 251, 0.98);
    --surface-glass: rgba(255, 255, 255, 0.84);
    --text-strong: #251e28;
    --text-soft: #7a6e79;
    --input-bg: #ffffff;
    --input-border: #e0e2ed;
    --navbar-bg: #ffffff;
    --navbar-border: #e5e5e5;
    --outline-soft: rgba(240, 218, 227, 0.95);
    --hero-overlay: linear-gradient(to right, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.05) 100%);
    --hero-card-bg: rgba(255, 255, 255, 0.16);
    --hero-card-border: rgba(255, 255, 255, 0.18);
    --chip-bg: rgba(255, 255, 255, 0.85);
    --chip-border: rgba(255, 255, 255, 0.95);
    --chip-text: #625861;
    --dropdown-bg: #ffffff;
    --dropdown-border: #f1d9e3;
    --dropdown-link-hover: #f4f5fb;
}

html[data-theme="dark"] {
    --text: #e8eaf6;
    --muted: #9fa8c7;
    --border: rgba(50, 60, 120, 0.6);
    --bg: #0d0f1e;
    --shadow: 0 24px 54px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.26);
    --body-gradient: linear-gradient(180deg, #0d0f1e 0%, #111827 100%);
    --surface: rgba(18, 22, 45, 0.92);
    --surface-strong: rgba(22, 27, 55, 0.97);
    --surface-muted: rgba(16, 20, 42, 0.99);
    --surface-glass: rgba(20, 25, 50, 0.85);
    --text-strong: #f0f2ff;
    --text-soft: #9fa8c7;
    --input-bg: rgba(30, 28, 50, 0.98);
    --input-border: rgba(100, 80, 130, 0.4);
    --navbar-bg: rgba(13, 15, 30, 0.96);
    --navbar-border: rgba(50, 60, 120, 0.5);
    --outline-soft: rgba(50, 60, 120, 0.5);
    --hero-overlay: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.12) 100%);
    --hero-card-bg: rgba(13, 15, 30, 0.35);
    --hero-card-border: rgba(255, 255, 255, 0.08);
    --chip-bg: rgba(22, 27, 55, 0.94);
    --chip-border: rgba(50, 60, 120, 0.7);
    --chip-text: #c8d0f0;
    --dropdown-bg: rgba(16, 20, 42, 0.99);
    --dropdown-border: rgba(50, 60, 120, 0.55);
    --dropdown-link-hover: rgba(196, 18, 48, 0.12);
    --focus-ring: 0 0 0 3.5px rgba(196, 18, 48, 0.3);
    --primary-light: rgba(196, 18, 48, 0.15);
    --secondary-light: rgba(30, 36, 118, 0.2);
}

/* MODULE 4: circular glass buttons, matching the admin header's
   .adm-icon-btn exactly (38x38, fully round) — the client header previously
   used a 14px rounded-square for these, a subtle but real mismatch. */
.theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover {
    background: #eef2f7;
    color: #0f172a;
    transform: none;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* MODULE 4: this standalone magnifier only serves a purpose at the ≤768px
   breakpoint, where it reveals the search drawer (.nav-search-form is
   display:none there by default) — everywhere wider, the full search bar
   is already visible with its own submit icon, so this was pure clutter
   sitting between the theme toggle and the cart. Hidden by default; the
   768px media query re-shows it. */
.nav-search-toggle {
    display: none;
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaf6;
    box-shadow: none;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.navbar,
.site-footer-inner,
.catalog-filter-panel,
.product-card-2026,
.empty-state,
.simple-page,
.contact-card-modern,
.profile-card-modern,
.profile-edit-preview,
.profile-edit-form-wrap,
.admin-panel,
.admin-kpi-card,
.admin-message-card,
.admin-feature-card,
.admin-product-card,
.admin-empty-state,
.login-box {
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.navbar {
    background: var(--navbar-bg);
    border-bottom-color: var(--navbar-border);
}

.logo a,
.section-header h2,
.page-title,
.product-info h3,
.empty-state h3,
.site-footer-title,
.admin-dashboard:not(.admin-dashboard-pro) .page-title,
.admin-kpi-card strong,
.admin-product-content h3,
.profile-detail-card strong {
    color: var(--text-strong);
}

.site-footer-inner,
.simple-page,
.contact-card-modern,
.catalog-filter-panel,
.empty-state,
.product-card-2026,
.profile-card-modern,
.profile-edit-preview,
.profile-edit-form-wrap,
.admin-panel,
.admin-kpi-card,
.admin-message-card,
.admin-feature-card,
.admin-product-card,
.admin-empty-state,
.login-box {
    background: var(--surface);
    border-color: var(--outline-soft);
    box-shadow: var(--shadow-soft);
}

.site-footer-subtitle,
.product-info p,
.product-brand,
.section-meta,
.admin-subtitle,
.admin-kpi-card p,
.admin-message-body p,
.profile-detail-card p,
.profile-preview-copy p,
.form-help-text,
.bottom-auth-link,
.login-subtitle {
    color: var(--text-soft);
}

.user-dropdown a,
.product-rating {
    color: var(--muted);
}

.nav-primary > a,
.nav-drop-title,
.navbar nav a {
    color: #111111;
}

.filter-actions .secondary-btn {
    background: var(--surface-glass);
    border-color: var(--outline-soft);
}

.nav-search-form input,
.filter-field input,
.filter-field select,
.contact-form-modern input,
.contact-form-modern textarea,
.login-form-modern input[type="text"],
.login-form-modern input[type="email"],
.login-form-modern input[type="password"],
.login-form-modern input[type="tel"],
.login-form-modern input[type="number"],
.login-form-modern select,
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="file"],
.profile-form input[type="number"],
.profile-form select {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

.nav-search-form input::placeholder,
.contact-form-modern input::placeholder,
.contact-form-modern textarea::placeholder,
.login-form-modern input::placeholder,
.filter-field input::placeholder {
    color: var(--text-soft);
}

.nav-toggle span {
    background: var(--muted);
}

.language-toggle {
    color: var(--primary-dark);
}

.user-dropdown {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.user-dropdown p {
    border-bottom-color: var(--dropdown-border);
}

.user-dropdown a:hover {
    background: var(--dropdown-link-hover);
}

.hero-modern {
    background:
        var(--hero-overlay),
        url("images/hero-z.png");
    background-size: cover;
    background-position: center;
    justify-content: flex-start;
}

.hero-stat-card {
    background: var(--hero-card-bg);
    border-color: var(--hero-card-border);
}

.cat-btn {
    background: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--chip-text);
}

html[data-theme="dark"] .cat-btn:hover {
    background:  rgba(196, 18, 48, 0.15);
    color: #f5f6fb;
}

html[data-theme="dark"] .hero-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #f5f6fb;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .last-order-recommendations {
    background:
        radial-gradient(circle at top left,  rgba(196, 18, 48, 0.15), transparent 28%),
        linear-gradient(135deg, rgba(33, 24, 36, 0.96), rgba(16, 20, 42, 0.94));
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .last-order-recommendations-copy h2,
html[data-theme="dark"] .last-order-product-info .product-name-link {
    color: var(--text-strong);
}

html[data-theme="dark"] .last-order-recommendations-copy p,
html[data-theme="dark"] .last-order-match-reason {
    color: var(--text-soft);
}

html[data-theme="dark"] .last-order-badge {
    background: rgba(255, 91, 151, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .last-order-badge span {
    color: var(--text-soft);
}

html[data-theme="dark"] .last-order-product-card {
    background: rgba(18, 22, 45, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .last-order-product-image {
    background: linear-gradient(145deg, rgba(43, 32, 47, 0.96), rgba(31, 24, 35, 0.96));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .last-order-match-reason {
    background: rgba(255, 91, 151, 0.1);
}

html[data-theme="dark"] .recommendations-hero,
html[data-theme="dark"] .order-details-hero,
html[data-theme="dark"] .order-items-panel,
html[data-theme="dark"] .order-summary-panel {
    background:
        radial-gradient(circle at top right,  rgba(196, 18, 48, 0.15), transparent 28%),
        linear-gradient(135deg, rgba(33, 24, 36, 0.96), rgba(16, 20, 42, 0.94));
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .recommendations-hero h1,
html[data-theme="dark"] .order-details-hero h1,
html[data-theme="dark"] .recommendation-card-body .product-name-link,
html[data-theme="dark"] .order-item-copy .product-name-link,
html[data-theme="dark"] .order-summary-panel h2,
html[data-theme="dark"] .order-summary-row strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .recommendations-hero p,
html[data-theme="dark"] .order-details-hero p,
html[data-theme="dark"] .recommendation-match-reason,
html[data-theme="dark"] .order-details-total span,
html[data-theme="dark"] .order-item-meta,
html[data-theme="dark"] .order-summary-row {
    color: var(--text-soft);
}

html[data-theme="dark"] .recommendation-card {
    background: rgba(18, 22, 45, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .recommendation-card-image,
html[data-theme="dark"] .order-item-image {
    background: linear-gradient(145deg, rgba(43, 32, 47, 0.96), rgba(31, 24, 35, 0.96));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .recommendation-match-reason,
html[data-theme="dark"] .order-details-total {
    background: rgba(255, 91, 151, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .order-item-card {
    background: rgba(11, 8, 14, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .fav-btn-circle {
    background: rgba(31, 22, 34, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8eaf6;
}

html[data-theme="dark"] .contact-left,
html[data-theme="dark"] .admin-message-avatar,
html[data-theme="dark"] .profile-photo-fallback {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-message-card {
    background: linear-gradient(180deg, rgba(30, 20, 35, 0.98), rgba(22, 15, 28, 0.98));
    border-color: rgba(193, 59, 111, 0.2);
}

html[data-theme="dark"] .admin-message-body {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(193, 59, 111, 0.15);
}

html[data-theme="dark"] .admin-message-body p {
    color: var(--text-soft);
}

html[data-theme="dark"] .admin-message-headings strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .admin-message-headings span {
    color: var(--text-soft);
}

html[data-theme="dark"] .login-right-panel {
    background: linear-gradient(180deg, rgba(21, 16, 24, 0.98), rgba(30, 21, 33, 0.98));
}

html[data-theme="dark"] .social-btn {
    background: rgba(16, 20, 42, 0.94);
    border-color:  rgba(30, 36, 118, 0.25);
    color: var(--text);
}

html[data-theme="dark"] .social-btn:hover {
    background: rgba(52, 38, 55, 0.98);
}

html[data-theme="dark"] .product-reviews-card {
    background:
        radial-gradient(circle at top right,  rgba(196, 18, 48, 0.15), transparent 22%),
        linear-gradient(180deg, rgba(33, 24, 36, 0.98), rgba(16, 20, 42, 0.96));
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .related-products-panel {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .related-product-card {
    background: rgba(18, 22, 45, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .related-product-image {
    background: linear-gradient(145deg, rgba(43, 32, 47, 0.96), rgba(31, 24, 35, 0.96));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .related-products-carousel::before {
    background: linear-gradient(90deg, #18111b 8%, rgba(24, 17, 27, 0));
}

html[data-theme="dark"] .related-products-carousel::after {
    background: linear-gradient(270deg, #18111b 8%, rgba(24, 17, 27, 0));
}

html[data-theme="dark"] .related-carousel-btn {
    background: rgba(18, 22, 45, 0.96);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ff9cc5;
}

html[data-theme="dark"] .related-match-reason {
    background: rgba(255, 91, 151, 0.1);
    color: var(--text-soft);
}

html[data-theme="dark"] .related-product-bottom span {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .product-reviews-header h2,
html[data-theme="dark"] .related-products-header h2,
html[data-theme="dark"] .related-product-copy .product-name-link,
html[data-theme="dark"] .review-form-shell h3,
html[data-theme="dark"] .reviews-list-shell h3,
html[data-theme="dark"] .review-form label,
html[data-theme="dark"] .reviews-summary strong,
html[data-theme="dark"] .review-card strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .reviews-summary span,
html[data-theme="dark"] .review-helper-text,
html[data-theme="dark"] .review-date,
html[data-theme="dark"] .review-empty-state,
html[data-theme="dark"] .review-card p {
    color: var(--text-soft);
}

html[data-theme="dark"] .reviews-summary {
    background: linear-gradient(135deg, rgba(255, 88, 146, 0.18), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .review-form-shell,
html[data-theme="dark"] .reviews-list-shell {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

html[data-theme="dark"] .review-form select,
html[data-theme="dark"] .review-form textarea {
    background: rgba(17, 12, 20, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

html[data-theme="dark"] .review-form select::placeholder,
html[data-theme="dark"] .review-form textarea::placeholder {
    color: #a99aaa;
}

html[data-theme="dark"] .review-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(11, 8, 14, 0.36);
}

html[data-theme="dark"] .review-stars {
    color: #ff8cb4;
}

html[data-theme="dark"] .review-empty-state {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .admin-dashboard-shot {
    border-color:  rgba(30, 36, 118, 0.25);
    background: linear-gradient(180deg, rgba(28, 22, 31, 0.98), rgba(36, 28, 39, 0.96));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-dashboard-shot:hover {
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-dashboard-gallery-copy {
    color: var(--text-soft);
}

html[data-theme="dark"] .admin-powerbi-link {
    background: linear-gradient(135deg, rgba(255, 204, 79, 0.96), rgba(220, 150, 24, 0.96));
    color: #2c1d00;
    border-color: rgba(255, 204, 79, 0.42);
}

html[data-theme="dark"] .admin-powerbi-icon {
    background: rgba(255, 255, 255, 0.22);
}

.auth-theme-toggle {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2200;
    width: 46px;
    height: 46px;
    border: 1px solid var(--outline-soft);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 247, 186, 0.98), rgba(255, 223, 117, 0.96));
    color: #7a5211;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(32, 18, 30, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.auth-theme-toggle:hover {
    transform: translateY(-1px) scale(1.03);
}

.auth-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

html[data-theme="dark"] .auth-theme-toggle {
    background: linear-gradient(135deg, rgba(22, 27, 55, 0.98), rgba(15, 18, 38, 0.96));
    color: #e8eaf6;
}

html[data-theme="dark"] .login-page-body {
    background: linear-gradient(180deg, #0d0f1e 0%, #0d0f1e 100%);
}

html[data-theme="dark"] .login-left-panel {
    background: linear-gradient(135deg, #111845 0%, #8c0c1e 100%);
}

html[data-theme="dark"] .login-right-panel {
    background: linear-gradient(180deg, rgba(13, 15, 30, 0.98), rgba(18, 15, 28, 0.98));
}

html[data-theme="dark"] .login-box {
    background: rgba(18, 20, 40, 0.94);
    border-color: rgba(60, 70, 130, 0.7);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .login-box h2,
html[data-theme="dark"] .login-form-modern label,
html[data-theme="dark"] .remember-me,
html[data-theme="dark"] .social-btn,
html[data-theme="dark"] .bottom-auth-link {
    color: var(--text-strong);
}

html[data-theme="dark"] .login-subtitle,
html[data-theme="dark"] .toggle-password {
    color: var(--text-soft);
}

html[data-theme="dark"] .login-divider {
    color: var(--text-soft);
}

html[data-theme="dark"] .login-divider::before,
html[data-theme="dark"] .login-divider::after {
    border-bottom-color: rgba(50, 60, 120, 0.5);
}

html[data-theme="dark"] .product-details-page {
    background: var(--bg, #0d0f1e);
}

html[data-theme="dark"] .product-details-card {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .product-image-box {
    background: var(--surface-muted, rgba(30, 34, 60, 0.6));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .product-text-box h1,
html[data-theme="dark"] .details-section h4 {
    color: var(--text-strong);
}

html[data-theme="dark"] .details-category {
    background:  rgba(196, 18, 48, 0.15);
    color: #ff9cc5;
}

html[data-theme="dark"] .details-rating,
html[data-theme="dark"] .details-section p,
html[data-theme="dark"] .product-text-box p {
    color: var(--text-soft);
}

html[data-theme="dark"] .admin-rail,
html[data-theme="dark"] .admin-panel-pro,
html[data-theme="dark"] .admin-kpi-card-pro,
html[data-theme="dark"] .admin-chart-card,
html[data-theme="dark"] .admin-alert-card,
html[data-theme="dark"] .admin-list-item,
html[data-theme="dark"] .admin-stat-row,
html[data-theme="dark"] .admin-inline-message,
html[data-theme="dark"] .admin-empty-state,
html[data-theme="dark"] .promo-edit-form,
html[data-theme="dark"] .admin-rail-card {
    background: rgba(18, 22, 45, 0.92);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-rail-card-soft,
html[data-theme="dark"] .accent-card,
html[data-theme="dark"] .warning-card,
html[data-theme="dark"] .blue-card,
html[data-theme="dark"] .purple-card,
html[data-theme="dark"] .green-card {
    background: rgba(42, 31, 45, 0.94);
}

html[data-theme="dark"] .admin-kpi-card.warning-card {
    background: rgba(18, 22, 45, 0.92);
}

html[data-theme="dark"] .admin-shell-header {
    background: linear-gradient(135deg,  rgba(140, 12, 30, 0.15) 0%, rgba(76, 35, 88, 0.96) 100%);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-rail-brand h2,
html[data-theme="dark"] .admin-rail-card strong,
html[data-theme="dark"] .admin-kpi-card-pro strong,
html[data-theme="dark"] .admin-panel-head h2,
html[data-theme="dark"] .admin-chart-card h3,
html[data-theme="dark"] .chart-row-head strong,
html[data-theme="dark"] .admin-alert-card strong,
html[data-theme="dark"] .admin-list-item strong,
html[data-theme="dark"] .admin-stat-row strong,
html[data-theme="dark"] .promo-code-header strong,
html[data-theme="dark"] .admin-product-content h3 {
    color: var(--text-strong);
}

html[data-theme="dark"] .admin-rail-link {
    color: var(--text-soft);
}

html[data-theme="dark"] .admin-rail-link.active,
html[data-theme="dark"] .admin-rail-link:hover {
    color: #fff;
}

html[data-theme="dark"] .secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaf6;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

html[data-theme="dark"] .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

html[data-theme="dark"] .chart-bar-track {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-table th,
html[data-theme="dark"] .admin-table td {
    border-bottom-color:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .admin-modern-form input,
html[data-theme="dark"] .admin-modern-form select,
html[data-theme="dark"] .admin-modern-form textarea,
html[data-theme="dark"] .promo-edit-form input,
html[data-theme="dark"] .promo-edit-form select {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

html[data-theme="dark"] .promo-description,
html[data-theme="dark"] .admin-panel-meta,
html[data-theme="dark"] .admin-inline-message,
html[data-theme="dark"] .admin-stat-row span,
html[data-theme="dark"] .chart-row-head span,
html[data-theme="dark"] .admin-table td,
html[data-theme="dark"] .admin-modern-form label,
html[data-theme="dark"] .admin-rail-brand p,
html[data-theme="dark"] .admin-list-item p,
html[data-theme="dark"] .admin-alert-card p,
html[data-theme="dark"] .admin-empty-state p {
    color: var(--text-soft);
}

html[data-theme="dark"] .admin-hero {
    background: linear-gradient(135deg, rgba(38, 29, 41, 0.98), rgba(30, 22, 33, 0.98));
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-hero .page-title,
html[data-theme="dark"] .admin-hero .admin-subtitle,
html[data-theme="dark"] .admin-hero .eyebrow,
html[data-theme="dark"] .admin-mini-stat span,
html[data-theme="dark"] .admin-mini-stat strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .admin-mini-stat {
    background: rgba(46, 34, 49, 0.96);
    border-color:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .admin-form-actions .secondary-btn,
html[data-theme="dark"] .admin-quick-actions .secondary-btn,
html[data-theme="dark"] .admin-category-actions .secondary-btn,
html[data-theme="dark"] .users-directory-panel .secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f6fb;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-form-actions .secondary-btn:hover,
html[data-theme="dark"] .admin-quick-actions .secondary-btn:hover,
html[data-theme="dark"] .admin-category-actions .secondary-btn:hover,
html[data-theme="dark"] .users-directory-panel .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .admin-form-actions .hero-btn,
html[data-theme="dark"] .admin-quick-actions .hero-btn,
html[data-theme="dark"] .users-directory-panel .add-cart-btn {
    color: #fff;
}

html[data-theme="dark"] .cart-main-card,
html[data-theme="dark"] .cart-summary-card,
html[data-theme="dark"] .checkout-form-card,
html[data-theme="dark"] .checkout-summary-card,
html[data-theme="dark"] .success-card {
    background: rgba(18, 22, 45, 0.94);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .cart-page-head h1,
html[data-theme="dark"] .checkout-form-card h2,
html[data-theme="dark"] .checkout-summary-card h2,
html[data-theme="dark"] .success-card h1,
html[data-theme="dark"] .cart-item-info h3,
html[data-theme="dark"] .summary-product-info h4,
html[data-theme="dark"] .payment-option strong,
html[data-theme="dark"] .total-line strong {
    color: var(--text-strong);
}

html[data-theme="dark"] .cart-page-head p,
html[data-theme="dark"] .cart-item-info p,
html[data-theme="dark"] .summary-line,
html[data-theme="dark"] .summary-note,
html[data-theme="dark"] .continue-shopping-link,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .secure-checkout,
html[data-theme="dark"] .checkout-form-modern label,
html[data-theme="dark"] .shipping-option p,
html[data-theme="dark"] .payment-option p,
html[data-theme="dark"] .success-card p,
html[data-theme="dark"] .summary-product-info p,
html[data-theme="dark"] .summary-product strong {
    color: var(--text-soft);
}

html[data-theme="dark"] .applied-promo-badge {
    background: rgba(196, 18, 48, 0.12);
    border-color: rgba(255, 140, 183, 0.35);
    color: #ffd2e3;
}

html[data-theme="dark"] .applied-promo-badge strong {
    color: #ff9cc5;
}

html[data-theme="dark"] .cart-line-total,
html[data-theme="dark"] .checkout-brand,
html[data-theme="dark"] .summary-product-info span,
html[data-theme="dark"] .cart-item-brand,
html[data-theme="dark"] .product-points-price {
    color: #ff9cc5 !important;
}

html[data-theme="dark"] .cart-item-card,
html[data-theme="dark"] .total-line {
    border-top-color:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .cart-item-image,
html[data-theme="dark"] .summary-product-image {
    background: rgba(46, 34, 49, 0.96);
}

html[data-theme="dark"] .qty-form input,
html[data-theme="dark"] .promo-row input,
html[data-theme="dark"] .checkout-form-modern input,
html[data-theme="dark"] .checkout-form-modern select,
html[data-theme="dark"] .card-details input,
html[data-theme="dark"] .wallet-details input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

html[data-theme="dark"] .checkout-form-modern select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%239fa8c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .qty-form input::placeholder,
html[data-theme="dark"] .promo-row input::placeholder,
html[data-theme="dark"] .checkout-form-modern input::placeholder,
html[data-theme="dark"] .card-details input::placeholder,
html[data-theme="dark"] .wallet-details input::placeholder {
    color: var(--text-soft);
}

html[data-theme="dark"] .summary-product-qty-badge {
    border-color: rgba(18, 22, 45, 0.94);
}

html[data-theme="dark"] .summary-product-size-badge,
html[data-theme="dark"] .summary-secure-badge {
    background: rgba(46, 34, 49, 0.96);
    border-color: rgba(30, 36, 118, 0.25);
    color: var(--text);
}

html[data-theme="dark"] .summary-secure-badge {
    border: 1px solid rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .payment-card {
    background: rgba(18, 22, 45, 0.94);
    border-color: rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .payment-card.is-selected {
    background: rgba(46, 34, 49, 0.96);
    border-color: #fff;
}

html[data-theme="dark"] .payment-card.is-selected .payment-card-radio {
    border-color: #fff;
}

html[data-theme="dark"] .payment-card.is-selected .payment-card-radio::after {
    background: #fff;
}

html[data-theme="dark"] .payment-card-icon {
    background: rgba(46, 34, 49, 0.96);
    color: var(--text-soft);
}

html[data-theme="dark"] .payment-card.is-selected .payment-card-icon {
    background: #fff;
    color: #0f172a;
}

html[data-theme="dark"] .remove-btn {
    background:  rgba(196, 18, 48, 0.15);
    color: #ff9cc5;
    border-color:  rgba(196, 18, 48, 0.15);
}

html[data-theme="dark"] .checkout-steps {
    background: rgba(22, 27, 55, 0.94);
}

html[data-theme="dark"] .step > span {
    background: rgba(99, 111, 132, 0.5);
}

html[data-theme="dark"] .step small {
    color: var(--text-soft);
}

html[data-theme="dark"] .step-line {
    background: rgba(99, 111, 132, 0.45);
}

html[data-theme="dark"] .shipping-option,
html[data-theme="dark"] .payment-option,
html[data-theme="dark"] .wallet-instructions {
    background: rgba(16, 20, 42, 0.96);
    border-color:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .payment-option:hover,
html[data-theme="dark"] .active-option {
    background:  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
}

html[data-theme="dark"] .card-brand-visual {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, #1d1730, #183f95 56%, #2f78d1 100%);
    box-shadow: 0 16px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .success-icon {
    background: rgba(47, 123, 84, 0.22);
    color: #82e2b0;
}

html[data-theme="dark"] .success-order-box {
    background: rgba(46, 34, 49, 0.96);
    border-color:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .success-order-box span {
    color: #f5f6fb;
    font-weight: 700;
}

html[data-theme="dark"] .success-order-box strong {
    color: #ff9cc5;
}

html[data-theme="dark"] .language-toggle,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .danger-btn,
html[data-theme="dark"] .remove-btn {
    color: #ffd2e3 !important;
}

html[data-theme="dark"] .hero-btn:not(.checkout-btn-big):not(.add-cart-btn):not(.login-btn-modern):not(.hero-btn-dark):not(.hero-btn-outline):not(.btn-primary) {
    background: #ffffff;
    color: #111111 !important;
    border: none;
    box-shadow: none;
}

html[data-theme="dark"] .hero-btn:not(.checkout-btn-big):not(.add-cart-btn):not(.login-btn-modern):not(.hero-btn-dark):not(.hero-btn-outline):not(.btn-primary):hover {
    background: #e8e8e8;
    color: #111111 !important;
}

html[data-theme="dark"] .hero-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: none;
}

html[data-theme="dark"] .hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff !important;
}

html[data-theme="dark"] .product-card-2026 .product-info h3,
html[data-theme="dark"] .product-card-2026 .product-name-link {
    color: #f8edf4 !important;
}

html[data-theme="dark"] .product-card-2026 .product-name-link:hover {
    color: #ff9cc5 !important;
}

html[data-theme="dark"] .language-toggle {
    background:  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
}

html[data-theme="dark"] .language-toggle:hover {
    background:  rgba(196, 18, 48, 0.15);
    box-shadow: none;
}

html[data-theme="dark"] .text-link:hover,
html[data-theme="dark"] .danger-btn:hover,
html[data-theme="dark"] .remove-btn:hover {
    color: #fff0f7 !important;
}

html[data-theme="dark"] .promo-inline-form .danger-btn.promo-action-btn {
    background:  rgba(196, 18, 48, 0.15);
    border-color: rgba(255, 140, 183, 0.4);
    color: #ffe3ee !important;
}

html[data-theme="dark"] .promo-inline-form .danger-btn.promo-action-btn:hover {
    background: linear-gradient(135deg, #1E2476, #C41230);
    border-color: transparent;
    color: #ffffff !important;
}

html[data-theme="dark"] .profile-cover {
    background: linear-gradient(135deg,  rgba(196, 18, 48, 0.15), rgba(88, 58, 113, 0.18));
}

html[data-theme="dark"] .profile-topbar h1,
html[data-theme="dark"] .profile-identity h2 {
    color: var(--text-strong);
}

html[data-theme="dark"] .profile-subtitle,
html[data-theme="dark"] .profile-email,
html[data-theme="dark"] .profile-detail-card p {
    color: var(--text-soft);
}

html[data-theme="dark"] .profile-hero-block,
html[data-theme="dark"] .profile-detail-card,
html[data-theme="dark"] .profile-photo-dialog {
    background: rgba(16, 20, 42, 0.96);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .profile-badge {
    background:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
}

html[data-theme="dark"] .profile-badge-muted {
    background: rgba(255, 255, 255, 0.08);
    color: #d5c9d4;
}

html[data-theme="dark"] .profile-detail-card span {
    color: #ff9cc5;
}

html[data-theme="dark"] .profile-photo-dialog,
html[data-theme="dark"] .profile-photo-dialog img {
    background: rgba(24, 18, 28, 0.98);
}

html[data-theme="dark"] .profile-photo-close {
    background: rgba(255, 255, 255, 0.12);
    color: #f5f6fb;
}

html[data-theme="dark"] .nav-search-form,
html[data-theme="dark"] .nav-toggle {
    background: var(--surface-glass);
    border-color: var(--outline-soft);
}

html[data-theme="dark"] .language-toggle {
    background: var(--surface-glass);
    border-color: var(--outline-soft);
    color: var(--text-strong);
}

html[data-theme="dark"] .nav-primary > a,
html[data-theme="dark"] .nav-drop-title,
html[data-theme="dark"] .navbar nav a {
    color: var(--muted);
}

html[data-theme="dark"] .nav-primary > a:hover,
html[data-theme="dark"] .nav-drop-title:hover {
    color: var(--text-strong);
}

html[data-theme="dark"] .nav-wishlist-link {
    color: var(--muted);
}

html[data-theme="dark"] .nav-wishlist-link:hover {
    color: #ff9cc5;
}

html[data-theme="dark"] .nav-dropdown-menu {
    background: rgba(18, 22, 45, 0.98);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .nav-dropdown-menu a {
    color: #f1e5ee;
}

html[data-theme="dark"] .nav-dropdown-menu a:hover {
    background:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
}

/* =========================
   FORGOT PASSWORD FLOW
========================= */

.forgot-password-page .login-box {
    max-width: 520px;
}

.recovery-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}

.recovery-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #e0e2ed;
    transition: width 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.recovery-step-dot.is-active {
    width: 30px;
    background: #C41230;
}

.recovery-step-dot.is-done {
    background: #C41230;
    opacity: 0.42;
}

.recovery-screen {
    display: none;
    animation: recoveryFade 0.24s ease;
}

.recovery-screen.is-active {
    display: block;
}

@keyframes recoveryFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recovery-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.recovery-method-btn {
    border: 1px solid #e0e2ed;
    border-radius: 18px;
    background: #fff;
    padding: 16px 12px;
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: 7px;
    color: #312833;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.recovery-method-btn:hover,
.recovery-method-btn.is-selected {
    border-color:  rgba(196, 18, 48, 0.15);
    background: #fff6fa;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px  rgba(196, 18, 48, 0.15);
}

.recovery-method-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7ead, #C41230);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
}

.recovery-method-btn strong {
    font-size: 1rem;
}

.recovery-method-btn small {
    color: #7b6f7c;
    line-height: 1.5;
}

.recovery-form {
    gap: 13px;
}

.recovery-channel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.recovery-channel-btn,
.recovery-back-btn {
    border: 1px solid #e0e2ed;
    background: #fff;
    color: #6d5e6b;
    border-radius: 14px;
    padding: 11px 12px;
    cursor: pointer;
    font-weight: 800;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.recovery-channel-btn:hover,
.recovery-channel-btn.is-selected,
.recovery-back-btn:hover {
    background:  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
    color: #9A0E25;
}

.recovery-back-btn {
    width: auto;
    margin-bottom: 16px;
}

.otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin: 8px 0 6px;
}

.otp-input {
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid #e0e2ed;
    border-radius: 16px;
    background: #fff;
    color: #2d2530;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 900;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.otp-input:focus,
.otp-input.is-filled {
    border-color: #C41230;
    box-shadow: 0 0 0 4px  rgba(196, 18, 48, 0.15);
}

.otp-input.has-error {
    border-color: #d94040;
    animation: recoveryShake 0.38s ease;
}

@keyframes recoveryShake {
    0%, 100% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-4px);
    }

    70% {
        transform: translateX(4px);
    }
}

.recovery-dev-code {
    background:  rgba(196, 18, 48, 0.15);
    border: 1px solid  rgba(196, 18, 48, 0.15);
    color: #9e3158;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-weight: 800;
    text-align: center;
}

.recovery-timer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7b6f7c;
    font-size: 0.94rem;
}

.recovery-timer-row button:disabled {
    opacity: 0.45;
    cursor: default;
}

.password-strength {
    height: 6px;
    background: #f0dce5;
    border-radius: 999px;
    overflow: hidden;
}

.password-strength span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #C41230, #67c78c);
    transition: width 0.25s ease;
}

.password-hint {
    color: #7b6f7c;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: -4px 0 2px;
}

.recovery-message.is-success {
    background: #e8fff0;
    border-color: #bdebcf;
    color: #257547;
}

.recovery-success {
    text-align: center;
}

.recovery-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: #e8fff0;
    color: #257547;
    font-weight: 900;
}

.recovery-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

html[data-theme="dark"] .recovery-step-dot {
    background:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .recovery-step-dot.is-active,
html[data-theme="dark"] .recovery-step-dot.is-done {
    background: #ff9cc5;
}

html[data-theme="dark"] .recovery-method-btn,
html[data-theme="dark"] .recovery-channel-btn,
html[data-theme="dark"] .recovery-back-btn,
html[data-theme="dark"] .otp-input {
    background: rgba(16, 20, 42, 0.96);
    border-color:  rgba(30, 36, 118, 0.25);
    color: var(--text-strong);
}

html[data-theme="dark"] .recovery-method-btn small,
html[data-theme="dark"] .recovery-timer-row,
html[data-theme="dark"] .password-hint {
    color: var(--text-soft);
}

html[data-theme="dark"] .recovery-method-btn:hover,
html[data-theme="dark"] .recovery-method-btn.is-selected,
html[data-theme="dark"] .recovery-channel-btn:hover,
html[data-theme="dark"] .recovery-channel-btn.is-selected,
html[data-theme="dark"] .recovery-back-btn:hover {
    background:  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
}

html[data-theme="dark"] .recovery-dev-code {
    background:  rgba(196, 18, 48, 0.15);
    border-color:  rgba(196, 18, 48, 0.15);
    color: #ffd2e3;
}

html[data-theme="dark"] .password-strength {
    background:  rgba(30, 36, 118, 0.25);
}

html[data-theme="dark"] .recovery-message.is-success,
html[data-theme="dark"] .recovery-success-icon {
    background: rgba(47, 123, 84, 0.22);
    border-color: rgba(130, 226, 176, 0.24);
    color: #82e2b0;
}

@media (max-width: 560px) {
    .recovery-method-grid,
    .recovery-channel-row {
        grid-template-columns: 1fr;
    }

    .otp-inputs {
        gap: 6px;
    }

    .otp-input {
        border-radius: 12px;
        font-size: 1.1rem;
    }
}

/* =========================
   ABOUT PAGE PROFESSIONAL
========================= */

.about-hero {
    min-height: 320px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    border-radius: 34px;
    padding: 44px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 30px;
    align-items: center;
    box-shadow: 0 22px 55px  rgba(196, 18, 48, 0.15);
    margin-bottom: 28px;
    overflow: hidden;
}

.about-hero-content span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 16px;
}

.about-hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin-bottom: 16px;
    color: #fff;
}

.about-hero-content p {
    max-width: 720px;
    font-size: 1.08rem;
    line-height: 1.8;
    opacity: 0.95;
}

.about-hero-card {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 28px;
    padding: 28px;
    backdrop-filter: blur(16px);
}

.about-hero-card h3 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: #fff;
}

.about-hero-card p {
    line-height: 1.7;
}

.about-identity {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 34px;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #f1d9e3;
    border-radius: 34px;
    padding: 44px;
    margin-bottom: 28px;
    box-shadow: 0 12px 30px  rgba(196, 18, 48, 0.15);
}

.about-identity-word {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-identity-word span {
    color: #C41230;
    -webkit-text-fill-color: #C41230;
}

.about-identity-badge {
    display: inline-block;
    background:  rgba(196, 18, 48, 0.1);
    color: #C41230;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}

.about-identity-copy h2 {
    color: #231c24;
    font-size: 2rem;
    margin-bottom: 12px;
}

.about-identity-copy p {
    color: #6f6470;
    line-height: 1.8;
    font-size: 1.05rem;
}

.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 30px;
}

.about-text-card,
.about-feature-card,
.workflow-step,
.about-tech {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #f1d9e3;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 12px 30px  rgba(196, 18, 48, 0.15);
}

.about-text-card h2,
.about-features h2,
.about-workflow h2,
.about-tech h2 {
    color: #231c24;
    font-size: 2rem;
    margin-bottom: 12px;
}

.about-text-card p,
.about-feature-card p,
.workflow-step p,
.about-tech p {
    color: #6f6470;
    line-height: 1.8;
}

.about-features,
.about-workflow {
    margin-bottom: 30px;
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.about-feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px  rgba(196, 18, 48, 0.15);
}

.feature-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    letter-spacing: 0;
    font-weight: 900;
    margin-bottom: 16px;
}

.about-feature-card h3,
.workflow-step h3 {
    margin-bottom: 10px;
    color: #2d2530;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.workflow-step span {
    display: inline-flex;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f4f5fb;
    color: #C41230;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 14px;
}

.about-tech {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: center;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tech-tags span {
    background: linear-gradient(135deg, #f4f5fb, #f5e7ff);
    color: #9A0E25;
    border: 1px solid #f0d8e1;
    padding: 11px 16px;
    border-radius: 999px;
    font-weight: 800;
}

html[data-theme="dark"] .about-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 30%),
        linear-gradient(135deg, #5a1f3a, #3b1835 48%, #1d1422);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .about-identity {
    background: rgba(18, 22, 45, 0.94);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .about-identity-copy h2 {
    color: var(--text-strong);
}

html[data-theme="dark"] .about-identity-copy p {
    color: var(--text-soft);
}

html[data-theme="dark"] .about-identity-badge {
    background:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
}

html[data-theme="dark"] .about-text-card,
html[data-theme="dark"] .about-feature-card,
html[data-theme="dark"] .workflow-step,
html[data-theme="dark"] .about-tech {
    background: rgba(18, 22, 45, 0.94);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .about-text-card h2,
html[data-theme="dark"] .about-features h2,
html[data-theme="dark"] .about-workflow h2,
html[data-theme="dark"] .about-tech h2,
html[data-theme="dark"] .about-feature-card h3,
html[data-theme="dark"] .workflow-step h3 {
    color: var(--text-strong);
}

html[data-theme="dark"] .about-text-card p,
html[data-theme="dark"] .about-feature-card p,
html[data-theme="dark"] .workflow-step p,
html[data-theme="dark"] .about-tech p {
    color: var(--text-soft);
}

html[data-theme="dark"] .workflow-step span,
html[data-theme="dark"] .tech-tags span {
    background:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
    border-color:  rgba(196, 18, 48, 0.15);
}

html[dir="rtl"] .about-hero,
html[dir="rtl"] .about-identity,
html[dir="rtl"] .about-section,
html[dir="rtl"] .about-features,
html[dir="rtl"] .about-workflow,
html[dir="rtl"] .about-tech {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .tech-tags {
    justify-content: flex-start;
}

@media (max-width: 1000px) {
    .about-hero,
    .about-identity,
    .about-tech {
        grid-template-columns: 1fr;
    }

    .about-features-grid,
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .about-hero {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .about-hero-card,
    .about-identity,
    .about-text-card,
    .about-feature-card,
    .workflow-step,
    .about-tech {
        border-radius: 22px;
        padding: 22px;
    }

    .about-features-grid,
    .workflow-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   GLOBAL POLISH LAYER — Fine-tuned enhancements
====================================================== */

/* ---- Animations ---- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ---- Product grid stagger ---- */
.products-grid-2026 .product-card-2026:nth-child(1)  { animation-delay: 0.04s; }
.products-grid-2026 .product-card-2026:nth-child(2)  { animation-delay: 0.09s; }
.products-grid-2026 .product-card-2026:nth-child(3)  { animation-delay: 0.14s; }
.products-grid-2026 .product-card-2026:nth-child(4)  { animation-delay: 0.19s; }
.products-grid-2026 .product-card-2026:nth-child(5)  { animation-delay: 0.24s; }
.products-grid-2026 .product-card-2026:nth-child(6)  { animation-delay: 0.29s; }
.products-grid-2026 .product-card-2026:nth-child(7)  { animation-delay: 0.34s; }
.products-grid-2026 .product-card-2026:nth-child(8)  { animation-delay: 0.38s; }

/* ---- Image hover zoom fix — smoother ---- */
.product-img { overflow: hidden; }
.product-img img { transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.product-card-2026:hover .product-img img { transform: scale(1.07); }

/* ---- Price row button polish ---- */
.price-row button {
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--transition);
}
.price-row button:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 18px  rgba(196, 18, 48, 0.15);
}
.price-row button:active { transform: scale(0.97); }

/* ---- Input focus ring (global) ---- */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color:  rgba(196, 18, 48, 0.15) !important;
    box-shadow: var(--focus-ring) !important;
}

/* ---- Cart: checkout big button active ---- */
.checkout-btn-big {
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    cursor: pointer;
    font-size: 1.08rem;
}
.checkout-btn-big:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 36px  rgba(196, 18, 48, 0.15);
}
.checkout-btn-big:active { transform: translateY(0) scale(0.99); }

/* ---- Cart image round corners ---- */
.cart-item-image {
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ---- Summary totals separator ---- */
.summary-line + .summary-line {
    border-top: 1px solid rgba(240, 220, 230, 0.55);
}

/* ---- Admin shell header gradient tweak ---- */
.admin-shell-header {
    background: linear-gradient(130deg, #C41230 0%, #e8637f 50%, #ff8c7a 100%);
}

/* ---- Admin panel panel border ---- */
.admin-panel-pro {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
}


/* ---- Analytics KPI rings pulse on hover ---- */
.an-kpi-card {
    transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.3s ease;
}
.an-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px  rgba(196, 18, 48, 0.15);
}

/* ---- Admin rail scroll ---- */
.admin-rail { overflow-y: auto; max-height: calc(100vh - 120px); }
.admin-rail::-webkit-scrollbar { width: 4px; }
.admin-rail::-webkit-scrollbar-thumb { background:  rgba(196, 18, 48, 0.15); border-radius: 99px; }

/* ---- Footer inner hover ---- */
.site-footer-inner {
    transition: box-shadow var(--transition);
}
.site-footer-inner:hover {
    box-shadow: 0 24px 50px  rgba(196, 18, 48, 0.15);
}

/* ---- Social link press ---- */
.site-social-link:active { transform: scale(0.97); }

/* ---- Navbar glass improvement ---- */
.navbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---- Contact card entrance ---- */
.contact-card-modern { animation: scaleIn 0.5s ease both; }

/* ---- Remove btn polish ---- */
.remove-btn {
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.remove-btn:hover {
    background: #fde8ec;
    color: #9A0E25;
    transform: scale(1.03);
}

/* ---- Orders tab active indicator ---- */
.orders-tab.active {
    background: linear-gradient(135deg, #f4f5fb, #eef0fc);
    box-shadow: 0 4px 14px  rgba(196, 18, 48, 0.15);
}

/* ---- Hero eyebrow badge ---- */
.hero-content span {
    background: rgba(255,255,255,0.18);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.24);
}

/* ---- Dark mode enhancement layer ---- */
html[data-theme="dark"] .admin-table th {
    background: rgba(42, 30, 45, 0.7);
}
html[data-theme="dark"] .admin-table tbody tr:hover {
    background:  rgba(196, 18, 48, 0.15);
}
html[data-theme="dark"] .admin-table th,
html[data-theme="dark"] .admin-table td {
    border-bottom-color: rgba(80, 58, 80, 0.6);
}
html[data-theme="dark"] .status-paid    { background: rgba(66, 190, 125, 0.12); border-color: rgba(66,190,125,0.2); }
html[data-theme="dark"] .status-pending { background: rgba(255, 187, 61, 0.12); border-color: rgba(255,187,61,0.22); }
html[data-theme="dark"] .status-shipped { background: rgba(72, 142, 235, 0.12); border-color: rgba(72,142,235,0.2); }
html[data-theme="dark"] .status-delivered { background: rgba(32, 174, 136, 0.12); border-color: rgba(32,174,136,0.2); }
html[data-theme="dark"] .status-neutral  { background: rgba(153, 126, 144, 0.1); border-color: rgba(153,126,144,0.18); }
html[data-theme="dark"] .status-cancelled { background: rgba(120, 120, 130, 0.16); border-color: rgba(120,120,130,0.28); color: #b8b4c0; }
html[data-theme="dark"] .status-returned { background: rgba(217, 119, 6, 0.18); border-color: rgba(217,119,6,0.3); color: #fbbf24; }
html[data-theme="dark"] .btn-cancel { color: #ff9cc5; border-color: rgba(255, 140, 183, 0.35); }
html[data-theme="dark"] .admin-panel-pro {
    background: rgba(28, 21, 30, 0.92);
    border-color: rgba(90, 68, 88, 0.8);
}
html[data-theme="dark"] .orders-tab.active {
    background:  rgba(196, 18, 48, 0.15);
}
html[data-theme="dark"] .cat-btn {
    background: rgba(38, 28, 42, 0.88);
    border-color: rgba(90, 68, 88, 0.7);
    color: #c8b0c4;
}
html[data-theme="dark"] .cat-btn:hover {
    background:  rgba(196, 18, 48, 0.15);
    color: #ffb3d3;
}
html[data-theme="dark"] .cart-item-card:hover { background:  rgba(196, 18, 48, 0.15); }
html[data-theme="dark"] .secondary-btn {
    background: rgba(42, 30, 45, 0.94);
    border-color: rgba(90, 68, 88, 0.8);
    color: #d4bece;
}
html[data-theme="dark"] .secondary-btn:hover {
    background: rgba(60, 42, 64, 0.98);
    color: #ffb3d3;
}
html[data-theme="dark"] .product-card-2026 {
    border-color: rgba(90, 68, 88, 0.5);
}
html[data-theme="dark"] .product-card-2026:hover {
    border-color:  rgba(196, 18, 48, 0.15);
    box-shadow: 0 24px 48px rgba(0,0,0,0.36), 0 0 0 1.5px  rgba(196, 18, 48, 0.15);
}

/* =====================================================
   DARK MODE — Admin Order Detail Page
   ===================================================== */

/* Panel cards background */
html[data-theme="dark"] .admin-order-detail-panel {
    background: rgba(18, 22, 45, 0.92);
    border-color:  rgba(30, 36, 118, 0.25);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

/* Panel headings */
html[data-theme="dark"] .admin-order-detail-panel h3 {
    color: #e8eaf6;
}

/* Row dividers */
html[data-theme="dark"] .admin-detail-row {
    border-bottom-color:  rgba(30, 36, 118, 0.25);
}

/* Row labels */
html[data-theme="dark"] .admin-detail-row span {
    color: #b49ab0;
}

/* Row values */
html[data-theme="dark"] .admin-detail-row strong {
    color: #e8eaf6;
}

/* Product item card */
html[data-theme="dark"] .admin-order-item-card {
    border-bottom-color:  rgba(30, 36, 118, 0.25);
}

/* Product item texts */
html[data-theme="dark"] .admin-order-item-info .item-name {
    color: #e8eaf6;
}
html[data-theme="dark"] .admin-order-item-info .item-brand,
html[data-theme="dark"] .admin-order-item-info .item-qty {
    color: #b49ab0;
}
html[data-theme="dark"] .admin-order-item-info .item-cat {
    color: #9a7d96;
}

/* Order status form button hover in dark */
html[data-theme="dark"] .admin-order-status-form .orders-action-btn {
    opacity: 0.92;
}

/* "Order completed" text */
html[data-theme="dark"] .admin-order-detail-panel p[style*="color:#27ae60"] {
    color: #56d079 !important;
}

/* ======================================================
   MODERN INTERACTIVE MULTI-IMAGE UPLOADER
   ====================================================== */
.modern-uploader-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 6px;
}

.uploader-dropzone {
    border: 2px dashed var(--border);
    background: var(--input-bg);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.uploader-dropzone:hover,
.uploader-dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.uploader-icon {
    width: 44px;
    height: 44px;
    fill: var(--text-soft);
    transition: var(--transition);
}

.uploader-dropzone:hover .uploader-icon,
.uploader-dropzone.dragover .uploader-icon {
    fill: var(--primary);
    transform: translateY(-3px);
}

.dropzone-text {
    font-size: 0.92rem;
    color: var(--text-soft);
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

.dropzone-btn {
    pointer-events: none;
    font-size: 0.88rem;
    padding: 8px 16px;
}

.uploader-previews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    width: 100%;
}

.preview-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--input-bg);
    animation: uploaderFadeIn 0.3s ease;
    box-shadow: var(--shadow-card);
}

.preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.preview-remove-btn:hover {
    background: #ff3b30;
    transform: scale(1.1);
}

.preview-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background:  rgba(196, 18, 48, 0.15);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    backdrop-filter: blur(4px);
}

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

/* Dark mode overrides for uploader */
html[data-theme="dark"] .uploader-dropzone {
    border-color:  rgba(30, 36, 118, 0.25);
    background: rgba(15, 18, 38, 0.5);
}

html[data-theme="dark"] .uploader-dropzone:hover,
html[data-theme="dark"] .uploader-dropzone.dragover {
    border-color: var(--primary);
    background:  rgba(196, 18, 48, 0.15);
}

html[data-theme="dark"] .preview-card {
    border-color:  rgba(30, 36, 118, 0.25);
}


/* ===========================
   Adidas-Style Footer
=========================== */
.site-footer-adidas {
    background: #000;
    color: #fff;
    margin-top: 60px;
    padding-top: 56px;
}

.footer-adidas-inner {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 48px;
}

.footer-adidas-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 36px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-adidas-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    margin-top: 0;
}

.footer-adidas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-adidas-list a {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.18s;
}

.footer-adidas-list a:hover {
    color: #fff;
}

.footer-adidas-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-adidas-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}

.footer-adidas-social a:hover {
    background: rgba(255, 255, 255, 0.24);
}

.footer-adidas-social svg {
    width: 18px;
    height: 18px;
}

.footer-adidas-bottom {
    padding: 22px 0;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 900px) {
    .footer-adidas-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .footer-adidas-inner {
        padding: 0 24px;
    }
    .footer-adidas-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}





/* ===========================
   Navbar — Links Centered Fix
=========================== */
.navbar {
    display: flex;
    align-items: center;
    padding: 0 40px;
    height: 64px;
    gap: 0;
}

.logo {
    flex: 0 0 auto;
}

.site-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    min-width: 0;
}

.nav-links-cluster {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-width: 0;
}

.nav-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.nav-search-form {
    flex: 1 1 480px;
    max-width: 640px;
    min-width: 220px;
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 0;
}


/* ===========================
   Dark Mode — Full Fix
=========================== */
html[data-theme="dark"] body {
    background: var(--body-gradient);
    color: var(--text);
}

/* Navbar */
html[data-theme="dark"] .navbar {
    background: var(--navbar-bg);
    border-bottom-color: var(--navbar-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .logo a { color: #ffffff; }
html[data-theme="dark"] .nav-primary > a,
html[data-theme="dark"] .nav-drop-title { color: rgba(255,255,255,0.85); }
html[data-theme="dark"] .nav-primary > a:hover,
html[data-theme="dark"] .nav-drop-title:hover { color: #ffffff; }
html[data-theme="dark"] .nav-search-form {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .nav-search-form input {
    background: transparent;
    color: #e8eaf6;
}
html[data-theme="dark"] .nav-search-form input::placeholder { color: rgba(255,255,255,0.38); }
html[data-theme="dark"] .nav-search-form:focus-within {
    background: rgba(255,255,255,0.1);
    border-color: rgba(196, 18, 48, 0.5);
}
html[data-theme="dark"] .nav-search-form button {
    background: linear-gradient(135deg, #C41230, #9A0E25);
    color: #fff;
}
html[data-theme="dark"] .language-toggle {
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.82);
    background: transparent;
}
html[data-theme="dark"] .nav-cart-link,
html[data-theme="dark"] .nav-wishlist-link { color: rgba(255,255,255,0.82); }
html[data-theme="dark"] .nav-toggle span { background: #ffffff; }
html[data-theme="dark"] .nav-toggle {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

/* Cards */
html[data-theme="dark"] .product-card-2026 {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .product-card-2026 h3 a,
html[data-theme="dark"] .product-name-link { color: var(--text-strong); }
html[data-theme="dark"] .product-category,
html[data-theme="dark"] .product-brand,
html[data-theme="dark"] .product-points-price { color: var(--text-soft); }

/* Inputs & Forms */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-strong);
}

/* Catalog / Category chips */
html[data-theme="dark"] .cat-btn {
    background: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--chip-text);
}
html[data-theme="dark"] .cat-btn.active,
html[data-theme="dark"] .cat-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Dropdown menus */
html[data-theme="dark"] .nav-dropdown-menu {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}
html[data-theme="dark"] .nav-dropdown-menu a { color: rgba(255,255,255,0.78); }
html[data-theme="dark"] .nav-dropdown-menu a:hover {
    background: var(--dropdown-link-hover);
    color: #fff;
}

/* Section headings */
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .eyebrow { color: var(--text-strong); }
html[data-theme="dark"] .text-link { color: var(--primary); }

/* Catalog filter panel */
html[data-theme="dark"] .catalog-filter-panel {
    background: var(--surface);
    border-color: var(--border);
}

/* Empty state */
html[data-theme="dark"] .empty-state {
    background: var(--surface);
    border-color: var(--border);
}

/* Profile & simple pages */
html[data-theme="dark"] .simple-page,
html[data-theme="dark"] .profile-card-modern,
html[data-theme="dark"] .profile-edit-preview,
html[data-theme="dark"] .profile-edit-form-wrap {
    background: var(--surface);
    border-color: var(--border);
}

/* Footer (black footer stays black) */
html[data-theme="dark"] .site-footer-adidas { background: #000; }

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #111827; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(196,18,48,0.4); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(196,18,48,0.7); }

/* Notification bell */
html[data-theme="dark"] .notification-bell { color: rgba(255,255,255,0.82); }
html[data-theme="dark"] .notification-dropdown {
    background: var(--surface-strong);
    border-color: var(--border);
}

/* User avatar/dropdown */
html[data-theme="dark"] .user-dropdown {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}
html[data-theme="dark"] .user-dropdown a { color: rgba(255,255,255,0.78); }
html[data-theme="dark"] .user-dropdown a:hover { background: var(--dropdown-link-hover); color: #fff; }

/* Add to cart / buttons */
html[data-theme="dark"] .add-cart-btn {
    background: var(--surface-glass);
    color: var(--text-strong);
    border-color: var(--border);
}
html[data-theme="dark"] .add-cart-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Price */
html[data-theme="dark"] .price-row strong { color: var(--text-strong); }


/* ===========================
   Dark Mode — Text Visibility Fix
=========================== */

/* Empty states */
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .empty-state h3 { color: var(--text-strong); }
html[data-theme="dark"] .empty-state p   { color: var(--text-soft); }

/* General body text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--text-strong); }

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li { color: var(--text); }

html[data-theme="dark"] label { color: var(--text-soft); }

/* Muted / subtitle text */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .admin-subtitle,
html[data-theme="dark"] .login-subtitle,
html[data-theme="dark"] .profile-subtitle { color: var(--text-soft); }

/* Section headers */
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .section-header-left h2 { color: var(--text-strong); }
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .section-header-left p  { color: var(--text-soft); }

/* Product card text */
html[data-theme="dark"] .product-info h3,
html[data-theme="dark"] .product-info h3 a       { color: var(--text-strong); }
html[data-theme="dark"] .product-category        { color: var(--text-soft); }
html[data-theme="dark"] .product-brand           { color: var(--text-soft); }
html[data-theme="dark"] .price-row strong        { color: var(--text-strong); }
html[data-theme="dark"] .product-points-price    { color: var(--text-soft); }
html[data-theme="dark"] .product-rating          { color: #f5c842; }

/* Cart page */
html[data-theme="dark"] .cart-item-name          { color: var(--text-strong); }
html[data-theme="dark"] .cart-item-meta,
html[data-theme="dark"] .cart-item-price         { color: var(--text-soft); }
html[data-theme="dark"] .cart-summary-label      { color: var(--text-soft); }
html[data-theme="dark"] .cart-summary-value      { color: var(--text-strong); }

/* Forms — login, signup, profile */
html[data-theme="dark"] .login-form-modern label,
html[data-theme="dark"] .login-box h2            { color: var(--text-strong); }
html[data-theme="dark"] .login-subtitle          { color: var(--text-soft); }
html[data-theme="dark"] .toggle-password         { color: var(--text-soft); }
html[data-theme="dark"] .remember-me,
html[data-theme="dark"] .bottom-auth-link        { color: var(--text-soft); }
html[data-theme="dark"] .social-btn              {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-strong);
}

/* Wishlist page */
html[data-theme="dark"] .wishlist-page-title,
html[data-theme="dark"] .wishlist-eyebrow        { color: var(--text-strong); }

/* Order / profile pages */
html[data-theme="dark"] .profile-detail-card strong { color: var(--text-strong); }
html[data-theme="dark"] .profile-detail-card span,
html[data-theme="dark"] .profile-detail-card p      { color: var(--text-soft); }
html[data-theme="dark"] .order-number,
html[data-theme="dark"] .order-date               { color: var(--text-soft); }

/* Contact page */
html[data-theme="dark"] .contact-card-modern h1,
html[data-theme="dark"] .contact-card-modern h2  { color: var(--text-strong); }
html[data-theme="dark"] .contact-card-modern p   { color: var(--text-soft); }

/* About page */
html[data-theme="dark"] .simple-page h1,
html[data-theme="dark"] .simple-page h2,
html[data-theme="dark"] .simple-page h3          { color: var(--text-strong); }
html[data-theme="dark"] .simple-page p           { color: var(--text-soft); }

/* Catalog toolbar */
html[data-theme="dark"] .catalog-toolbar         { color: var(--text); }

/* Nav admin link */
html[data-theme="dark"] .nav-admin a             { color: rgba(255,255,255,0.82); }
html[data-theme="dark"] .nav-admin a:hover       { color: #ffffff; }

/* Signup page */
html[data-theme="dark"] .signup-left h1,
html[data-theme="dark"] .signup-left p           { color: rgba(255,255,255,0.9); }

/* Keep links colored */
html[data-theme="dark"] a.text-link              { color: var(--primary); }
html[data-theme="dark"] .bottom-auth-link a,
html[data-theme="dark"] .forgot-link             { color: var(--primary); }


/* Notification bell — dark mode */
html[data-theme="dark"] .notification-bell {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaf6;
    box-shadow: none;
}

html[data-theme="dark"] .notification-bell:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Language toggle — dark mode */
html[data-theme="dark"] .language-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaf6;
}

html[data-theme="dark"] .language-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* ===========================
   Admin Dashboard — Brand Colors Fix
=========================== */
/* Hero banner */
.admin-shell-header {
    background: linear-gradient(135deg, #1E2476 0%, #C41230 100%) !important;
}

/* Rail sidebar */
.admin-rail {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(30, 36, 118, 0.12);
}

/* KPI cards brand accent */
.admin-kpi-card-pro {
    border-color: rgba(30, 36, 118, 0.10);
}
.admin-kpi-card-pro:hover {
    box-shadow: 0 28px 56px rgba(30, 36, 118, 0.12);
}

/* Rail text colors */
.admin-rail-brand h2,
.admin-panel-head h2 {
    color: #1E2476;
}
.eyebrow {
    color: #C41230;
}

/* secondary-btn inside header: white buttons */
.admin-shell-header .secondary-btn {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}
.admin-shell-header .secondary-btn:hover {
    background: rgba(255,255,255,0.30);
    border-color: rgba(255,255,255,0.7);
    color: #fff;
    transform: translateY(-2px);
}
.admin-shell-header .hero-btn {
    background: #fff;
    color: #1E2476;
    border: none;
}
.admin-shell-header .hero-btn:hover {
    background: rgba(255,255,255,0.92);
    color: #C41230;
}

/* Dark mode — admin */
html[data-theme="dark"] .admin-rail {
    background: rgba(13, 15, 30, 0.96);
    border-color: rgba(50, 60, 120, 0.5);
}
html[data-theme="dark"] .admin-rail-brand h2,
html[data-theme="dark"] .admin-panel-head h2 {
    color: #e8eaf6;
}
html[data-theme="dark"] .admin-rail-link {
    color: #9fa8c7;
}
html[data-theme="dark"] .admin-rail-card {
    background: rgba(18, 22, 45, 0.90);
    border-color: rgba(50, 60, 120, 0.4);
}
html[data-theme="dark"] .admin-panel-pro {
    background: rgba(16, 20, 42, 0.96);
    border-color: rgba(50, 60, 120, 0.35);
}
html[data-theme="dark"] .admin-kpi-card-pro {
    background: rgba(18, 22, 45, 0.95);
    border-color: rgba(50, 60, 120, 0.35);
}
html[data-theme="dark"] .admin-kpi-card-pro strong {
    color: #e8eaf6;
}
html[data-theme="dark"] .admin-kpi-chip {
    background: rgba(196, 18, 48, 0.15);
    color: #ff6b80;
}
html[data-theme="dark"] .admin-kpi-chip-muted {
    background: rgba(80, 90, 140, 0.25);
    color: #9fa8c7;
}
html[data-theme="dark"] .secondary-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(80, 90, 140, 0.4);
    color: #c8cde8;
}
html[data-theme="dark"] .secondary-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #ffffff;
    border-color: rgba(196, 18, 48, 0.5);
}
html[data-theme="dark"] .admin-table thead th {
    background: rgba(18, 22, 45, 0.98);
    color: #9fa8c7;
}
html[data-theme="dark"] .admin-table tbody tr:hover {
    background: rgba(30, 36, 118, 0.12);
}
html[data-theme="dark"] .admin-stat-row {
    border-color: rgba(50, 60, 120, 0.3);
}
html[data-theme="dark"] .admin-stat-row span { color: #9fa8c7; }
html[data-theme="dark"] .admin-stat-row strong { color: #e8eaf6; }
html[data-theme="dark"] .admin-modern-form input,
html[data-theme="dark"] .admin-modern-form select,
html[data-theme="dark"] .admin-modern-form textarea {
    background: rgba(15, 18, 38, 0.97);
    border-color: rgba(50, 60, 120, 0.6);
    color: #e8eaf6;
}
html[data-theme="dark"] .admin-list-item {
    border-color: rgba(50, 60, 120, 0.3);
}
html[data-theme="dark"] .admin-list-item strong { color: #e8eaf6; }
html[data-theme="dark"] .admin-panel-head h2 { color: #e8eaf6; }
html[data-theme="dark"] .admin-panel-meta { color: #9fa8c7; }


/* ── Product colors builder ──────────────────────────── */
.colors-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-hex-input {
    width: 48px;
    height: 40px;
    padding: 2px;
    border: 1.5px solid rgba(193,59,111,0.3);
    border-radius: 10px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.color-name-input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid rgba(193,59,111,0.25);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.9rem;
}

/* ── ASICS-style Colorway Variant Builder ── */
#colorways-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.colorway-block {
    padding: 16px;
    border-radius: 16px;
    border: 1.5px solid rgba(193,59,111,0.18);
    background: rgba(193,59,111,0.03);
}
.colorway-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.colorway-default-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(193,59,111,0.25);
    background: rgba(255,255,255,0.06);
    font-size: 0.78rem;
    font-weight: 700;
    color: #888;
    cursor: pointer;
}
.colorway-default-toggle:has(input:checked) {
    border-color: #C41230;
    background: rgba(196,18,48,0.08);
    color: #C41230;
}
.colorway-default-toggle input[type="radio"] {
    accent-color: #C41230;
    cursor: pointer;
}
.colorway-name-input {
    flex: 1;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid rgba(193,59,111,0.25);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.9rem;
}
.colorway-remove-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(196,18,48,0.3);
    background: rgba(196,18,48,0.06);
    color: #C41230;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.colorway-images-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}
@media (max-width: 700px) {
    .colorway-images-row { grid-template-columns: 1fr; }
}
.colorway-image-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.colorway-image-field label span {
    font-weight: 400;
    color: #888;
    font-size: 0.72rem;
}
.colorway-image-field input[type="file"] {
    width: 100%;
    font-size: 0.8rem;
}
.colorway-existing-thumb {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(0,0,0,0.08);
}
.colorway-existing-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.colorway-existing-gallery img,
.colorway-existing-gallery video {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
}
.colorway-size-matrix label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.colorway-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}
.colorway-size-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.colorway-size-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: opacity 0.15s;
    z-index: 1;
}
.colorway-size-cell:hover .colorway-size-remove-btn {
    opacity: 1;
}
.colorway-size-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
}
.colorway-size-qty-input {
    width: 100%;
    padding: 6px 4px;
    text-align: center;
    border-radius: 8px;
    border: 1.5px solid rgba(193,59,111,0.2);
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.85rem;
}
.colorway-add-size-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.colorway-add-size-input {
    width: 120px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid rgba(193,59,111,0.2);
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.85rem;
}
.colorway-add-size-btn {
    min-width: auto;
    padding: 7px 14px;
    font-size: 0.8rem;
}

.managed-img-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.managed-img-wrap img,
.managed-img-wrap video {
    width: 100%;
    display: block;
    border-radius: 10px;
}
.managed-img-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    backdrop-filter: blur(2px);
    line-height: 1;
}
.managed-img-wrap:hover .managed-img-delete {
    opacity: 1;
}
.managed-img-type {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 2px 5px;
}

.color-name-input-full {
    flex: 1;
    height: 42px;
    padding: 0 16px;
    border: 1.5px solid rgba(193,59,111,0.25);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.92rem;
    min-width: 0;
}
.color-name-input-full:focus {
    outline: none;
    border-color: #c13b6f;
    box-shadow: 0 0 0 3px rgba(193,59,111,0.12);
}

.color-remove-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(193,59,111,0.3);
    background: transparent;
    color: #c13b6f;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.color-remove-btn:hover { background: rgba(193,59,111,0.15); }

.size-remove-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(193,59,111,0.3);
    background: transparent;
    color: #c13b6f;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.size-remove-btn:hover { background: rgba(193,59,111,0.15); }

/* ── Shoe sizes grid ─────────────────────────────────── */
.sizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px;
    background: rgba(30, 36, 118, 0.04);
    border: 1.5px solid rgba(30, 36, 118, 0.12);
    border-radius: 16px;
}
.size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1.5px solid rgba(30, 36, 118, 0.15);
    border-radius: 12px;
}
.size-label {
    font-size: 1rem;
    font-weight: 700;
    color: #1E2476;
    min-width: 28px;
}
.size-qty-input {
    width: 64px;
    padding: 6px 10px;
    border: 1.5px solid rgba(30, 36, 118, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    text-align: center;
    outline: none;
    transition: border-color .2s;
}
.size-qty-input:focus {
    border-color: #1E2476;
}
html[data-theme="dark"] .sizes-grid {
    background: rgba(30, 36, 118, 0.08);
    border-color: rgba(50, 60, 120, 0.3);
}
html[data-theme="dark"] .size-row {
    background: rgba(15, 18, 38, 0.8);
    border-color: rgba(50, 60, 120, 0.4);
}
html[data-theme="dark"] .size-label { color: #9fa8c7; }
html[data-theme="dark"] .size-qty-input {
    background: rgba(10, 12, 30, 0.9);
    border-color: rgba(50, 60, 120, 0.5);
    color: #e8eaf6;
}

.size-guide-editor-wrap {
    overflow-x: auto;
    border: 1.5px solid rgba(30, 36, 118, 0.12);
    border-radius: 16px;
    background: rgba(30, 36, 118, 0.04);
}

.size-guide-editor-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.size-guide-editor-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1E2476;
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1.5px solid rgba(30, 36, 118, 0.15);
}

.size-guide-editor-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(30, 36, 118, 0.08);
}

.size-guide-editor-table tr:last-child td {
    border-bottom: none;
}

.size-guide-editor-table .size-label {
    font-weight: 700;
    color: #1E2476;
}

.size-guide-input {
    width: 72px;
    padding: 6px 8px;
    border: 1.5px solid rgba(30, 36, 118, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    text-align: center;
    transition: border-color .2s;
}

.size-guide-input:focus {
    border-color: #1E2476;
}

html[data-theme="dark"] .size-guide-editor-wrap {
    background: rgba(30, 36, 118, 0.08);
    border-color: rgba(50, 60, 120, 0.3);
}

html[data-theme="dark"] .size-guide-editor-table th {
    color: #9fa8c7;
    border-bottom-color: rgba(50, 60, 120, 0.3);
}

html[data-theme="dark"] .size-guide-editor-table td {
    border-bottom-color: rgba(50, 60, 120, 0.2);
}

html[data-theme="dark"] .size-guide-editor-table .size-label { color: #9fa8c7; }

html[data-theme="dark"] .size-guide-input {
    background: rgba(10, 12, 30, 0.9);
    border-color: rgba(50, 60, 120, 0.5);
    color: #e8eaf6;
}

/* ── Product details color selector ─────────────────── */
.color-selector-section {
    margin: 14px 0;
}
.color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.color-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.color-option:hover {
    transform: translateY(-2px);
}
.color-option.is-active {
    border-color: #c13b6f;
    box-shadow: 0 4px 12px rgba(193,59,111,0.2);
}
/* All of this colorway's sizes are out of stock — still tappable (its
   photos/size list are worth seeing), just visually blurred so it reads
   as unavailable at a glance, same treatment as the catalog card dots. */
.color-option-oos .color-swatch {
    filter: blur(1.5px) grayscale(45%);
    opacity: 0.5;
}
.color-option-oos:hover .color-swatch {
    filter: blur(0) grayscale(0);
    opacity: 0.85;
}
.color-swatch {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    border: 1.5px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}
/* Only used when a colorway has no photo of its own yet (a product mid-
   setup) — every normal colorway renders the <img> above instead. */
.color-swatch-fallback {
    background: var(--swatch, #999);
}

/* ── Product details size selector ──────────────────── */
.size-selector-section {
    margin: 18px 0 14px;
}
.size-selector-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 10px;
}
.size-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.size-option {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border: 2px solid rgba(30, 36, 118, 0.25);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.size-option:hover:not(:disabled) {
    border-color: #1E2476;
    background: rgba(30, 36, 118, 0.06);
    transform: translateY(-1.5px);
}
.size-option:active:not(:disabled) {
    transform: scale(0.97);
}
.size-option:focus-visible {
    outline: 2px solid var(--primary, #C41230);
    outline-offset: 2px;
}
.size-option.is-selected {
    border-color: #C41230;
    background: rgba(196, 18, 48, 0.08);
    color: #C41230;
    box-shadow: 0 3px 10px rgba(196, 18, 48, 0.2);
}
.size-option-oos {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.4);
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), #94a3b8 calc(50% - 1px), #94a3b8 50%, transparent calc(50% + 1px)),
        #f1f5f9;
    color: #64748b;
}
html[data-theme="dark"] .size-option-oos {
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), #64748b calc(50% - 1px), #64748b 50%, transparent calc(50% + 1px)),
        rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #9fa8c7;
}
html[data-theme="dark"] .size-option {
    border-color: rgba(100, 110, 180, 0.4);
    background: rgba(15, 18, 38, 0.7);
    color: #c8cde8;
}
html[data-theme="dark"] .size-option:hover:not(:disabled) {
    border-color: #9fa8c7;
    background: rgba(30, 36, 118, 0.2);
}
html[data-theme="dark"] .size-option.is-selected {
    border-color: #C41230;
    background: rgba(196, 18, 48, 0.15);
    color: #e8637a;
}

/* ── Image lightbox ──────────────────────────────────── */
.img-lightbox {
    position: fixed;
    inset: 0;
    /* Decisively above every other fixed-position widget on the storefront
       (AI assistant launcher, feedback tab, onboarding tour, announcement
       ticker) — a modal must always be the topmost layer when open. */
    z-index: 999999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbFadeIn .18s ease;
    overflow: hidden;
}
@keyframes lbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.img-lightbox[hidden] { display: none; }
.img-lightbox-close {
    position: fixed;
    top: 32px;
    right: 32px;
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s, transform .15s;
    z-index: 1000000;
}
.img-lightbox-close:hover { opacity: 0.7; transform: scale(1.1); }
html[dir="rtl"] .img-lightbox-close { right: auto; left: 32px; }
.img-lightbox-zoom-hint {
    position: fixed;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 1000000;
    opacity: 1;
    transition: opacity 0.5s;
}
.img-lightbox-zoom-hint.hidden { opacity: 0; }

/* ── Prev/Next navigation arrows — large frosted-glass circles pinned to
   the far edges of the viewport, centered on the vertical axis. ── */
.img-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000000;
    transition: all 0.2s ease;
}
.img-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}
.img-lightbox-nav:active {
    transform: translateY(-50%) scale(0.96);
}
.img-lightbox-nav[hidden] { display: none; }
.img-lightbox-prev { left: 32px; }
.img-lightbox-next { right: 32px; }

/* RTL flips which physical side "next" points toward, but the arrows
   themselves stay visually correct (glyph mirrored to keep pointing
   outward) since prev/next semantics are already swapped in JS for RTL. */
html[dir="rtl"] .img-lightbox-nav svg {
    transform: scaleX(-1);
}

/* ── Bottom counter + mini dot strip ── */
.img-lightbox-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.img-lightbox-counter {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.img-lightbox-counter[hidden] { display: none; }
.img-lightbox-thumbs {
    display: flex;
    gap: 7px;
}
.img-lightbox-thumbs[hidden] { display: none; }
.img-lightbox-thumb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.img-lightbox-thumb-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

@media (max-width: 600px) {
    .img-lightbox-nav {
        width: 40px;
        height: 40px;
    }
    .img-lightbox-prev { left: 10px; }
    .img-lightbox-next { right: 10px; }
}
.img-lightbox-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.img-lightbox-inner.is-dragging { cursor: grabbing; }
.img-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    user-select: none;
    will-change: transform;
    transition: none;
}
.img-lightbox-img.zoom-transition {
    transition: transform 0.25s ease;
}

/* ── Product image wishlist heart button ─────────────── */
.product-image-save.fav-btn-circle {
    min-width: 46px;
    width: 46px;
    height: 46px;
    color: #C41230;
    border-color: rgba(196,18,48,0.25);
}
.product-image-save .wishlist-heart-icon {
    display: block;
    stroke: currentColor;
    fill: none;
    transition: fill .2s;
}
.product-image-save.is-active .wishlist-heart-icon,
.product-image-save:hover .wishlist-heart-icon {
    fill: currentColor;
}
.product-image-save.is-active {
    background: rgba(196,18,48,0.08);
    border-color: #C41230;
    color: #C41230;
}
html[data-theme="dark"] .product-image-save.fav-btn-circle {
    background: rgba(20,22,45,0.85);
    border-color: rgba(196,18,48,0.4);
    color: #e8637a;
}

/* ── Wishlist heart icon — all product cards ─────────── */
.fav-btn-circle .wishlist-heart-icon {
    display: block;
    stroke: currentColor;
    fill: none;
    transition: fill .18s, stroke .18s;
    pointer-events: none;
}
.fav-btn-circle.is-active .wishlist-heart-icon {
    fill: currentColor;
}
.fav-btn-circle:hover .wishlist-heart-icon {
    fill: currentColor;
}

/* ── Order item size badge ───────────────────────────── */
.item-size {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 2px;
}
.item-size strong {
    color: #1E2476;
    font-weight: 700;
}
html[data-theme="dark"] .item-size strong {
    color: #9fa8c7;
}

/* ── Cart item size ──────────────────────────────────── */
.cart-item-size {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 2px;
}
.cart-item-size strong {
    color: #1E2476;
    font-weight: 700;
}
html[data-theme="dark"] .cart-item-size strong {
    color: #9fa8c7;
}

/* ── Facebook social button ──────────────────────────── */
.social-btn-facebook svg {
    flex-shrink: 0;
}

/* ================================================================
   VIRTUAL TRY-ON — Modal
   ================================================================ */

/* Trigger button */
.tryon-trigger-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #1E2476 0%, #2d35a8 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    transition: opacity 0.2s, transform 0.15s;
}
.tryon-trigger-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.tryon-trigger-btn:active { transform: translateY(0); }

/* Overlay */
.tryon-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.tryon-overlay[hidden] { display: none; }

/* Modal box */
.tryon-modal {
    background: var(--card-bg, #fff);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
}
html[data-theme="dark"] .tryon-modal {
    background: #1a1a2e;
    border: 1px solid #2e2e4e;
}

/* Header */
.tryon-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border, #eee);
}
.tryon-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #111);
    margin: 0;
}
.tryon-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted, #888);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s;
}
.tryon-close-btn:hover { color: var(--text, #111); }

/* Steps */
.tryon-step { padding: 20px 24px 24px; }

/* Hint */
.tryon-hint {
    font-size: 0.88rem;
    color: var(--muted, #888);
    margin-bottom: 16px;
    line-height: 1.6;
    text-align: center;
}

/* Upload area */
.tryon-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 2px dashed var(--border, #ddd);
    border-radius: 14px;
    padding: 32px 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--muted, #888);
    text-align: center;
    margin-bottom: 16px;
}
.tryon-upload-area:hover,
.tryon-upload-area.is-dragover {
    border-color: #1E2476;
    background: rgba(30,36,118,.05);
    color: #1E2476;
}
.tryon-upload-area small {
    font-size: 0.78rem;
    opacity: .7;
}
.tryon-upload-area[hidden] { display: none; }

/* Preview */
.tryon-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.tryon-preview-wrap[hidden] { display: none; }
.tryon-preview-img {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border, #eee);
}
.tryon-change-btn {
    background: none;
    border: 1px solid var(--border, #ccc);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    color: var(--muted, #666);
    cursor: pointer;
    transition: border-color 0.2s;
}
.tryon-change-btn:hover { border-color: #1E2476; color: #1E2476; }

/* Generate button */
.tryon-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #C41230 0%, #a00e26 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.tryon-generate-btn:disabled { opacity: .45; cursor: not-allowed; }
.tryon-generate-btn:not(:disabled):hover { opacity: .9; }

/* Loading */
.tryon-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    text-align: center;
    color: var(--muted, #888);
    line-height: 1.7;
}
.tryon-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(196,18,48,.15);
    border-top-color: #C41230;
    border-radius: 50%;
    animation: tryonSpin .8s linear infinite;
}
@keyframes tryonSpin { to { transform: rotate(360deg); } }

/* Result */
.tryon-result-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted, #666);
    margin-bottom: 12px;
    text-align: center;
}
.tryon-result-img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border, #eee);
    object-fit: contain;
    max-height: 380px;
    margin-bottom: 16px;
}
.tryon-result-actions {
    display: flex;
    gap: 10px;
}
.tryon-download-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 11px;
    background: #1E2476;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.2s;
}
.tryon-download-btn:hover { opacity: .88; }
.tryon-retry-btn {
    flex: 1;
    padding: 11px;
    background: none;
    border: 1.5px solid var(--border, #ccc);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #333);
    cursor: pointer;
    transition: border-color 0.2s;
}
.tryon-retry-btn:hover { border-color: #C41230; color: #C41230; }

/* Error */
.tryon-error-box {
    margin: 0 24px 20px;
    padding: 14px 16px;
    background: #fff0f3;
    border-radius: 10px;
    border: 1px solid #f5b8c4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.tryon-error-box[hidden] { display: none; }
.tryon-error-box p {
    margin: 0;
    font-size: 0.88rem;
    color: #c41230;
    font-weight: 500;
}
html[data-theme="dark"] .tryon-error-box {
    background: rgba(196,18,48,.1);
    border-color: rgba(196,18,48,.3);
}

@media (max-width: 520px) {
    .tryon-modal { border-radius: 16px 16px 0 0; max-height: 95vh; }
    .tryon-overlay { align-items: flex-end; padding: 0; }
}

/* ═══════════════════════════════════════════════════════
   DARK MODE — COMPREHENSIVE FIX
   ─────────────────────────────────────────────────────── */

/* ── Inputs: lighter background so they're distinguishable ── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: rgba(30, 28, 50, 0.98) !important;
    border-color: rgba(120, 90, 140, 0.35) !important;
    color: #e8eaf6 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(200,190,210,0.45) !important; }
html[data-theme="dark"] select option { background: #1a1528; color: #e8eaf6; }

/* ── Catalog Sidebar ── */
html[data-theme="dark"] .sidebar-head { border-bottom-color: rgba(193,59,111,0.18); }
html[data-theme="dark"] .sidebar-title { color: #e8eaf6; }
html[data-theme="dark"] .sidebar-clear-all { color: #ff8ab8; }

html[data-theme="dark"] .sf-label { color: rgba(200,185,215,0.65); }

html[data-theme="dark"] .sf-input,
html[data-theme="dark"] .sf-select {
    background: rgba(30, 28, 50, 0.98) !important;
    border-color: rgba(120, 90, 140, 0.35) !important;
    color: #e8eaf6 !important;
}

html[data-theme="dark"] .sf-dd-trigger {
    background: rgba(30, 28, 50, 0.98);
    border-color: rgba(120, 90, 140, 0.35);
    color: #e8eaf6;
}
html[data-theme="dark"] .sf-dd-trigger:hover,
html[data-theme="dark"] .sf-dropdown.is-open .sf-dd-trigger {
    border-color: #c13b6f;
    background: rgba(40, 30, 60, 0.99);
}
html[data-theme="dark"] .sf-dd-arrow { color: rgba(200,185,215,0.55); }

html[data-theme="dark"] .sf-dd-item {
    color: #e8eaf6;
}
html[data-theme="dark"] .sf-dd-item:hover { background: rgba(193,59,111,0.12); }
html[data-theme="dark"] .sf-dd-item.selected {
    background: rgba(193,59,111,0.18);
    color: #ff8ab8;
}
html[data-theme="dark"] .sf-dd-item + .sf-dd-item { border-top-color: rgba(193,59,111,0.1); }

html[data-theme="dark"] .sf-chip {
    border-color: rgba(120,90,140,0.35);
    color: #d4c8e0;
}
html[data-theme="dark"] .sf-chip:hover { background: rgba(193,59,111,0.12); border-color: #c13b6f; }
html[data-theme="dark"] .sf-chip.active { background: #c13b6f; border-color: #c13b6f; color: #fff; }
html[data-theme="dark"] .sf-chip-clear { color: #ff8ab8; border-color: rgba(193,59,111,0.3); }

html[data-theme="dark"] .sf-price-sep { color: rgba(200,185,215,0.5); }

html[data-theme="dark"] .sf-reset-btn {
    border-color: rgba(120,90,140,0.3);
    color: #c8b8d8;
}
html[data-theme="dark"] .sf-reset-btn:hover { background: rgba(193,59,111,0.08); }

html[data-theme="dark"] .sf-color-dot { border-color: rgba(255,255,255,0.15); }

/* ── Catalog main area ── */
html[data-theme="dark"] .catalog-topbar .eyebrow { color: rgba(200,185,215,0.65); }
html[data-theme="dark"] .catalog-title { color: #f0ecf8; }
html[data-theme="dark"] .catalog-count { color: rgba(200,185,215,0.55); }

/* ── Active filter bar ── */
html[data-theme="dark"] .af-chip {
    background: rgba(193,59,111,0.15);
    border-color: rgba(193,59,111,0.3);
    color: #ff8ab8;
}

/* ── Mobile filter button ── */
html[data-theme="dark"] .mob-filter-btn {
    border-color: rgba(193,59,111,0.35);
    color: #e0d4ee;
}

/* ── Sidebar overlay ── */
html[data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,0.65); }

/* ── General page cards / panels ── */
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .section-header p { color: var(--text-strong); }
html[data-theme="dark"] .eyebrow { color: var(--muted); }

html[data-theme="dark"] .admin-panel {
    background: rgba(18,14,32,0.96);
    border-color: rgba(80,60,100,0.3);
}
html[data-theme="dark"] .admin-panel h2 { color: #e8eaf6; }
html[data-theme="dark"] .admin-list-item { border-color: rgba(80,60,100,0.2); }
html[data-theme="dark"] .admin-list-item strong { color: #ede5f5; }

html[data-theme="dark"] .subcat-group-header { color: #ff8ab8; }

/* ── Admin POS / Office Store (Module 3) ── */
.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 980px) {
    .pos-layout { grid-template-columns: 1fr; }
}

.pos-product-panel .form-field,
.pos-summary-panel .form-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.pos-product-panel label,
.pos-summary-panel label {
    font-weight: 800;
    font-size: 0.94rem;
}

.pos-product-panel input,
.pos-summary-panel input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #ebd8e0;
    background: #fff;
    font: inherit;
    outline: none;
}

.pos-product-panel input:focus,
.pos-summary-panel input:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px rgba(196, 18, 48, 0.15);
}

.pos-search-wrap {
    position: relative;
    margin-bottom: 18px;
}

.pos-search-input {
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid #ebd8e0;
    background: #fff7fb;
    font: inherit;
    outline: none;
}

.pos-search-input:focus {
    border-color: #e59cb9;
    box-shadow: 0 0 0 4px rgba(196, 18, 48, 0.15);
}

.pos-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ebd8e0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(20, 10, 20, 0.18);
    padding: 8px;
}

.pos-search-empty {
    padding: 14px;
    text-align: center;
    color: #8a7a85;
}

.pos-search-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.pos-search-result-row:hover {
    background: #fff0f5;
}

.pos-search-result-row img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.pos-search-result-copy {
    display: grid;
    gap: 2px;
}

.pos-search-result-copy small {
    color: #8a7a85;
}

.pos-selected-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: #fff7fb;
    border: 1px solid #ebd8e0;
    margin-bottom: 20px;
}

.pos-selected-product img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.pos-selected-copy {
    display: grid;
    gap: 2px;
    flex: 1;
}

.pos-selected-copy span {
    color: #8a7a85;
    font-size: 0.9rem;
}

.pos-selected-price {
    font-weight: 800;
    color: #c41230;
}

.pos-variant-row {
    margin-bottom: 20px;
}

.pos-variant-row label {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
}

.pos-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pos-size-pill {
    min-width: 76px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    display: grid;
    gap: 2px;
    transition: all 0.15s ease;
}

.pos-size-pill small {
    font-weight: 500;
    font-size: 0.74rem;
    color: #8a97a8;
}

.pos-size-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.pos-size-pill.is-active small {
    color: #cbd5e1;
}

.pos-size-pill.is-oos {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.pos-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pos-color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--swatch, #ccc);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
    cursor: pointer;
    padding: 0;
}

.pos-color-swatch.is-active {
    box-shadow: 0 0 0 2px #0f172a;
}

.pos-payment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pos-payment-pill {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pos-payment-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pos-payment-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.pos-breakdown {
    margin: 22px 0;
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    display: grid;
    gap: 10px;
}

.pos-breakdown-row {
    display: flex;
    justify-content: space-between;
    color: #475569;
    font-weight: 600;
}

.pos-breakdown-total {
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
}

.pos-submit-btn {
    width: 100%;
    justify-content: center;
    font-size: 1.02rem;
    padding: 16px;
}

.pos-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-theme="dark"] .pos-search-input,
html[data-theme="dark"] .pos-product-panel input,
html[data-theme="dark"] .pos-summary-panel input {
    background: rgba(18,14,32,0.9);
    border-color: rgba(80,60,100,0.3);
    color: #ede5f5;
}

html[data-theme="dark"] .pos-search-results {
    background: #150f22;
    border-color: rgba(80,60,100,0.3);
}

html[data-theme="dark"] .pos-search-result-row:hover {
    background: rgba(255,138,184,0.08);
}

html[data-theme="dark"] .pos-selected-product {
    background: rgba(18,14,32,0.9);
    border-color: rgba(80,60,100,0.3);
}

html[data-theme="dark"] .pos-size-pill,
html[data-theme="dark"] .pos-payment-pill {
    background: rgba(18,14,32,0.9);
    border-color: rgba(80,60,100,0.3);
    color: #cbd5e1;
}

html[data-theme="dark"] .pos-size-pill.is-active,
html[data-theme="dark"] .pos-payment-pill.is-active {
    background: #fff;
    color: #0f172a;
    border-color: #fff;
}

html[data-theme="dark"] .pos-breakdown {
    background: rgba(18,14,32,0.9);
}

html[data-theme="dark"] .pos-breakdown-row { color: #cbd5e1; }
html[data-theme="dark"] .pos-breakdown-total { color: #fff; border-top-color: rgba(80,60,100,0.4); }

/* ── Product cards ── */
html[data-theme="dark"] .product-category { color: var(--muted); }
html[data-theme="dark"] .product-brand { color: var(--muted); }
html[data-theme="dark"] .price-row strong { color: #ff8ab8; }

/* ── Buttons ── */
html[data-theme="dark"] .secondary-btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    color: #d4c8e0;
}
html[data-theme="dark"] .secondary-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* ── Form fields (general labels) ── */
html[data-theme="dark"] .form-field label,
html[data-theme="dark"] label { color: #cfc0e0; }

/* ── Empty state ── */
html[data-theme="dark"] .empty-state h3,
html[data-theme="dark"] .empty-state p { color: var(--text-soft); }

/* ── Tables ── */
html[data-theme="dark"] table { border-color: rgba(80,60,100,0.25); }
html[data-theme="dark"] th { background: rgba(30,25,50,0.96); color: #c8b8e0; }
html[data-theme="dark"] td { border-color: rgba(80,60,100,0.18); color: #d8ceec; }
html[data-theme="dark"] tr:hover td { background: rgba(193,59,111,0.06); }

/* ── Footer ── */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer-modern {
    background: #0d0b18;
    border-top-color: rgba(80,60,100,0.25);
    color: #c0b4d4;
}
html[data-theme="dark"] .footer-modern a { color: #c0b4d4; }
html[data-theme="dark"] .footer-modern a:hover { color: #ff8ab8; }
html[data-theme="dark"] .footer-brand { color: #ede5f5; }

/* ── Modals / overlays ── */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .dialog {
    background: rgba(18,14,32,0.98);
    border-color: rgba(80,60,100,0.3);
    color: #e8eaf6;
}

/* ── Scrollbar in dark mode ── */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(20,16,36,0.4); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(193,59,111,0.35); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(193,59,111,0.6); }

/* ── Inline filter strip (if still used) ── */
html[data-theme="dark"] .inline-filters-strip {
    background: rgba(22,18,36,0.96);
    border-color: rgba(193,59,111,0.2);
}
html[data-theme="dark"] .xbtn {
    border-color: rgba(120,90,140,0.35);
    color: #d4c8e0;
}
html[data-theme="dark"] .xbtn:hover { background: rgba(193,59,111,0.12); }
html[data-theme="dark"] .xbtn.active { background: #c13b6f; color: #fff; border-color: #c13b6f; }

/* ── Wishlist / cart icon buttons ── */
html[data-theme="dark"] .fav-btn-circle {
    background: rgba(22,18,36,0.88);
    border-color: rgba(120,90,140,0.3);
    color: #e8eaf6;
}

/* ── Admin rail ── */
html[data-theme="dark"] .admin-rail {
    background: rgba(14,11,26,0.97);
    border-right-color: rgba(80,60,100,0.25);
}
html[data-theme="dark"] .admin-rail-link { color: #c0b4d4; }
html[data-theme="dark"] .admin-rail-link:hover,
html[data-theme="dark"] .admin-rail-link.active {
    background: rgba(193,59,111,0.12);
    color: #ff8ab8;
}

/* ── Category page cards ── */
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .cat-card {
    background: rgba(22,18,36,0.95);
    border-color: rgba(80,60,100,0.28);
}
html[data-theme="dark"] .category-card h3,
html[data-theme="dark"] .cat-card h3 { color: #ede5f5; }

/* ═══════════════════════════════════════════════════════════
   Nike/Adidas-inspired enhancements
   ═══════════════════════════════════════════════════════════ */

/* ── Discount badge + price styles ──────────────────────── */
.product-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #C41230;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: .04em;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(196,18,48,.35);
}
.price-original {
    display: block;
    text-decoration: line-through;
    color: rgba(0,0,0,.4);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
}
.price-final-disc {
    display: block;
    color: #C41230;
    font-size: 1rem;
    font-weight: 900;
}
.details-discount-badge {
    display: inline-block;
    background: var(--primary, #C41230);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: .05em;
}
.details-price-original {
    display: inline-block;
    text-decoration: line-through;
    color: var(--text-soft, rgba(0,0,0,.38));
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
}
.details-price-final {
    display: inline-block;
    color: var(--text-strong, #17141c);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
}
.details-price-save {
    display: inline-block;
    background: rgba(196,18,48,.1);
    color: var(--primary, #C41230);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin: 4px 0 0;
}
html[data-theme="dark"] .price-original { color: rgba(255,255,255,.35); }
html[data-theme="dark"] .details-price-original { color: rgba(255,255,255,.35); }
html[data-theme="dark"] .details-price-save { background: rgba(196,18,48,.2); }

.details-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-strong, #17141c);
    font-size: 2rem;
    margin: 10px 0 2px;
}

/* ── Micro-header row: category · brand tracking-caps ── */
.details-microheader {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Badge & social proof row: discount pill + verified rating,
   above the title (Adidas reference layout) ── */
.details-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
}

.details-badge-row:empty {
    display: none;
}

/* ── Color selector — "X colours available" label + active color name,
   miniature swatch cards below ── */
.color-selector-header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

.color-selector-label-static {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-soft, #64748b);
}

.color-selector-active-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-strong, #17141c);
}

/* ── Size advice banner — frosted note directly under the size grid ── */
.size-advice-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-soft, #475569);
    font-size: 0.8rem;
    line-height: 1.5;
}

.size-advice-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-soft, #64748b);
}

.size-advice-banner strong {
    color: var(--text-strong, #17141c);
}

html[data-theme="dark"] .size-advice-banner {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Ticto Perks — frosted loyalty card ── */
.ticto-perks-card {
    background: var(--surface-muted, rgba(196,18,48,0.04));
    border: 1px solid var(--border, rgba(196,18,48,0.12));
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0;
}
.ticto-perks-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary, #C41230);
    margin: 0 0 8px;
}
.ticto-perks-card .product-points-row { margin: 0; }

/* ── CTA row: Add to Bag (primary, fills remaining space) + Save to
   Wishlist (secondary, fixed width) ── */
.details-cta-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 18px;
}
.details-cta-row #addToCartForm { flex: 1; display: flex; }
.details-cta-row .details-add-cart-btn { width: 100%; margin-top: 0; border-radius: 9999px; }

.details-trust-bullets {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 16px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-trust-bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.5;
}

.details-trust-bullets li span[aria-hidden] {
    flex-shrink: 0;
    font-size: 1rem;
}

.details-trust-en {
    font-weight: 500;
    color: #64748b;
    font-size: 0.8rem;
}

html[data-theme="dark"] .details-trust-bullets {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .details-trust-bullets li {
    color: var(--text-strong);
}

html[data-theme="dark"] .details-trust-en {
    color: var(--text-soft);
}
.details-wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-strong, #17141c);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.details-wishlist-btn:hover { border-color: var(--primary, #C41230); color: var(--primary, #C41230); }
.details-wishlist-btn.is-active { border-color: var(--primary, #C41230); background: rgba(196,18,48,0.08); color: var(--primary, #C41230); }
.details-wishlist-btn.is-active svg { fill: currentColor; }

/* ── 1 & 2: Hover second image + Low stock badge ─────────── */
.product-card-2026 .product-img { position: relative; overflow: hidden; }
.card-img-primary  { transition: opacity 0.35s ease, transform 0.35s ease; image-rendering: -webkit-optimize-contrast; }
.card-img-secondary {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: scale(1.04);
    image-rendering: -webkit-optimize-contrast;
}
.product-card-2026:hover .card-img-primary  { opacity: 0; transform: scale(1.04); }
.product-card-2026:hover .card-img-secondary { opacity: 1; transform: scale(1); }
/* A color swatch is active (Module 2) — the JS-driven preview/gallery on
   .card-img-primary takes over, so the plain img2 auto-crossfade above
   must not paper over it just because the pointer is still somewhere
   over the card (which includes the swatch row it's hovering). */
.product-card-2026.swatch-active:hover .card-img-primary  { opacity: 1; transform: none; }
.product-card-2026.swatch-active:hover .card-img-secondary { opacity: 0; }

/* ── Inline multi-angle nav arrows (Module 2) ───────────────────────── */
.card-img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.85);
    color: #1E2476;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
    padding: 0;
}
.card-img-nav-prev { left: 8px; }
.card-img-nav-next { right: 8px; }
.product-card-2026:hover .card-img-nav { opacity: 1; }
.card-img-nav:hover { background: #fff; }
.card-img-nav-hidden { display: none; }
@media (hover: none) {
    /* Touch devices have no hover to reveal these on — show them
       whenever a gallery actually has more than one photo (JS still
       toggles card-img-nav-hidden), so swipe isn't the only way in. */
    .card-img-nav { opacity: 1; background: rgba(255,255,255,.7); }
}

.low-stock-badge {
    background: #E53935 !important;
    color: #fff !important;
    font-weight: 800;
    animation: pulse-badge 1.6s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}

/* ── 3: Quick Add overlay ───────────────────────────────── */
.quick-add-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: flex;
    justify-content: center;
}
.product-card-2026:hover .quick-add-overlay {
    opacity: 1;
    transform: translateY(0);
}
.quick-add-btn {
    display: flex; align-items: center; gap: 7px;
    background: #fff;
    color: #1E2476;
    border: none;
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    white-space: nowrap;
}
.quick-add-btn:hover {
    background: #C41230;
    color: #fff;
    transform: scale(1.04);
}

/* ── 4: Color swatches on card ──────────────────────────── */
.card-color-swatches {
    display: flex; align-items: center; gap: 5px;
    margin: 5px 0 4px;
    flex-wrap: wrap;
}
/* ASICS-style mini photo swatch — a real thumbnail of that colorway's shoe,
   never a flat color-dot circle. Sized up from the old 13px dot (illegible
   as a photo at that size) to a small square everything else on the card
   still reads as "just a row of tiny thumbnails" alongside. */
.card-color-dot {
    width: 36px; height: 36px;
    border-radius: 6px;
    border: 1.5px solid rgba(0,0,0,.14);
    display: inline-block;
    object-fit: cover;
    transition: transform 0.15s, border-color 0.15s;
}
.card-color-dot:hover { transform: scale(1.12); border-color: rgba(30,36,118,.5); }
/* Fallback for a colorway with no photo of its own yet — a flat tint so
   it's still visually distinguishable, not invisible. */
.card-color-dot-fallback { background: var(--swatch, #999); }
/* A colorway that does NOT satisfy an active color/size search (catalog
   dropdown or the chatbot funnel) — dimmed + blurred so the ones that DO
   match stand out sharp and clickable, instead of a shopper having to
   guess which of several similarly-colored swatches actually has what
   they searched for. Every swatch stays this way (no dimming at all)
   when no filter is active. */
.card-color-dot-no-match {
    filter: blur(1.5px) grayscale(45%);
    opacity: 0.5;
}
.card-color-dot-no-match:hover {
    filter: blur(0) grayscale(0);
    opacity: 0.85;
}
/* A colorway with zero stock across every one of its sizes — blurred like
   a search-mismatch swatch (still visible/tappable, never hidden), so a
   shopper can tell at a glance which colors on this card are actually
   purchasable right now. */
.card-color-dot-oos {
    filter: blur(1.5px) grayscale(45%);
    opacity: 0.5;
}
.card-color-dot-oos:hover {
    filter: blur(0) grayscale(0);
    opacity: 0.85;
}
/* ── 5: Size Guide link ─────────────────────────────────── */
.size-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.size-selector-header .size-selector-label { margin: 0; }
.size-guide-link {
    background: none; border: none;
    color: #1E2476;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    transition: color 0.2s;
}
.size-guide-link:hover { color: #C41230; }

/* ── 6: Free Shipping Progress Bar (cart) ──────────────── */
.free-shipping-bar-wrap {
    background: rgba(30,36,118,.05);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(30,36,118,.1);
}
.free-shipping-msg {
    font-size: 0.82rem;
    margin: 0 0 9px;
    color: #333;
}
.free-shipping-msg.achieved { color: #2e7d32; }
.free-shipping-track {
    height: 7px;
    background: rgba(30,36,118,.12);
    border-radius: 10px;
    overflow: hidden;
}
.free-shipping-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E2476, #C41230);
    border-radius: 10px;
    transition: width 0.6s ease;
    min-width: 4px;
}

/* ── 7: Recently Viewed ─────────────────────────────────── */
.recently-viewed-section {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px 40px;
}
.recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.rv-card {
    text-decoration: none;
    border-radius: 14px;
    /* overflow:hidden here is only clipping the image's square corners to
       match the card's own border-radius — the card has no fixed `height`,
       so it isn't a "fixed-height + overflow:hidden" trap that could clip
       the name/price text below the image. */
    overflow: hidden;
    border: 1px solid rgba(30,36,118,.1);
    transition: box-shadow 0.2s, transform 0.2s;
    background: var(--card-bg, #fff);
}
.rv-card:hover { box-shadow: 0 6px 20px rgba(30,36,118,.14); transform: translateY(-3px); }
/* FIX 3 (image container check): aspect-ratio + object-fit:cover (not a
   fixed px height) so the photo always fills its box cleanly at any card
   width instead of stretching/cropping oddly at the grid's auto-fill sizes. */
.rv-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rv-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary, #111);
    padding: 8px 8px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-price { font-size: 0.72rem; color: #C41230; font-weight: 700; padding: 0 8px 8px; }

/* ── 8: Sticky Add to Cart ──────────────────────────────── */
.sticky-cart-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 800;
    background: var(--surface, #fff);
    border-top: 1px solid rgba(30,36,118,.12);
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    padding: 10px 20px;
}

/* Hard backstop: the floating bottom action bar is a mobile-only pattern —
   the right rail is already sticky and always in view on desktop, so this
   must never appear there regardless of the IntersectionObserver's JS
   timing (it only toggles display on/off based on scroll, it doesn't know
   about viewport width). */
@media (min-width: 768px) {
    .sticky-cart-bar {
        display: none !important;
    }
}
.sticky-cart-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sticky-cart-info { display: flex; align-items: center; gap: 12px; }
.sticky-cart-thumb {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,.08);
}
.sticky-cart-name {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sticky-cart-price { font-size: 0.8rem; color: #C41230; font-weight: 700; margin: 2px 0 0; }
.sticky-add-btn {
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(196, 18, 48, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-add-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 22px rgba(196, 18, 48, 0.48);
}
.sticky-add-btn:active { transform: scale(0.97); }

/* ── Size Guide Modal ───────────────────────────────────── */
.sg-modal-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sg-modal-box {
    background: #fff;
    border-radius: 20px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sg-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none;
    font-size: 1.3rem; cursor: pointer;
    color: inherit; opacity: .6;
    transition: opacity .2s, transform .2s;
    line-height: 1;
}
.sg-modal-close:hover { opacity: 1; transform: scale(1.2); }
.sg-modal-title { margin: 0 0 18px; font-size: 1.05rem; font-weight: 800; }
.sg-table-wrap { overflow-x: auto; }
.sg-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85rem; text-align: center;
}
.sg-table thead tr { background: rgba(30,36,118,.07); }
.sg-table th {
    padding: 10px 8px;
    border-bottom: 2px solid rgba(30,36,118,.14);
    font-weight: 800;
    color: #1E2476;
    letter-spacing: .02em;
}
.sg-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color: #333;
    transition: background .15s;
}
.sg-table tbody tr:hover td { background: rgba(30,36,118,.04); }
.sg-table tbody tr:last-child td { border-bottom: none; }
.sg-modal-note {
    margin: 14px 0 0;
    font-size: 0.78rem;
    opacity: .55;
    text-align: center;
}

/* ── Size Guide Modal dark mode ─────────────────────────── */
html[data-theme="dark"] .sg-modal-box {
    background: #1c1830;
    border: 1px solid rgba(120,100,180,.28);
}
html[data-theme="dark"] .sg-modal-title { color: #e8e4f8; }
html[data-theme="dark"] .sg-modal-close { color: #c8c0e8; }
html[data-theme="dark"] .sg-table thead tr { background: rgba(80,70,160,.28); }
html[data-theme="dark"] .sg-table th {
    color: #c0b8e8;
    border-bottom-color: rgba(120,100,180,.4);
}
html[data-theme="dark"] .sg-table td {
    color: #d8d2f0;
    border-bottom-color: rgba(120,100,180,.18);
}
html[data-theme="dark"] .sg-table tbody tr:hover td { background: rgba(80,70,160,.18); }
html[data-theme="dark"] .sg-modal-note { color: rgba(200,195,230,.5); }

/* Dark mode overrides */
html[data-theme="dark"] .quick-add-btn { background: #1a1a2e; color: #b0b8e8; }
html[data-theme="dark"] .quick-add-btn:hover { background: #C41230; color: #fff; }
html[data-theme="dark"] .free-shipping-bar-wrap { background: rgba(30,36,118,.15); border-color: rgba(100,110,200,.2); }
html[data-theme="dark"] .free-shipping-msg { color: #c8cef4; }
html[data-theme="dark"] .rv-card { background: rgba(22,18,36,.95); border-color: rgba(80,60,100,.28); }
html[data-theme="dark"] .sticky-cart-bar { background: #0f0c1e; border-top-color: rgba(80,60,100,.3); }
html[data-theme="dark"] .card-color-dot { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .size-guide-link { color: #b0b8e8; }
html[data-theme="dark"] .size-guide-link:hover { color: #ff8ab8; }

/* ── Admin: Chatbot management ── */
.chatbot-step-panel {
    margin-bottom: 24px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* MODULE 3: category builder tabs */
.chatbot-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chatbot-category-tab {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(30, 36, 118, 0.08);
    color: var(--text, #241d27);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.chatbot-category-tab:hover {
    background: rgba(30, 36, 118, 0.16);
}

/* The exclusive/accordion view's active tab — only this category's panel
   is visible at a time (see the script at the bottom of admin_chatbot.html). */
.chatbot-category-tab.is-selected {
    background: rgba(30, 36, 118, 0.14);
    border-color: #1E2476;
}

.chatbot-category-tab.is-inactive {
    opacity: 0.55;
}

.chatbot-category-tab-add {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
}

.chatbot-category-tab-add.is-selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(30, 36, 118, 0.3);
}

.chatbot-step-panel-highlight {
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.35);
    border-color: rgba(196, 18, 48, 0.4);
}

.chatbot-flash-message {
    border: 1px solid rgba(196, 18, 48, 0.3);
    background: rgba(196, 18, 48, 0.08);
    font-weight: 700;
    margin-bottom: 20px;
}

html[data-theme="dark"] .chatbot-flash-message {
    background: rgba(196, 18, 48, 0.15);
    border-color: rgba(255, 140, 183, 0.35);
}

.chatbot-subhead {
    margin-top: 24px;
}

.chatbot-option-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* MODULE 6: "carded sequence" treatment for Question Steps — a numbered
   badge plus a slightly stronger card boundary so each step in the
   category's decision tree reads as one clear step in a sequence, not
   just another admin-list-item. */
.chatbot-step-card {
    border: 1px solid var(--adm-border, rgba(193,59,111,0.15));
    border-radius: 18px;
    padding: 18px 20px;
    background: var(--adm-surface, rgba(255,255,255,0.6));
}
.chatbot-step-heading { display: flex; align-items: center; gap: 10px; }
.chatbot-step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    color: #fff; font-size: 0.78rem; font-weight: 800;
}

.chatbot-option-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chatbot-option-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.chatbot-inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    font-weight: 600;
    font-size: 0.85rem;
}

html[dir="rtl"] .chatbot-inline-checkbox {
    margin-right: 0;
    margin-left: 14px;
}

/* =========================
   Navbar — Consolidated Menu (hamburger panel)
========================= */
.nav-toggle,
.nav-primary,
.nav-admin,
.user-menu {
    display: none !important;
}

.nav-account > a[href="/login"],
.nav-account > a.nav-signup {
    display: none !important;
}

.tb-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tb-menu-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.tb-menu-btn:hover {
    background: #eef2f7;
    color: #0f172a;
}

html[data-theme="dark"] .tb-menu-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaf6;
}

.tb-menu-panel {
    position: absolute;
    right: 0;
    top: 52px;
    width: min(300px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 150px));
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #f1d9e3;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 9999;
}

.tb-menu-panel.show-tb-menu-panel {
    display: flex;
}

html[dir="rtl"] .tb-menu-panel {
    right: auto;
    left: 0;
}

.tb-menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1d9e3;
    font-weight: 700;
    font-size: 0.9rem;
    color: #111111;
}

.tb-menu-user img,
.tb-menu-user-initial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}

.tb-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #111111;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

html[dir="rtl"] .tb-menu-link {
    text-align: right;
}

.tb-menu-link:hover {
    background: #faf1f5;
}

.tb-menu-expand-btn {
    justify-content: space-between;
}

.tb-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d72673;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.tb-menu-plus {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.tb-menu-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 18px;
    margin-bottom: 4px;
}

html[dir="rtl"] .tb-menu-submenu {
    padding-left: 0;
    padding-right: 18px;
}

.tb-menu-submenu.show-tb-submenu {
    display: flex;
}

.tb-menu-submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #555555;
    font-weight: 600;
    font-size: 0.84rem;
    text-decoration: none;
}

.tb-menu-submenu a:hover {
    background: #faf1f5;
    color: #111111;
}

.tb-menu-divider {
    height: 1px;
    background: #f1d9e3;
    margin: 8px 4px;
}

.tb-menu-section-label {
    margin: 2px 12px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a8a3ad;
}

html[dir="rtl"] .tb-menu-section-label {
    text-align: right;
}

html[data-theme="dark"] .tb-menu-panel {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

html[data-theme="dark"] .tb-menu-user {
    color: var(--text);
    border-bottom-color: var(--dropdown-border);
}

html[data-theme="dark"] .tb-menu-link,
html[data-theme="dark"] .tb-menu-submenu a {
    color: var(--text);
}

html[data-theme="dark"] .tb-menu-link:hover,
html[data-theme="dark"] .tb-menu-submenu a:hover {
    background: var(--dropdown-link-hover);
}

html[data-theme="dark"] .tb-menu-section-label {
    color: var(--text-soft, #9a9aa8);
}

html[data-theme="dark"] .tb-menu-divider {
    background: var(--dropdown-border);
}

/* =========================
   Chat window (Instagram/Messenger style)
========================= */
.messages-thread-page {
    display: flex;
    justify-content: center;
    padding: 50px 20px;
}

.messages-thread-shell {
    width: 100%;
    max-width: 680px;
}

.chat-window {
    display: flex;
    flex-direction: column;
    height: min(620px, 75vh);
    border: 1px solid #f1d9e3;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.chat-thread-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1d9e3;
    background: rgba(148, 163, 184, 0.06);
}

.chat-thread-ref {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #94a3b8;
    text-transform: uppercase;
}

.chat-thread-subject {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.chat-thread-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.topic-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
}

html[data-theme="dark"] .topic-badge-pill {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
}

/* ── MODULE 3: Floating "FEEDBACK" tab + brand survey drawer ── */
.feedback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    writing-mode: vertical-rl;
    padding: 16px 8px;
    border: none;
    border-radius: 10px 0 0 10px;
    background: #0f172a;
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.18);
    transition: padding 0.2s ease, background 0.2s ease;
}

.feedback-tab:hover {
    padding-right: 12px;
    background: #1e293b;
}

.feedback-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1998;
}

.feedback-drawer-backdrop[hidden] {
    display: none;
}

.feedback-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(380px, 100vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-drawer[hidden] {
    display: none;
}

.feedback-drawer.is-open {
    transform: translateX(0);
}

.feedback-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #f1d9e3;
}

.feedback-drawer-head h3 {
    font-size: 1.1rem;
    margin: 0;
}

.feedback-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(148, 163, 184, 0.12);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.feedback-drawer-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.feedback-question {
    font-weight: 700;
    font-size: 0.92rem;
    margin: 18px 0 12px;
    line-height: 1.5;
}

.feedback-step:first-child .feedback-question:first-child {
    margin-top: 0;
}

.feedback-nps-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.feedback-nps-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.feedback-nps-circle:hover {
    border-color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

.feedback-nps-circle.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.feedback-nps-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #8a7e87;
    margin-top: 6px;
}

.feedback-drawer-body textarea {
    width: 100%;
    border: 1px solid #e0e2ed;
    border-radius: 12px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.feedback-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-pill {
    padding: 9px 14px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-pill:hover {
    border-color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

.feedback-pill.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.feedback-next-btn,
.feedback-submit-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.feedback-back-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #e0e2ed;
    border-radius: 12px;
    background: none;
    color: #4c424c;
    font-weight: 600;
    cursor: pointer;
}

.feedback-step-error {
    color: #C41230;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 10px;
}

.feedback-success {
    text-align: center;
    padding: 40px 10px;
}

.feedback-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .feedback-drawer {
        width: 100vw;
    }
}

html[data-theme="dark"] .feedback-drawer {
    background: var(--surface, #1a1620);
}

html[data-theme="dark"] .feedback-drawer-head {
    border-bottom-color: var(--dropdown-border);
}

html[data-theme="dark"] .feedback-drawer-close {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-strong);
}

html[data-theme="dark"] .feedback-nps-circle,
html[data-theme="dark"] .feedback-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text, #cfd3ec);
}

html[data-theme="dark"] .feedback-nps-circle:hover,
html[data-theme="dark"] .feedback-pill:hover {
    background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .feedback-nps-circle.is-active,
html[data-theme="dark"] .feedback-pill.is-active {
    background: #fff;
    border-color: #fff;
    color: #0f172a;
}

html[data-theme="dark"] .feedback-drawer-body textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
}

html[data-theme="dark"] .feedback-back-btn {
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
}

html[dir="rtl"] .feedback-tab {
    right: auto;
    left: 0;
    border-radius: 0 10px 10px 0;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

html[dir="rtl"] .feedback-drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.2);
}

html[dir="rtl"] .feedback-drawer.is-open {
    transform: translateX(0);
}

.chat-thread-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.chat-thread-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.chat-thread-last-activity {
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
}

html[dir="rtl"] .chat-thread-header-meta {
    align-items: flex-start;
}

html[data-theme="dark"] .chat-thread-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-thread-status {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-bubble-row {
    display: flex;
    margin: 6px 0;
}

.chat-bubble-row.mine {
    justify-content: flex-end;
}

.chat-bubble-row.theirs {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 68%;
    padding: 9px 15px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-bubble.mine {
    background: #0f172a;
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}

.chat-bubble.theirs {
    background: #f1f5f9;
    color: #1e293b;
    border-radius: 18px 18px 18px 4px;
}

html[dir="rtl"] .chat-bubble.mine {
    border-radius: 18px 18px 18px 4px;
}

html[dir="rtl"] .chat-bubble.theirs {
    border-radius: 18px 18px 4px 18px;
}

.chat-support-badge {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    margin: 0 0 3px 2px;
}

.chat-bubble-row.mine + .chat-bubble-row.theirs .chat-support-badge,
.chat-bubble-row.theirs:first-child .chat-support-badge {
    margin-top: 2px;
}

.chat-bubble-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    opacity: 0.65;
    margin-top: 3px;
}

.chat-bubble-check {
    flex-shrink: 0;
}

html[data-theme="dark"] .chat-bubble.theirs {
    background: #1e293b;
    color: #f8fafc;
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #f1d9e3;
    background: #fff;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    resize: none;
    max-height: 90px;
    min-height: 38px;
    border: 1px solid #e0e2ed;
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.3;
    outline: none;
}

.chat-input:focus {
    border-color: var(--primary);
}

.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.chat-send-btn:hover {
    transform: scale(1.06);
}

.chat-send-btn svg {
    width: 17px;
    height: 17px;
}

.chat-send-btn:active {
    transform: scale(0.92);
}

html[dir="rtl"] .chat-send-btn svg {
    transform: scaleX(-1);
}

.chat-emoji-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-emoji-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e2ed;
    background: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.15s ease;
}

.chat-emoji-btn:hover {
    background: rgba(148, 163, 184, 0.12);
}

.chat-emoji-btn:active {
    transform: scale(0.92);
}

.chat-emoji-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e2ed;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
    z-index: 20;
}

.chat-emoji-panel[hidden] {
    display: none;
}

.chat-emoji-option {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.05rem;
    border-radius: 8px;
    cursor: pointer;
}

.chat-emoji-option:hover {
    background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .chat-emoji-btn {
    border-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-emoji-panel {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-window {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-input-row {
    background: var(--dropdown-bg);
    border-top-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--dropdown-border);
    color: var(--text);
}

.chat-bubble-row {
    position: relative;
}

.chat-bubble.mine {
    cursor: pointer;
}

.chat-bubble-edited {
    font-size: 0.68rem;
    opacity: 0.65;
    margin-left: 4px;
}

.chat-bubble-deleted {
    font-style: italic;
    opacity: 0.7;
}

.chat-msg-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    max-height: none;
    background: #fff;
    border: 1px solid #e0e2ed;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    z-index: 30;
}

html[dir="rtl"] .chat-msg-menu {
    right: auto;
    left: 0;
}

.chat-msg-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: #111111;
}

html[dir="rtl"] .chat-msg-menu button {
    text-align: right;
}

.chat-msg-menu button:hover {
    background: #f4f5fb;
}

.chat-msg-menu button.danger {
    color: #C41230;
}

html[data-theme="dark"] .chat-msg-menu {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

html[data-theme="dark"] .chat-msg-menu button {
    color: var(--text);
}

html[data-theme="dark"] .chat-msg-menu button:hover {
    background: var(--dropdown-link-hover);
}

.chat-input-row.editing .chat-input {
    border-color: var(--primary);
}

.chat-msg-menu.menu-flip-up {
    top: auto;
    bottom: calc(100% + 4px);
}

/* Adidas-style compact mobile header: hamburger (left) | logo (dead
   center, via grid) | icon cluster (right). The search input is hidden
   by default — the magnifier icon toggles a drawer instead of eating a
   whole second row. */
@media (max-width: 768px) {
    /* Adidas-style compact mobile header: hamburger (left) | logo (dead
       center, via grid) | icon cluster (right). The search input is hidden
       by default — the magnifier icon toggles a drawer instead of eating a
       whole second row. */
    .navbar {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 60px;
        align-items: center;
        height: 60px;
        min-height: 60px;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 12px !important;
    }

    /* Auto-placed grid items are positioned in DOM order by a cursor that
       only moves forward through columns; since the markup order here is
       logo(col2) -> nav-toggle(col1) -> site-nav(col3), nav-toggle's column
       sits BEHIND where the cursor left off after the logo, which the algo
       reads as needing to wrap to a new row (pushing nav-toggle + site-nav
       into an implicit row 2 while the logo is stranded alone in row 1).
       Pin every item to row 1 explicitly so DOM order can't affect this. */
    .nav-toggle,
    .logo,
    .site-nav {
        grid-row: 1;
    }

    .nav-toggle {
        display: inline-flex !important;
        grid-column: 1;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        border: 1px solid #d0d0d0;
        background: #ffffff;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #111111;
    }

    .logo {
        grid-column: 2;
        /* Stretch (not justify-self:center) so the box is exactly as wide
           as its grid track, however narrow — a centered, content-sized
           box would overflow into the hamburger/icon columns instead of
           truncating when the track is tight. */
        text-align: center;
        padding-top: 0;
        min-width: 0;
        overflow: hidden;
    }

    .logo a {
        display: block;
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .site-nav {
        grid-column: 3;
        justify-self: end;
        flex: 0 0 auto;
        width: auto;
        gap: 0;
    }

    .nav-links-cluster {
        flex: 0 0 auto;
        min-width: 0;
        gap: 0;
    }

    /* Search becomes a full-width drawer that drops down from the header,
       triggered by the magnifier icon — not an always-on second row. */
    .nav-search-form {
        display: none;
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        width: auto !important;
        max-width: none;
        z-index: 500;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
        border-radius: 12px;
    }

    .nav-search-form.show-search-drawer {
        display: flex;
    }

    /* MODULE 4: the magnifier toggle only exists to reveal the drawer above
       — it's the one screen width where it isn't redundant with the
       always-visible search bar, so it's the one place it stays visible. */
    .nav-search-toggle {
        display: inline-flex;
    }

    .nav-account {
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 0;
        gap: 6px;
    }

    .nav-account .tb-menu-btn {
        display: none;
    }

    .nav-account .theme-toggle,
    .nav-account .notification-bell {
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }

    .nav-account .language-toggle {
        width: auto;
        padding: 0 8px;
        height: 34px;
        min-height: 34px;
        font-size: 0.72rem;
    }

    /* Hero headline: a true clamp() curve instead of the fixed 2.1rem/2.6rem
       breakpoint jumps above, which never scaled below 700px and produced
       7-line wraps on narrow phones. Wide screens are unaffected since the
       vw-driven value there already exceeds this range's 2.6rem ceiling. */
    .hero-content h1 {
        font-size: clamp(1.6rem, 7vw, 2.6rem);
        line-height: 1.05;
    }

    /* Background-image hero banner (no <img>/object-fit here — background-
       size:cover already crops it) gets a stable aspect-ratio so the photo
       reads consistently across devices instead of sizing purely off
       however many lines the headline happens to wrap to. */
    .hero-slide {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    /* Category filter chips: one horizontally-scrolling row (adidas-style)
       instead of wrapping to several rows and pushing the fold down. */
    .categories-modern {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .categories-modern::-webkit-scrollbar {
        display: none;
    }

    .categories-modern .cat-btn {
        flex-shrink: 0;
    }

    /* PDP gallery: swap the thumbnail strip for lightweight pagination dots
       now that swipe handles navigation directly on the image. */
    .product-gallery-thumbs {
        display: none;
    }

    .product-gallery-dots {
        display: flex;
    }
}

@media (max-width: 400px) {
    .logo a {
        font-size: 0.92rem;
    }

    .nav-toggle {
        width: 34px;
        height: 34px;
    }

    .nav-account {
        gap: 2px;
    }

    /* Five icons (search, cart, language, theme, notifications) is a lot
       for a ~350px-wide icon cluster once the logo needs room too — shave
       every touch target down a notch so the centered logo isn't starved
       of its own grid track. */
    .nav-account .theme-toggle,
    .nav-account .notification-bell {
        width: 30px;
        height: 30px;
        min-height: 30px;
    }

    .nav-account .language-toggle {
        padding: 0 6px;
        height: 30px;
        min-height: 30px;
        font-size: 0.68rem;
    }
}

/* Notification/order/low-stock dropdowns are anchored with `right: 0` relative
   to their own bell — fine when the bell is the last icon, but on mobile the
   hamburger sits after it, so the panel's left edge ran off-screen. Anchor to
   the viewport instead so it always fits regardless of which bell opened it. */
@media (max-width: 600px) {
    /* Two-up product grid on phones (matches common mobile-commerce layout)
       instead of the auto-fill min(220px) rule collapsing to a single column. */
    .catalog-grid,
    .products-grid,
    .products-grid-2026 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-card,
    .product-card-2026 {
        padding: 10px;
    }

    /* Fixed 240px image height reads fine on a wide desktop card, but at
       ~170px 2-up card width it makes photos disproportionately tall
       (portrait) versus how they crop on desktop — aspect-ratio keeps the
       crop consistent regardless of card width. */
    .product-img img {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .product-name-link {
        font-size: 0.88rem;
    }

    .product-info h3 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
        min-height: 2.6em;
    }

    /* "Size Guide" was pushed to the far right by space-between on a card much
       wider than the label — pull it right next to "Select Size" instead. */
    .size-selector-header {
        justify-content: flex-start;
        gap: 14px;
    }

    /* A true grid (not just wrapping flex) so sizes line up evenly and never
       spill past the card edge as the list grows. */
    .size-selector-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .size-option {
        min-width: 0;
        width: 100%;
        padding: 0;
    }

    /* Hover-to-reveal "Quick Add" overlay has no equivalent on touch — mobile
       browsers keep :hover "stuck" after a tap, so it was showing permanently
       and colliding with the stock badge. The regular Add to Cart button
       below the price already covers this on mobile. */
    .quick-add-overlay {
        display: none !important;
    }

    /* Price + "Add to Cart" no longer fit side by side at 2-up card width —
       stack them so the button gets its own full-width row instead of
       squeezing/clipping next to the price. */
    .price-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    .add-cart-btn {
        width: 100%;
        padding: 9px 10px;
        font-size: 0.78rem;
    }
}

@media (max-width: 600px) {
    .notification-dropdown,
    .tb-menu-panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 108px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 130px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MODULE 2: Thermal shipping label print layout
   Page size and label width are format-dependent (100x150mm / 80mm
   roll / A4 — set by the admin at /admin/invoice-settings), so the
   @page rule plus the display/position mechanics that actually collapse
   the rest of the page to zero height are injected per-page as inline
   <style> (see admin_order_detail.html and order_details.html) — the
   JS there relocates #thermalLabelPrint to be a direct child of <body>
   before printing so a plain `display:none` on siblings works (unlike
   visibility:hidden, which keeps full layout height and, combined with
   position:fixed repeating on every generated print page, was the
   actual cause of the old multi-page/blank-page bug). Only the
   format-independent visual styling lives here. */
@media print {
    /* Defense-in-depth: buttons/modals marked .no-print (order_details.html)
       stay hidden even on a native Ctrl+P print that bypasses the app's own
       "Print" buttons — those are the only path that adds the
       printing-thermal-label/printing-invoice body class the rules above
       key off, so this unconditional rule is the fallback for that class
       never having existed anywhere in the stylesheet before now. */
    .no-print {
        display: none !important;
    }

    .thermal-label-print {
        padding: 3mm;
        box-sizing: border-box;
        /* Monochrome per spec — pure black on pure white, no dark-theme
           gradients or brand-color pills, regardless of the admin's
           current site theme. */
        background: #ffffff !important;
        color: #000000 !important;
        font-family: "Courier New", Courier, monospace;
        font-size: 11px;
        line-height: 1.35;
    }
}

.tl-header {
    text-align: center;
    border-bottom: 1px dashed #000;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.tl-brand {
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.tl-header svg {
    display: block;
    width: 100%;
    max-width: 180px;
    margin: 4px auto;
}

.tl-order-id {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.tl-date {
    font-size: 10px;
}

.tl-section {
    border-bottom: 1px dashed #000;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.tl-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.tl-recipient {
    font-weight: 700;
    font-size: 12px;
}

.tl-payment {
    font-weight: 700;
    margin-top: 4px;
}

.tl-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
}

.tl-items th,
.tl-items td {
    text-align: left;
    padding: 2px 0;
    font-size: 10px;
    border-bottom: 1px dotted #444;
}

.tl-items th {
    font-weight: 700;
    border-bottom: 1px solid #000;
}

.tl-items td:nth-child(2),
.tl-items td:nth-child(3),
.tl-items th:nth-child(2),
.tl-items th:nth-child(3) {
    text-align: center;
}

.tl-items td:last-child,
.tl-items th:last-child {
    text-align: right;
}

.tl-totals {
    border-bottom: 1px dashed #000;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.tl-grand-total {
    font-weight: 900;
    font-size: 13px;
    border-top: 1px solid #000;
    margin-top: 4px;
    padding-top: 4px;
}

.tl-footer {
    text-align: center;
    font-size: 9px;
}

.tl-footer p {
    margin: 2px 0;
}

/* ── Module 6 — client navbar icon buttons synced to the admin
   navbar's obsidian/slate token system (.adm-icon-btn). Appended last
   on purpose: several older dark-mode overrides for these same
   selectors already exist earlier in this file from past sessions —
   rather than hunt down and edit each one, this consolidated block
   sits after all of them in source order so it wins the cascade
   (same specificity, later rule wins) without touching the dead
   rules above. ── */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .notification-bell,
html[data-theme="dark"] .tb-menu-btn,
html[data-theme="dark"] .language-toggle {
    background: #161a30;
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .notification-bell:hover,
html[data-theme="dark"] .tb-menu-btn:hover,
html[data-theme="dark"] .language-toggle:hover {
    background: #1b1f3a;
    color: #f1f5f9;
}

/* ── Admin POS — multi-item bill builder ── */
.pos-add-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 4px;
}

.pos-add-btn {
    flex: 1;
    justify-content: center;
    min-height: 52px;
}

.pos-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pos-items-counter {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    white-space: nowrap;
}

.pos-bill-table-wrap {
    margin-bottom: 18px;
}

.pos-bill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.pos-bill-table th {
    text-align: left;
    padding: 8px 6px;
    color: #8a97a8;
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}

.pos-bill-table td {
    padding: 10px 6px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.pos-bill-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    padding: 4px;
}

.pos-bill-table td .pos-bill-thumb {
    display: block;
}

.pos-bill-table td,
.pos-bill-table th {
    font-variant-numeric: tabular-nums;
}

.pos-bill-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(196, 18, 48, 0.1);
    color: #C41230;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pos-bill-remove-btn svg {
    width: 15px;
    height: 15px;
}

.pos-bill-remove-btn:hover {
    background: rgba(196, 18, 48, 0.2);
}

.pos-bill-remove-btn:hover {
    background: rgba(196, 18, 48, 0.18);
}

.pos-bill-empty {
    padding: 24px 12px;
    text-align: center;
    color: #8a97a8;
    font-size: 0.9rem;
    background: #f8fafc;
    border-radius: 14px;
    margin-bottom: 18px;
}

.pos-bill-table-wrap {
    overflow-x: auto;
}

html[dir="rtl"] .pos-bill-table th {
    text-align: right;
}

/* ── Site-wide promotional announcement bar — luxury infinite marquee,
   no close button. The Jinja side already repeats the message 3x
   (separated by •) inside .ticker-track so the CSS animation can slide
   it exactly -50% and loop seamlessly without a visible seam. ── */
.site-announcement-bar {
    height: 38px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
}

.site-announcement-bar-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

.site-announcement-link {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}
/* When a countdown badge and/or dismiss button share the bar with the
   ticker link, the link flexes to fill remaining space instead of forcing
   100% width (which would push the badge/dismiss off-screen). */
.site-announcement-bar:has(.countdown-badge, .site-announcement-dismiss) .site-announcement-link {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-inline-end: 10px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.site-announcement-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 14px 0 4px;
    transition: opacity .15s;
}
.site-announcement-dismiss:hover { opacity: 1; }

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-marquee 25s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-copy {
    flex-shrink: 0;
    white-space: nowrap;
}

@keyframes ticker-marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

html[dir="rtl"] .ticker-track {
    animation-name: ticker-marquee-rtl;
}

@keyframes ticker-marquee-rtl {
    0% { transform: translateX(0%); }
    100% { transform: translateX(50%); }
}

.site-announcement-link:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
        padding-left: 0;
    }
}

/* ── Smart sticky header: announcement bar (top position) + navbar stick
   together as one unit, so the promo message never gets orphaned/covered
   once the user scrolls past it. .navbar keeps its own position:sticky
   rule elsewhere for pages that render it without this wrapper (there are
   none currently, but this keeps it harmless either way) — inside the
   wrapper it's neutralized so only the wrapper's offset applies. ── */
.site-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-sticky-header .navbar {
    position: static;
    top: auto;
}

html[data-theme="dark"] .pos-items-counter {
    background: #fff;
    color: #0f172a;
}

html[data-theme="dark"] .pos-bill-table th {
    color: #9fa8c7;
    border-bottom-color: rgba(80,60,100,0.3);
}

html[data-theme="dark"] .pos-bill-table td {
    border-bottom-color: rgba(80,60,100,0.2);
}

html[data-theme="dark"] .pos-bill-empty {
    background: rgba(18,14,32,0.9);
    color: #9fa8c7;
}

/* ── Admin trust-bullet editor — compact card grid + iOS-style switch ── */
.trust-bullet-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .trust-bullet-card-grid {
        grid-template-columns: 1fr;
    }
}

.trust-bullet-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #ebd8e0;
    background: #fff;
    transition: opacity 0.2s ease;
}

.trust-bullet-card.is-inactive {
    opacity: 0.55;
}

.trust-bullet-card .form-field {
    margin-bottom: 12px;
}

.trust-bullet-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.trust-bullet-icon-preview {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.trust-bullet-icon-input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 1.1rem;
    min-height: 42px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #ebd8e0;
}

.trust-bullet-hint {
    margin: 0;
    font-size: 0.76rem;
    color: #8a97a8;
    line-height: 1.5;
}

/* Nested "dedicated card" look for a sub-section inside an .admin-panel
   (e.g. Shipping & Returns policy below the trust-bullet grid) — the
   parent panel is already near-white, so this needs its own border/tint
   to read as a distinct block rather than disappearing into the page. */
.admin-subpanel {
    margin-top: 22px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid #ebd8e0;
    background: #fbf6f8;
}

.admin-subpanel .admin-panel-head {
    margin-bottom: 16px;
}

.admin-subpanel textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

/* iOS-style toggle switch */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.modern-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 9999px;
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.modern-switch input:checked + .slider-round {
    background-color: #0f172a;
}

.modern-switch input:checked + .slider-round:before {
    transform: translateX(20px);
}

.modern-switch input:focus-visible + .slider-round {
    outline: 2px solid #e11d48;
    outline-offset: 2px;
}

html[data-theme="dark"] .trust-bullet-card {
    background: rgba(18,14,32,0.9);
    border-color: rgba(80,60,100,0.3);
}

html[data-theme="dark"] .trust-bullet-icon-preview {
    background: rgba(46,34,49,0.96);
    border-color: rgba(80,60,100,0.3);
}

html[data-theme="dark"] .modern-switch input:checked + .slider-round {
    background-color: #ffffff;
}

html[data-theme="dark"] .modern-switch input:checked + .slider-round:before {
    background-color: #0f172a;
}


/* Promo campaign badge — cart line items, checkout summary, catalog cards */
.cart-item-promo-badge, .summary-promo-badge {
    display: inline-block;
    margin: 2px 0 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(196, 18, 48, 0.1);
    color: #C41230;
    font-size: 0.72rem;
    font-weight: 700;
}
.card-promo-badge {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ff6b00;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
html[dir="rtl"] .card-promo-badge { left: auto; right: 10px; }

/* ── Campaign sale landing page (/sale/<slug>) ─────────────────── */
.sale-landing-page { max-width: 1400px; margin: 0 auto; padding: 24px 20px 60px; }
.sale-hero {
    text-align: center;
    padding: 48px 20px 32px;
}
.sale-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: #C41230;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
}
.sale-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 8px;
}
.sale-hero-sub { color: var(--muted, #666); margin: 0; }
.sale-gender-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
    position: sticky;
    top: 64px;
    z-index: 10;
    background: var(--bg, #fff);
    padding: 10px 0;
}
.sale-gender-tab {
    padding: 8px 20px;
    border-radius: 999px;
    border: 1.5px solid rgba(0,0,0,0.12);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-strong, #17141c);
    text-decoration: none;
    transition: all 0.15s ease;
}
.sale-gender-tab:hover { border-color: #C41230; color: #C41230; }
.sale-gender-tab.is-active { background: #C41230; border-color: #C41230; color: #fff; }
html[data-theme="dark"] .sale-gender-tab { border-color: rgba(255,255,255,0.18); color: #fff; }

.campaign-hero-banner {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1400px;
    margin: 16px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}
.campaign-hero-banner img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
/* Desktop banner shown by default; mobile banner (if uploaded) swaps in
   under the same breakpoint the chatbot widget already uses. Raw upload,
   no compression, on either — same zero-processing pipeline. */
.campaign-hero-banner .banner-img-mobile { display: none; }
@media (max-width: 700px) {
    .campaign-hero-banner .banner-img-desktop { display: none; }
    .campaign-hero-banner .banner-img-mobile { display: block; }
}
.campaign-hero-overlay {
    position: absolute;
    left: 44px;
    bottom: 32px;
    right: 44px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    pointer-events: none;
}
.campaign-hero-overlay h2 {
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0 0 12px;
}
.campaign-hero-cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none;
    pointer-events: auto;
}
@media (max-width: 700px) {
    .campaign-hero-overlay { left: 24px; right: 24px; bottom: 20px; }
    .campaign-hero-overlay h2 { font-size: 1.25rem; margin-bottom: 8px; }
}

/* Admin campaign product picker */
.promo-product-picker {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 6px;
}
.promo-product-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
}
.promo-product-row:hover { background: rgba(0,0,0,0.04); }
.promo-product-row img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.promo-product-name { flex: 1; font-weight: 600; }
.promo-product-brand { color: #888; font-size: 0.8rem; }
.promo-product-price { font-weight: 700; white-space: nowrap; }
html[data-theme="dark"] .promo-product-picker { border-color: rgba(255,255,255,0.15); }
html[data-theme="dark"] .promo-product-row:hover { background: rgba(255,255,255,0.06); }
.promo-product-row.is-filtered-out { display: none; }

/* Live per-product price calculator badge — wraps onto its own line
   (flex-basis:100%, same technique as the stack-mode line above it),
   empty/collapsed (no min-height) until JS fills it in, so a product
   with nothing to show never reserves blank vertical space. */
.promo-live-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex-basis: 100%;
}
.promo-live-badge:empty { display: none; }
.promo-live-badge .current-price-old {
    text-decoration: line-through;
    opacity: 0.55;
    color: #888;
    font-size: 0.74rem;
}
.promo-live-badge .final-promo-price {
    font-weight: 800;
    color: #16a34a;
    font-size: 0.78rem;
}
.promo-live-badge .total-savings {
    color: #888;
    font-size: 0.72rem;
}
html[data-theme="dark"] .promo-live-badge .final-promo-price { color: #34d399; }

/* ══════════════════════════════════════════════════════════
   Promotions & Campaign Control Center — /admin/announcement
   redesign. Reuses existing tokens (--primary/--primary-dark,
   .admin-panel/.secondary-btn/.hero-btn-dark, --adm-topbar-h,
   the .modern-switch iOS toggle already used on Trust Bullets)
   instead of inventing a parallel design system.
   ══════════════════════════════════════════════════════════ */

/* ── Sticky save bar ─────────────────────────────────────── */
.sticky-save-bar {
    position: sticky;
    top: var(--adm-topbar-h, 68px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 22px;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(238,219,228,0.96);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.sticky-save-bar h1 { font-size: 1.05rem; margin: 0; font-weight: 800; }
.sticky-save-bar p { margin: 2px 0 0; font-size: 0.76rem; color: #888; }
.save-spinner {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: save-spin 0.7s linear infinite;
    margin-inline-end: 7px;
    vertical-align: -2px;
}
.is-saving .save-spinner { display: inline-block; }
.is-saving .save-btn-label { opacity: 0.85; }
@keyframes save-spin { to { transform: rotate(360deg); } }
html[data-theme="dark"] .sticky-save-bar {
    background: rgba(17,20,36,0.92);
    border-color: rgba(255,255,255,0.1);
}

/* ── Two-column body ──────────────────────────────────────
   Page-specific grid (not the shared .admin-form-layout other admin
   pages reuse) — a fixed-width right column, sticky as ONE contained
   unit capped to the viewport height with its own internal scroll, so
   it can never grow taller than the screen and spill over/behind the
   left column's content while the page scrolls. Explicitly NOT
   position:fixed, so it can never escape its own grid column. */
.announcement-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1180px) {
    .announcement-dashboard-grid { grid-template-columns: 1fr; }
}
.promo-col-left, .promo-col-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.promo-col-right {
    position: sticky;
    top: calc(var(--adm-topbar-h, 68px) + 20px);
    max-height: calc(100vh - var(--adm-topbar-h, 68px) - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 4px;
}
@media (max-width: 1180px) {
    .promo-col-right {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ── Campaign mode selector (3 cards) ────────────────────── */
.campaign-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.campaign-mode-card {
    position: relative;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 14px;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.campaign-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.campaign-mode-card:has(input:checked) {
    border-color: var(--primary, #C41230);
    background: rgba(196,18,48,0.05);
    box-shadow: 0 0 0 2px rgba(196,18,48,0.14);
}
.campaign-mode-card strong { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.campaign-mode-card small { display: block; color: #888; font-size: 0.72rem; line-height: 1.45; }
html[data-theme="dark"] .campaign-mode-card { border-color: rgba(255,255,255,0.14); }

/* ── Scope selector tabs + per-tab panels ────────────────── */
.promo-scope-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.promo-scope-tab {
    padding: 8px 15px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.promo-scope-tab.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.promo-scope-panel { display: none; }
.promo-scope-panel.is-active { display: block; }
html[data-theme="dark"] .promo-scope-tab { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: #ccc; }

/* ── Product picker toolbar: search, brand pills, bulk actions, counter ── */
.promo-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.promo-picker-search {
    flex: 1;
    min-width: 160px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.12);
    font-size: 0.82rem;
    font-family: inherit;
}
.promo-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.promo-filter-pill {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(0,0,0,0.12);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    color: #555;
    transition: all .15s;
}
.promo-filter-pill.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.promo-bulk-actions { display: flex; gap: 6px; }
.promo-bulk-actions button {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 9px;
    border: 1.5px solid rgba(0,0,0,0.12);
    background: #fff;
    cursor: pointer;
    color: #333;
}
.promo-bulk-actions button:hover { background: rgba(0,0,0,0.04); }
.promo-picker-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    margin-inline-start: auto;
}
html[data-theme="dark"] .promo-picker-search,
html[data-theme="dark"] .promo-filter-pill,
html[data-theme="dark"] .promo-bulk-actions button {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: #ddd;
}

/* Simple checkbox lists for the By Category / By Brand tabs */
.promo-simple-checklist { display: flex; flex-direction: column; gap: 4px; }
.promo-simple-checklist label {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 500;
}
.promo-simple-checklist label:hover { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .promo-simple-checklist label:hover { background: rgba(255,255,255,0.06); }

/* ── Custom checkbox (product rows + category/brand lists) ── */
.promo-check {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    border: 1.5px solid rgba(0,0,0,0.22);
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background .15s, border-color .15s;
}
.promo-check:checked { background: var(--primary, #C41230); border-color: var(--primary, #C41230); }
.promo-check:checked::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-theme="dark"] .promo-check { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); }

/* ── Per-product add/target segmented control (replaces raw radios) ── */
.stack-mode-segmented {
    display: inline-flex;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}
.stack-mode-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.stack-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.stack-mode-option:has(input:checked) { background: #0f172a; color: #fff; }
html[data-theme="dark"] .stack-mode-segmented { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .stack-mode-option { color: #ccc; }

/* ── Color preset swatches (announcement bar colors) ─────── */
.color-preset-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.color-preset-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.14);
    cursor: pointer;
    padding: 0;
    transition: transform .12s;
}
.color-preset-swatch:hover { transform: scale(1.12); }

/* ── Quick display toggles card (right column) ───────────── */
.promo-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.promo-toggle-row:last-child { border-bottom: none; }
.promo-toggle-row span { font-size: 0.82rem; font-weight: 600; }
html[data-theme="dark"] .promo-toggle-row { border-bottom-color: rgba(255,255,255,0.08); }

/* ── Mobile banner preview thumb + headline/CTA fields ───── */
.banner-mobile-hint { color: #888; font-size: 0.72rem; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   Add Product page — real-time product code checker + draft
   auto-save/recovery banner (/admin/products/add).
   ══════════════════════════════════════════════════════════ */
.code-autogen-btn {
    margin-inline-start: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(196,18,48,0.25);
    background: rgba(196,18,48,0.06);
    color: var(--primary, #C41230);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
}
.code-autogen-btn:hover { background: rgba(196,18,48,0.12); }

#product_code.code-input-ok { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.12); }
#product_code.code-input-taken { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.12); }

.code-check-badge:empty { display: none; }
.code-check-badge {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.5;
}
#product_code.code-input-ok ~ .code-check-badge {
    background: rgba(22,163,74,0.08);
    color: #16a34a;
    font-weight: 700;
}
#product_code.code-input-taken ~ .code-check-badge {
    background: rgba(220,38,38,0.07);
    color: #b91c1c;
}
.code-use-suggestion-btn {
    margin-inline-start: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid #dc2626;
    background: #fff;
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.code-use-suggestion-btn:hover { background: rgba(220,38,38,0.08); }

/* Draft recovery banner + per-colorway "re-select photos" reminder */
.draft-restore-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(14,165,233,0.08);
    border: 1px solid rgba(14,165,233,0.25);
    color: #0369a1;
    font-size: 0.85rem;
    font-weight: 600;
}
.draft-restore-bar button {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid #0ea5e9;
    background: #fff;
    color: #0369a1;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}
.draft-restore-bar button:hover { background: rgba(14,165,233,0.1); }
html[data-theme="dark"] .draft-restore-bar { background: rgba(14,165,233,0.12); color: #7dd3fc; }
html[data-theme="dark"] .draft-restore-bar button { background: rgba(14,165,233,0.08); color: #7dd3fc; }

.draft-image-reminder {
    flex-basis: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(217,119,6,0.08);
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 600;
}
html[data-theme="dark"] .draft-image-reminder { background: rgba(217,119,6,0.14); color: #fbbf24; }

.clear-draft-btn {
    margin-inline-start: auto;
    padding: 12px 18px;
    border-radius: 18px;
    border: 1.5px solid rgba(220,38,38,0.3);
    background: #fff;
    color: #b91c1c;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.clear-draft-btn:hover { background: rgba(220,38,38,0.06); }
html[data-theme="dark"] .clear-draft-btn { background: rgba(220,38,38,0.08); color: #fca5a5; }

/* ── Analytics page v2: toolbar, tabs, plain stat tiles ─────────── */
.an-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.an-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--adm-border, rgba(15,23,42,0.09));
    margin-bottom: 20px;
}
.an-tab-btn {
    padding: 10px 16px;
    border: none;
    background: none;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--muted, #6f6470);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.an-tab-btn:hover { color: var(--text, #222); }
.an-tab-btn.is-active { color: #C41230; border-bottom-color: #C41230; }
.an-tab-panel[hidden] { display: none; }

.an-toolbar-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.an-date-range-select {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--adm-border, rgba(15,23,42,0.16));
    background: var(--white, #fff);
    color: var(--text, #222);
    font-weight: 600;
    font-size: 0.85rem;
}
.an-toolbar-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--adm-border, rgba(15,23,42,0.16));
    background: var(--white, #fff);
    color: var(--text, #222);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.an-toolbar-btn:hover { border-color: #C41230; color: #C41230; }
.an-toolbar-btn.is-active { background: #C41230; border-color: #C41230; color: #fff; }

.an-insights-panel {
    background: rgba(196,18,48,0.06);
    border: 1px solid rgba(196,18,48,0.15);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.an-insights-panel[hidden] { display: none; }
.an-insights-panel h3 { margin: 0 0 8px; font-size: 0.9rem; }
.an-insights-panel ul { margin: 0; padding-left: 18px; }
.an-insights-panel li { font-size: 0.85rem; margin-bottom: 4px; color: var(--text, #222); }

.an-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
.an-stat-tile {
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 4px 18px rgba(196, 18, 48, 0.10);
    border: 1px solid rgba(196, 18, 48, 0.10);
}
.an-stat-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted, #6f6470);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 6px;
}
.an-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text, #222);
    margin-bottom: 4px;
}
.an-stat-delta { font-size: 0.78rem; font-weight: 700; }
.an-stat-delta.is-good { color: #059669; }
.an-stat-delta.is-bad { color: #e11d48; }
.an-stat-delta.is-neutral { color: var(--muted, #6f6470); }

html[data-theme="dark"] .an-stat-tile,
html[data-theme="dark"] .an-date-range-select,
html[data-theme="dark"] .an-toolbar-btn {
    background: #241a20;
    border-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .an-stat-value { color: #f3e9ef; }
html[data-theme="dark"] .an-insights-panel { background: rgba(196,18,48,0.12); }

@media (max-width: 900px) {
    .an-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

#anCustomRangeFields {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#anCustomRangeFields input[type="date"] {
    width: auto;
}