/* ============================================================
   MONKML FASHION — ATELIER v3.0
   Luxury Fashion · Warm Noir · Editorial
   ============================================================ */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
    /* Brand palette — warm terracotta gold */
    --primary:         #C9956C;
    --primary-dark:    #A47550;
    --primary-light:   #DEB48A;
    --primary-glow:    rgba(201,149,108,0.28);
    --primary-glow-sm: rgba(201,149,108,0.13);

    /* Accent — burnt sienna CTA */
    --accent:          #E85D44;
    --accent-glow:     rgba(232,93,68,0.22);

    /* Neutrals */
    --gold:            #C9A96E;
    --gold-glow:       rgba(201,169,110,0.22);
    --danger:          #E84C6A;
    --warning:         #F5A623;
    --star-color:      #F5A623;

    /* Motion */
    --ease:        cubic-bezier(0.4,0,0.2,1);
    --ease-out:    cubic-bezier(0,0,0.2,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --dur-fast: 0.18s;
    --dur-med:  0.32s;
    --dur-slow: 0.55s;

    /* Elevation */
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.10);
    --shadow-md:      0 6px 24px rgba(0,0,0,0.16);
    --shadow-lg:      0 16px 48px rgba(0,0,0,0.22);
    --shadow-xl:      0 32px 80px rgba(0,0,0,0.30);
    --shadow-glow:    0 0 28px var(--primary-glow);
    --shadow-glow-sm: 0 0 14px var(--primary-glow-sm);

    /* Shape — editorial sharp-meets-soft */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  14px;
    --radius-xl:  24px;
    --radius-full:9999px;

    /* Typography */
    --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --z-dropdown:500; --z-sticky:600; --z-overlay:800; --z-modal:900; --z-toast:1000;

    /* Layout dimensions */
    --header-h: 68px;
}
@media(min-width:992px) {
    :root { --header-h: 76px; }
}

/* ── DARK THEME (default) — Warm Noir ────────────────────── */
:root, [data-theme="dark"] {
    --bg:            #0C0A09;
    --bg-surface:    #181412;
    --bg-card:       rgba(26,21,18,0.92);
    --bg-card-solid: #1E1A17;
    --bg-hover:      rgba(201,149,108,0.07);
    --bg-input:      rgba(255,255,255,0.05);
    --bg-glass:      rgba(18,14,12,0.80);
    --text:          #F5EFE6;
    --text-muted:    #9A8C7E;
    --text-faint:    #4A3F36;
    --text-on-primary: #180E06;
    --border:        rgba(201,149,108,0.13);
    --border-md:     rgba(201,149,108,0.22);
    --border-strong: rgba(201,149,108,0.40);
    --glass-blur:    blur(18px) saturate(1.5);
    --nav-bg:        rgba(12,10,9,0.94);
    --footer-bg:     #080604;
    --input-border:  rgba(255,255,255,0.10);
    --placeholder:   rgba(255,255,255,0.22);
    --scrollbar-track: #181412;
    --scrollbar-thumb: #3A2E26;
    --announcement-bg: #181412;
    --announcement-text: #DEB48A;
    color-scheme: dark;
}

/* ── LIGHT THEME — Warm Ivory ─────────────────────────────── */
[data-theme="light"] {
    --bg:            #FAF8F5;
    --bg-surface:    #FFFFFF;
    --bg-card:       rgba(255,255,255,0.92);
    --bg-card-solid: #FFFFFF;
    --bg-hover:      rgba(201,149,108,0.06);
    --bg-input:      rgba(0,0,0,0.03);
    --bg-glass:      rgba(255,255,255,0.75);
    --text:          #1C1714;
    --text-muted:    #7A6E65;
    --text-faint:    #C4B5A8;
    --text-on-primary: #180E06;
    --border:        rgba(0,0,0,0.08);
    --border-md:     rgba(0,0,0,0.13);
    --border-strong: rgba(0,0,0,0.26);
    --glass-blur:    blur(18px) saturate(1.6);
    --nav-bg:        rgba(250,248,245,0.94);
    --footer-bg:     #1C1714;
    --input-border:  rgba(0,0,0,0.12);
    --placeholder:   rgba(0,0,0,0.28);
    --scrollbar-track: #EDE8E2;
    --scrollbar-thumb: #C4B5A8;
    --announcement-bg: #1C1714;
    --announcement-text: #DEB48A;
    color-scheme: light;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body {
    font-family:var(--font);
    font-size:1rem;
    line-height:1.6;
    color:var(--text);
    background-color:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    transition:background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
img,video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--ease); }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); font-size:inherit; }
input,textarea,select { font-family:var(--font); font-size:inherit; border:none; outline:none; background:none; color:inherit; }
h1,h2,h3,h4,h5,h6 { line-height:1.2; font-weight:700; color:var(--text); }
h1,h2,h3 { font-family:var(--font-display); }
table { border-collapse:collapse; }

/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
.text-xs   { font-size:.75rem; }
.text-sm   { font-size:.875rem; }
.text-lg   { font-size:1.125rem; }
.text-xl   { font-size:1.25rem; }
.text-2xl  { font-size:1.5rem; }
.text-3xl  { font-size:1.875rem; }
.text-4xl  { font-size:2.25rem; }
.text-5xl  { font-size:3rem; }
.font-light    { font-weight:300; }
.font-medium   { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold     { font-weight:700; }
.font-black    { font-weight:900; }
.text-primary  { color:var(--primary) !important; }
.text-accent   { color:var(--accent) !important; }
.text-gold     { color:var(--gold) !important; }
.text-muted    { color:var(--text-muted) !important; }
.text-danger   { color:var(--danger) !important; }
.uppercase     { text-transform:uppercase; }
.tracking-wide { letter-spacing:0.05em; }
.tracking-wider{ letter-spacing:0.1em; }
.tracking-widest{letter-spacing:0.2em; }

.section-eyebrow {
    font-size:.7rem; font-weight:700; letter-spacing:.2em;
    text-transform:uppercase; color:var(--primary); margin-bottom:.5rem;
}
.section-title {
    font-size:clamp(1.5rem,3vw,2.5rem); font-weight:800;
    color:var(--text); margin-bottom:.5rem; line-height:1.15;
}
.section-subtitle {
    font-size:1rem; color:var(--text-muted); max-width:560px; line-height:1.7;
}
.section-heading { text-align:center; margin-bottom:2.5rem; }
.section-heading h2 {
    font-size:clamp(1.6rem,3vw,2.6rem); font-weight:700;
    font-family:var(--font-display); color:var(--text);
    position:relative; display:inline-block; letter-spacing:-.01em;
}
.section-heading h2::after {
    content:''; display:block; width:40px; height:2px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    margin:.6rem auto 0;
}
.section-title-inline {
    font-size:clamp(1.3rem,2.2vw,2rem); font-weight:700;
    font-family:var(--font-display); color:var(--text); letter-spacing:-.01em;
}
.section-title {
    font-family:var(--font-display);
    font-size:clamp(1.6rem,3vw,2.5rem); font-weight:700;
    color:var(--text); margin-bottom:.5rem; line-height:1.15; letter-spacing:-.01em;
}

/* ── 4. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }
::selection { background:var(--primary-glow); color:var(--primary-light); }

/* ============================================================
   Phase 2: Layout · Utilities · Buttons · Keyframes · Glass
   ============================================================ */

/* ── CONTAINER ────────────────────────────────────────────── */
.container {
    width:100%; max-width:1280px;
    margin-inline:auto; padding-inline:1.25rem;
}
@media(min-width:768px){ .container{ padding-inline:2rem; } }
@media(min-width:1400px){ .container{ max-width:1360px; } }

.section-padding { padding:4rem 0; }
@media(max-width:767px){ .section-padding{ padding:2.5rem 0; } }

/* ── GRID HELPERS ─────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:991px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:575px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:repeat(2,1fr); gap:1rem; } }

/* ── GLASS CARD ───────────────────────────────────────────── */
.glass {
    background:var(--bg-glass);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.glass-sm { border-radius:var(--radius-md); }
.glass-strong {
    background:var(--bg-card);
    backdrop-filter:blur(24px) saturate(1.6);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);
    border:1px solid var(--border-md);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem 1.75rem; border-radius:var(--radius-full);
    font-size:.875rem; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; cursor:pointer;
    transition:all var(--dur-med) var(--ease);
    position:relative; overflow:hidden; border:none;
    white-space:nowrap;
}
.btn::before {
    content:''; position:absolute; inset:0; opacity:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
    transition:opacity var(--dur-fast);
}
.btn:hover::before { opacity:1; }

.btn-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary);
    box-shadow:0 4px 20px var(--primary-glow);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 28px var(--primary-glow);
    color:var(--text-on-primary);
}
.btn-primary:active { transform:translateY(0); }

.btn-outline {
    background:transparent;
    border:1.5px solid var(--border-strong);
    color:var(--primary);
}
.btn-outline:hover {
    background:var(--primary-glow-sm);
    border-color:var(--primary);
    transform:translateY(-2px);
}

.btn-ghost {
    background:transparent;
    color:var(--text-muted);
    padding:.5rem 1rem;
}
.btn-ghost:hover { color:var(--primary); background:var(--bg-hover); }

.btn-accent {
    background:linear-gradient(135deg,var(--accent),#c9402a);
    color:#fff;
    box-shadow:0 4px 20px var(--accent-glow);
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--accent-glow); }

.btn-sm { padding:.5rem 1.25rem; font-size:.8rem; }
.btn-lg { padding:1rem 2.5rem; font-size:1rem; }
.btn-icon { padding:.65rem; border-radius:var(--radius-md); aspect-ratio:1; }

/* View-all inline links */
.btn-view-all-inline {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.8rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--primary);
    padding:.4rem .9rem; border-radius:var(--radius-full);
    border:1px solid var(--border-md);
    transition:all var(--dur-fast);
}
.btn-view-all-inline:hover {
    background:var(--primary-glow-sm); border-color:var(--primary); color:var(--primary);
}
.btn-view-all {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.75rem 2rem; border-radius:var(--radius-full);
    border:1.5px solid var(--border-strong);
    font-size:.8rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--primary);
    transition:all var(--dur-med) var(--ease);
}
.btn-view-all:hover {
    background:var(--primary); color:var(--text-on-primary);
    border-color:var(--primary); transform:translateY(-2px);
    box-shadow:var(--shadow-glow);
}

/* ── BADGES ───────────────────────────────────────────────── */
.badge-pill {
    display:inline-flex; align-items:center;
    padding:.2rem .7rem; border-radius:var(--radius-full);
    font-size:.7rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase;
}
.badge-primary { background:var(--primary-glow); color:var(--primary); border:1px solid var(--border-md); }
.badge-accent  { background:var(--accent-glow); color:var(--accent); border:1px solid rgba(0,212,255,.2); }
.badge-gold    { background:var(--gold-glow); color:var(--gold); border:1px solid rgba(247,201,75,.2); }
.badge-danger  { background:rgba(255,77,109,.15); color:var(--danger); border:1px solid rgba(255,77,109,.2); }

/* ── DIVIDER ──────────────────────────────────────────────── */
.divider {
    width:100%; height:1px;
    background:linear-gradient(90deg,transparent,var(--border-md),transparent);
    margin:2rem 0;
}

/* ── FLEX UTILITIES ───────────────────────────────────────── */
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col     { flex-direction:column; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }   .gap-6 { gap:1.5rem; } .gap-8 { gap:2rem; }

/* ── ICON BUTTON ──────────────────────────────────────────── */
.icon-btn {
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-md); border:1px solid var(--border);
    color:var(--text-muted); font-size:1.1rem;
    transition:all var(--dur-fast) var(--ease);
    position:relative; cursor:pointer; background:var(--bg-hover);
}
.icon-btn:hover { color:var(--primary); border-color:var(--border-md); background:var(--primary-glow-sm); }

/* ── @KEYFRAMES ───────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; } to { opacity:1; }
}
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-32px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
    from { opacity:0; transform:translateX(32px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
    from { opacity:0; transform:scale(0.88); }
    to   { opacity:1; transform:scale(1); }
}
@keyframes pulse-glow {
    0%,100% { box-shadow:0 0 0 0 var(--primary-glow); }
    50%      { box-shadow:0 0 0 12px transparent; }
}
@keyframes float {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-8px); }
}
@keyframes gradient-shift {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
@keyframes marquee {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-25%); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
@keyframes shimmer {
    0%   { background-position:-400px 0; }
    100% { background-position:400px 0; }
}
@keyframes toastIn {
    from { opacity:0; transform:translateX(100%); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes ripple {
    to { transform:scale(4); opacity:0; }
}
@keyframes heroTextReveal {
    from { opacity:0; transform:translateY(40px) skewY(3deg); }
    to   { opacity:1; transform:translateY(0) skewY(0deg); }
}

/* AOS-style scroll animation classes */
[data-aos] { opacity:0; transition-property:opacity,transform; transition-duration:.6s; transition-timing-function:var(--ease-out); }
[data-aos="fade-up"]   { transform:translateY(32px); }
[data-aos="fade-down"] { transform:translateY(-32px); }
[data-aos="fade-left"] { transform:translateX(32px); }
[data-aos="fade-right"]{ transform:translateX(-32px); }
[data-aos="zoom-in"]   { transform:scale(0.9); }
[data-aos].aos-animate { opacity:1; transform:none; }

/* ============================================================
   Phase 3: Announcement · Header · Nav · Mobile Menu · Bottom Nav · Search
   ============================================================ */

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */
.announcement-bar {
    background:var(--announcement-bg);
    border-bottom:1px solid var(--border);
    padding:.45rem 0; overflow:hidden;
}
.marquee-track {
    display:flex; gap:0; width:max-content;
    animation:marquee 28s linear infinite;
}
.announcement-bar:hover .marquee-track { animation-play-state:paused; }
.marquee-item {
    padding:0 2.5rem; font-size:.72rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--announcement-text);
    white-space:nowrap; flex-shrink:0;
}
.marquee-item::after {
    content:'✦'; margin-left:2.5rem;
    color:var(--primary); opacity:.6;
}
.marquee-item a { color:inherit; }
.marquee-item a:hover { color:var(--primary); }

/* ── HEADER ──────────────────────────────────────────────── */
.main-header {
    position:sticky; top:0; z-index:var(--z-sticky);
    background:var(--bg);
    border-bottom:1px solid var(--border);
    transition:background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.main-header.scrolled {
    box-shadow:0 2px 24px rgba(0,0,0,0.18);
    border-bottom-color:var(--border-md);
}
.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    height:68px; position:relative;
}
@media(min-width:992px){ .header-inner{ height:76px; } }

/* Centered logo */
.logo-center {
    position:absolute; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; flex-shrink:0;
    text-decoration:none;
}
/* Uploaded image logo */
.logo-center .logo-img {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 8px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 16px rgba(0,0,0,0.40);
    transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.logo-center:hover .logo-img {
    opacity: .88;
    transform: scale(1.03);
    box-shadow: 0 4px 22px rgba(0,0,0,0.50);
}
/* Text logo fallback */
.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
    transition: color var(--dur-fast);
    white-space: nowrap;
}
.logo-center:hover .logo-text { color: var(--primary); }

/* Header left/right groups */
.header-left, .header-right {
    display:flex; align-items:center; gap:.15rem; flex-shrink:0;
}

/* Hamburger */
.hamburger-btn {
    width:42px; height:42px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    border-radius:var(--radius-sm); flex-shrink:0;
    transition:background var(--dur-fast);
}
.hamburger-btn:hover { background:var(--bg-hover); }
.hamburger-btn i { font-size:1.4rem; color:var(--text); }

/* Icon buttons */
.icon-btn-label {
    display:inline-flex; align-items:center; flex-direction:column; gap:2px;
    width:auto; height:auto; padding:.35rem .65rem; border-radius:var(--radius-sm);
    border:none; background:transparent; transition:color var(--dur-fast), background var(--dur-fast);
}
.icon-btn-label i { font-size:1.15rem; color:var(--text); transition:color var(--dur-fast); }
.icon-btn-label .icon-label {
    font-size:.58rem; font-weight:600; letter-spacing:.07em;
    text-transform:uppercase; color:var(--text-muted);
    transition:color var(--dur-fast);
}
.icon-btn-label:hover i { color:var(--primary); }
.icon-btn-label:hover .icon-label { color:var(--primary); }

.cart-badge, .cart-count-badge {
    position:absolute; top:-4px; right:-4px;
    min-width:17px; height:17px; border-radius:var(--radius-full);
    background:var(--accent); color:#fff;
    font-size:.6rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    padding:0 3px; line-height:1;
}
.nav-icon-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.verified-dot { position:absolute; bottom:-3px; right:-3px; font-size:.6rem; color:var(--primary); }
.is-verified i { color:var(--primary); }

.theme-toggle-btn {
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm); border:1px solid var(--border);
    background:transparent; color:var(--text-muted); font-size:.95rem;
    transition:all var(--dur-fast); cursor:pointer;
}
.theme-toggle-btn:hover { color:var(--primary); border-color:var(--primary); }

/* Legacy — kept for search sidebar compatibility */
.header-search { display:none; }
.header-search-dropdown { display:none; }
.hsd-section-title {
    padding:.75rem 1rem .4rem; font-size:.7rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}
.hsd-keyword-list { padding:.25rem .75rem .75rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.hsd-keyword {
    padding:.3rem .8rem; border-radius:var(--radius-full);
    border:1px solid var(--border-md); font-size:.78rem; font-weight:500;
    color:var(--text-muted); cursor:pointer; transition:all var(--dur-fast);
}
.hsd-keyword:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow-sm); }
.hsd-result-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.65rem 1rem; transition:background var(--dur-fast);
}
.hsd-result-item:hover { background:var(--bg-hover); }
.hsd-result-item img { width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.hsd-name { font-size:.875rem; font-weight:500; color:var(--text); }
.hsd-price { font-size:.8rem; color:var(--primary); font-weight:600; margin-top:.1rem; }

/* ── DESKTOP NAV ──────────────────────────────────────────── */
.main-nav {
    background:var(--bg-surface);
    border-bottom:1px solid var(--border);
}
.nav-list {
    display:flex; align-items:center; justify-content:center; gap:0;
    height:44px; overflow:visible;
    margin-bottom: 0;
}
.nav-item { position:relative; }
.nav-link {
    display:flex; align-items:center; gap:.3rem;
    padding:0 1.1rem; height:44px;
    font-size:.72rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-muted);
    transition:color var(--dur-fast);
    position:relative; white-space:nowrap;
}
.nav-link::after {
    content:''; position:absolute; bottom:0; left:50%; right:50%;
    height:2px; background:var(--primary);
    transition:left var(--dur-med) var(--ease), right var(--dur-med) var(--ease);
}
.nav-link:hover,.nav-link.active { color:var(--text); }
.nav-link:hover::after,.nav-link.active::after { left:1.1rem; right:1.1rem; }

/* Dropdown */
.dropdown-menu-custom {
    display:none; position:absolute; top:100%; left:0;
    background:var(--bg-card-solid);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-md); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); min-width:220px; overflow:hidden;
    z-index:var(--z-dropdown);
    animation:scaleIn .2s var(--ease-out) forwards;
    transform-origin:top left;
}
.nav-item:hover .dropdown-menu-custom { display:block; }
.dropdown-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.7rem 1.25rem; font-size:.85rem; font-weight:500;
    color:var(--text-muted); transition:all var(--dur-fast);
}
.dropdown-item:hover { background:var(--bg-hover); color:var(--primary); }
.dropdown-item img { width:32px; height:32px; object-fit:cover; border-radius:var(--radius-sm); }

/* ── MOBILE MENU ──────────────────────────────────────────── */
.mobile-menu-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px); z-index:calc(var(--z-overlay) - 1);
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-med) var(--ease);
}
.mobile-menu-overlay.active { opacity:1; pointer-events:auto; }

.mobile-menu-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:min(340px,90vw);
    background:var(--bg-surface);
    border-right:1px solid var(--border);
    z-index:var(--z-overlay);
    overflow-y:auto; display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform var(--dur-med) var(--ease);
}
.mobile-menu-sidebar.active { transform:translateX(0); }

.mobile-menu-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem; border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.mobile-menu-logo img { height:30px; }
.mobile-menu-close {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-md); border:1px solid var(--border); color:var(--text-muted);
    font-size:1.1rem; transition:all var(--dur-fast);
}
.mobile-menu-close:hover { color:var(--danger); border-color:var(--danger); }

.mobile-menu-list { flex:1; padding:1rem 0; }
.mobile-menu-list > li { border-bottom:1px solid var(--border); }
.mobile-menu-list .mm-link {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.25rem; font-size:.85rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--text); transition:color var(--dur-fast);
}
.mobile-menu-list .mm-link:hover { color:var(--primary); }
.mobile-menu-toggle {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm); border:1px solid var(--border);
    color:var(--text-muted); font-size:.8rem;
    transition:all var(--dur-fast); flex-shrink:0;
}
.has-submenu.open .mobile-menu-toggle { color:var(--primary); border-color:var(--border-md); transform:rotate(180deg); }
.mobile-submenu { display:none; background:var(--bg-hover); }
.has-submenu.open .mobile-submenu { display:block; }
.mobile-submenu a {
    display:flex; align-items:center; gap:.6rem;
    padding:.65rem 1.5rem; font-size:.83rem; font-weight:500;
    color:var(--text-muted); transition:color var(--dur-fast);
}
.mobile-submenu a:hover { color:var(--primary); }
.mobile-submenu a img { width:28px; height:28px; object-fit:cover; border-radius:var(--radius-sm); }

.mobile-menu-footer {
    padding:1.25rem; border-top:1px solid var(--border); flex-shrink:0;
}
.mobile-menu-footer .mm-btn {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    width:100%; padding:.75rem; border-radius:var(--radius-md);
    font-size:.85rem; font-weight:600; letter-spacing:.05em;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); margin-bottom:.75rem;
    transition:opacity var(--dur-fast);
}
.mobile-menu-footer .mm-btn:hover { opacity:.88; }
.mm-social { display:flex; gap:.75rem; margin-top:.75rem; justify-content:center; }
.mm-social a {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-md); border:1px solid var(--border);
    color:var(--text-muted); font-size:1rem; transition:all var(--dur-fast);
}
.mm-social a:hover { color:var(--primary); border-color:var(--border-md); }

/* ── MOBILE BOTTOM NAV ────────────────────────────────────── */
.mobile-bottom-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:var(--z-sticky);
    background:var(--bg-glass);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border-top:1px solid var(--border);
    display:flex; align-items:center;
    height:60px; padding-bottom:env(safe-area-inset-bottom,0);
}
@media(min-width:768px){ .mobile-bottom-nav{ display:none; } }
.mobile-bottom-nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; height:100%;
    color:var(--text-muted); font-size:.58rem; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase;
    transition:color var(--dur-fast); position:relative;
    cursor:pointer;
}
.mobile-bottom-nav-item i { font-size:1.25rem; }
.mobile-bottom-nav-item.active,
.mobile-bottom-nav-item:hover { color:var(--primary); }
.mobile-bottom-nav-item .cart-count-badge {
    position:absolute; top:6px; left:50%; margin-left:4px;
}

/* ── SEARCH SIDEBAR ───────────────────────────────────────── */
.search-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px); z-index:calc(var(--z-overlay) - 1);
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-med);
}
.search-overlay.active { opacity:1; pointer-events:auto; }

.search-sidebar {
    position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw);
    background:var(--bg-surface); border-left:1px solid var(--border);
    z-index:var(--z-overlay); display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform var(--dur-med) var(--ease);
    overflow:hidden;
}
.search-sidebar.active { transform:translateX(0); }
.search-sidebar-header {
    display:flex; align-items:center; gap:.75rem;
    padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.search-input-wrap {
    flex:1; display:flex; align-items:center; gap:.6rem;
    background:var(--bg-input); border:1px solid var(--input-border);
    border-radius:var(--radius-full); padding:.55rem 1rem;
}
.search-input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow-sm); }
#search-input { flex:1; font-size:.9rem; background:none; color:var(--text); }
#search-input::placeholder { color:var(--placeholder); }
#search-clear { color:var(--text-muted); font-size:.9rem; display:none; cursor:pointer; }
#search-clear:hover { color:var(--primary); }

.search-sidebar-body { flex:1; overflow-y:auto; padding:1.25rem; }
.search-section-title {
    font-size:.7rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text-muted); margin-bottom:.75rem;
}
.search-keyword-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.search-keyword-tag {
    padding:.3rem .85rem; border-radius:var(--radius-full);
    border:1px solid var(--border-md); font-size:.8rem; font-weight:500;
    color:var(--text-muted); cursor:pointer;
    transition:all var(--dur-fast);
}
.search-keyword-tag:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow-sm); }
.search-result-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.65rem .5rem; border-radius:var(--radius-md);
    transition:background var(--dur-fast);
}
.search-result-item:hover { background:var(--bg-hover); }
.search-result-item img { width:44px; height:44px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.sr-name { font-size:.875rem; font-weight:500; color:var(--text); }
.sr-price { font-size:.8rem; color:var(--primary); font-weight:600; }
.sr-mrp { font-size:.75rem; color:var(--text-muted); text-decoration:line-through; margin-left:.35rem; }
.sr-off { font-size:.72rem; color:var(--accent); font-weight:700; margin-left:.25rem; }

/* ============================================================
   Phase 4: Home Page Sections
   Hero · Categories · Product Cards · Sliders · Blog · Services
   ============================================================ */

/* ── HERO SLIDER ──────────────────────────────────────────── */
.hero-slider {
    position:relative; overflow:hidden;
    background:var(--bg-surface);
    min-height:360px;
}
@media(min-width:768px){ .hero-slider{ min-height:520px; } }
@media(min-width:1200px){ .hero-slider{ min-height:620px; } }

.hero-slider .slides {
    display:flex; transition:transform .65s var(--ease);
    will-change:transform; height:100%;
}
.hero-slider .slide {
    flex-shrink:0; width:100%; position:relative; overflow:hidden;
}
.hero-slider .slide picture,
.hero-slider .slide img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-video { width:100%; height:100%; object-fit:cover; display:block; }
.slide-link { display:block; width:100%; height:100%; }

/* Hero text overlay */
.hero-content-overlay {
    position:absolute; inset:0; z-index:3;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    padding:2.5rem clamp(1.25rem,5vw,4rem);
    background:linear-gradient(105deg,rgba(6,10,9,.65) 0%,rgba(6,10,9,.25) 60%,transparent 100%);
}
[data-theme="light"] .hero-content-overlay {
    background:linear-gradient(105deg,rgba(240,244,239,.60) 0%,rgba(240,244,239,.20) 60%,transparent 100%);
}
.hero-eyebrow {
    font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--primary); margin-bottom:.75rem;
    animation:heroTextReveal .8s var(--ease-out) .1s both;
}
.hero-title {
    font-family:var(--font-display);
    font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:700; line-height:1.08;
    color:#fff; margin-bottom:1.25rem; letter-spacing:-.01em;
    animation:heroTextReveal .8s var(--ease-out) .25s both;
}
[data-theme="light"] .hero-title { color:var(--text); }
.hero-cta { animation:heroTextReveal .8s var(--ease-out) .4s both; }

/* Slider arrows */
.slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; z-index:10;
    background:var(--bg-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border-md); color:var(--text);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; transition:all var(--dur-fast);
    cursor:pointer;
}
.slider-arrow:hover { background:var(--primary); color:var(--text-on-primary); border-color:var(--primary); }
.slider-arrow.prev { left:1rem; }
.slider-arrow.next { right:1rem; }
.slider-dots {
    position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
    display:flex; gap:.5rem; z-index:10;
}
.slider-dots .dot {
    width:8px; height:8px; border-radius:var(--radius-full);
    background:rgba(255,255,255,.4); border:none; cursor:pointer;
    transition:all var(--dur-med);
}
.slider-dots .dot.active { width:24px; background:var(--primary); }

/* ── TRENDING CATEGORIES ──────────────────────────────────── */
.trending-categories-section { padding:3rem 0; background:var(--bg-surface); }
.trending-categories-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:1rem;
}
@media(min-width:768px){ .trending-categories-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1.25rem; } }

.trending-cat-card {
    display:flex; flex-direction:column; align-items:center; gap:.65rem;
    cursor:pointer; transition:transform var(--dur-med) var(--ease-spring);
    text-decoration:none;
}
.trending-cat-card:hover { transform:translateY(-6px); }
.trending-cat-img {
    width:100%; aspect-ratio:1; border-radius:var(--radius-lg);
    overflow:hidden; border:2px solid transparent;
    background:var(--bg-card);
    transition:border-color var(--dur-med), box-shadow var(--dur-med);
    position:relative;
}
.trending-cat-card:hover .trending-cat-img {
    border-color:var(--primary);
    box-shadow:0 0 0 4px var(--primary-glow-sm), var(--shadow-md);
}
.trending-cat-img img {
    width:100%; height:100%; object-fit:cover;
    transition:transform var(--dur-slow) var(--ease);
}
.trending-cat-card:hover .trending-cat-img img { transform:scale(1.08); }
.trending-cat-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:var(--bg-hover); color:var(--text-faint); font-size:2rem;
}
.trending-cat-name {
    font-size:.78rem; font-weight:700; letter-spacing:.04em;
    text-align:center; color:var(--text); text-transform:capitalize;
}

/* ── PRODUCT CARD (3D TILT) ───────────────────────────────── */
.product-card {
    border-radius:var(--radius-sm);
    background:var(--bg-card);
    border:1px solid var(--border);
    overflow:hidden;
    transition:box-shadow var(--dur-med) var(--ease), border-color var(--dur-med), transform var(--dur-med) var(--ease);
    position:relative;
    transform-style:preserve-3d;
    will-change:transform;
}
.product-card:hover {
    box-shadow:var(--shadow-md);
    border-color:var(--border-md);
    transform:translateY(-3px);
}
.product-img-wrap {
    position:relative; aspect-ratio:3/4; overflow:hidden;
    background:var(--bg-card-solid);
}
.product-img-wrap img {
    width:100%; height:100%; object-fit:cover;
    transition:transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-img-wrap img { transform:scale(1.06); }

.badge-tag {
    position:absolute; top:.6rem; left:.6rem; z-index:2;
    padding:.25rem .7rem; border-radius:var(--radius-full);
    font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    background:var(--primary); color:var(--text-on-primary);
}
.wishlist-btn {
    position:absolute; top:.6rem; right:.6rem; z-index:2;
    width:34px; height:34px; border-radius:50%;
    background:var(--bg-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; font-size:.9rem;
    transition:all var(--dur-fast); cursor:pointer;
}
.wishlist-btn:hover,.wishlist-btn.active,.wishlist-btn.wishlisted {
    color:var(--danger); border-color:var(--danger); background:rgba(255,77,109,.15);
}
.wishlist-btn.wishlisted i { font-size:.9rem; }

.product-info { padding:.85rem 1rem 1rem; }
.product-name {
    display:block; font-size:.875rem; font-weight:600; color:var(--text);
    line-height:1.3; margin-bottom:.35rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color var(--dur-fast);
}
.product-name:hover { color:var(--primary); }
.product-price { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.selling-price { font-size:1rem; font-weight:800; color:var(--text); }
.mrp-price {
    font-size:.8rem; font-weight:400; color:var(--text-muted);
    text-decoration:line-through;
}
.discount-tag {
    font-size:.7rem; font-weight:700; color:var(--primary);
    background:var(--primary-glow-sm); padding:.1rem .4rem;
    border-radius:var(--radius-sm);
}
.rating-row { display:flex; align-items:center; gap:.35rem; margin-top:.35rem; font-size:.78rem; color:var(--text-muted); }
.rating-row .stars { color:var(--star-color); font-size:.75rem; display:flex; gap:1px; }

/* Product grid */
.product-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
@media(min-width:576px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:992px){ .product-grid{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } }
.product-grid .product-card { animation:fadeUp .4s var(--ease-out) both; }

/* Category pill tabs */
.category-pill-tabs {
    display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem;
}
.category-pill-tab {
    padding:.4rem 1rem; border-radius:var(--radius-full);
    font-size:.78rem; font-weight:600; letter-spacing:.04em;
    border:1px solid var(--border-md); color:var(--text-muted);
    transition:all var(--dur-fast); cursor:pointer;
}
.category-pill-tab:hover { color:var(--primary); border-color:var(--primary); background:var(--primary-glow-sm); }
.category-pill-tab.active {
    background:var(--primary); color:var(--text-on-primary);
    border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow);
}

/* ── PRODUCT SLIDER (Trending / Top Selling) ──────────────── */
.trending-products-section { padding:3rem 0; background:var(--bg); }
.trending-products-section:nth-child(even) { background:var(--bg-surface); }
.tp-slider-wrapper { position:relative; }
.tp-track {
    display:flex; gap:1rem; overflow-x:auto;
    scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none;
    padding:.5rem .25rem;
    scroll-snap-type:x mandatory;
}
.tp-track::-webkit-scrollbar { display:none; }
.tp-card {
    flex-shrink:0; width:200px;
    border-radius:var(--radius-lg);
    background:var(--bg-card);
    border:1px solid var(--border);
    overflow:hidden; scroll-snap-align:start;
    transition:all var(--dur-med) var(--ease);
}
@media(min-width:768px){ .tp-card{ width:220px; } }
.tp-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-md); }
.tp-card-img {
    position:relative; aspect-ratio:3/4; overflow:hidden;
    background:var(--bg-card-solid);
}
.tp-card-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.tp-card:hover .tp-card-img img { transform:scale(1.06); }
.tp-fit-badge {
    position:absolute; top:.5rem; left:.5rem;
    padding:.2rem .6rem; border-radius:var(--radius-full);
    font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    background:var(--primary); color:var(--text-on-primary);
}
.tp-rating-badge {
    position:absolute; bottom:.5rem; left:.5rem;
    padding:.2rem .5rem; border-radius:var(--radius-sm);
    font-size:.7rem; font-weight:700;
    background:rgba(247,201,75,.2); color:var(--gold);
    border:1px solid var(--gold-glow); display:flex; align-items:center; gap:.2rem;
}
.tp-rating-badge i { font-size:.65rem; }
.tp-wishlist {
    position:absolute; top:.5rem; right:.5rem;
    width:30px; height:30px; border-radius:50%;
    background:var(--bg-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border); color:var(--text-muted); font-size:.8rem;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--dur-fast); cursor:pointer;
}
.tp-wishlist:hover { color:var(--danger); border-color:var(--danger); }
.tp-card-info { padding:.7rem .85rem .85rem; }
.tp-name {
    display:block; font-size:.82rem; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.3rem;
}
.tp-name:hover { color:var(--primary); }
.tp-desc { font-size:.73rem; color:var(--text-muted); margin-bottom:.3rem; line-height:1.4; }
.tp-price { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.tp-selling { font-size:.9rem; font-weight:800; color:var(--text); }
.tp-mrp { font-size:.75rem; color:var(--text-muted); text-decoration:line-through; }
.tp-disc { font-size:.68rem; font-weight:700; color:var(--primary); background:var(--primary-glow-sm); padding:.1rem .35rem; border-radius:var(--radius-sm); }

/* Slider arrows */
.tp-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%; z-index:5;
    background:var(--bg-card); border:1px solid var(--border-md); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; font-size:.9rem;
    transition:all var(--dur-fast); cursor:pointer;
}
.tp-arrow:hover { background:var(--primary); color:var(--text-on-primary); border-color:var(--primary); }
.tp-arrow:disabled { opacity:.3; pointer-events:none; }
.tp-prev { left:-18px; } .tp-next { right:-18px; }
@media(max-width:767px){ .tp-prev,.tp-next{ display:none; } }

/* ── WATCH & BUY ──────────────────────────────────────────── */
.watch-buy-section { padding:3rem 0; background:var(--bg-surface); }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(min-width:768px){ .video-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px){ .home-video-grid{ grid-template-columns:repeat(4,1fr); } }
.video-card { border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:transform var(--dur-med) var(--ease); }
.video-card:hover { transform:translateY(-4px); }
.video-thumbnail {
    position:relative; aspect-ratio:9/16; overflow:hidden;
    background:var(--bg-card-solid); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.video-thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow); }
.video-card:hover .video-thumbnail img { transform:scale(1.06); }
.video-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:2.5rem; background:var(--bg-hover); }
.video-play-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%;
    background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.4rem;
    transition:all var(--dur-fast);
    box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.video-card:hover .video-play-btn { background:var(--primary); box-shadow:0 4px 20px var(--primary-glow); }
.video-info { padding:.75rem 1rem .9rem; background:var(--bg-card); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.video-info h6 { font-size:.83rem; font-weight:600; color:var(--text); line-height:1.3; margin-bottom:.35rem; }
.video-shop-link { font-size:.75rem; color:var(--primary); font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
.video-shop-link:hover { text-decoration:underline; }

/* Video player modal */
.video-player-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.88);
    z-index:var(--z-modal); display:none;
    align-items:center; justify-content:center; padding:1rem;
}
.video-player-overlay.active { display:flex; animation:fadeIn .2s var(--ease-out); }
.video-player-wrap {
    background:var(--bg-card-solid); border-radius:var(--radius-xl);
    border:1px solid var(--border-md); overflow:hidden;
    width:100%; max-width:900px; position:relative;
}
.video-close-btn {
    position:absolute; top:1rem; right:1rem; z-index:2;
    width:36px; height:36px; border-radius:50%;
    background:rgba(0,0,0,.5); border:1px solid var(--border); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    transition:background var(--dur-fast); cursor:pointer;
}
.video-close-btn:hover { background:var(--danger); }
.video-player-title { padding:1rem 1.5rem .5rem; font-weight:600; font-size:.95rem; color:var(--text); }
.video-iframe-wrap { position:relative; aspect-ratio:16/9; }
.video-iframe-wrap iframe { width:100%; height:100%; display:block; border:none; }

/* ── SERVICES SECTION ─────────────────────────────────────── */
.services-strip { padding:3rem 0; background:var(--bg); }
.service-item {
    padding:1.75rem 1.25rem;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--bg-card);
    text-align:center;
    transition:all var(--dur-med) var(--ease);
    cursor:default; margin-bottom:1rem;
}
.service-item:hover {
    border-color:var(--border-md);
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    background:var(--bg-card-solid);
}
.service-item > i {
    font-size:2rem; color:var(--primary); display:block; margin-bottom:.85rem;
    transition:transform var(--dur-med) var(--ease-spring);
}
.service-item:hover > i { transform:scale(1.15); }
.service-title { font-size:.88rem; font-weight:700; color:var(--text); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.04em; }
.service-desc { font-size:.8rem; color:var(--text-muted); line-height:1.5; }

/* ── CERTIFICATIONS ───────────────────────────────────────── */
.certifications-section { padding:2.5rem 0; background:var(--bg-surface); border-top:1px solid var(--border); }
.certifications-title { text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.5rem; }
.certifications-grid { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:center; }
.cert-item {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    opacity:.65; filter:grayscale(1);
    transition:all var(--dur-med);
}
.cert-item:hover { opacity:1; filter:grayscale(0); }
.cert-item img { height:48px; width:auto; object-fit:contain; }
.cert-item span { font-size:.7rem; font-weight:600; color:var(--text-muted); text-align:center; max-width:80px; line-height:1.3; }

/* ── LATEST BLOG ──────────────────────────────────────────── */
.latest-blog-section { padding:3rem 0; background:var(--bg); }
.blog-card {
    border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--border); background:var(--bg-card);
    transition:all var(--dur-med) var(--ease);
    display:flex; flex-direction:column; height:100%;
}
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--border-md); }
.blog-card-img { aspect-ratio:4/3; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.blog-card:hover .blog-card-img img { transform:scale(1.06); }
.blog-card-body { padding:.85rem; flex:1; display:flex; flex-direction:column; }
.blog-card-category { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-bottom:.4rem; }
.blog-card-title { font-size:.875rem; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:.5rem; transition:color var(--dur-fast); }
.blog-card:hover .blog-card-title { color:var(--primary); }
.blog-card-excerpt { font-size:.78rem; color:var(--text-muted); line-height:1.5; flex:1; }
.blog-card-meta { font-size:.7rem; color:var(--text-faint); margin-top:.65rem; }

/* ============================================================
   Phase 5: Inner Pages · Footer · Modals · Toast · Loading
   ============================================================ */

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
    background: var(--footer-bg);
    position: relative;
}

/* Top gradient accent line */
.footer-accent-bar {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light, #e8c4a0) 50%, var(--primary) 70%, transparent 100%);
}

/* Main grid layout */
.footer-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    padding: 3.5rem 0 3rem;
    border-bottom: 1px solid var(--border);
}

/* ── Brand + Newsletter column ── */
.footer-brand-col {}

.footer-logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1rem;
}
.footer-logo img {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: 7px;
    padding: 4px 9px;
    background: rgba(255,255,255,0.93);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    transition: opacity .2s, box-shadow .2s;
}
.footer-logo:hover img {
    opacity: .85;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.footer-logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    transition: color .2s;
}
.footer-logo:hover .footer-logo-text { color: var(--primary); }

.footer-brand-desc {
    font-size: .83rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 1.25rem;
    max-width: 280px;
}

/* Social */
.footer-social {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.footer-social a {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-md);
    color: var(--text-muted);
    font-size: .95rem;
    transition: all var(--dur-fast);
    text-decoration: none;
}
.footer-social a:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow-sm);
    transform: translateY(-2px);
}

/* Newsletter */
.footer-newsletter {}
.footer-nl-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.newsletter-form {
    display: flex;
    gap: 0;
    margin-bottom: .6rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-md);
    transition: border-color var(--dur-fast);
}
.newsletter-form:focus-within { border-color: var(--primary); }
.newsletter-form input {
    flex: 1; min-width: 0;
    padding: .65rem 1rem;
    background: var(--bg-input);
    border: none;
    color: var(--text);
    font-size: .82rem;
    outline: none;
}
.newsletter-form input::placeholder { color: var(--placeholder); }
.newsletter-form button {
    padding: .65rem 1.2rem;
    background: var(--primary);
    color: #180E06;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--dur-fast);
}
.newsletter-form button:hover { background: var(--primary-dark); }
.newsletter-spam-note {
    font-size: .71rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.newsletter-spam-note i { color: var(--primary); }

/* ── Links columns ── */
.footer-links-col {}

.footer-col-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.footer-links-col ul {
    list-style: none;
    padding: 0; margin: 0;
}
.footer-links-col ul li { margin-bottom: .55rem; }
.footer-links-col ul li a {
    font-size: .82rem;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--dur-fast), gap var(--dur-fast);
}
.footer-links-col ul li a::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--dur-fast);
}
.footer-links-col ul li a:hover { color: var(--primary); gap: .6rem; }
.footer-links-col ul li a:hover::before { opacity: 1; }

/* Support items */
.footer-support-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .85rem;
}
.footer-support-item i {
    color: var(--primary);
    font-size: .9rem;
    margin-top: .1rem;
    flex-shrink: 0;
}
.footer-support-item span,
.footer-support-item a {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
    text-decoration: none;
    transition: color var(--dur-fast);
}
.footer-support-item a:hover { color: var(--primary); }
.footer-address span { line-height: 1.6; }

/* ── Bottom bar ── */
.footer-bottom {
    padding: 1.25rem 0;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.footer-copy {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0;
}
.footer-payment-badges {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.footer-secure {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .3rem;
    padding-right: .75rem;
    border-right: 1px solid var(--border-md);
}
.footer-pay-icon {
    font-size: .72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}
.footer-pay-icon i { font-size: .85rem; }

/* Newsletter form */
.newsletter-spam-note { font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:.35rem; }
.newsletter-spam-note i { color:var(--primary); font-size:.8rem; }

/* ── PRODUCT CARD EXTRAS ──────────────────────────────────── */
.product-badges {
    position:absolute; top:.6rem; left:.6rem; z-index:2;
    display:flex; flex-direction:column; gap:.35rem;
}
.badge-new { background:var(--accent); color:#000; }
.badge-sale { background:var(--danger); color:#fff; }
.product-overlay {
    position:absolute; inset:0; z-index:3;
    background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%);
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:1rem;
    opacity:0; transition:opacity var(--dur-med) var(--ease);
}
.product-card:hover .product-overlay { opacity:1; }
.btn-quick-view {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.45rem 1.1rem; border-radius:var(--radius-full);
    background:rgba(255,255,255,.15); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3); color:#fff;
    font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    transition:background var(--dur-fast);
}
.btn-quick-view:hover { background:var(--primary); border-color:var(--primary); color:var(--text-on-primary); }
.review-count { color:var(--text-faint); }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb-nav { padding:.75rem 0; }
.breadcrumb-list {
    display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; list-style:none; margin:0; padding:0;
}
.breadcrumb-item { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--text-muted); }
.breadcrumb-item a { color:var(--text-muted); transition:color var(--dur-fast); display:flex; align-items:center; gap:.3rem; }
.breadcrumb-item a:hover { color:var(--primary); }
.breadcrumb-item.active { color:var(--text); font-weight:500; }
.breadcrumb-sep { display:flex; align-items:center; color:var(--text-faint); font-size:.65rem; }

/* ── PRODUCT LISTING ──────────────────────────────────────── */
.collection-banner { width:100%; max-height:240px; overflow:hidden; }
.collection-banner img { width:100%; height:100%; object-fit:cover; }

.filter-sidebar {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem;
    position:sticky; top:90px;
    display:flex; flex-direction:column;
    max-height:calc(100vh - 105px);
}
.filter-sidebar-title { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin-bottom:1.25rem; }
.filter-group { margin-bottom:1.25rem; border-bottom:1px solid var(--border); padding-bottom:1.25rem; }
.filter-group:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.filter-group-header {
    display:flex; align-items:center; justify-content:space-between;
    font-size:.82rem; font-weight:700; color:var(--text);
    cursor:pointer; margin-bottom:.85rem;
    text-transform:uppercase; letter-spacing:.05em;
}
.filter-group-header i { font-size:.75rem; color:var(--text-muted); transition:transform var(--dur-fast); }
.filter-group.collapsed .filter-group-header i { transform:rotate(-90deg); }
.filter-group.collapsed .filter-group-body { display:none; }
.filter-check { display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; cursor:pointer; }
.filter-check input[type="checkbox"] { display:none; }
.check-box {
    width:16px; height:16px; border-radius:4px;
    border:1.5px solid var(--border-md); flex-shrink:0;
    transition:all var(--dur-fast); display:flex; align-items:center; justify-content:center;
}
.filter-check input:checked + .check-box { background:var(--primary); border-color:var(--primary); }
.filter-check input:checked + .check-box::after { content:'✓'; color:var(--text-on-primary); font-size:.7rem; font-weight:700; }
.filter-check-label { font-size:.82rem; color:var(--text-muted); transition:color var(--dur-fast); }
.filter-check:hover .filter-check-label { color:var(--primary); }
.filter-check:hover .check-box { border-color:var(--primary); }

.color-swatches { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.color-swatch {
    width:28px; height:28px; border-radius:50%;
    border:2px solid transparent; cursor:pointer;
    transition:all var(--dur-fast);
    box-shadow:0 0 0 1px var(--border-md);
}
.color-swatch:hover,.color-swatch.active { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow-sm); }
.price-inputs { display:flex; gap:.5rem; margin-top:.5rem; }
.price-input { flex:1; padding:.5rem .75rem; background:var(--bg-input); border:1px solid var(--input-border); border-radius:var(--radius-md); font-size:.83rem; color:var(--text); }
.price-input:focus { border-color:var(--primary); outline:none; }

.filter-actions { margin-top:1rem; display:flex; gap:.5rem; }
.filter-clear-btn { flex:1; padding:.6rem; border-radius:var(--radius-md); border:1px solid var(--border-md); font-size:.8rem; font-weight:600; color:var(--text-muted); transition:all var(--dur-fast); }
.filter-clear-btn:hover { border-color:var(--danger); color:var(--danger); }
.filter-apply-btn { flex:1; padding:.6rem; border-radius:var(--radius-md); background:var(--primary); color:var(--text-on-primary); font-size:.8rem; font-weight:700; transition:background var(--dur-fast); }
.filter-apply-btn:hover { background:var(--primary-dark); }

/* Mobile filter */
.mobile-filter-btn,.inline-filter-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem 1rem; border-radius:var(--radius-full);
    border:1px solid var(--border-md); font-size:.8rem; font-weight:600;
    color:var(--text-muted); background:var(--bg-card);
    transition:all var(--dur-fast); cursor:pointer;
}
.mobile-filter-btn:hover,.inline-filter-btn:hover { color:var(--primary); border-color:var(--primary); }
.filter-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:calc(var(--z-overlay) - 1); display:none; }
.filter-overlay.active { display:block; }
.filter-sidebar-mobile {
    position:fixed; bottom:0; left:0; right:0;
    background:var(--bg-surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-top:1px solid var(--border); z-index:var(--z-overlay);
    max-height:90vh; overflow-y:auto;
    transform:translateY(100%); transition:transform var(--dur-med) var(--ease);
}
.filter-sidebar-mobile.active { transform:translateY(0); }
.filter-close-btn { display:flex; align-items:center; justify-content:center; width:100%; padding:1rem; }
.filter-close-btn::before { content:''; width:40px; height:4px; border-radius:2px; background:var(--border-md); }

/* ── FILTER SIDEBAR NEW ACCORDION ─────────────────────────── */
#filter-form { display:flex; flex-direction:column; flex:1; min-height:0; }
.filter-sidebar-inner { display:flex; flex-direction:column; flex:1; min-height:0; }
.filter-sidebar-head {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:1rem; margin-bottom:.25rem;
    border-bottom:1px solid var(--border);
}
.filter-title { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text); }
.filter-clear-all-btn {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.75rem; font-weight:600; color:var(--text-muted);
    background:none; border:none; cursor:pointer; padding:0;
    transition:color var(--dur-fast);
}
.filter-clear-all-btn:hover { color:var(--danger); }

.filter-sidebar-body { flex:1; min-height:0; overflow-y:auto; padding:.25rem 0; }
.filter-sidebar-footer { padding-top:1rem; border-top:1px solid var(--border); margin-top:.5rem; }
.filter-sidebar-footer .filter-apply-btn { width:100%; flex:unset; display:flex; align-items:center; justify-content:center; gap:.4rem; }

/* Filter group accordion */
.filter-group { margin-bottom:0; padding-bottom:0; border-bottom:1px solid var(--border); }
.filter-group-static { padding:.85rem 0; }
.filter-acc-header {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; background:none; border:none; cursor:pointer;
    padding:.85rem 0; color:var(--text);
    transition:color var(--dur-fast);
}
.filter-acc-header:hover { color:var(--primary); }
.filter-acc-title { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; }
.filter-acc-title i { font-size:.8rem; color:var(--primary); }
.filter-acc-chevron { font-size:.75rem; color:var(--text-muted); transition:transform var(--dur-fast); }
.filter-acc-header[aria-expanded="true"] .filter-acc-chevron { transform:rotate(180deg); }
.filter-acc-body { padding-bottom:.85rem; }

/* Search input */
.filter-search-input {
    width:100%; padding:.5rem .5rem .5rem 2rem;
    background:var(--bg-input); border:1px solid var(--input-border);
    border-radius:var(--radius-md); font-size:.82rem; color:var(--text);
    transition:border-color var(--dur-fast);
}
.filter-search-input:focus { border-color:var(--primary); outline:none; }
.filter-search-icon {
    position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
    font-size:.8rem; color:var(--text-faint); pointer-events:none;
}
.filter-search-clear {
    position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
    font-size:.9rem; color:var(--text-muted); cursor:pointer;
    display:none; transition:color var(--dur-fast);
}
.filter-search-clear:hover { color:var(--danger); }

/* Collection tree */
.collection-tree { display:flex; flex-direction:column; gap:1px; }
.collection-item {
    display:flex; align-items:center; gap:.5rem;
    padding:.4rem .5rem; border-radius:var(--radius-sm);
    font-size:.82rem; color:var(--text-muted);
    text-decoration:none; transition:all var(--dur-fast);
    line-height:1.3;
}
.collection-item:hover { color:var(--primary); background:var(--bg-hover); }
.collection-item.is-active { color:var(--primary); font-weight:600; background:color-mix(in srgb,var(--primary) 10%,transparent); }
.collection-parent { font-weight:600; color:var(--text); }
.collection-child { padding-left:1.5rem; font-size:.8rem; }
.collection-check { width:14px; flex-shrink:0; color:var(--primary); font-size:.75rem; }
.has-active-child > span { color:var(--primary); }

/* Checkbox filter list */
.filter-cb-list { display:flex; flex-direction:column; gap:.3rem; }
.filter-cb-item {
    display:flex; align-items:center; gap:.55rem;
    cursor:pointer; padding:.2rem 0;
    font-size:.82rem; color:var(--text-muted);
    transition:color var(--dur-fast);
}
.filter-cb-item:hover { color:var(--text); }
.filter-cb-item input[type="checkbox"] { display:none; }
.filter-cb-box {
    width:15px; height:15px; flex-shrink:0;
    border:1.5px solid var(--border-md); border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--dur-fast);
}
.filter-cb-item input:checked ~ .filter-cb-box { background:var(--primary); border-color:var(--primary); }
.filter-cb-item input:checked ~ .filter-cb-box::after { content:'✓'; color:#fff; font-size:.6rem; font-weight:700; }
.filter-cb-label { flex:1; }
.filter-color-swatch {
    width:16px; height:16px; border-radius:50%;
    border:1.5px solid var(--border-md); flex-shrink:0; display:inline-block;
}

/* Price range inputs */
.price-range-inputs {
    display:flex; align-items:center; gap:.4rem;
    font-size:.82rem; color:var(--text-muted);
}
.price-range-inputs input {
    flex:1; min-width:0; padding:.4rem .5rem;
    background:var(--bg-input); border:1px solid var(--input-border);
    border-radius:var(--radius-sm); font-size:.82rem; color:var(--text);
    transition:border-color var(--dur-fast);
}
.price-range-inputs input:focus { border-color:var(--primary); outline:none; }

/* Mobile filter close btn override */
.filter-close-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--border-md); background:none;
    color:var(--text-muted); cursor:pointer; padding:0;
    transition:all var(--dur-fast);
}
.filter-close-btn:hover { color:var(--danger); border-color:var(--danger); }
.filter-close-btn::before { display:none; }

/* Sort bar */
.listing-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:.75rem; }
.listing-header-actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.result-count { font-size:.83rem; color:var(--text-muted); font-weight:500; }
.listing-empty {
    grid-column: 1 / -1; text-align:center;
    padding:4rem 1rem; color:var(--text-muted);
}
.listing-empty i { font-size:3rem; display:block; margin-bottom:1rem; color:var(--text-faint); }
.listing-empty p { font-size:.95rem; margin-bottom:1.25rem; }
.sort-select {
    padding:.5rem .85rem; border-radius:var(--radius-full);
    background:var(--bg-card); border:1px solid var(--border-md);
    color:var(--text); font-size:.82rem; cursor:pointer;
    transition:border-color var(--dur-fast);
}
.sort-select:focus { border-color:var(--primary); outline:none; }

/* Load more */
.load-more-wrap { text-align:center; margin-top:2.5rem; }
.load-more-btn {
    padding:.8rem 2.5rem; border-radius:var(--radius-full);
    border:1.5px solid var(--border-strong); color:var(--primary);
    font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    transition:all var(--dur-med) var(--ease); cursor:pointer;
    background:transparent;
}
.load-more-btn:hover { background:var(--primary); color:var(--text-on-primary); border-color:var(--primary); }
.load-more-count { font-size:.8rem; color:var(--text-muted); margin-top:.75rem; }

/* ── PRODUCT DETAIL ───────────────────────────────────────── */
.pd-gallery-section { position:relative; }
.pd-main-image {
    aspect-ratio:1; overflow:hidden; border-radius:var(--radius-xl);
    background:var(--bg-card-solid); cursor:zoom-in; position:relative;
    border:1px solid var(--border);
}
.pd-main-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.pd-main-image:hover img { transform:scale(1.08); }
.pd-gallery-prev,.pd-gallery-next {
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; z-index:2;
    background:var(--bg-glass); backdrop-filter:blur(8px);
    border:1px solid var(--border-md); color:var(--text);
    display:flex; align-items:center; justify-content:center; font-size:.9rem;
    transition:all var(--dur-fast); cursor:pointer;
}
.pd-gallery-prev:hover,.pd-gallery-next:hover { background:var(--primary); color:var(--text-on-primary); border-color:var(--primary); }
.pd-gallery-prev { left:.75rem; } .pd-gallery-next { right:.75rem; }
.pd-thumbnails { display:flex; gap:.5rem; margin-top:.75rem; overflow-x:auto; padding:.25rem; scrollbar-width:none; }
.pd-thumbnails::-webkit-scrollbar { display:none; }
.thumb {
    width:64px; height:64px; flex-shrink:0; object-fit:cover;
    border-radius:var(--radius-md); cursor:pointer;
    border:2px solid transparent;
    transition:all var(--dur-fast);
}
.thumb.active,.thumb:hover { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-glow-sm); }

.pd-info { padding:0; }
.pd-category { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:.5rem; }
.pd-title { font-size:clamp(1.3rem,3vw,1.85rem); font-weight:800; color:var(--text); margin-bottom:.75rem; line-height:1.2; }
.pd-price-row { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.pd-selling { font-size:1.5rem; font-weight:900; color:var(--text); }
.pd-mrp { font-size:1rem; color:var(--text-muted); text-decoration:line-through; }
.pd-disc { padding:.25rem .75rem; border-radius:var(--radius-full); background:var(--primary-glow); color:var(--primary); font-size:.82rem; font-weight:700; border:1px solid var(--border-md); }
.pd-incl { font-size:.75rem; color:var(--text-muted); }
.pd-rating-row { display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; }
.pd-stars { color:var(--star-color); display:flex; gap:1px; font-size:.9rem; }
.pd-review-count { font-size:.82rem; color:var(--text-muted); }

/* Variant selectors */
.pd-option-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.6rem; }
.pd-colors { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.pd-color-btn {
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    border:3px solid transparent; transition:all var(--dur-fast);
    box-shadow:0 0 0 1px var(--border-md);
}
.pd-color-btn.active,.pd-color-btn:hover { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow-sm); }
.pd-sizes { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.pd-size-btn {
    min-width:44px; height:44px; padding:0 .9rem; border-radius:var(--radius-md);
    border:1.5px solid var(--border-md); font-size:.8rem; font-weight:600;
    color:var(--text-muted); background:var(--bg-card);
    transition:all var(--dur-fast); cursor:pointer;
}
.pd-size-btn:hover { border-color:var(--primary); color:var(--primary); }
.pd-size-btn.active { background:var(--primary); color:var(--text-on-primary); border-color:var(--primary); }
.pd-size-btn.out-of-stock { opacity:.38; pointer-events:none; text-decoration:line-through; }

/* Quantity */
.pd-qty-wrap { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.qty-ctrl {
    display:flex; align-items:center; gap:0;
    border:1.5px solid var(--border-md); border-radius:var(--radius-md); overflow:hidden;
}
.qty-btn {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    font-size:.9rem; color:var(--text-muted); background:var(--bg-hover);
    transition:all var(--dur-fast); cursor:pointer; font-size:1.1rem;
}
.qty-btn:hover { color:var(--primary); background:var(--primary-glow-sm); }
.qty-val { width:44px; text-align:center; font-size:.95rem; font-weight:700; color:var(--text); padding:.5rem; }

.pd-cta { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.pd-add-btn {
    flex:1; min-width:160px; padding:.9rem; border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.88rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 4px 20px var(--primary-glow);
    transition:all var(--dur-med) var(--ease); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.pd-add-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--primary-glow); }
.pd-wish-btn {
    width:50px; height:50px; border-radius:50%;
    border:1.5px solid var(--border-strong); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    transition:all var(--dur-fast); cursor:pointer; background:var(--bg-card); flex-shrink:0;
}
.pd-wish-btn:hover,.pd-wish-btn.active { color:var(--danger); border-color:var(--danger); background:rgba(255,77,109,.08); }

/* Expandable sections */
.pd-expandable { border-top:1px solid var(--border); }
.pd-expandable:last-child { border-bottom:1px solid var(--border); }
.pd-expandable-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 0; cursor:pointer; font-size:.875rem; font-weight:600; color:var(--text);
}
.pd-expandable-header i { font-size:.8rem; color:var(--text-muted); transition:transform var(--dur-fast); }
.pd-expandable.open .pd-expandable-header i { transform:rotate(180deg); color:var(--primary); }
.pd-expandable-body { display:none; padding-bottom:1rem; }
.pd-expandable.open .pd-expandable-body { display:block; animation:fadeUp .2s var(--ease-out); }
.pd-expandable-body p,.pd-expandable-body li { font-size:.84rem; color:var(--text-muted); line-height:1.7; }

/* ── PRODUCT DETAIL — Group Chips ─────────────────────────── */
.pd-group-chips-wrap { margin-bottom:.875rem; }
.pd-group-chips-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.4rem; }
.pd-group-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.pd-group-chip {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.35rem .9rem; border:1.5px solid var(--border-md); border-radius:var(--radius-md);
    font-size:.8rem; font-weight:600; color:var(--text);
    background:var(--bg-card); transition:all var(--dur-fast);
}
.pd-group-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow-sm); }
.pd-group-chip.active { border-color:var(--primary); background:var(--primary-glow-sm); color:var(--primary); box-shadow:0 0 0 2px var(--primary-glow); }

/* ── PRODUCT DETAIL — Subscribe & Save Box ────────────────── */
.pd-subscribe-box {
    margin:1rem 0; border:1.5px solid var(--border-md);
    border-radius:var(--radius-lg); overflow:hidden;
    background:var(--primary-glow-sm);
}
.pd-purchase-tabs { display:flex; border-bottom:1px solid var(--border-md); }
.pd-tab {
    flex:1; display:flex; align-items:center; gap:.5rem;
    padding:.65rem .875rem; background:none; border:none; cursor:pointer;
    font-size:.8rem; font-weight:600; color:var(--text-muted); text-align:left;
    transition:background var(--dur-fast),color var(--dur-fast);
}
.pd-tab.active { background:var(--bg-card); color:var(--primary); }
.pd-tab-radio {
    width:15px; height:15px; border-radius:50%;
    border:2px solid var(--border-md); flex-shrink:0; position:relative;
    transition:border-color var(--dur-fast);
}
.pd-tab.active .pd-tab-radio { border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px var(--bg-card); }
.pd-tab-badge { font-size:.6rem; font-weight:700; background:var(--primary); color:var(--text-on-primary); padding:.1rem .4rem; border-radius:var(--radius-sm); letter-spacing:.04em; margin-left:.25rem; }
#subscribe-options { padding:.75rem .875rem; }
.pd-sub-section { margin-bottom:.75rem; }
.pd-sub-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.4rem; }
.pd-frequency-options { display:flex; gap:.5rem; flex-wrap:wrap; }
.pd-freq-opt {
    display:flex; align-items:center; gap:.3rem; cursor:pointer;
    font-size:.8rem; color:var(--text); padding:.3rem .65rem;
    border:1.5px solid var(--border-md); border-radius:var(--radius-full);
    transition:all var(--dur-fast);
}
.pd-freq-opt input { display:none; }
.pd-freq-opt:has(input:checked) { border-color:var(--primary); background:var(--primary-glow-sm); color:var(--primary); font-weight:700; }
.pd-freq-opt em { font-style:normal; font-size:.7rem; color:var(--text-muted); margin-left:.15rem; }
.pd-qty-grid { display:flex; gap:.4rem; flex-wrap:wrap; }
.pd-qty-btn {
    display:flex; flex-direction:column; align-items:center;
    padding:.4rem .65rem; border:1.5px solid var(--border-md);
    border-radius:var(--radius-md); background:var(--bg-card);
    cursor:pointer; min-width:58px; gap:.1rem;
    transition:all var(--dur-fast);
}
.pd-qty-btn.active { border-color:var(--primary); background:var(--primary-glow-sm); }
.pd-qty-num { font-size:.95rem; font-weight:800; color:var(--primary); }
.pd-qty-price { font-size:.68rem; font-weight:600; color:var(--text-muted); }
.pd-qty-save { font-size:.6rem; color:var(--primary); font-weight:700; }
.pd-sub-price-display {
    display:flex; justify-content:space-between; align-items:center;
    padding:.5rem 0 .1rem; border-top:1px dashed var(--border-md); margin-top:.4rem;
}
.pd-sub-unit-price { font-size:.9rem; font-weight:700; color:var(--primary); }
.pd-sub-total { font-size:.75rem; color:var(--text-muted); font-weight:600; }

/* ── PRODUCT DETAIL — Customize CTA ──────────────────────── */
.pd-customize-cta {
    display:flex; align-items:center; gap:.65rem;
    width:100%; margin:.75rem 0 1rem;
    padding:.75rem 1rem;
    background:var(--primary-glow-sm);
    border:1.5px dashed var(--border-md);
    border-radius:var(--radius-lg);
    color:var(--text); font-weight:700; font-size:.82rem;
    cursor:pointer; text-align:left;
    transition:all var(--dur-med) var(--ease);
}
.pd-customize-cta:hover { background:var(--primary-glow); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pd-cu-icon { width:38px; height:38px; background:var(--primary); color:var(--text-on-primary); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.pd-cu-body { flex:1; }
.pd-cu-title { font-size:.85rem; line-height:1.2; color:var(--text); }
.pd-cu-sub { font-size:.7rem; font-weight:500; color:var(--text-muted); margin-top:.15rem; }
.pd-cu-arrow { color:var(--primary); font-size:1rem; }

/* ── PRODUCT DETAIL — B2B Wrap ────────────────────────────── */
.pd-b2b-wrap { margin:.75rem 0; }
.pd-b2b-toggle {
    display:flex; align-items:center; gap:.65rem;
    width:100%; padding:.75rem 1rem;
    background:var(--bg-card); border:1.5px solid var(--border);
    border-radius:var(--radius-lg); cursor:pointer;
    transition:all var(--dur-fast); text-align:left;
}
.pd-b2b-toggle:hover { border-color:var(--border-md); }
.pd-b2b-icon { width:36px; height:36px; background:var(--bg-hover); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1rem; flex-shrink:0; }
.pd-b2b-body { flex:1; }
.pd-b2b-title-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.15rem; }
.pd-b2b-title { font-size:.85rem; font-weight:700; color:var(--text); }
.pd-b2b-badge { font-size:.6rem; font-weight:700; color:var(--primary); background:var(--primary-glow-sm); border:1px solid var(--border-md); padding:.1rem .4rem; border-radius:var(--radius-full); }
.pd-b2b-sub { font-size:.72rem; color:var(--text-muted); font-weight:500; }
.pd-b2b-chevron { color:var(--text-muted); font-size:.8rem; transition:transform var(--dur-fast); }
.pd-b2b-form-wrap { overflow:hidden; }
.pd-b2b-form { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; margin-top:.5rem; }
.pd-b2b-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-bottom:.65rem; }
@media(max-width:575px){ .pd-b2b-form .form-row { grid-template-columns:1fr; } }
.pd-b2b-form input,.pd-b2b-form textarea {
    width:100%; padding:.55rem .85rem; border-radius:var(--radius-md);
    background:var(--bg-input); border:1px solid var(--input-border);
    color:var(--text); font-size:.83rem;
}
.pd-b2b-form input:focus,.pd-b2b-form textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-glow-sm); }
.pd-b2b-submit {
    width:100%; padding:.7rem; border-radius:var(--radius-full); margin-top:.5rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.82rem; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; border:none; cursor:pointer;
    box-shadow:0 4px 16px var(--primary-glow);
}

/* ── PRODUCT DETAIL — Review Form ─────────────────────────── */
.pd-field-error { font-size:.7rem; color:var(--danger); display:block; margin-top:.2rem; }

/* ── CART ─────────────────────────────────────────────────── */
.cart-page { padding:2.5rem 0 4rem; }
.cart-table { width:100%; }
.cart-item-row {
    display:grid; grid-template-columns:80px 1fr auto;
    gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--border);
    align-items:start;
}
@media(min-width:768px){ .cart-item-row{ grid-template-columns:100px 1fr auto auto auto; align-items:center; } }
.cart-delivery-bar {
    display:flex; align-items:center; gap:.65rem;
    background:var(--primary-glow-sm); border:1px solid var(--border-md);
    border-radius:var(--radius-lg); padding:.65rem 1rem;
    font-size:.82rem; color:var(--text-muted); margin-bottom:1.25rem;
}
.cart-delivery-bar i { color:var(--primary); font-size:1rem; }
.cart-page-heading { display:flex; align-items:baseline; gap:.75rem; margin-bottom:1.25rem; }
.cart-page-heading h1 { font-size:1.4rem; font-weight:800; margin:0; }
.cart-item-count-label { font-size:.82rem; color:var(--text-muted); font-weight:500; }
.cart-continue-shopping a { font-size:.82rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:.35rem; transition:color var(--dur-fast); }
.cart-continue-shopping a:hover { color:var(--primary); }
.meta-pill { display:inline-flex; padding:.2rem .55rem; background:var(--primary-glow-sm); border:1px solid var(--border-md); border-radius:var(--radius-sm); font-size:.7rem; font-weight:600; color:var(--primary); margin-right:.3rem; }
.cart-item-wishlist-link { margin-top:.4rem; }
.cart-item-wishlist-link a { font-size:.75rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:.3rem; transition:color var(--dur-fast); }
.cart-item-wishlist-link a:hover { color:var(--danger); }
.coupon-applied-row { display:flex; align-items:center; justify-content:space-between; padding:.75rem; background:var(--primary-glow-sm); border:1px solid var(--border-md); border-radius:var(--radius-md); }
.empty-cart { text-align:center; padding:5rem 1rem; }
.empty-cart i { font-size:4rem; color:var(--text-faint); display:block; margin-bottom:1.25rem; }
.empty-cart h3 { font-size:1.4rem; font-weight:700; margin-bottom:.5rem; }
.empty-cart p { color:var(--text-muted); margin-bottom:1.5rem; }
.cart-item-img { width:80px; height:100px; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--border); }
.cart-item-name { font-size:.9rem; font-weight:600; color:var(--text); margin-bottom:.3rem; display:block; }
.cart-item-name:hover { color:var(--primary); }
.cart-item-meta { font-size:.78rem; color:var(--text-muted); margin-top:.35rem; }
.cart-qty-ctrl { display:flex; align-items:center; border:1px solid var(--border-md); border-radius:var(--radius-md); overflow:hidden; }
.cart-qty-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); background:var(--bg-hover); font-size:1rem; transition:color var(--dur-fast); cursor:pointer; }
.cart-qty-btn:hover { color:var(--primary); }
.cart-qty-val { width:36px; text-align:center; font-size:.85rem; font-weight:700; color:var(--text); }
.cart-item-price { font-size:.95rem; font-weight:800; color:var(--text); }
.cart-remove-btn { color:var(--text-faint); font-size:.9rem; transition:color var(--dur-fast); padding:.25rem; cursor:pointer; }
.cart-remove-btn:hover { color:var(--danger); }
.cart-summary-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.5rem; position:sticky; top:100px; }
.cart-summary-title { font-size:1rem; font-weight:700; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
.cart-summary-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; font-size:.875rem; }
.cart-summary-row.total { font-size:1.05rem; font-weight:800; color:var(--text); padding-top:.75rem; border-top:1px solid var(--border); margin-top:.5rem; }
.cart-checkout-btn {
    width:100%; padding:.9rem; margin-top:1.25rem; border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.9rem; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase;
    box-shadow:0 4px 20px var(--primary-glow); cursor:pointer;
    transition:all var(--dur-med) var(--ease); border:none;
}
.cart-checkout-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--primary-glow); }
.coupon-input-wrap { cursor:pointer; display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-muted); margin-bottom:.75rem; }
.coupon-input-wrap:hover { color:var(--primary); }
#coupon-form { display:none; flex-direction:row; gap:.5rem; }
#coupon-input,#coupon-code-input { flex:1; padding:.5rem .85rem; border-radius:var(--radius-md); background:var(--bg-input); border:1px solid var(--input-border); color:var(--text); font-size:.83rem; }
#coupon-input:focus,#coupon-code-input:focus { border-color:var(--primary); outline:none; }
.coupon-apply-btn { padding:.5rem 1rem; border-radius:var(--radius-md); background:var(--primary); color:var(--text-on-primary); font-size:.8rem; font-weight:700; cursor:pointer; transition:background var(--dur-fast); }
.coupon-apply-btn:hover { background:var(--primary-dark); }

/* ── CHECKOUT ─────────────────────────────────────────────── */
.checkout-page { padding:2.5rem 0 4rem; }
.checkout-section-title { font-size:1rem; font-weight:700; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.checkout-section-title i { color:var(--primary); }
.address-card {
    border:1.5px solid var(--border); border-radius:var(--radius-lg);
    padding:1rem 1.25rem; cursor:pointer;
    transition:all var(--dur-fast); margin-bottom:.75rem;
    position:relative;
}
.address-card:hover { border-color:var(--border-md); }
.address-card.selected { border-color:var(--primary); background:var(--bg-hover); box-shadow:0 0 0 3px var(--primary-glow-sm); }
.address-card-name { font-size:.9rem; font-weight:700; margin-bottom:.3rem; }
.address-card-text { font-size:.82rem; color:var(--text-muted); line-height:1.5; }
.address-default-badge { position:absolute; top:.75rem; right:.75rem; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); background:var(--primary-glow-sm); padding:.15rem .5rem; border-radius:var(--radius-full); border:1px solid var(--border-md); }

.payment-option { display:flex; align-items:center; gap:.85rem; padding:1rem 1.25rem; border:1.5px solid var(--border); border-radius:var(--radius-lg); cursor:pointer; transition:all var(--dur-fast); margin-bottom:.65rem; }
.payment-option:hover { border-color:var(--border-md); }
.payment-option.selected { border-color:var(--primary); background:var(--bg-hover); }
.payment-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); }
.payment-option.selected .payment-radio { border-color:var(--primary); background:var(--primary); }
.payment-option.selected .payment-radio::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--text-on-primary); }
.payment-label { font-size:.88rem; font-weight:600; color:var(--text); }
.payment-desc { font-size:.76rem; color:var(--text-muted); margin-top:.15rem; }
.place-order-btn {
    width:100%; padding:1rem; border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.95rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 4px 20px var(--primary-glow); cursor:pointer;
    border:none; transition:all var(--dur-med) var(--ease);
}
.place-order-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--primary-glow); }

/* ── CHECKOUT EXTRAS ──────────────────────────────────────── */
.checkout-page-title { font-size:1.5rem; font-weight:800; margin-bottom:1.5rem; }
.checkout-sub-alert {
    display:flex; align-items:flex-start; gap:.75rem;
    background:var(--primary-glow-sm); border:1px solid var(--border-md);
    border-radius:var(--radius-lg); padding:.875rem 1rem;
    font-size:.83rem; margin-bottom:1.5rem; color:var(--text);
}
.checkout-sub-alert i { color:var(--primary); font-size:1.25rem; flex-shrink:0; margin-top:.1rem; }
.checkout-block { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.25rem; }
.checkout-add-addr-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    margin-top:.75rem; font-size:.8rem; font-weight:700;
    color:var(--primary); border:1px dashed var(--border-md);
    background:var(--primary-glow-sm); border-radius:var(--radius-md);
    padding:.4rem .85rem; cursor:pointer; transition:all var(--dur-fast);
}
.checkout-add-addr-btn:hover { background:var(--primary-glow); }
.new-address-wrap { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.checkout-location-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.78rem; font-weight:700; color:var(--text);
    border:1px solid var(--border-md); background:var(--bg-card);
    border-radius:var(--radius-md); padding:.4rem .85rem; cursor:pointer;
    transition:all var(--dur-fast);
}
.checkout-location-btn:hover { border-color:var(--primary); color:var(--primary); }
.address-map { width:100%; height:260px; border-radius:var(--radius-lg); border:1px solid var(--border); margin-bottom:1rem; overflow:hidden; }
.checkout-item-row { display:flex; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--border); }
.checkout-item-row:last-child { border-bottom:none; }
.checkout-item-img { width:48px; height:60px; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--border); flex-shrink:0; }
.checkout-item-info { flex:1; min-width:0; }
.checkout-item-name { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkout-item-meta { font-size:.72rem; color:var(--text-muted); margin-top:.15rem; }
.checkout-item-specs { margin-top:.25rem; display:flex; flex-wrap:wrap; gap:.25rem; }
.checkout-item-price { font-size:.85rem; font-weight:800; color:var(--text); margin-top:.3rem; }

/* Address form */
.addr-form { display:grid; gap:.85rem; }
.addr-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.addr-form-3col { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:575px){ .addr-form-2col, .addr-form-3col { grid-template-columns:1fr; } }
.form-field label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.4rem; }
.form-field input,.form-field select,.form-field textarea {
    width:100%; padding:.65rem 1rem; border-radius:var(--radius-md);
    background:var(--bg-input); border:1px solid var(--input-border);
    color:var(--text); font-size:.875rem; transition:border-color var(--dur-fast);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-glow-sm); }
.form-field select option { background:var(--bg-card-solid); color:var(--text); }
.pincode-status { font-size:.75rem; margin-top:.3rem; font-weight:600; }

/* ── ACCOUNT PAGES ────────────────────────────────────────── */
.account-layout { display:grid; grid-template-columns:1fr; gap:1.5rem; padding:2rem 0 4rem; }
@media(min-width:992px){ .account-layout{ grid-template-columns:240px 1fr; } }
.account-sidebar {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:1.25rem;
    position:sticky; top:90px; align-self:start;
}
.account-avatar { width:64px; height:64px; border-radius:50%; border:2px solid var(--border-md); object-fit:cover; }
.account-nav-link {
    display:flex; align-items:center; gap:.7rem;
    padding:.7rem .85rem; border-radius:var(--radius-md);
    font-size:.85rem; font-weight:600; color:var(--text-muted);
    transition:all var(--dur-fast); margin-bottom:.25rem;
}
.account-nav-link i { font-size:1rem; width:18px; text-align:center; }
.account-nav-link:hover { color:var(--primary); background:var(--bg-hover); }
.account-nav-link.active { color:var(--primary); background:var(--primary-glow-sm); border:1px solid var(--border-md); }
.account-content { min-width:0; }
.account-section-title { font-size:1.1rem; font-weight:700; margin-bottom:1.5rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; }
.account-section-title i { color:var(--primary); }
.account-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
@media(min-width:576px){ .account-stat-grid{ grid-template-columns:repeat(3,1fr); } }
.account-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; text-align:center; transition:all var(--dur-med); }
.account-stat-card:hover { border-color:var(--border-md); box-shadow:var(--shadow-sm); }
.account-stat-num { font-size:1.75rem; font-weight:900; color:var(--primary); display:block; }
.account-stat-label { font-size:.75rem; color:var(--text-muted); font-weight:500; margin-top:.25rem; text-transform:uppercase; letter-spacing:.06em; }

/* Order list */
.order-row { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:.75rem; transition:border-color var(--dur-fast); }
.order-row:hover { border-color:var(--border-md); }
.order-number { font-size:.85rem; font-weight:700; color:var(--text); }
.order-date { font-size:.76rem; color:var(--text-muted); margin-top:.2rem; }
.order-status { display:inline-flex; padding:.25rem .7rem; border-radius:var(--radius-full); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.order-status.pending  { background:rgba(255,183,3,.15); color:var(--warning); }
.order-status.processing { background:rgba(0,212,255,.12); color:var(--accent); }
.order-status.shipped  { background:var(--primary-glow-sm); color:var(--primary); }
.order-status.delivered{ background:var(--primary-glow); color:var(--primary); }
.order-status.cancelled{ background:rgba(255,77,109,.12); color:var(--danger); }

/* Auth pages */
.auth-split { min-height:100vh; display:grid; grid-template-columns:1fr; }
@media(min-width:768px){ .auth-split{ grid-template-columns:1fr 1fr; } }
.auth-left {
    display:none; background:linear-gradient(145deg,#0C0A09,#1A120C,#140E09);
    align-items:center; justify-content:center; flex-direction:column;
    padding:3rem; position:relative; overflow:hidden;
}
@media(min-width:768px){ .auth-left{ display:flex; } }
.auth-left::before {
    content:''; position:absolute; width:400px; height:400px;
    background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%);
    top:50%; left:50%; transform:translate(-50%,-50%);
    animation:pulse-glow 4s ease infinite;
}
.auth-left-title { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:900; color:#fff; text-align:center; position:relative; z-index:1; margin-bottom:.75rem; }
.auth-left-sub { color:#7a9987; text-align:center; font-size:.9rem; position:relative; z-index:1; max-width:280px; }
.auth-right { display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem; background:var(--bg); }
.auth-card { width:100%; max-width:420px; }
.auth-title { font-size:1.5rem; font-weight:800; margin-bottom:.4rem; }
.auth-subtitle { font-size:.875rem; color:var(--text-muted); margin-bottom:2rem; }
.auth-input-group { margin-bottom:1.1rem; }
.auth-input-group label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.4rem; }
.auth-input {
    width:100%; padding:.75rem 1rem; border-radius:var(--radius-md);
    background:var(--bg-input); border:1.5px solid var(--input-border);
    color:var(--text); font-size:.9rem;
    transition:border-color var(--dur-fast);
}
.auth-input:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-glow-sm); }
.auth-submit-btn {
    width:100%; padding:.85rem; border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.9rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 4px 20px var(--primary-glow);
    cursor:pointer; border:none; transition:all var(--dur-med) var(--ease);
    margin-top:.5rem;
}
.auth-submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--primary-glow); }
.auth-link { font-size:.83rem; color:var(--text-muted); text-align:center; margin-top:1.25rem; }
.auth-link a { color:var(--primary); font-weight:600; }
.auth-link a:hover { text-decoration:underline; }
.auth-divider { display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-divider span { font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

/* ── TOAST / MODALS / OVERLAYS ────────────────────────────── */
.toast-container { position:fixed; top:1rem; right:1rem; z-index:var(--z-toast); display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.nkp-toast {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1.1rem; border-radius:var(--radius-lg);
    background:var(--bg-card-solid); border:1px solid var(--border-md);
    box-shadow:var(--shadow-lg); max-width:340px;
    font-size:.83rem; font-weight:500; color:var(--text);
    pointer-events:auto; position:relative; overflow:hidden;
    animation:toastIn .35s var(--ease-spring) both;
}
.nkp-toast i { font-size:1.1rem; flex-shrink:0; }
.nkp-toast.success i { color:var(--primary); }
.nkp-toast.error i { color:var(--danger); }
.nkp-toast.info i { color:var(--accent); }
.toast-close { margin-left:auto; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:.1rem .3rem; transition:color var(--dur-fast); flex-shrink:0; }
.toast-close:hover { color:var(--text); }

/* Loading overlay */
.loading-overlay {
    position:fixed; inset:0; background:rgba(6,10,9,.75);
    backdrop-filter:blur(4px); z-index:calc(var(--z-modal) + 10);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity var(--dur-fast);
}
.loading-overlay.active { opacity:1; pointer-events:auto; }
.loading-spinner {
    width:44px; height:44px; border-radius:50%;
    border:3px solid var(--border-md);
    border-top-color:var(--primary);
    animation:spin 1s linear infinite;
    box-shadow:0 0 16px var(--primary-glow);
}

/* Confirm modal */
.nkp-confirm-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.72);
    backdrop-filter:blur(4px); z-index:var(--z-modal);
    display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; transition:opacity var(--dur-fast);
}
.nkp-confirm-overlay.is-open { opacity:1; }
.nkp-confirm-modal {
    background:var(--bg-card-solid); border:1px solid var(--border-md);
    border-radius:var(--radius-xl); padding:2rem 1.75rem;
    max-width:380px; width:100%; text-align:center;
    box-shadow:var(--shadow-xl); animation:scaleIn .2s var(--ease-spring);
}
.nkp-confirm-icon { font-size:2.25rem; margin-bottom:1rem; }
.nkp-confirm-danger i { color:var(--danger); }
.nkp-confirm-primary i { color:var(--primary); }
.nkp-confirm-title { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.nkp-confirm-msg { font-size:.875rem; color:var(--text-muted); margin-bottom:1.5rem; }
.nkp-confirm-actions { display:flex; gap:.75rem; }
.nkp-confirm-btn {
    flex:1; padding:.7rem; border-radius:var(--radius-full);
    font-size:.85rem; font-weight:700; letter-spacing:.04em;
    cursor:pointer; transition:all var(--dur-fast); border:none;
}
.nkp-confirm-cancel { background:var(--bg-hover); border:1px solid var(--border-md); color:var(--text-muted); }
.nkp-confirm-cancel:hover { color:var(--text); }
.nkp-confirm-danger-btn { background:var(--danger); color:#fff; }
.nkp-confirm-danger-btn:hover { opacity:.85; }
.nkp-confirm-primary-btn { background:var(--primary); color:var(--text-on-primary); }
.nkp-confirm-primary-btn:hover { background:var(--primary-dark); }

/* Cart-added popup */
.cart-added-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.72);
    backdrop-filter:blur(4px); z-index:var(--z-modal);
    display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; pointer-events:none; transition:opacity var(--dur-fast);
}
.cart-added-overlay.is-open { opacity:1; pointer-events:auto; }
.cart-added-modal {
    background:var(--bg-card-solid); border:1px solid var(--border-md);
    border-radius:var(--radius-xl); padding:2rem 1.75rem;
    max-width:360px; width:100%; text-align:center;
    box-shadow:var(--shadow-xl); animation:scaleIn .25s var(--ease-spring);
    position:relative;
}
.cart-added-close { position:absolute; top:.85rem; right:.85rem; color:var(--text-muted); font-size:1.2rem; cursor:pointer; line-height:1; }
.cart-added-close:hover { color:var(--text); }
.cart-added-icon { width:56px; height:56px; border-radius:50%; background:var(--primary-glow); color:var(--primary); font-size:1.5rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.cart-added-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.35rem; }
.cart-added-meta { font-size:.82rem; color:var(--text-muted); margin-bottom:1.25rem; }
.cart-added-actions { display:flex; gap:.65rem; margin-bottom:.85rem; }
.cart-added-btn {
    flex:1; padding:.65rem; border-radius:var(--radius-full);
    font-size:.8rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; transition:all var(--dur-fast); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:.3rem;
}
.cart-added-btn-outline { border:1.5px solid var(--border-strong); color:var(--text); background:transparent; }
.cart-added-btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.cart-added-btn-primary { background:var(--primary); color:var(--text-on-primary); border:none; }
.cart-added-btn-primary:hover { background:var(--primary-dark); }
.cart-added-continue { background:none; border:none; color:var(--text-muted); font-size:.8rem; cursor:pointer; text-decoration:underline; }
.cart-added-continue:hover { color:var(--text); }

/* Login modal */
.login-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px); z-index:var(--z-modal);
    display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; pointer-events:none; transition:opacity var(--dur-fast);
}
.login-modal-overlay.active { opacity:1; pointer-events:auto; }
.login-modal {
    background:var(--bg-card-solid); border:1px solid var(--border-md);
    border-radius:var(--radius-xl); overflow:hidden;
    width:100%; max-width:800px; max-height:90vh;
    box-shadow:var(--shadow-xl); display:flex;
    animation:scaleIn .25s var(--ease-spring);
}
.login-modal-left {
    display:none; flex:1; padding:2.5rem;
    background:linear-gradient(145deg,#0C0A09,#1A120C);
    align-items:center; justify-content:center; flex-direction:column;
    text-align:center; position:relative; overflow:hidden;
}
@media(min-width:600px){ .login-modal-left{ display:flex; } }
.login-modal-left::before {
    content:''; position:absolute; width:300px; height:300px;
    background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%);
    top:50%; left:50%; transform:translate(-50%,-50%);
}
.login-modal-right { flex:1; padding:2rem 1.75rem; overflow-y:auto; }
.login-modal-title { font-size:1.35rem; font-weight:800; margin-bottom:.3rem; }
.login-modal-sub { font-size:.82rem; color:var(--text-muted); margin-bottom:1.5rem; }

/* WhatsApp Float */
.wa-float {
    position:fixed; right:20px; bottom:24px;
    width:48px; height:48px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(37,211,102,.45);
    text-decoration:none; z-index:var(--z-toast);
    transition:all var(--dur-fast);
}
.wa-float i { font-size:1.4rem; }
.wa-float:hover { background:#1ebe5b; transform:scale(1.08); box-shadow:0 6px 22px rgba(37,211,102,.55); color:#fff; }
@media(max-width:767px){ .wa-float{ right:14px; bottom:72px; width:44px; height:44px; } }

/* ===== BLOG PAGES ===== */
.blog-hero {
    position:relative; background:var(--bg-surface); padding:4rem 0 3rem;
    margin-bottom:0; text-align:center; overflow:hidden; background-size:cover; background-position:center;
}
.blog-hero[style*="background-image"] { color:#fff; }
.blog-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(6,10,9,.72),rgba(13,20,16,.52)); z-index:0; }
.blog-hero .container { position:relative; z-index:1; }
.blog-hero h1 { font-size:clamp(2rem,4vw,3.5rem); font-weight:900; margin-bottom:.75rem; }
.blog-hero p { font-size:1rem; opacity:.85; margin-bottom:1.5rem; }
.blog-search-form { display:flex; max-width:480px; margin:0 auto; background:var(--bg-surface); border:1px solid var(--border-md); border-radius:var(--radius-full); overflow:hidden; }
.blog-search-form input { flex:1; border:none; background:transparent; padding:.65rem 1.25rem; font-size:.9rem; color:var(--text); outline:none; }
.blog-search-form button { border:none; background:var(--primary); color:#fff; padding:0 1.25rem; cursor:pointer; font-size:.95rem; transition:background var(--dur-fast); }
.blog-search-form button:hover { background:var(--primary-dark); }
.blog-section { padding:2.5rem 0 4rem; }
.blog-category-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.blog-category-pills a { padding:.4rem 1rem; border-radius:var(--radius-full); border:1.5px solid var(--border); font-size:.82rem; font-weight:600; color:var(--text-muted); text-decoration:none; transition:all var(--dur-fast); }
.blog-category-pills a:hover,.blog-category-pills a.active { border-color:var(--primary); background:var(--primary-glow-sm); color:var(--primary); }
.blog-empty { text-align:center; padding:4rem 1rem; color:var(--text-muted); }
.blog-empty i { font-size:3rem; color:var(--border-md); display:block; margin-bottom:1rem; }
.blog-empty p { font-size:.9rem; }

/* Blog card */
.blog-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med); display:flex; flex-direction:column; height:100%; }
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--border-md); }
.blog-card-img-wrap { display:block; aspect-ratio:4/3; overflow:hidden; position:relative; }
.blog-card-img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); display:block; }
.blog-card:hover .blog-card-img { transform:scale(1.06); }
.blog-card-img-placeholder { width:100%; height:100%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:2rem; }
.blog-card-category { position:absolute; top:.6rem; left:.6rem; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--primary); color:#fff; padding:.2rem .65rem; border-radius:var(--radius-full); }
.blog-card-body { padding:.85rem; flex:1; display:flex; flex-direction:column; }
.blog-card-meta { font-size:.7rem; color:var(--text-muted); margin-bottom:.4rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.blog-card-title { font-size:.875rem; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:.5rem; transition:color var(--dur-fast); }
.blog-card:hover .blog-card-title { color:var(--primary); }
.blog-card-title a { color:inherit; text-decoration:none; }
.blog-card-excerpt { font-size:.78rem; color:var(--text-muted); line-height:1.5; flex:1; margin-bottom:.5rem; }
.blog-card-readmore { font-size:.78rem; font-weight:700; color:var(--primary); text-decoration:none; margin-top:auto; }
.blog-card-readmore:hover { text-decoration:underline; }

/* Blog detail */
.blog-detail-header { background:var(--bg-surface); padding:2.5rem 0 2rem; border-bottom:1px solid var(--border); }
.blog-detail-category { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; background:var(--primary-glow-sm); color:var(--primary); padding:.3rem .85rem; border-radius:var(--radius-full); margin-bottom:1rem; text-decoration:none; }
.blog-detail-category:hover { background:var(--primary); color:#fff; }
.blog-detail-title { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:900; margin-bottom:1rem; line-height:1.2; }
.blog-detail-meta { display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.82rem; color:var(--text-muted); }
.blog-detail-meta span { display:flex; align-items:center; gap:.35rem; }
.blog-detail-section { padding:2.5rem 0 4rem; }
.blog-detail-featured { width:100%; border-radius:var(--radius-xl); margin-bottom:2rem; }
.blog-excerpt { font-size:1rem; color:var(--text); line-height:1.8; font-weight:500; border-left:4px solid var(--primary); padding:1rem 1.25rem; background:var(--primary-glow-sm); border-radius:0 var(--radius-md) var(--radius-md) 0; margin-bottom:2rem; }
.blog-article-content { font-size:.95rem; line-height:1.85; color:var(--text-muted); }
.blog-article-content h1,.blog-article-content h2,.blog-article-content h3 { color:var(--text); margin:1.5rem 0 .75rem; font-weight:700; }
.blog-article-content p { margin-bottom:1.1rem; }
.blog-article-content ul,.blog-article-content ol { padding-left:1.5rem; margin-bottom:1.1rem; }
.blog-article-content li { margin-bottom:.4rem; }
.blog-article-content img { border-radius:var(--radius-md); margin:1.5rem 0; max-width:100%; }
.blog-article-content a { color:var(--primary); text-decoration:underline; }
.blog-article-content blockquote { border-left:3px solid var(--primary); padding:.75rem 1.25rem; background:var(--bg); border-radius:0 var(--radius-md) var(--radius-md) 0; margin:1.25rem 0; font-style:italic; }
.blog-tags { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.5rem; }
.blog-tags-label { font-size:.82rem; font-weight:700; color:var(--text); }
.blog-tag { display:inline-block; padding:.25rem .75rem; border-radius:var(--radius-full); background:var(--bg); border:1px solid var(--border); font-size:.78rem; font-weight:600; color:var(--text-muted); text-decoration:none; transition:all var(--dur-fast); }
.blog-tag:hover { border-color:var(--primary); background:var(--primary-glow-sm); color:var(--primary); }
.blog-divider { border:none; border-top:1px solid var(--border); margin:2rem 0; }
.blog-share { margin-top:1.5rem; }
.blog-share-title { font-size:.82rem; font-weight:700; color:var(--text-muted); margin-bottom:.75rem; }
.share-buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
.share-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; text-decoration:none; transition:all var(--dur-fast); }
.share-btn-whatsapp { background:#25d366; color:#fff; }
.share-btn-facebook { background:#1877f2; color:#fff; }
.share-btn-twitter  { background:#000; color:#fff; }
.share-btn-linkedin { background:#0a66c2; color:#fff; }
.share-btn:hover { opacity:.88; transform:translateY(-1px); }
.related-section { padding:2.5rem 0 3rem; border-top:1px solid var(--border); }
.related-section h2 { font-size:1.25rem; font-weight:800; margin-bottom:1.5rem; }

/* Blog legacy aliases */
.blog-page { padding:2.5rem 0 4rem; }
.blog-hero-img { width:100%; max-height:400px; object-fit:cover; border-radius:var(--radius-xl); }
.blog-post-body { font-size:.95rem; line-height:1.85; color:var(--text-muted); }
.blog-post-body h1,.blog-post-body h2,.blog-post-body h3 { color:var(--text); margin:1.5rem 0 .75rem; font-weight:700; }
.blog-post-body p { margin-bottom:1.1rem; }
.blog-post-body ul,.blog-post-body ol { padding-left:1.5rem; margin-bottom:1.1rem; }
.blog-post-body li { margin-bottom:.4rem; }
.blog-post-body img { border-radius:var(--radius-md); margin:1.5rem 0; }
.blog-post-body a { color:var(--primary); text-decoration:underline; }
.blog-post-body blockquote { border-left:3px solid var(--primary); padding:.75rem 1.25rem; background:var(--bg); border-radius:0 var(--radius-md) var(--radius-md) 0; margin:1.25rem 0; font-style:italic; }

/* ===== FAQ PAGE ===== */
.faq-page { padding:2.5rem 0 4rem; }
.faq-hero { background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--accent,var(--primary)) 100%); color:#fff; padding:70px 0 120px; position:relative; overflow:hidden; }
.faq-hero::before,.faq-hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,0.06); }
.faq-hero::before { width:320px; height:320px; top:-120px; right:-80px; }
.faq-hero::after  { width:220px; height:220px; bottom:-100px; left:-60px; }
.faq-hero .container { position:relative; z-index:2; }
.faq-hero-breadcrumb { font-size:13px; opacity:.85; display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.faq-hero-breadcrumb a { color:#fff; text-decoration:none; opacity:.85; }
.faq-hero-breadcrumb a:hover { opacity:1; }
.faq-hero h1 { font-size:clamp(2rem,4vw,2.75rem); font-weight:800; margin:0 0 10px; letter-spacing:-.02em; }
.faq-hero p { font-size:1rem; max-width:620px; opacity:.92; margin:0 0 28px; line-height:1.6; }
.faq-wrapper { margin-top:-80px; position:relative; z-index:3; padding-bottom:80px; }
.faq-shell { background:var(--bg-surface); border-radius:18px; box-shadow:var(--shadow-md); padding:36px; }
@media(max-width:767px) { .faq-shell { padding:22px 18px; border-radius:14px; } }
.faq-categories { position:sticky; top:90px; display:flex; flex-direction:column; gap:6px; }
.faq-cat-link { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600; color:var(--text-muted); text-decoration:none; transition:all .2s ease; border:1px solid transparent; }
.faq-cat-link i { color:var(--primary); font-size:16px; }
.faq-cat-link:hover,.faq-cat-link.is-active { background:var(--primary-glow-sm); color:var(--primary-dark); border-color:var(--border); }
.faq-help-card { margin-top:24px; background:linear-gradient(135deg,var(--primary-glow-sm),var(--bg-surface)); border-radius:14px; padding:22px; text-align:center; }
.faq-help-card h6 { font-size:14px; font-weight:800; color:var(--primary-dark); margin:0 0 6px; }
.faq-help-card p { font-size:12px; color:var(--text-muted); margin:0 0 14px; line-height:1.55; }
.faq-help-card .btn { background:var(--primary-dark); color:#fff; border:0; padding:9px 18px; font-size:12px; font-weight:700; border-radius:50px; letter-spacing:.3px; text-transform:uppercase; }
.faq-help-card .btn:hover { background:var(--primary); color:#fff; }
.faq-group { margin-bottom:38px; }
.faq-group:last-child { margin-bottom:0; }
.faq-group-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.faq-group-icon { width:42px; height:42px; flex-shrink:0; border-radius:12px; background:var(--primary-glow-sm); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-size:20px; }
.faq-group-title { font-size:1.15rem; font-weight:800; color:var(--text); margin:0; letter-spacing:-.01em; }
.faq-group-count { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }
.faq-item { border:1px solid var(--border); border-radius:12px; margin-bottom:12px; background:var(--bg-surface); transition:all .25s ease; overflow:hidden; }
.faq-item:hover { border-color:var(--primary); }
.faq-item.is-open { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow-sm); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:transparent; border:0; text-align:left; cursor:pointer; font-size:15px; font-weight:600; color:var(--text); line-height:1.5; }
.faq-question:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; border-radius:12px; }
.faq-toggle { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--primary-glow-sm); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform .3s ease,background .25s ease,color .25s ease; }
.faq-item.is-open .faq-toggle { background:var(--primary); color:#fff; transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-answer-inner { padding:0 22px 20px; font-size:14px; color:var(--text-muted); line-height:1.7; }
.faq-answer-inner a { color:var(--primary); font-weight:600; text-decoration:underline; }
.faq-cta { margin-top:50px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; border-radius:18px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.faq-cta h3 { font-size:1.5rem; font-weight:800; margin:0 0 6px; }
.faq-cta p { margin:0; opacity:.9; font-size:14px; }
.faq-cta .btn { background:var(--bg-surface); color:var(--primary-dark); border:0; padding:13px 28px; border-radius:50px; font-weight:700; font-size:14px; white-space:nowrap; }
.faq-cta .btn:hover { background:var(--primary-glow-sm); color:var(--primary-dark); }
@media(max-width:991px) {
    .faq-categories { position:static; flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
    .faq-categories .faq-help-card { display:none; }
    .faq-cat-link { padding:8px 14px; font-size:13px; }
}

/* ── About Page ────────────────────────────────────────────── */
.about-page{overflow:hidden}
.about-crumb{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-muted);margin-bottom:1.2rem}
.about-crumb a{color:var(--primary);text-decoration:none}
.about-crumb .sep{color:var(--text-faint)}
.about-hero{padding:4rem 0 3.5rem;background:var(--bg-surface)}
.about-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-hero-grid>div:first-child{padding-right:1rem}
.about-hero h1{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;line-height:1.2;margin-bottom:1rem;color:var(--text)}
.about-hero h1 .accent{color:var(--primary)}
.about-hero .lead{font-size:1rem;color:var(--text-muted);line-height:1.7;margin-bottom:2rem}
.about-hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.about-hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.about-hero-blob{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(201,149,108,.18) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.about-hero-blob.alt{width:200px;height:200px;top:15%;left:60%;background:radial-gradient(circle,rgba(201,149,108,.10) 0%,transparent 70%)}
.about-hero-media-frame{position:relative;z-index:1;width:320px;height:380px;border-radius:var(--radius-xl);overflow:hidden;border:2px solid var(--border-md);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.about-hero-media-frame img{width:100%;height:100%;object-fit:cover}
.about-hero-badge{position:absolute;bottom:1.5rem;left:-1rem;z-index:2;display:flex;align-items:center;gap:.65rem;background:var(--bg-card);border:1px solid var(--border-md);border-radius:var(--radius-lg);padding:.7rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.about-hero-badge-icon{font-size:1.4rem;color:var(--primary)}
.about-hero-badge-text strong{display:block;font-size:.82rem;font-weight:700;color:var(--text)}
.about-hero-badge-text span{font-size:.72rem;color:var(--text-muted)}
.about-stats{padding:2rem 0;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.about-stat{text-align:center;padding:1rem}
.about-stat-num{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;color:var(--primary);line-height:1.1}
.about-stat-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.3rem}
.about-pillars{padding:4rem 0}
.about-section-head{text-align:center;margin-bottom:2.5rem}
.about-section-head h2{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:800;color:var(--text);margin-bottom:.6rem}
.about-section-head p{font-size:.95rem;color:var(--text-muted);max-width:560px;margin:0 auto;line-height:1.6}
.about-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.about-pillar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem 1.5rem;text-align:center;transition:border-color var(--dur-fast),transform .2s}
.about-pillar:hover{border-color:var(--primary);transform:translateY(-4px)}
.about-pillar-icon{width:56px;height:56px;border-radius:50%;background:rgba(201,149,108,.1);border:1px solid var(--border-md);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-size:1.4rem;color:var(--primary)}
.about-pillar h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.6rem}
.about-pillar p{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin:0}
.about-story{padding:4rem 0;background:var(--bg-surface)}
.about-story-grid{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start}
.about-story-sticky{position:sticky;top:100px}
.about-story-sticky h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:var(--text);margin-bottom:.75rem}
.about-story-sticky p{font-size:.9rem;color:var(--text-muted);line-height:1.7}
.about-story-content{font-size:.95rem;color:var(--text);line-height:1.8}
.about-story-content p{margin-bottom:1rem}
.about-why{padding:4rem 0}
.about-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.about-why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.75rem 1.25rem;transition:border-color var(--dur-fast),transform .2s}
.about-why-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.about-why-card>i{display:block;font-size:1.6rem;color:var(--primary);margin-bottom:1rem}
.about-why-card h4{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.about-why-card p{font-size:.82rem;color:var(--text-muted);line-height:1.6;margin:0}
.about-cta{padding:3.5rem 0;background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-surface) 100%);border-top:1px solid var(--border);text-align:center}
.about-cta h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:var(--text);margin-bottom:.6rem}
.about-cta p{font-size:.95rem;color:var(--text-muted);max-width:560px;margin:0 auto 2rem;line-height:1.6}
.about-cta-ctas{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
@media(max-width:991px){
    .about-hero-grid{grid-template-columns:1fr}
    .about-hero-media{min-height:260px}
    .about-hero-media-frame{width:260px;height:300px}
    .about-pillar-grid{grid-template-columns:repeat(2,1fr)}
    .about-why-grid{grid-template-columns:repeat(2,1fr)}
    .about-stats-grid{grid-template-columns:repeat(2,1fr)}
    .about-story-grid{grid-template-columns:1fr}
    .about-story-sticky{position:static}
}
@media(max-width:575px){
    .about-pillar-grid,.about-why-grid{grid-template-columns:1fr}
}
.about-section{padding:3.5rem 0}

/* ── Contact page ─────────────────────────────────────────── */
.contact-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem 2.25rem;
    height: 100%;
}
.contact-form-card label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .45rem;
}
.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: .7rem 1rem;
    color: var(--text);
    font-size: .9rem;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    resize: none;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow-sm);
}
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder { color: var(--text-faint); }

.btn-send-message {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 2rem;
    background: var(--primary);
    color: #0C0A09;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast), transform .15s;
    width: 100%;
    justify-content: center;
}
.btn-send-message:hover { background: var(--primary-dark, #b5824e); transform: translateY(-1px); }

/* Info card – right column */
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}
.contact-info-card h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

/* Each row: icon  +  label/value */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-fast);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item:is(a):hover { color: var(--primary); }
.contact-info-item:is(a):hover i { color: var(--primary); }

.contact-info-item > i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary);
    background: var(--primary-glow-sm, rgba(201,149,108,.08));
    border: 1px solid var(--border-md);
    border-radius: var(--radius-md);
}
.contact-info-item > div strong {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .3rem;
}
.contact-info-item > div p {
    font-size: .875rem;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}

/* Social row inside info card */
.contact-social { padding-top: 1rem; }
.contact-social > strong {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .75rem;
}
.contact-social .footer-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.contact-social .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.contact-social .footer-social a:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow-sm);
}
.contact-submit-btn {
    padding:.8rem 2rem; border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-on-primary); font-size:.875rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 4px 20px var(--primary-glow); cursor:pointer; border:none;
    transition:all var(--dur-med) var(--ease);
}
.contact-submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--primary-glow); }

/* Calculators */
.calc-page { padding:3rem 0 4rem; }
.calc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.75rem; margin-bottom:1.5rem; }
.calc-title { font-size:1rem; font-weight:700; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.calc-title i { color:var(--primary); }
.calc-result { margin-top:1.25rem; padding:1rem; background:var(--primary-glow-sm); border:1px solid var(--border-md); border-radius:var(--radius-md); font-size:.875rem; color:var(--primary); font-weight:600; display:none; }
.calc-result.visible { display:block; animation:fadeUp .3s var(--ease-out); }

/* Responsive helpers */
@media(max-width:767px) {
    .d-none-mobile { display:none !important; }
    .account-layout { padding-top:1rem; }
    .auth-split { grid-template-columns:1fr; }
    .pd-cta .pd-add-btn { min-width:0; }
}
@media(min-width:768px) {
    .d-none-desktop { display:none !important; }
    .d-none { display:none !important; }
    .d-lg-block { display:block !important; }
    .d-lg-flex { display:flex !important; }
    .d-none.d-lg-flex { display:flex !important; }
    .d-none.d-lg-block { display:block !important; }
    .d-none.d-lg-inline-flex { display:inline-flex !important; }
}

/* Bootstrap compat overrides */
.container-fluid { width:100%; padding-right:1.25rem; padding-left:1.25rem; }
.row { display:flex; flex-wrap:wrap; margin-right:-.75rem; margin-left:-.75rem; }
.row > * { padding-right:.75rem; padding-left:.75rem; }
.col-6  { width:50%; }
.col-12 { width:100%; }
@media(min-width:576px){ .col-sm-6{ width:50%; } .col-sm-12{ width:100%; } }
@media(min-width:768px){ .col-md-3{ width:25%; } .col-md-4{ width:33.333%; } .col-md-6{ width:50%; } }
@media(min-width:992px){ .col-lg-2{ width:16.666%; } .col-lg-3{ width:25%; } .col-lg-4{ width:33.333%; } .col-lg-9{ width:75%; } }
.g-4 > * { padding:.75rem; } .g-4 { margin:-.75rem; }
.mt-4 { margin-top:1.5rem; }
.mb-4 { margin-bottom:1.5rem; }
.mb-3 { margin-bottom:1rem; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:.25rem; }
.mb-2 { margin-bottom:.5rem; }
.mt-3 { margin-top:1rem; }
.ms-1 { margin-left:.25rem; } .me-1 { margin-right:.25rem; }
.py-5 { padding-top:3rem; padding-bottom:3rem; }
.py-3 { padding-top:1rem; padding-bottom:1rem; }
.px-3 { padding-left:1rem; padding-right:1rem; }
.text-center { text-align:center; }
.text-end    { text-align:right; }
.fw-bold { font-weight:700; }
.justify-content-center { justify-content:center !important; }
.justify-content-between { justify-content:space-between !important; }
.align-items-center { align-items:center !important; }
.d-flex { display:flex !important; }
.d-none { display:none !important; }
.d-block { display:block !important; }
.w-100 { width:100%; }
.h-100 { height:100%; }
.position-relative { position:relative; }
.overflow-hidden { overflow:hidden; }
.fw-semibold { font-weight:600; }
.small { font-size:.875em; }
.opacity-0 { opacity:0; }
.fade-in { animation:fadeUp .4s var(--ease-out) both; }

/* SweetAlert2 theme override */
.swal2-popup { background:var(--bg-card-solid) !important; color:var(--text) !important; border:1px solid var(--border-md) !important; border-radius:var(--radius-xl) !important; }
.swal2-title { color:var(--text) !important; }
.swal2-html-container { color:var(--text-muted) !important; }
.swal2-confirm { background:var(--primary) !important; color:var(--text-on-primary) !important; border-radius:var(--radius-full) !important; }

/* Keyword search */
#search-keywords-section,.search-keywords-section { margin-bottom:1rem; }
#search-results-section,.search-results-section { margin-top:.5rem; }
#search-related-section { margin-top:1rem; }
.hsd-keywords,.hsd-results { padding:.5rem; }
.hsd-related-title { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }

/* Page content */
.page-content { padding:2.5rem 0 4rem; }
.page-content h1 { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:800; margin-bottom:1.5rem; }
.page-content h2 { font-size:1.3rem; font-weight:700; margin:1.5rem 0 .75rem; }
.page-content p { font-size:.9rem; color:var(--text-muted); line-height:1.8; margin-bottom:1rem; }
.page-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:1rem; }
.page-content li { font-size:.9rem; color:var(--text-muted); margin-bottom:.4rem; }

/* ===== AUTH PAGES ===== */
.auth-page {
    min-height:70vh; display:flex; align-items:center; justify-content:center;
    padding:40px 16px; background:var(--bg);
}
.auth-card {
    background:var(--bg-surface); border-radius:16px;
    box-shadow:0 4px 24px rgba(0,0,0,0.10); padding:40px; width:100%; max-width:440px;
    border:1px solid var(--border);
}
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-logo img { height:48px; object-fit:contain; }
.auth-title { font-size:22px; font-weight:800; text-align:center; margin-bottom:8px; color:var(--text); letter-spacing:-.02em; }
.auth-subtitle { font-size:14px; text-align:center; color:var(--text-muted); margin-bottom:28px; }
.auth-card .form-label { font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.auth-card .form-control {
    border-radius:10px; border:1.5px solid var(--border); padding:13px 14px;
    font-size:14px; transition:border-color .2s, box-shadow .2s;
    background:var(--bg); color:var(--text);
}
.auth-card .form-control:focus {
    border-color:var(--primary); background:var(--bg-surface);
    box-shadow:0 0 0 3px var(--primary-glow-sm); outline:none;
}
.auth-card .btn-auth {
    width:100%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none;
    border-radius:10px; padding:14px; font-size:15px; font-weight:700; letter-spacing:.5px;
    cursor:pointer; transition:all .2s; margin-top:8px;
    box-shadow:0 6px 18px var(--primary-glow-sm);
}
.auth-card .btn-auth:hover { opacity:.92; transform:translateY(-1px); }
.auth-divider {
    display:flex; align-items:center; gap:12px; margin:20px 0;
    color:var(--text-muted); font-size:13px;
}
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-google {
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    background:var(--bg-surface); color:var(--text); border:1.5px solid var(--border);
    border-radius:10px; padding:11px; font-size:14px; font-weight:500;
    cursor:pointer; text-decoration:none; transition:background .2s,border-color .2s;
}
.btn-google:hover { background:var(--bg); border-color:var(--text-muted); color:var(--text); text-decoration:none; }
.btn-google svg { width:18px; height:18px; flex-shrink:0; }
.auth-footer { text-align:center; margin-top:24px; font-size:14px; color:var(--text-muted); }
.auth-footer a { color:var(--primary); font-weight:600; text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }
.pwd-toggle-btn {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    padding:8px; font-size:18px; line-height:1;
    min-width:36px; min-height:36px;
    display:inline-flex; align-items:center; justify-content:center;
}
.pwd-toggle-btn:hover { color:var(--primary); }


/* ══════════════════════════════════════════════════════════════
   HOME PAGE — DARK EDITORIAL LUXURY REDESIGN
   ══════════════════════════════════════════════════════════════ */

/* ── 1. CINEMATIC HERO ──────────────────────────────────────── */
.hero-cinematic {
    position: relative;
    height: calc(100vh - var(--header-h));
    min-height: 540px;
    overflow: hidden;
    background: var(--bg);
}
.hero-cinematic .hero-slider,
.hc-slider {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: unset !important;
}
.hero-cinematic .slides  { height: 100%; }
.hero-cinematic .slide   { height: 100%; }
.hero-cinematic .slide > a.slide-link { display: block; height: 100%; }
.hero-cinematic .slide img,
.hero-cinematic .slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12,10,9,0.08) 0%,
        rgba(12,10,9,0.48) 50%,
        rgba(12,10,9,0.90) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.hc-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem 6rem;
    z-index: 2;
}
.hc-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.hc-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}
.hc-title em {
    font-style: italic;
    color: var(--primary);
}
.hc-subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: rgba(245,239,230,0.66);
    max-width: 440px;
    margin-bottom: 2.5rem;
    line-height: 1.65;
}
.hc-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-hc-primary {
    display: inline-block;
    padding: 0.82rem 2.4rem;
    background: var(--primary);
    color: #180E06;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.3s var(--ease);
    cursor: pointer;
}
.btn-hc-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--primary-glow);
    color: #180E06;
    text-decoration: none;
}
.btn-hc-ghost {
    display: inline-block;
    padding: 0.82rem 2.4rem;
    background: transparent;
    border: 1px solid rgba(245,239,230,0.35);
    color: #F5EFE6;
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.3s var(--ease);
}
.btn-hc-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}
/* Hero arrows — override existing .slider-arrow inside .hero-cinematic */
.hero-cinematic .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(12,10,9,0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 3;
    color: #fff;
    font-size: 1rem;
}
.hero-cinematic .slider-arrow.prev { left: 1.5rem; }
.hero-cinematic .slider-arrow.next { right: 1.5rem; }
.hero-cinematic .slider-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #180E06;
}
/* Dots — horizontal bars */
.hero-cinematic .slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
    background: none;
}
.hero-cinematic .slider-dots .dot {
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.32);
    border: none;
    border-radius: 2px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s var(--ease);
}
.hero-cinematic .slider-dots .dot.active {
    width: 48px;
    background: var(--primary);
}
/* Scroll hint */
.hc-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.hc-scroll-hint span {
    font-size: 0.56rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
    writing-mode: vertical-lr;
}
.hc-scroll-line {
    width: 1px;
    height: 52px;
    background: linear-gradient(to bottom, rgba(201,149,108,0.9), transparent);
    animation: scrollLinePulse 2.4s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scrollLinePulse {
    0%,100% { opacity: 0.45; transform: scaleY(1); }
    50%      { opacity: 1;    transform: scaleY(0.55); }
}
@media(max-width:767px) {
    .hc-scroll-hint { display: none; }
    .hc-content { padding-bottom: 4rem; }
    .hero-cinematic .slider-arrow { width: 44px; height: 44px; font-size: 0.85rem; }
    .hero-cinematic .slider-arrow.prev { left: 0.75rem; }
    .hero-cinematic .slider-arrow.next { right: 0.75rem; }
    .hc-title { font-size: clamp(2.5rem,10vw,4rem); }
}

/* ── 2. MARQUEE EDITORIAL STRIP ─────────────────────────────── */
.marquee-editorial {
    background: var(--primary);
    overflow: hidden;
    height: 44px;
    display: flex;
    align-items: center;
}
.marquee-track-ed {
    display: flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
    animation: marqueeEd 34s linear infinite;
    padding: 0 1rem;
    will-change: transform;
}
.marquee-track-ed span {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(24,14,6,0.82);
    flex-shrink: 0;
}
.marquee-dot {
    color: rgba(24,14,6,0.38) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
}
@keyframes marqueeEd {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── 3. EDITORIAL CATEGORIES ────────────────────────────────── */
.editorial-cats { padding: 3px 0 0; background: var(--bg); }
.ec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 52vh 30vh 30vh;
    gap: 3px;
}
.ec-card-0 { grid-row: 1 / 3; }
.ec-card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    cursor: pointer;
    background: var(--bg-surface);
    min-height: 180px;
}
.ec-img-bg {
    position: absolute;
    inset: 0;
    background: var(--ec-bg, #181412) center/cover no-repeat;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ec-card:hover .ec-img-bg { transform: scale(1.06); }
.ec-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12,10,9,0.88) 0%,
        rgba(12,10,9,0.18) 55%,
        transparent 100%
    );
}
.ec-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}
.ec-card-label {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.9rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.ec-card-cta {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s;
    flex-shrink: 0;
}
.ec-card:hover .ec-card-cta { gap: 10px; }
.ec-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-faint);
}
@media(max-width:767px) {
    .ec-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 64vw 44vw 44vw 44vw 44vw;
    }
    .ec-card-0 { grid-row: auto; }
    .ec-card-body { padding: 1rem; }
}
@media(min-width:768px) and (max-width:991px) {
    .ec-grid { grid-template-rows: 44vh 26vh 26vh; }
}

/* ── 4. STRIPE SECTION (shared header style) ─────────────────── */
.stripe-section   { padding: 4.5rem 0; }
.stripe-dark      { background: var(--bg-surface); }
.stripe-light     { background: var(--bg); }
.stripe-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}
.stripe-eyebrow {
    display: block;
    font-size: 0.60rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.stripe-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.05;
}
.stripe-view-all {
    font-size: 0.70rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
    padding-bottom: 2px;
}
.stripe-view-all:hover { color: var(--primary); text-decoration: none; }
.stripe-arrow { display: inline-block; transition: transform 0.3s; }
.stripe-view-all:hover .stripe-arrow { transform: translateX(5px); }
/* Restyle tp-arrows within stripe sections */
.stripe-section .tp-arrow {
    border: 1px solid var(--border-md);
    background: var(--bg);
    color: var(--text);
    transition: all 0.25s;
}
.stripe-section .tp-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #180E06;
}

/* ── 5. TOP SELLING — FEATURED GRID ──────────────────────────── */
.feat-section   { padding: 4.5rem 0; background: var(--bg); }
.feat-header    { margin-bottom: 2rem; }
.feat-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
}
.feat-item-0 { grid-column: 1; grid-row: 1 / 3; }
.feat-item-1 { grid-column: 2; grid-row: 1; }
.feat-item-2 { grid-column: 3; grid-row: 1; }
.feat-item-3 { grid-column: 2; grid-row: 2; }
.feat-item-4 { grid-column: 3; grid-row: 2; }
.feat-item   { height: 100%; }
.feat-item .tp-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.feat-item .tp-card-img {
    aspect-ratio: auto;
    width: 100%;
}
.feat-item-0 .tp-card-img     { flex: 1; min-height: 220px; }
.feat-item-0 .tp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-item-1 .tp-card-img,
.feat-item-2 .tp-card-img,
.feat-item-3 .tp-card-img,
.feat-item-4 .tp-card-img     { aspect-ratio: 3/4; }
@media(max-width:991px) {
    .feat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .feat-item-0 { grid-column: 1 / 3; grid-row: auto; }
    .feat-item-1,.feat-item-2,.feat-item-3,.feat-item-4 { grid-column: auto; grid-row: auto; }
}

/* ── 6. NEW ARRIVALS ─────────────────────────────────────────── */
.arrivals-section { padding: 5rem 0; background: var(--bg-surface); }
.arrivals-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.arrivals-title-wrap { flex: 1; min-width: 180px; }
.arrivals-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--text);
    margin: 0;
}
.arrivals-title em { font-style: italic; color: var(--primary); }
.arrivals-subtitle {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-top: 0.85rem;
    max-width: 280px;
    line-height: 1.55;
}
.arrivals-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: 0.2rem;
}
.ap-pill {
    padding: 0.36rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s;
    font-weight: 500;
    cursor: pointer;
}
.ap-pill:hover,
.ap-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #180E06;
    text-decoration: none;
}
.btn-view-all-new {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 2.2rem;
    border: 1px solid var(--border-md);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-view-all-new:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    text-decoration: none;
}
@media(max-width:767px) {
    .arrivals-header { gap: 1.5rem; }
    .arrivals-pills  { justify-content: flex-start; }
}

/* ── 7. REEL / VIDEO SECTION ─────────────────────────────────── */
.reel-section { padding: 4.5rem 0; background: var(--bg); }
.reel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}
.reel-grid {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)) !important;
    gap: 10px !important;
}
.reel-grid .video-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
}
.reel-grid .video-play-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(201,149,108,0.92);
    backdrop-filter: blur(6px);
    color: #180E06;
    font-size: 1.05rem;
    border: none;
    box-shadow: none;
}
.reel-grid .video-info {
    background: var(--bg-surface);
    padding: 0.65rem 0.8rem 0.8rem;
}
.reel-grid .video-info h6 {
    font-size: 0.76rem;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.35;
}
.reel-grid .video-shop-link {
    font-size: 0.66rem;
    color: var(--primary);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
}

/* ── 8. SERVICES — GLASS ICON CARDS ─────────────────────────── */
.services-new { padding: 5rem 0; background: var(--bg-surface); }
.services-new .stripe-title { text-align: center; margin-top: 0.4rem; }
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.svc-card {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.35s var(--ease);
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.svc-card:hover {
    border-color: var(--border-md);
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow-sm);
}
.svc-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary-glow-sm);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.35rem;
    color: var(--primary);
    transition: all 0.35s;
}
.svc-card:hover .svc-icon-wrap {
    background: var(--primary);
    color: #180E06;
    box-shadow: 0 0 24px var(--primary-glow);
    border-color: transparent;
}
.svc-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.6rem;
    font-family: inherit;
}
.svc-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.68;
    margin: 0;
}
@media(max-width:575px) {
    .svc-grid { grid-template-columns: 1fr 1fr; }
    .svc-card { padding: 1.5rem 1rem; }
}

/* ── 9. BLOG — MAGAZINE GRID ─────────────────────────────────── */
.blog-mag-section { padding: 5rem 0; background: var(--bg); }
.bmag-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
}
.bmag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.25rem;
}
.bmag-item-0 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.bmag-item-0 .blog-card { height: 100%; min-height: 340px; }
.bmag-item-0 .blog-card-img { min-height: 220px; height: 60%; }
@media(max-width:991px) {
    .bmag-grid { grid-template-columns: 1fr 1fr; }
    .bmag-item-0 { grid-column: auto; grid-row: auto; }
    .bmag-item-0 .blog-card { min-height: unset; }
    .bmag-item-0 .blog-card-img { min-height: unset; height: auto; }
}
@media(max-width:575px) {
    .bmag-grid { grid-template-columns: 1fr 1fr; }
}

/* ── SECTION DECORATIVE ORBS ──────────────────────────────────────
   Pure-CSS animated radial-gradient blobs per section.
   No JS / no external library. overflow:hidden keeps them contained.
   ─────────────────────────────────────────────────────────────── */

/* Shared keyframes */
@keyframes orbDrift1 {
    0%,100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.08); }
    66%      { transform: translate(-20px, 50px) scale(0.94); }
}
@keyframes orbDrift2 {
    0%,100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-50px, 30px) scale(1.1); }
    70%      { transform: translate(25px, -40px) scale(0.92); }
}
@keyframes orbDrift3 {
    0%,100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50%      { transform: translate(20px, 20px) scale(1.12); opacity: 0.85; }
}

/* ── 1. HERO orb (secondary accent, top-right) ── */
.hero-cinematic::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.13) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
    animation: orbDrift1 18s ease-in-out infinite;
}

/* ── 2. STRIPE / TRENDING PRODUCTS orbs ── */
.stripe-section {
    position: relative;
    overflow: hidden;
}
.stripe-section::before {
    content: '';
    position: absolute;
    bottom: -140px;
    left: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift2 22s ease-in-out infinite;
}
.stripe-section::after {
    content: '';
    position: absolute;
    top: -60px;
    right: 10%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,68,0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift1 26s ease-in-out infinite reverse;
}
.stripe-section .container,
.stripe-section .stripe-track-wrap {
    position: relative;
    z-index: 1;
}

/* ── 3. FEAT / BEST SELLERS orbs ── */
.feat-section {
    position: relative;
    overflow: hidden;
}
.feat-section::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift1 20s ease-in-out infinite;
}
.feat-section .container { position: relative; z-index: 1; }

/* ── 4. ARRIVALS orbs ── */
.arrivals-section {
    position: relative;
    overflow: hidden;
}
.arrivals-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift2 24s ease-in-out infinite;
}
.arrivals-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 5%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,68,0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift1 19s ease-in-out infinite reverse;
}
.arrivals-section .container { position: relative; z-index: 1; }

/* ── 5. REEL / VIDEO orbs ── */
.reel-section {
    position: relative;
    overflow: hidden;
}
.reel-section::before {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -100px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.11) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift2 21s ease-in-out infinite;
}
.reel-section .container { position: relative; z-index: 1; }

/* ── 6. SERVICES orbs (two orbs — primary + accent) ── */
.services-new {
    position: relative;
    overflow: hidden;
}
.services-new::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -80px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift3 16s ease-in-out infinite;
}
.services-new::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,68,0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift1 23s ease-in-out infinite reverse;
}
.services-new .container { position: relative; z-index: 1; }

/* ── 7. BLOG orbs ── */
.blog-mag-section {
    position: relative;
    overflow: hidden;
}
.blog-mag-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -80px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift2 25s ease-in-out infinite;
}
.blog-mag-section .container { position: relative; z-index: 1; }

/* ── END SECTION ORBS ── */


/* ══════════════════════════════════════════════════════════════
   A. STACKING LOOKBOOK PANELS
   ══════════════════════════════════════════════════════════════ */
.stack-section {
    position: relative;
    background: var(--bg);
}
.stack-wrapper {
    position: relative;
}
.stack-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    will-change: transform;
}
.stack-panel-bg {
    position: absolute;
    inset: 0;
    background: var(--stack-bg, var(--bg-surface)) center/cover no-repeat;
    will-change: transform;
}
.stack-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12,10,9,0.82) 0%, rgba(12,10,9,0.45) 40%, rgba(12,10,9,0.28) 100%);
    z-index: 1;
}
.stack-panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem 3rem;
    z-index: 2;
    max-width: 600px;
}
.stack-eyebrow {
    display: block;
    font-size: 0.60rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1rem;
}
.stack-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.stack-desc {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: rgba(245,239,230,0.60);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 420px;
}
.stack-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.70rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--primary);
    transition: gap 0.3s, color 0.3s;
}
.stack-cta:hover { gap: 14px; color: var(--primary-light); }
.stack-panel-counter {
    position: absolute;
    bottom: 4rem;
    right: 3rem;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: rgba(245,239,230,0.30);
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}
.stack-current {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.stack-divider { font-weight: 300; }
@media (max-width: 767px) {
    .stack-panel { height: 80vh; }
    .stack-panel-content { padding: 2rem 1.5rem; }
    .stack-panel-counter { bottom: 2rem; right: 1.5rem; }
    .stack-current { font-size: 1.8rem; }
}


/* ══════════════════════════════════════════════════════════════
   B. HORIZONTAL SCROLL GALLERY
   ══════════════════════════════════════════════════════════════ */
.hscroll-section {
    position: relative;
    padding: 5rem 0 3rem;
    background: var(--bg-surface);
    overflow: hidden;
}
.hscroll-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    display: flex;
    gap: 2rem;
}
.hscroll-bg-word {
    font-family: var(--font-display);
    font-size: clamp(6rem, 15vw, 14rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,149,108,0.08);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}
.hscroll-header {
    position: relative;
    z-index: 2;
    margin-bottom: 2.5rem;
}
.hscroll-pin-wrapper {
    position: relative;
    z-index: 1;
    overflow: visible;
}
.hscroll-track {
    display: flex;
    gap: 2rem;
    padding: 1rem 3rem;
    will-change: transform;
}
.hscroll-card {
    flex-shrink: 0;
    width: clamp(280px, 30vw, 400px);
    perspective: 800px;
}
.hscroll-card-inner {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s var(--ease);
    transform-style: preserve-3d;
}
.hscroll-card-inner:hover {
    transform: translateY(-8px) rotateY(3deg);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-md);
}
.hscroll-card-img {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-card-solid);
}
.hscroll-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.hscroll-card-inner:hover .hscroll-card-img img {
    transform: scale(1.08);
}
.hscroll-card-info {
    padding: 1.25rem 1rem;
    position: relative;
}
.hscroll-card-num {
    font-family: var(--font-display);
    font-size: 0.70rem;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.4rem;
}
.hscroll-card-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hscroll-card-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hscroll-price-selling {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}
.hscroll-price-mrp {
    font-size: 0.80rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.hscroll-progress {
    margin-top: 2rem;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
    overflow: hidden;
}
.hscroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 1px;
}
@media (max-width: 767px) {
    .hscroll-track {
        padding: 1rem 1rem;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .hscroll-track::-webkit-scrollbar { display: none; }
    .hscroll-card {
        width: 260px;
        scroll-snap-align: start;
    }
    .hscroll-bg-text { display: none; }
    .hscroll-progress { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   C. PARALLAX SPLIT REVEAL — BRAND STATS
   ══════════════════════════════════════════════════════════════ */
.reveal-section {
    position: relative;
    padding: 8rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg);
}
.reveal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,10,9,0.92) 0%, rgba(12,10,9,0.65) 50%, rgba(12,10,9,0.92) 100%);
    z-index: 1;
}
.reveal-container {
    position: relative;
    z-index: 2;
    text-align: center;
}
.reveal-text-wrap {
    margin-bottom: 4rem;
}
.reveal-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
}
.reveal-line {
    display: block;
}
.reveal-line-accent {
    font-style: italic;
}
.reveal-tagline {
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    color: rgba(245,239,230,0.55);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}
.reveal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
}
.reveal-stat {
    text-align: center;
}
.reveal-stat-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    display: inline;
}
.reveal-stat-suffix {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--primary);
    vertical-align: super;
}
.reveal-stat-suffix .bi-star-fill {
    font-size: 0.7em;
    color: var(--star-color);
}
.reveal-stat-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.5rem;
}
@media (max-width: 767px) {
    .reveal-section { padding: 5rem 0; min-height: auto; }
    .reveal-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .reveal-text-wrap { margin-bottom: 2.5rem; }
}
@media (max-width: 400px) {
    .reveal-stats { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   D. 3D PERSPECTIVE SHOWCASE
   ══════════════════════════════════════════════════════════════ */
.d3-section {
    padding: 5rem 0;
    background: var(--bg-surface);
    overflow: hidden;
    position: relative;
}
.d3-header {
    margin-bottom: 3rem;
}
.d3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    perspective: 1200px;
}
.d3-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    will-change: transform;
    transform-style: preserve-3d;
    box-shadow: 8px 16px 40px rgba(0,0,0,0.30);
    transition: box-shadow 0.4s var(--ease);
}
.d3-card:hover {
    box-shadow: 12px 24px 56px rgba(0,0,0,0.40), 0 0 28px var(--primary-glow-sm);
}
.d3-card-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.d3-card-img {
    position: absolute;
    inset: 0;
    background: var(--d3-bg, var(--bg-surface)) center/cover no-repeat;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.d3-card:hover .d3-card-img {
    transform: scale(1.06);
}
.d3-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12,10,9,0.88) 0%, rgba(12,10,9,0.20) 50%, transparent 100%);
    z-index: 1;
}
.d3-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
}
.d3-card-num {
    font-family: var(--font-display);
    font-size: 0.70rem;
    color: var(--primary);
    letter-spacing: 0.15em;
    font-weight: 600;
    display: block;
    margin-bottom: 0.4rem;
}
.d3-card-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    line-height: 1.1;
}
.d3-card-cta {
    font-size: 0.66rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s;
}
.d3-card:hover .d3-card-cta { gap: 10px; }
@media (max-width: 991px) {
    .d3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .d3-grid { grid-template-columns: 1fr; }
    .d3-card { aspect-ratio: 4/3; }
}

/* ── New section orbs ── */
.stack-section::before {
    content: '';
    position: absolute;
    top: -100px; right: -120px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.10) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: orbDrift1 20s ease-in-out infinite;
}
.hscroll-section::before {
    content: '';
    position: absolute;
    bottom: -80px; left: -100px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.09) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: orbDrift2 22s ease-in-out infinite;
}
.hscroll-section .container { position: relative; z-index: 1; }
.reveal-section::after {
    content: '';
    position: absolute;
    top: -60px; left: 10%;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,68,0.07) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: orbDrift3 18s ease-in-out infinite;
}
.d3-section::before {
    content: '';
    position: absolute;
    bottom: -100px; right: -60px;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,149,108,0.11) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: orbDrift1 24s ease-in-out infinite reverse;
}
.d3-section .container { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ══════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine) {
    /* Hide default cursor globally */
    *, *::before, *::after { cursor: none !important; }

    #cursor-dot {
        position: fixed;
        top: 0; left: 0;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--primary);
        pointer-events: none;
        z-index: 99999;
        opacity: 0;
        transition: opacity 0.2s, width 0.2s, height 0.2s, background 0.2s;
        will-change: transform;
    }

    #cursor-ring {
        position: fixed;
        top: 0; left: 0;
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 1.5px solid var(--primary);
        pointer-events: none;
        z-index: 99998;
        opacity: 0;
        transition: opacity 0.2s, width 0.3s, height 0.3s, border-color 0.2s, background 0.2s;
        will-change: transform;
    }

    /* Hover state — ring expands, dot shrinks */
    #cursor-ring.cursor-hover {
        width: 56px; height: 56px;
        border-color: rgba(201,149,108,0.5);
        background: rgba(201,149,108,0.06);
    }
    #cursor-ring.cursor-hover ~ #cursor-dot,
    body:has(#cursor-ring.cursor-hover) #cursor-dot {
        width: 4px; height: 4px;
        background: var(--primary-light);
    }

    /* Click state — ring contracts */
    #cursor-ring.cursor-click {
        width: 28px; height: 28px;
        border-color: var(--primary);
        background: rgba(201,149,108,0.14);
        transition: width 0.1s, height 0.1s, background 0.1s;
    }
}

/* ── VARIANT SELECTORS (size / color) ───────────────────────── */
.pd-variant-row { margin-bottom: 1rem; }
.pd-variant-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .55rem;
}
.pd-variant-selected { color: var(--text); font-weight: 800; }
.pd-sizes { display: flex; flex-wrap: wrap; gap: .45rem; }
.pd-size-btn {
    min-width: 44px;
    padding: .38rem .75rem;
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-md);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--dur-fast);
    line-height: 1.4;
}
.pd-size-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); }
.pd-size-btn.active { border-color: var(--primary); color: var(--text-on-primary); background: var(--primary); font-weight: 700; }
.pd-size-btn.out-of-stock { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pd-colors { display: flex; flex-wrap: wrap; gap: .55rem; }
.pd-color-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-md);
    cursor: pointer;
    transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.pd-color-btn:hover { border-color: var(--primary); transform: scale(1.12); }
.pd-color-btn.active {
    border-color: var(--primary);
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — Consolidated mobile/tablet adjustments
   ══════════════════════════════════════════════════════════════ */

/* ── Ultra-small screens (< 375px) ────────────────────────── */
@media (max-width: 374px) {
    .container { padding-inline: 1rem; }
    .header-left, .header-right { gap: .35rem; }
    .logo-center img { height: 40px; }
    .marquee-item { padding: 0 1.25rem; }
    .marquee-item::after { margin-left: 1.25rem; }
    .cart-item-img { width: 60px; height: 75px; }
    .cart-item-row { gap: .75rem; }
    .pd-add-btn { min-width: 0; width: 100%; }
    .pd-cta { flex-direction: column; }
    .pd-wish-btn { width: 100%; border-radius: var(--radius-full); }
    .hscroll-card { width: 220px; }
    .auth-card { padding: 24px 16px; }
}

/* ── Small mobile (< 576px) ───────────────────────────────── */
@media (max-width: 575px) {
    /* Header spacing */
    .header-left, .header-right { gap: .25rem; }

    /* Footer grid stacks on mobile */
    .footer-body { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 2rem; }
    .footer-brand-desc { max-width: 100%; }

    /* Footer bottom stacks */
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .footer-payment-badges { flex-wrap: wrap; }

    /* Cart summary un-sticks on mobile */
    .cart-summary-box { position: static; top: auto; }

    /* Cart item row tighter */
    .cart-item-row { grid-template-columns: 70px 1fr; gap: .75rem; }
    .cart-item-row > :nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }

    /* Product price smaller */
    .pd-selling { font-size: 1.25rem; }

    /* Blog featured image height cap */
    .blog-detail-featured { max-height: 320px; object-fit: cover; }

    /* Account stat grid single column on very small */
    .account-stat-grid { gap: .75rem; }

    /* Auth page reduced padding */
    .auth-page { padding: 24px 12px; }
    .auth-card { padding: 28px 20px; }

    /* Footer body padding reduction on mobile */
    .footer-body { padding: 2rem 0 1.5rem; }
}

/* ── Footer tablet (768–991px): 2-column grid ── */
@media (min-width: 576px) and (max-width: 991px) {
    .footer-body { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand-col { grid-column: 1 / 3; }
}

/* ── Tablet (< 768px) ─────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hide decorative orbs on mobile for performance */
    .stack-section::before,
    .hscroll-section::before,
    .reveal-section::after,
    .d3-section::before,
    .ec-grid::before, .ec-grid::after,
    .na-section::before, .na-section::after,
    .stl-section::before, .stl-section::after,
    .svc-section::before, .svc-section::after,
    .reel-section::before, .reel-section::after,
    .promise-section::before, .promise-section::after,
    .brand-story::before, .brand-story::after {
        display: none;
    }

    /* Account sidebar not sticky on mobile */
    .account-sidebar { position: static; top: auto; }

    /* Marquee smaller padding */
    .marquee-item { padding: 0 1.5rem; font-size: .68rem; }
    .marquee-item::after { margin-left: 1.5rem; }

    /* Body padding for mobile bottom nav */
    body { padding-bottom: 60px; }
}

/* (Checkout 3-col now handled via .addr-form-3col class) */

/* ── Touch device hover adjustments ───────────────────────── */
@media (hover: none) {
    .hscroll-card-inner:hover { transform: none; box-shadow: var(--shadow-sm); }
    .d3-card:hover { box-shadow: 8px 16px 40px rgba(0,0,0,0.30); }
    .ec-card:hover .ec-card-img img { transform: none; }
    .product-card:hover .product-overlay { opacity: 0; }
    .pd-main-image:hover img { transform: none; }
}

/* ── PRODUCT DETAIL — unified class fixes ─────────────────── */

/* Title */
.pd-info .pd-name {
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .75rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* Rating wrapper */
.pd-rating { margin-bottom: 1rem; }

/* Pricing row */
.pd-pricing {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .4rem;
    flex-wrap: wrap;
}
.pd-pricing .pd-sell-price,
.pd-pricing .selling-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text);
}
.pd-pricing .pd-mrp {
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.pd-pricing .pd-discount {
    padding: .2rem .65rem;
    border-radius: var(--radius-full);
    background: var(--primary-glow);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid var(--border-md);
}

.pd-tax-info {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Offer cards */
.pd-offers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}
@media (max-width: 400px) { .pd-offers { grid-template-columns: 1fr; } }
.pd-offer-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .75rem .875rem;
    font-size: .75rem;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.pd-offer-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pd-offer-card strong { display: block; margin-bottom: .2rem; color: var(--primary); font-size: .8rem; font-weight: 700; }
.pd-offer-card span { color: var(--text-muted); }

/* Delivery section */
.pd-delivery {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .875rem 1rem;
    margin-bottom: 1rem;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.pd-delivery .delivery-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .6rem;
}
.pd-delivery .pincode-form { display: flex; gap: .5rem; }
.pd-delivery .pincode-form input {
    flex: 1;
    min-width: 0;
    padding: .6rem .875rem;
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-md);
    font-size: .85rem;
    outline: none;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pd-delivery .pincode-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow-sm); }
.pd-delivery .pincode-form button {
    padding: .6rem 1rem;
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.pd-delivery .pincode-form button:hover { background: var(--primary); color: var(--text-on-primary); transform: translateY(-1px); }
.pd-delivery-info {
    margin-top: .65rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .875rem;
    font-size: .78rem;
    color: var(--primary);
}
.pd-delivery-info i { margin-right: .25rem; }

/* Expandable accordion (product detail info) */
.pd-expandable { border-top: 1px solid var(--border); }
.pd-expandable:first-of-type { border-top: none; }
.pd-expandable:last-child { border-bottom: 1px solid var(--border); }
.pd-expandable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 0;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
}
.pd-expandable-header i { font-size: .8rem; color: var(--text-muted); transition: transform var(--dur-fast); }
.pd-expandable.open .pd-expandable-header i { transform: rotate(180deg); color: var(--primary); }
.pd-expandable-body { display: none; padding-bottom: 1rem; }
.pd-expandable.open .pd-expandable-body { display: block; }
.pd-expandable-body p, .pd-expandable-body li { font-size: .84rem; color: var(--text-muted); line-height: 1.7; }

/* Action buttons */
.pd-actions {
    display: flex;
    gap: .75rem;
    margin: 1.25rem 0;
    align-items: center;
}
.btn-add-cart {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text-on-primary);
    border: none;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 4px 20px var(--primary-glow);
    transition: all var(--dur-med) var(--ease);
    cursor: pointer;
}
.btn-add-cart:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--primary-glow); }
.btn-add-cart:active { transform: translateY(0); }
.btn-add-cart:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-add-wishlist {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all var(--dur-fast);
    cursor: pointer;
    background: var(--bg-card);
}
.btn-add-wishlist:hover,
.btn-add-wishlist.active,
.btn-add-wishlist.in-wishlist,
.btn-add-wishlist.wishlisted { color: var(--danger); border-color: var(--danger); background: rgba(255,77,109,.08); }

/* ── SAVE LINK ───────────────────────────────────────────────── */
.pd-save-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 700; color: var(--primary);
    text-decoration: none; letter-spacing: .02em;
    transition: opacity var(--dur-fast);
}
.pd-save-link:hover { opacity: .75; color: var(--primary); }
.pd-save-link i { font-size: .85rem; }

/* ── CUSTOMER REVIEWS SECTION ────────────────────────────────── */
.reviews-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }

.reviews-summary {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 1.25rem 1.75rem;
    margin-bottom: 2rem; max-width: 360px;
}
.reviews-summary-score { text-align: center; flex-shrink: 0; }
.reviews-summary-score .big-number {
    font-size: 2.8rem; font-weight: 900; color: var(--text);
    line-height: 1; letter-spacing: -.03em;
}
.reviews-summary-score .of-five {
    font-size: .72rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
}
.reviews-summary-meta .count {
    font-size: .78rem; color: var(--text-muted); margin-top: .35rem;
}

.reviews-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.review-card {
    display: flex; gap: 1rem; padding: 1.125rem 1.25rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.review-card:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); }

.review-avatar { flex-shrink: 0; }
.review-avatar img {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--border-md);
}
.review-body { flex: 1; min-width: 0; }
.review-meta {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: .75rem; margin-bottom: .5rem;
}
.review-meta .reviewer { font-size: .88rem; font-weight: 700; color: var(--text); }
.review-meta .review-date { font-size: .74rem; color: var(--text-muted); margin-top: .15rem; }
.review-meta .stars { display: flex; gap: .15rem; flex-shrink: 0; color: #f59e0b; font-size: .85rem; }
.review-title { font-size: .875rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.review-text { font-size: .84rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* Empty state */
.reviews-empty {
    text-align: center; padding: 2.5rem 1rem;
    background: var(--bg-card); border: 1px dashed var(--border-md);
    border-radius: var(--radius-xl); margin-bottom: 1.5rem;
}
.reviews-empty-icon { font-size: 2.2rem; color: var(--text-faint); margin-bottom: .75rem; }
.reviews-empty-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.reviews-empty-sub { font-size: .82rem; color: var(--text-muted); margin: 0; }

/* CTA row */
.reviews-cta { display: flex; justify-content: flex-start; margin-bottom: 1.5rem; }

/* Write review form */
.review-form-wrap {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 1.5rem 1.75rem;
    margin-top: 1rem;
}
.review-form-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 1.25rem; }
.review-star-select { margin-bottom: 1rem; }
.review-star-select label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: block; margin-bottom: .45rem; }
.star-selector { display: flex; gap: .35rem; }
.star-selector i { font-size: 1.5rem; color: var(--text-faint); cursor: pointer; transition: color var(--dur-fast), transform var(--dur-fast); }
.star-selector i:hover, .star-selector i.bi-star-fill { color: #f59e0b; transform: scale(1.15); }
.review-form-field { margin-bottom: .875rem; }
.review-form-input {
    width: 100%; padding: .7rem .95rem;
    border: 1.5px solid var(--border-md); border-radius: var(--radius-md);
    font-size: .875rem; font-family: inherit;
    background: var(--bg); color: var(--text);
    outline: none; resize: vertical;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.review-form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow-sm); }
.review-form-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ── Custom Pagination ─────────────────────────────────────────────────────── */
.nkp-pagination { display:flex; align-items:center; gap:.35rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; justify-content:center; }
.nkp-page-link { display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; height:2.2rem; padding:0 .6rem; border-radius:var(--radius-sm,6px); font-size:.85rem; font-weight:500; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-muted); text-decoration:none; transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast); cursor:pointer; }
.nkp-page-item a.nkp-page-link:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.nkp-page-item.active .nkp-page-link { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:700; }
.nkp-page-item.disabled .nkp-page-link { opacity:.4; cursor:not-allowed; pointer-events:none; }
.nkp-pagination-info { text-align:center; font-size:.8rem; color:var(--text-muted); margin-top:.75rem; }