/* input(10598,1): run-time error CSS1019: Unexpected token, found '}'
input(10742,1): run-time error CSS1019: Unexpected token, found '}' */
/* ============================================
   الركن اليماني - Le Coin Yéménite
   LUXURY DESIGN SYSTEM v3
   Aesthetic: Warm Arabian Luxury
   ============================================ */

:root {
    /* ── Color Palette ── */
    --amber-50: #FBF6ED;
    --amber-100: #F4EBDA;
    --amber-200: #E8D4B8;
    --amber-300: #D9BC93;
    --amber-400: #C59C6D;
    --amber-500: #B0824F;
    --amber-600: #95683B;
    --amber-700: #7A5029;
    --amber-800: #62391C;
    --amber-900: #4A2A14;

    --honey-50: #FBF6ED;
    --honey-100: #F4EBDA;
    --honey-200: #E8D4B8;
    --honey-300: #D9BC93;
    --honey-400: #C59C6D;
    --honey-500: #B0824F;
    --honey-600: #95683B;
    --honey-700: #7A5029;
    --honey-800: #62391C;
    --honey-900: #4A2A14;

    --gold: #C59C6D;
    --gold-light: #D9BC93;
    --gold-dark: #95683B;

    --ivory: #FBF6ED;
    --cream: #FBF6ED;
    --cream-dark: #F4EBDA;
    --parchment: #F7F0E3;
    --sand: #E8DCC8;

    --walnut: #62391C;
    --bark: #784625;
    --earth: #6B5D52;
    --stone: #A09487;
    --dust: #C4B8AB;

    --dark: #62391C;
    --dark-brown: #784625;
    --dark-card: #4F2D15;
    --brown: #6B5D52;

    --terracotta: #A56A3B;
    --sage: #5B8C5A;
    --success: #5B8C5A;
    --danger: #C25450;
    --info: #5B8FAD;

    --glass-white: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(197, 156, 109, 0.12);

    /* ── Typography ── */
    --font-display: 'El Messiri', serif;
    --font-body: 'Readex Pro', sans-serif;
    --font-primary: 'Readex Pro', sans-serif;
    --font-secondary: 'El Messiri', serif;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(28, 20, 16, 0.04);
    --shadow-sm: 0 2px 8px rgba(28, 20, 16, 0.06);
    --shadow-md: 0 4px 16px rgba(28, 20, 16, 0.08);
    --shadow-lg: 0 8px 32px rgba(28, 20, 16, 0.10);
    --shadow-xl: 0 16px 48px rgba(28, 20, 16, 0.12);
    --shadow-glow: 0 0 40px rgba(197, 156, 109, 0.12);
    --shadow-card: 0 2px 12px rgba(28, 20, 16, 0.05);
    --shadow-card-hover: 0 12px 40px rgba(28, 20, 16, 0.10);
    --shadow-gold: 0 4px 20px rgba(149, 104, 59, 0.20);

    /* ── Spacing ── */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   BASE & RESET
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: var(--font-body);
    background: var(--ivory);
    color: var(--walnut);
    overflow-x: hidden;
    line-height: 1.7;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle warm grain texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.018;
    pointer-events: none;
    z-index: 9998;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(#n)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* Faint watermark */
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/contain no-repeat;
    opacity: 0.015;
    pointer-events: none;
    z-index: 0;
}

a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }
::selection { background: var(--amber-200); color: var(--walnut); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--parchment); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
    border-radius: 10px;
    border: 2px solid var(--parchment);
}
::-webkit-scrollbar-thumb:hover { background: var(--amber-600); }

/* Utilities */
.text-gradient {
    background: linear-gradient(135deg, var(--amber-300), #C59C6D, var(--amber-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.min-vh-65 { min-height: 65vh; }
.logo-watermark {
    position: absolute;
    pointer-events: none;
    opacity: 0.02;
    z-index: 0;
}

/* Scroll Progress */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber-400), var(--amber-300), var(--amber-400));
    z-index: 10000;
    transition: width 0.15s linear;
    box-shadow: 0 0 8px rgba(149, 104, 59, 0.3);
}

/* ============================================
   PRELOADER - Cinematic
   ============================================ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(120% 120% at 50% 34%, #43260f 0%, #2a1708 46%, #150c04 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .7s var(--ease-out), visibility .7s var(--ease-out);
    overflow: hidden;
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }

/* Soft golden aura breathing behind the mark — replaces the old rotating
   logo watermark. One clean, intentional light source. */
#preloader::before {
    content: '';
    position: absolute;
    width: min(72vw, 640px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, 0.18), rgba(201, 162, 75, 0.05) 45%, transparent 66%);
    filter: blur(6px);
    animation: ldAura 5.5s ease-in-out infinite;
}
@keyframes ldAura {
    0%, 100% { transform: scale(1);    opacity: .65; }
    50%      { transform: scale(1.14); opacity: 1;  }
}

/* Faint drifting star-dust — subtler than before so it reads as atmosphere. */
#preloader::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(201, 162, 75, 0.22), transparent),
        radial-gradient(1.5px 1.5px at 82% 70%, rgba(201, 162, 75, 0.16), transparent),
        radial-gradient(2px 2px   at 72% 30%, rgba(201, 162, 75, 0.18), transparent),
        radial-gradient(1.5px 1.5px at 28% 82%, rgba(201, 162, 75, 0.14), transparent),
        radial-gradient(2px 2px   at 55% 14%, rgba(201, 162, 75, 0.20), transparent);
    background-size: 460px 460px;
    animation: floatParticles 9s ease-in-out infinite alternate;
}
@keyframes floatParticles {
    0%   { transform: translateY(0)     translateX(0);   opacity: .45; }
    100% { transform: translateY(-18px) translateX(10px); opacity: .9; }
}

.loader-content { text-align: center; position: relative; z-index: 2; }

/* Logo holder — no rings or outlines. The mark floats above a soft pool of
   light that breathes; the motion itself is the loading cue. */
.loader-logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto 34px;
}
/* Breathing glow pool behind the logo — filled & blurred, never an outline. */
.loader-logo-wrap::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, 0.30), rgba(201, 162, 75, 0.08) 46%, transparent 68%);
    filter: blur(5px);
    animation: ldGlow 2.6s ease-in-out infinite;
}
@keyframes ldGlow {
    0%, 100% { transform: scale(0.82); opacity: 0.5; }
    50%      { transform: scale(1.18); opacity: 1;   }
}

.loader-logo {
    width: 118px;
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 28px rgba(201, 162, 75, 0.42));
    animation: logoFloat 3.2s ease-in-out infinite;
}
/* Gentle rise-and-fall — the logo drifts, out of phase with the glow, so the
   whole mark feels alive rather than spinning inside a wire ring. */
@keyframes logoFloat {
    0%, 100% { transform: translateY(0)     scale(1);    }
    50%      { transform: translateY(-10px) scale(1.03); }
}

/* Indeterminate progress — a light glides across, matching the load being of
   unknown length (better than a bar that fills once then sits full). */
.loader-bar {
    position: relative;
    width: 210px;
    height: 3px;
    background: rgba(201, 162, 75, 0.12);
    border-radius: 10px;
    margin: 0 auto 22px;
    overflow: hidden;
}
.loader-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, #c9a24b, #f0d79a, #c9a24b, transparent);
    animation: loadSlide 1.3s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes loadSlide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}

/* Brand name — no letter-spacing (it shatters Arabic ligatures) and no
   uppercase; a quiet pulse keeps it alive without shouting over the logo. */
.loader-text {
    margin: 0;
    max-width: 78vw;
    color: rgba(220, 190, 130, 0.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    font-family: var(--font-display);
    animation: textGlow 2.4s ease-in-out infinite alternate;
}
@keyframes textGlow {
    0%   { opacity: 0.45; }
    100% { opacity: 1; text-shadow: 0 0 24px rgba(201, 162, 75, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    #preloader::before, #preloader::after,
    .loader-logo-wrap::before, .loader-logo, .loader-bar-fill, .loader-text {
        animation: none;
    }
    .loader-bar-fill { width: 100%; transform: none; }
}

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    background: var(--walnut);
    color: var(--dust);
    font-size: 12px;
    padding: 9px 0;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid rgba(197, 156, 109, 0.06);
    font-weight: 300;
    letter-spacing: 0.3px;
}
.top-bar-content { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* Marquee viewport: clips the scrolling track. The track holds two identical
   passes of the items so the -50% loop is seamless. */
.top-bar-marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.top-bar-track {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 34s linear infinite;
}
.top-bar-marquee:hover .top-bar-track { animation-play-state: paused; }
.top-bar-item { display: inline-flex; align-items: center; gap: 7px; }
.top-bar-item i { color: var(--amber-400); font-size: 11px; }
.top-bar-content .separator { color: rgba(197, 156, 109, 0.3); font-weight: 100; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.top-bar-close {
    background: none;
    border: none;
    color: var(--stone);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 13px;
    opacity: 0.4;
    transition: var(--transition-fast);
    border-radius: 6px;
}
.top-bar-close:hover { opacity: 1; background: rgba(255,255,255,0.04); }

/* ============================================
   HEADER - Refined & Clean
   ============================================ */
.main-header {
    background: rgba(255, 251, 245, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: var(--transition);
    border-bottom: 1px solid rgba(28, 20, 16, 0.04);
}
.main-header .container {
    padding-top: 14px;
    padding-bottom: 14px;
    transition: var(--transition);
}
.main-header.scrolled {
    box-shadow: 0 1px 30px rgba(28, 20, 16, 0.06);
    background: rgba(255, 251, 245, 0.96);
}
.main-header.scrolled .container {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Logo on one edge, everything else grouped on the other edge with the gap
   between them (space-between). */
.header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header-end { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-end; min-width: 0; }

.header-logo img {
    height: 50px;
    width: auto;
    transition: var(--transition);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.04));
}
.main-header.scrolled .header-logo img { height: 50px !important; }

/* ===== Search — prominent ("strong") with live suggestions ===== */
.header-search { position: relative; flex: 1; width: 100%; max-width: 560px; min-width: 0; }
/* The pill border + focus ring live on the FORM so they always wrap the whole
   control (input + button) as one unit, full-width. */
.search-form {
    position: relative; display: flex; align-items: center; width: 100%;
    border: 2px solid var(--sand);
    border-radius: 999px;
    background: var(--parchment);
    box-shadow: 0 6px 18px -14px rgba(28,20,16,.4);
    transition: var(--transition);
}
.search-form:focus-within {
    border-color: var(--amber-400);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(197, 156, 109, .14), 0 12px 28px -16px rgba(160,116,50,.5);
}

/* leading magnifier inside the field */
.search-lead-icon {
    position: absolute;
    inset-inline-start: 18px;
    top: 50%; transform: translateY(-50%);
    color: var(--amber-500);
    font-size: 15px;
    pointer-events: none;
    opacity: .8;
    transition: var(--transition);
}
.search-input {
    width: 100%;
    /* room for the leading icon (start) and the submit button (end) */
    padding: 14px 20px;
    padding-inline-start: 46px;
    padding-inline-end: 120px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 400;
    background: transparent;
    transition: var(--transition);
    outline: none;
    color: var(--walnut);
    letter-spacing: 0.2px;
}
.search-input::placeholder { color: var(--stone); font-weight: 300; }
.search-form:focus-within .search-lead-icon { opacity: 1; transform: translateY(-50%) scale(1.08); }
.search-btn {
    position: absolute;
    inset-inline-end: 5px;
    top: 5px;
    bottom: 5px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 20px;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 18px -8px rgba(160,116,50,.6);
    transition: var(--transition);
}
.search-btn-text { font-size: 13.5px; }
.search-btn:hover { filter: brightness(1.05); transform: translateX(0) scale(1.03); box-shadow: 0 12px 24px -8px rgba(160,116,50,.7); }
.search-btn:active { transform: scale(.98); }

/* Clear (×) button inside the field — appears while typing. Sits just inside the
   submit button (desktop keeps a wide labelled submit, so it's shown on mobile
   where the submit collapses to an icon and the slot is predictable). */
.search-clear {
    position: absolute;
    inset-inline-end: 58px;
    top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px;
    display: none; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(28,20,16,.06); color: var(--stone);
    cursor: pointer; font-size: 13px; line-height: 1;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.search-clear:hover { background: rgba(28,20,16,.12); color: var(--walnut); }
.search-clear:active { transform: translateY(-50%) scale(.9); }
.search-clear[hidden] { display: none !important; }

/* Close (×) for the mobile search overlay — the requested close icon. */
.search-close {
    display: none;                       /* revealed only inside the mobile overlay */
    position: absolute;
    top: 8px; inset-inline-end: 8px;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(28,20,16,.06); color: var(--walnut);
    cursor: pointer; font-size: 15px; line-height: 1; z-index: 3;
    transition: background .15s ease, transform .15s ease;
}
.search-close:hover { background: rgba(28,20,16,.12); }
.search-close:active { transform: scale(.92); }

/* ===== Suggestions dropdown ===== */
.search-suggest {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: #fff;
    border: 1.5px solid rgba(197, 156, 109,.28);
    border-radius: 18px;
    box-shadow: 0 28px 60px -22px rgba(28,20,16,.5);
    z-index: 1200;
    overflow: hidden;
    animation: yc-suggest-in .22s cubic-bezier(.22,1,.36,1);
}
.search-suggest[hidden] { display: none; }
@keyframes yc-suggest-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.search-suggest-list { max-height: 64vh; overflow-y: auto; padding: 6px; }
.search-suggest-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 12px;
    text-decoration: none; color: var(--walnut);
    transition: background .15s ease;
    cursor: pointer;
}
.search-suggest-item:hover,
.search-suggest-item.is-active { background: linear-gradient(135deg, rgba(232,192,106,.18), rgba(197, 156, 109,.1)); }
.search-suggest-thumb {
    width: 50px; height: 50px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    background: var(--parchment) center/cover no-repeat;
    border: 1px solid var(--sand);
}
.search-suggest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.search-suggest-name {
    font-weight: 600; font-size: 14px; color: var(--walnut);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35;
}
.search-suggest-cat { font-size: 11.5px; color: var(--stone); }
/* Price on its own line under the name — a compact amber pill so it reads as a
   deliberate price tag rather than loose text. */
.search-suggest-price {
    display: inline-flex; align-items: baseline; gap: 6px;
    align-self: flex-start;
    font-weight: 800; font-size: 13.5px; color: var(--amber-600);
    white-space: nowrap;
    padding: 2px 10px; border-radius: 999px;
    background: rgba(227, 179, 65, .12);
}
.search-suggest-price .old { font-weight: 500; font-size: 11px; color: var(--stone); text-decoration: line-through; }
.search-suggest-all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-top: 1px solid var(--sand);
    background: linear-gradient(180deg, #fff, #fff8ee);
    color: var(--amber-700); font-weight: 700; font-size: 13.5px;
    text-decoration: none; transition: background .15s ease;
}
.search-suggest-all:hover { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: #fff; }
.search-suggest-empty { padding: 22px 16px; text-align: center; color: var(--stone); font-size: 13.5px; }
.search-suggest-empty i { display: block; font-size: 26px; opacity: .35; margin-bottom: 8px; }
.search-suggest-loading { padding: 18px; text-align: center; color: var(--stone); font-size: 13px; }

/* Breadcrumb separator: fa-chevron-left is the RTL default; in LTR it must point
   toward the trailing crumb (right). Mirror it for LTR. */
html[dir="ltr"] .breadcrumb-nav .fa-chevron-left { display: inline-block; transform: scaleX(-1); }

/* "Forward / more" CTAs use fa-arrow-left (RTL default points toward content).
   In LTR these should point right, so flip the icon when the link's purpose is
   "advance/next/see more". Targeted by class to avoid flipping genuine "back" arrows. */
html[dir="ltr"] .section-view-all .fa-arrow-left,
html[dir="ltr"] .promo-cta .fa-arrow-left,
html[dir="ltr"] .btn-details .fa-arrow-left,
html[dir="ltr"] .flash-cta .fa-arrow-left,
html[dir="ltr"] .pagination a .fa-chevron-left { display: inline-block; transform: scaleX(-1); }

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 4px; }
.header-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    color: var(--earth);
    position: relative;
    font-size: 12px;
    transition: var(--transition);
}
.header-action-btn i {
    font-size: 18px;
    margin-bottom: 2px;
    color: var(--earth);
    transition: var(--transition);
}
.header-action-btn:hover {
    background: var(--amber-50);
    color: var(--amber-600);
}
.header-action-btn:hover i { color: var(--amber-500); }
.action-text {
    font-size: 10px;
    font-weight: 500;
    color: var(--stone);
    letter-spacing: 0.3px;
}
.badge-count {
    position: absolute;
    top: 2px;
    left: 8px;
    background: var(--terracotta);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ivory);
    box-shadow: 0 2px 6px rgba(196, 94, 58, 0.25);
}

.language-switch { display: flex; gap: 2px; padding: 3px; background: var(--parchment); border-radius: 8px; margin-right: 5px; }
.lang-btn {
    padding: 4px 10px; border: none; border-radius: 6px; font-size: 11px;
    font-weight: 600; cursor: pointer; background: transparent; color: var(--stone);
    transition: var(--transition-fast); font-family: var(--font-body);
}
.lang-btn.active { background: var(--amber-500); color: #fff; }

/* Mobile Toggle */
.mobile-menu-toggle {
    width: 40px;
    height: 40px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 9px;
    transition: var(--transition);
}
.mobile-menu-toggle:hover { background: var(--amber-50); border-color: var(--amber-200); }
.mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--earth);
    border-radius: 2px;
    transition: var(--transition);
}
.mobile-menu-toggle:hover span { background: var(--amber-500); }

/* ============================================
   NAVIGATION - Elegant Strip
   ============================================ */
.main-nav {
    background: #fff;
    border-bottom: 1px solid rgba(28, 20, 16, 0.04);
    position: sticky;
    top: 82px;
    z-index: 998;
    transition: var(--transition);
    display: none;
    box-shadow: 0 1px 0 rgba(28, 20, 16, 0.02);
}
@media (min-width: 992px) { .main-nav { display: block; } }
.main-header.scrolled + .main-nav { top: 64px; }

.nav-menu { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 15px 20px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--earth);
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.2px;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 18px;
    left: 18px;
    height: 2px;
    background: var(--amber-500);
    transform: scaleX(0);
    transition: transform 0.35s var(--ease-out);
    border-radius: 2px 2px 0 0;
}
.nav-link:hover, .nav-item.active .nav-link { color: var(--amber-600); }
.nav-link:hover::after, .nav-item.active .nav-link::after { transform: scaleX(1); }
.nav-link i:not(.arrow) { font-size: 14px; color: var(--amber-500); opacity: 0.7; }
.nav-link .arrow { font-size: 9px; transition: var(--transition); margin-right: 2px; color: var(--stone); }
.nav-item:hover .arrow { transform: rotate(180deg); color: var(--amber-500); }
.nav-link-highlight { color: var(--terracotta) !important; font-weight: 600 !important; }

/* Mega Dropdown */
.mega-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 560px;
    background: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 20px 60px rgba(28, 20, 16, 0.10), 0 0 0 1px rgba(28, 20, 16, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.3s var(--ease-out);
    z-index: 100;
    border-top: 2px solid var(--amber-500);
    overflow: hidden;
}
.nav-item:hover .mega-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-dropdown-inner { display: flex; padding: 28px 30px; gap: 32px; }
.mega-col h4 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--amber-600);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--amber-100);
}
.mega-col ul li a {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    color: var(--earth);
    transition: var(--transition-fast);
    font-weight: 400;
}
.mega-col ul li a:hover { color: var(--amber-500); padding-right: 10px; }
.mega-featured-card {
    background: linear-gradient(145deg, var(--amber-50), var(--amber-100));
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mega-featured-badge {
    background: var(--amber-500);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 10px;
}
.mega-featured-card h5 { font-family: var(--font-display); font-size: 15px; color: var(--walnut); margin-bottom: 5px; }
.mega-featured-card p { font-size: 12px; color: var(--earth); }

/* ============================================
   MOBILE MENU
   ============================================ */
/* ── Mobile menu offcanvas — modernised ── */
#mobileMenu {
    max-width: 335px; width: 87vw; background: #fff; border: none !important;
    box-shadow: -20px 0 55px -22px rgba(28, 20, 16, .38);
}
html[dir="rtl"] #mobileMenu { box-shadow: 20px 0 55px -22px rgba(28, 20, 16, .38); }
#mobileMenu .offcanvas-header {
    padding: 18px 20px; border-bottom: 1px solid var(--sand);
    background: linear-gradient(180deg, var(--parchment), #fff);
}
.mobile-logo { height: 46px; width: auto; }
#mobileMenu .btn-close {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sand);
    background-color: #fff; background-size: 12px; opacity: .8;
    box-shadow: 0 3px 10px -5px rgba(28, 20, 16, .25); transition: all .2s ease;
}
#mobileMenu .btn-close:hover { opacity: 1; background-color: var(--amber-50); transform: rotate(90deg); }
#mobileMenu .offcanvas-body {
    padding: 18px 15px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
}

.mobile-search { margin-bottom: 16px; position: relative; }
.mobile-search::before {
    content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
    color: var(--amber-500); font-size: 13px; pointer-events: none;
}
.mobile-search .form-control {
    border-radius: 999px; border: 1.5px solid var(--sand);
    padding: 12px 18px; padding-inline-start: 42px;
    font-family: var(--font-body); font-size: 13.5px; background: var(--parchment); transition: all .18s ease;
}
.mobile-search .form-control:focus { border-color: var(--amber-400); background: #fff; box-shadow: 0 0 0 3px rgba(149, 104, 59, 0.08); }

.mobile-nav-list { margin: 0; padding: 0; list-style: none; }
.mobile-nav-list li a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 13px;
    font-weight: 600; color: var(--walnut); transition: all .16s ease; font-size: 14px;
}
.mobile-nav-list li a i:first-child {
    color: var(--amber-600); flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: rgba(197, 156, 109, .12); transition: all .16s ease;
}
.mobile-nav-list li a:hover, .mobile-nav-list li a.active {
    background: var(--amber-50); color: var(--amber-700, #7a5626);
}
.mobile-nav-list li a:hover i:first-child, .mobile-nav-list li a.active i:first-child {
    background: linear-gradient(135deg, #d4a843, #a07432); color: #fff;
}
.mobile-nav-list .sub-menu { padding-inline-start: 46px; display: none; }
.mobile-nav-list .has-sub.open .sub-menu { display: block; }
.mobile-nav-list .sub-menu a { font-weight: 500; font-size: 13px; padding: 9px 12px; color: var(--earth); }

.mobile-footer-actions {
    margin-top: auto; padding-top: 16px; border-top: 1.5px solid var(--sand);
    display: flex; flex-direction: column; gap: 2px;
}
.mobile-footer-actions a,
.mobile-footer-actions button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    color: var(--earth); font-weight: 600; font-size: 13.5px;
    padding: 11px 12px; border-radius: 11px; transition: background .16s ease;
}
.mobile-footer-actions a:hover, .mobile-footer-actions button:hover { background: var(--parchment); }
.mobile-footer-actions a i, .mobile-footer-actions button i { color: var(--amber-500); width: 20px; text-align: center; }
.mobile-footer-actions form button { color: #c0392b; }
.mobile-footer-actions form button i { color: #c0392b; }

/* Subtle staggered entrance for the items when the drawer opens. */
#mobileMenu.show .mobile-nav-list li,
#mobileMenu.show .mobile-footer-actions > * { animation: mmItemIn .34s var(--ease-out, ease) backwards; }
#mobileMenu.show .mobile-nav-list li:nth-child(1) { animation-delay: .04s; }
#mobileMenu.show .mobile-nav-list li:nth-child(2) { animation-delay: .07s; }
#mobileMenu.show .mobile-nav-list li:nth-child(3) { animation-delay: .10s; }
#mobileMenu.show .mobile-nav-list li:nth-child(4) { animation-delay: .13s; }
#mobileMenu.show .mobile-nav-list li:nth-child(5) { animation-delay: .16s; }
#mobileMenu.show .mobile-nav-list li:nth-child(6) { animation-delay: .19s; }
#mobileMenu.show .mobile-nav-list li:nth-child(n+7) { animation-delay: .22s; }
@keyframes mmItemIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* ============================================
   HERO - Cinematic Warm
   ============================================ */
.hero-section { position: relative; overflow: hidden; }
.hero-slide { position: relative; overflow: hidden; }

/* Full-page hero: fill the viewport below the sticky top-bar/header/nav.
   --hero-min is measured precisely in JS (viewport height − hero's offset);
   the calc() fallback keeps it near-full even before the script runs. The
   ≤767px media query below overrides this with its own tuned height. */
.hero-slide .hero-row {
    min-height: var(--hero-min, calc(100vh - 170px));
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: transform 10s ease;
}
.swiper-slide-active .hero-bg-img {
    transform: scale(1.06);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(14, 11, 8, 0.25) 0%, rgba(14, 11, 8, 0.55) 40%, rgba(14, 11, 8, 0.78) 100%);
    z-index: 2;
}
.hero-overlay-dark {
    background: linear-gradient(to left, rgba(14, 11, 8, 0.30) 0%, rgba(14, 11, 8, 0.60) 40%, rgba(14, 11, 8, 0.85) 100%);
}

.hero-text-col { position: relative; z-index: 3; padding: 70px 0; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(197, 156, 109, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--amber-300);
    padding: 9px 24px;
    border-radius: 60px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    letter-spacing: 0.5px;
}
.hero-badge i { font-size: 12px; }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 22px;
    text-shadow: 0 2px 40px rgba(0,0,0,0.2);
}

.hero-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,0.6);
    line-height: 1.9;
    margin-bottom: 36px;
    max-width: 480px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.15);
}

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

/* ── Buttons ── */
.btn-honey {
    background: var(--amber-500);
    color: #fff;
    border: none;
    padding: 14px 34px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(149, 104, 59, 0.25);
    cursor: pointer;
    letter-spacing: 0.3px;
}
.btn-honey::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.7s var(--ease-out);
}
.btn-honey:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 6px 24px rgba(149, 104, 59, 0.35);
    background: var(--amber-600);
}
.btn-honey:hover::before { left: 100%; }

/* Default: honey text + border, designed for light backgrounds (account cards, modals).
   On dark backgrounds, opt in with `.btn-outline-honey.on-dark` to get a translucent white look. */
.btn-outline-honey {
    background: transparent;
    color: var(--amber-500);
    border: 1.5px solid var(--amber-500);
    padding: 13px 30px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    cursor: pointer;
    letter-spacing: 0.3px;
    text-decoration: none;
}
.btn-outline-honey:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(149, 104, 59, 0.3);
    text-decoration: none;
}
.btn-outline-honey.on-dark {
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.28);
    backdrop-filter: blur(8px);
}
.btn-outline-honey.on-dark:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}

/* Hero Stats */
.hero-stats { display: flex; gap: 40px; }
.stat-item { text-align: center; color: #fff; }
.stat-number {
    display: block;
    font-size: 34px;
    font-weight: 700;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--amber-300), #C59C6D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-label { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 300; letter-spacing: 0.5px; }

/* Honeycomb Grid (hero visual) */
.hero-visual-col { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.hero-honeycomb-grid { position: relative; width: 380px; height: 400px; }
.honeycomb-cell {
    position: absolute; width: 140px; height: 160px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: var(--transition); cursor: pointer;
}
.honeycomb-cell:hover { transform: scale(1.12); z-index: 10; filter: brightness(1.1); }
.cell-inner {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: #fff; text-align: center; gap: 8px;
}
.cell-inner span { font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.cell-1 { top: 0; right: 120px; animation: hexFloat 6s ease-in-out infinite; }
.cell-2 { top: 80px; right: 0; animation: hexFloat 6s ease-in-out infinite 0.7s; }
.cell-3 { top: 80px; right: 240px; animation: hexFloat 6s ease-in-out infinite 1.4s; }
.cell-4 { top: 160px; right: 120px; animation: hexFloat 6s ease-in-out infinite 2.1s; }
.cell-5 { top: 240px; right: 0; animation: hexFloat 6s ease-in-out infinite 2.8s; }
@keyframes hexFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero Swiper */
.hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.25);
    opacity: 1;
    transition: all 0.4s var(--ease-out);
    border-radius: 10px;
}
.hero-pagination .swiper-pagination-bullet-active {
    background: var(--amber-400);
    width: 32px;
    box-shadow: 0 0 12px rgba(197, 156, 109, 0.4);
}
.hero-nav.swiper-button-next, .hero-nav.swiper-button-prev {
    color: #fff;
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.1);
}
.hero-nav::after { font-size: 15px; font-weight: 900; }
.hero-nav:hover { background: var(--amber-500); border-color: var(--amber-500); }

/* ============================================
   FEATURES BAR
   ============================================ */
.features-bar {
    padding: 0;
    position: relative;
    z-index: 5;
    margin-top: -44px;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: var(--radius-md);
    background: #fff;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(28, 20, 16, 0.04);
    box-shadow: var(--shadow-sm);
}
.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--amber-200);
}
.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--amber-500);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--transition-bounce);
    box-shadow: 0 3px 12px rgba(149, 104, 59, 0.2);
}
.feature-item:hover .feature-icon { transform: scale(1.1) rotate(6deg); border-radius: 50%; }
.feature-info h4 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--walnut);
    margin-bottom: 2px;
}
.feature-info p { font-size: 12px; color: var(--stone); margin: 0; font-weight: 300; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header { text-align: center; margin-bottom: 40px; position: relative; }
.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: right;
}
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amber-50);
    color: var(--amber-600);
    padding: 6px 18px;
    border-radius: 60px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    border: 1px solid var(--amber-100);
    letter-spacing: 0.5px;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: var(--walnut);
    margin-bottom: 8px;
    line-height: 1.3;
}
/* Optional section subtitle — a short descriptive line under the title. */
.section-subtitle {
    color: #8a7355;
    font-size: 14.5px;
    line-height: 1.75;
    margin: 2px 0 0;
    max-width: 560px;
    font-weight: 300;
}
/* Best-sellers: a modern gold accent under the title + a touch more air. */
.bestsellers-section { padding-top: 58px; padding-bottom: 58px; }
.bestsellers-section .section-title { position: relative; display: inline-block; }
.bestsellers-section .section-title::after {
    content: ''; display: block; width: 58px; height: 3px; margin-top: 10px;
    border-radius: 3px; background: linear-gradient(90deg, var(--amber-500), var(--amber-300));
}
.section-line { display: flex; align-items: center; justify-content: center; gap: 12px; }
.section-line::before, .section-line::after {
    content: ''; width: 50px; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--amber-300));
}
.section-line::after { background: linear-gradient(90deg, var(--amber-300), transparent); }
.hex-icon { color: var(--amber-400); font-size: 18px; }
.section-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--amber-600);
    font-weight: 600;
    font-size: 13px;
    transition: var(--transition);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--amber-100);
    background: var(--amber-50);
    letter-spacing: 0.3px;
}
.section-view-all:hover {
    color: #fff;
    background: var(--amber-500);
    border-color: var(--amber-500);
    gap: 10px;
}

/* ============================================
   CATEGORIES
   ============================================ */
.categories-section {
    padding: 50px 0 55px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 50%, var(--ivory) 100%);
}
.categories-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/contain no-repeat;
    opacity: 0.01;
    pointer-events: none;
}

.category-card-inner {
    text-align: center;
    padding: 30px 14px 24px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid rgba(28, 20, 16, 0.04);
    transition: all 0.35s var(--ease-out);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.category-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber-400), var(--amber-300), var(--amber-400));
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out);
    transform-origin: center;
}
.category-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(197, 156, 109, 0.04), transparent 70%);
    opacity: 0;
    transition: var(--transition);
}
.category-card:hover .category-card-inner {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--amber-200);
}
.category-card:hover .category-card-inner::before { transform: scaleX(1); }
.category-card:hover .category-card-inner::after { opacity: 1; }

.hexagon-shape {
    width: 64px;
    height: 74px;
    margin: 0 auto 16px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    transition: var(--transition-bounce);
    position: relative;
    z-index: 2;
}
.category-card:hover .hexagon-shape { transform: scale(1.12) rotate(12deg); }
.category-card-inner h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--walnut);
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
}
.category-card-inner p {
    font-size: 11px;
    color: var(--stone);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    font-weight: 300;
}
.category-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-600);
    background: var(--amber-50);
    padding: 3px 14px;
    border-radius: 50px;
    position: relative;
    z-index: 2;
    display: inline-block;
}

.honey-cat .hexagon-shape { background: linear-gradient(135deg, #C59C6D, #B0824F); box-shadow: 0 6px 18px rgba(149, 104, 59, 0.3); }
.oil-cat .hexagon-shape { background: linear-gradient(135deg, #5B8C5A, #3D7A3C); box-shadow: 0 6px 18px rgba(91, 140, 90, 0.3); }
.coffee-cat .hexagon-shape { background: linear-gradient(135deg, #7D5A50, #62391C); box-shadow: 0 6px 18px rgba(125, 90, 80, 0.3); }
.incense-cat .hexagon-shape { background: linear-gradient(135deg, #9B6BA4, #7B4B8C); box-shadow: 0 6px 18px rgba(155, 107, 164, 0.3); }
.spice-cat .hexagon-shape { background: linear-gradient(135deg, #A56A3B, #7A5029); box-shadow: 0 6px 18px rgba(196, 94, 58, 0.3); }
.herbal-cat .hexagon-shape { background: linear-gradient(135deg, #3D8B7A, #2D6B5A); box-shadow: 0 6px 18px rgba(61, 139, 122, 0.3); }

/* ============================================
   PRODUCT CARDS
   ============================================ */
.products-section {
    padding: 50px 0;
    position: relative;
}
.products-section:nth-of-type(even),
.products-alt {
    background: linear-gradient(180deg, var(--parchment) 0%, #F4EBDA 50%, var(--parchment) 100%);
}

.product-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(28, 20, 16, 0.04);
    transition: all 0.35s var(--ease-out);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(28, 20, 16, 0.08), 0 0 0 1px rgba(197, 156, 109, 0.1);
    border-color: rgba(197, 156, 109, 0.15);
}

/* Product Badges */
.product-badges { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.product-badges span {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
    animation: badgeIn 0.4s var(--ease-out) backwards;
    letter-spacing: 0.3px;
}
.product-badges span:nth-child(2) { animation-delay: 0.1s; }
@keyframes badgeIn { from { transform: translateX(15px); opacity: 0; } }
.badge-sale { background: #C25450; color: #fff; box-shadow: 0 2px 8px rgba(194, 84, 80, 0.25); }
.badge-new { background: var(--sage); color: #fff; box-shadow: 0 2px 8px rgba(91, 140, 90, 0.25); }
.badge-best { background: var(--amber-500); color: #fff; box-shadow: 0 2px 8px rgba(149, 104, 59, 0.25); }
.badge-limited { background: var(--terracotta); color: #fff; box-shadow: 0 2px 8px rgba(196, 94, 58, 0.25); }

/* Wishlist */
.product-wishlist {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dust);
    font-size: 14px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.product-wishlist:hover {
    background: #C25450;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(194, 84, 80, 0.25);
}
.product-wishlist.active { background: #C25450; color: #fff; }

/* Product Image */
.product-image {
    position: relative;
    overflow: hidden;
    /* square frame matches the product photos (all are 1:1 or 3:4 portrait) so
       cover fills the whole area edge-to-edge with no padding and minimal trim */
    aspect-ratio: 1 / 1;
    background: var(--parchment);
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.7s var(--ease-out);
}
.product-card:hover .product-img { transform: scale(1.06); }

/* Placeholder backgrounds */
.product-image-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 50px; transition: all 0.5s var(--ease-out);
}
.honey-placeholder { color: var(--amber-500); background: linear-gradient(135deg, var(--amber-50), var(--amber-100)); }
.oil-placeholder { color: var(--amber-600); background: linear-gradient(135deg, #F7F0E3, #E8DCC8); }
.coffee-placeholder { color: #7A5029; background: linear-gradient(135deg, #F4EBDA, #E8DCC8); }
.incense-placeholder { color: #95683B; background: linear-gradient(135deg, #F4EBDA, #E8D4B8); }

.product-card:hover .product-image-placeholder { transform: scale(1.08) rotate(2deg); }

/* Product Overlay */
.product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(transparent, rgba(14, 11, 8, 0.3));
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out);
}
.product-card:hover .product-overlay { transform: translateY(0); }
.overlay-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--walnut);
    font-size: 13px;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-sm);
}
.overlay-btn:hover { background: var(--amber-500); color: #fff; transform: scale(1.08); }

/* Product Info */
.product-info { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.product-category {
    font-size: 10px;
    font-weight: 600;
    color: var(--amber-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}
.product-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--walnut);
    margin-bottom: 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Always reserve 2 lines (2 × line-height) so a one-line name takes the
       same vertical space as a two-line one — keeps every product card the
       same height and aligns the price/actions row across the grid. */
    min-height: 3em;
    transition: var(--transition-fast);
}
.product-card:hover .product-title, .product-card:hover .product-title a { color: var(--amber-600); }
.product-title a { color: inherit; transition: var(--transition-fast); }

.product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.product-rating .stars { display: flex; gap: 1px; }
.product-rating .stars i { color: var(--amber-400); font-size: 11px; }
.rating-count { font-size: 10px; color: var(--dust); font-weight: 400; }

.product-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 0; margin-top: auto; }
.current-price {
    font-size: 19px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--amber-600);
}
.old-price { font-size: 12px; color: var(--dust); text-decoration: line-through; }

.product-actions { display: flex; gap: 8px; align-items: center; }
.btn-cart-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--amber-500);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-bounce);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(149, 104, 59, 0.2);
}
.btn-cart-icon:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-gold);
    background: var(--amber-600);
}
.btn-details {
    flex: 1;
    background: var(--parchment);
    border: 1px solid var(--sand);
    color: var(--walnut);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
    text-decoration: none;
    letter-spacing: 0.2px;
}
.btn-details:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}
.btn-details i { font-size: 10px; transition: var(--transition); }
.btn-details:hover i { transform: translateX(-4px); }

.btn-add-cart {
    flex: 1;
    background: transparent;
    border: 1.5px solid var(--amber-200);
    color: var(--amber-600);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: var(--transition);
    cursor: pointer;
}
.btn-add-cart:hover { background: var(--amber-500); color: #fff; border-color: var(--amber-500); }
.btn-buy-now {
    background: var(--amber-500);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(149, 104, 59, 0.2);
}
.btn-buy-now:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); background: var(--amber-600); }

/* ============================================
   PROMO BANNER
   ============================================ */
.promo-banner { padding: 20px 0 10px; }
.promo-card {
    background: linear-gradient(135deg, #62391C 0%, #784625 50%, #62391C 100%);
    border-radius: var(--radius-xl);
    padding: 44px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 156, 109, 0.06);
}
.promo-bg-pattern {
    position: absolute;
    inset: 0;
    background:
        url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/200px no-repeat,
        radial-gradient(circle at 10% 90%, rgba(197, 156, 109, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(197, 156, 109, 0.03) 0%, transparent 40%);
    opacity: 0.5;
    pointer-events: none;
}
.promo-bg-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/200px no-repeat;
    opacity: 0.03;
}

.promo-content { position: relative; z-index: 2; }
.promo-badge {
    display: inline-block;
    background: var(--amber-500);
    color: #fff;
    padding: 7px 22px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(149, 104, 59, 0.25);
    letter-spacing: 0.3px;
}
.promo-content h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 4vw, 34px);
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.3;
}
.promo-content p { color: rgba(255,255,255,0.45); font-size: 14px; margin-bottom: 28px; font-weight: 300; line-height: 1.7; }

.promo-countdown { display: flex; gap: 12px; margin-bottom: 18px; }
.countdown-item {
    background: rgba(197, 156, 109, 0.06);
    border: 1px solid rgba(197, 156, 109, 0.1);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
    min-width: 74px;
}
.countdown-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--amber-300), #C59C6D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.countdown-label { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 5px; display: block; font-weight: 300; letter-spacing: 0.5px; }

.promo-visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.promo-hex-container { position: relative; }
.promo-hex {
    width: 190px;
    height: 220px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: hexFloat 6s ease-in-out infinite;
    box-shadow: 0 20px 60px rgba(149, 104, 59, 0.2);
}
.promo-price-tag {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: var(--radius-md);
    padding: 12px 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.promo-price-tag .was { display: block; font-size: 12px; color: var(--dust); text-decoration: line-through; }
.promo-price-tag .now {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--amber-600);
    font-family: var(--font-display);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section {
    padding: 55px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 50%, var(--ivory) 100%);
}
.testimonials-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 350px;
    background: url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/contain no-repeat;
    opacity: 0.01;
    pointer-events: none;
}
/* Equal-height cards: let each slide size to the flex row (Swiper's wrapper is
   display:flex), then the card fills it — so a 2-line review and a 6-line review
   render at the SAME height across the row instead of ragged. */
.testimonialSwiper .swiper-wrapper { align-items: stretch; }
.testimonialSwiper .swiper-slide { height: auto; display: flex; }
.testimonial-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
    border-radius: 22px;
    padding: 34px 30px 26px;
    border: 1px solid rgba(197, 156, 109, 0.16);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
    width: 100%;
    /* Fixed height so EVERY card is identical regardless of review length or
       whether an avatar/name is present — the Swiper's stretch wasn't equalizing
       slides, so we pin the height here and clip any overflow. */
    height: 300px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px -20px rgba(90, 60, 30, 0.30);
}
/* Push the author block to the bottom so footers line up even when review text
   lengths differ. */
.testimonial-card .testimonial-author { margin-top: auto; }
/* Decorative quote glyph at the reading-start corner. */
.testimonial-card::before {
    content: '\201D';
    position: absolute;
    top: 14px;
    inset-inline-start: 24px;
    font-size: 64px;
    color: rgba(197, 156, 109, 0.15);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
/* Gold accent bar that sweeps in across the top on hover. */
.testimonial-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--amber-300), var(--amber-500));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s var(--ease-out);
}
.testimonial-card:hover {
    border-color: rgba(197, 156, 109, 0.42);
    box-shadow: 0 24px 48px -24px rgba(90, 60, 30, 0.42);
    transform: translateY(-6px);
}
.testimonial-card:hover::after { transform: scaleX(1); }

.testimonial-stars {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 18px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(227, 179, 65, 0.10);
}
.testimonial-stars i { color: #E3B341; font-size: 14px; }
.testimonial-stars i.far { color: #e3d6be; }
.testimonial-text {
    font-size: 15px;
    line-height: 1.9;
    color: #4a3f33;
    margin-bottom: 20px;
    font-weight: 400;
    /* Show ~3 lines then truncate. Fixed height (not min) so short and long
       reviews occupy the same space; overflow:hidden crops longer text even when
       it arrives as multiple <p> blocks (rich HTML) that would defeat line-clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(1.9em * 3);   /* exactly 3 lines (line-height 1.9) */
}
/* Rich-text reviews arrive wrapped in <p>/<div>; strip their margins so the
   3-line height above is exact and the quote glyph doesn't get pushed. */
.testimonial-text.rich-content > * { margin-top: 0; margin-bottom: 0; }
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(197, 156, 109, 0.16);
}
.author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-display);
    box-shadow: 0 6px 16px rgba(149, 104, 59, 0.30);
    border: 3px solid #fff;
    outline: 1px solid rgba(197, 156, 109, 0.30);
    outline-offset: 1px;
    flex-shrink: 0;
}
.author-info h5 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--walnut);
    margin: 0 0 2px;
}
.author-info span { font-size: 12.5px; color: var(--stone); font-weight: 400; }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter-section { padding: 25px 0 55px; }
.newsletter-card {
    background: linear-gradient(135deg, #62391C, #784625, #62391C);
    border-radius: var(--radius-xl);
    padding: 48px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 156, 109, 0.06);
}
.newsletter-bg-hex {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}
.newsletter-card h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.newsletter-card p { color: rgba(255,255,255,0.4); font-size: 14px; font-weight: 300; }
.newsletter-form .input-group {
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    padding: 5px;
    border: 1px solid rgba(197, 156, 109, 0.08);
}
.newsletter-form .form-control {
    background: transparent;
    border: none;
    color: #fff;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
}
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,0.25); }
.newsletter-form .form-control:focus { box-shadow: none; background: transparent; color: #fff; }
.newsletter-form .btn-honey { border-radius: 9px; white-space: nowrap; }

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    background: var(--walnut);
    color: rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}
.main-footer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: url('../Images/Logo.png?v=D5_NHONH8BtIjGaFTjVMAm0Vs3s') center/contain no-repeat;
    opacity: 0.01;
    pointer-events: none;
}
.footer-top { padding: 64px 0 32px; position: relative; z-index: 2; }
.footer-logo { height: 60px; margin-bottom: 18px; filter: brightness(1.1); }
.footer-brand p { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,0.35); margin-bottom: 22px; font-weight: 300; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(197, 156, 109, 0.06);
    border: 1px solid rgba(197, 156, 109, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber-400);
    font-size: 16px;
    transition: var(--transition);
}
.footer-social a:hover {
    background: var(--amber-500);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(149, 104, 59, 0.2);
    border-color: var(--amber-500);
}

.footer-links h4, .footer-contact h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}
.footer-links h4::after, .footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 2px;
    background: var(--amber-500);
    border-radius: 2px;
}
.footer-links ul li a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    transition: var(--transition-fast);
    font-weight: 300;
}
.footer-links ul li a:hover { color: var(--amber-400); padding-right: 8px; }
.footer-contact ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    font-weight: 300;
}
.footer-contact ul li i { color: var(--amber-400); width: 16px; text-align: center; font-size: 13px; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 22px 0;
    position: relative;
    z-index: 2;
}
.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.25); margin: 0; font-weight: 300; }
/* "Developed by" credit — green outlined pill (matches the dashboard footer). */
.footer-dev-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    color: #1d9d52; background: transparent;
    border: 1.5px solid #25d366;
    text-decoration: none; font-weight: 600;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    vertical-align: middle;
}
.footer-dev-link i { color: #25d366; font-size: 14px; transition: color .2s ease; }
.footer-dev-link:hover, .footer-dev-link:focus-visible {
    background: #25d366; border-color: #25d366; color: #fff; text-decoration: none; outline: none;
}
.footer-dev-link:hover i, .footer-dev-link:focus-visible i { color: #fff; }

/* Show all sections immediately — cancel the AOS scroll-reveal delay so
   headers, products, categories, FAQ, ads, etc. are visible without waiting. */
[data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Wide page width — use most of the screen so there's minimal empty space
   on the left/right, on every page. Capped so it doesn't stretch on huge
   monitors. Overrides Bootstrap's narrower responsive .container widths. */
.container { width: 95% !important; max-width: 1760px !important; padding-left: 24px !important; padding-right: 24px !important; }

/* Tighter vertical rhythm between home sections (less empty space). */
.features-bar,
.categories-section,
.flash-sale-section,
.promo-section,
.products-section,
.ads-section,
.faq-section,
.stats-section,
.testimonials-section,
.cat-block-section,
.discount-section,
.bestsellers-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
/* Pull the trailing margin off section blocks that add their own bottom gap. */
.home-section + .home-section { margin-top: 0 !important; }
.section-header, .section-header-row { margin-bottom: 16px !important; }
.payment-methods { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 26px; color: rgba(255,255,255,0.15); }
/* Accepted-payment brand logos sit on small white chips so their real colours
   (Visa blue, Meeza teal, etc.) stay legible on the dark footer. */
.pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 4px 9px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 3px 9px -4px rgba(0,0,0,.5);
    flex: 0 0 auto;
}
.pay-chip .pay-logo { height: 22px; width: auto; display: block; }
.payment-badge {
    font-size: 10px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.25);
    font-weight: 400;
}

/* Developer credit — sits on a new line under copyright + payment row, centered
   and quiet. The WhatsApp icon greens up on hover to signal the contact link. */
.footer-dev-credit {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    flex-wrap: wrap;
}
.footer-dev-credit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.18);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    font-weight: 500;
}
.footer-dev-credit a i { color: #25d366; font-size: 14px; }
.footer-dev-credit a:hover,
.footer-dev-credit a:focus-visible {
    color: #ffffff;
    background: rgba(37, 211, 102, 0.16);
    border-color: rgba(37, 211, 102, 0.35);
    outline: none;
}
.footer-dev-credit .dev-name { font-weight: 600; }

/* ============================================
   CART SIDEBAR
   ============================================ */
.cart-sidebar-header { background: var(--amber-500); color: #fff; }
.cart-sidebar-header h5 { font-family: var(--font-display); font-weight: 700; }
.cart-sidebar-header .btn-close { filter: brightness(0) invert(1); }
.empty-cart { text-align: center; padding: 60px 20px; }
.empty-cart-icon {
    width: 90px; height: 90px; margin: 0 auto 20px; background: var(--amber-50);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--amber-300);
}
.empty-cart h4 { font-family: var(--font-display); font-weight: 700; color: var(--walnut); margin-bottom: 8px; }
.empty-cart p { color: var(--stone); font-size: 13px; margin-bottom: 24px; font-weight: 300; }

/* ============================================
   SCROLL TO TOP & WHATSAPP
   ============================================ */
.scroll-to-top {
    position: fixed;
    bottom: 32px;
    /* Logical start edge so it always sits opposite the chat widget (which is
       on the inline-end edge): bottom-left in LTR, bottom-right in RTL. This
       prevents the RTL overlap where both landed in the bottom-left corner. */
    inset-inline-start: 32px;
    width: 48px;
    height: 48px;
    background: var(--amber-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 3px 16px rgba(149, 104, 59, 0.25);
    z-index: 990;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(149, 104, 59, 0.35); background: var(--amber-600); }

.whatsapp-float {
    position: fixed;
    bottom: 92px;
    left: 32px;
    width: 52px;
    height: 52px;
    background: #25D366;
    color: #fff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 3px 16px rgba(37, 211, 102, 0.3);
    z-index: 990;
    transition: var(--transition);
    animation: waPulse 3s ease-in-out infinite;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 3px 16px rgba(37, 211, 102, 0.3); }
    50% { box-shadow: 0 3px 24px rgba(37, 211, 102, 0.5), 0 0 0 8px rgba(37, 211, 102, 0.05); }
}

/* ============================================
   SWIPER GLOBAL
   ============================================ */
.swiper-pagination-bullet {
    background: var(--amber-400);
    opacity: 0.2;
    width: 8px;
    height: 8px;
    transition: all 0.4s var(--ease-out);
    border-radius: 10px;
}
.swiper-pagination-bullet-active {
    background: var(--amber-500);
    opacity: 1;
    width: 28px;
    box-shadow: 0 0 8px rgba(149, 104, 59, 0.3);
}

.products-section .swiper {
    padding: 8px 0 44px;
    position: relative;
}
.products-section .swiper-button-next,
.products-section .swiper-button-prev {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--sand);
    color: var(--amber-500);
    transition: var(--transition);
    top: 35%;
}
.products-section .swiper-button-next::after,
.products-section .swiper-button-prev::after { font-size: 14px; font-weight: 900; }
.products-section .swiper-button-next:hover,
.products-section .swiper-button-prev:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
    box-shadow: var(--shadow-gold);
}
.products-section .swiper-button-next { right: 5px; }
.products-section .swiper-button-prev { left: 5px; }
.products-section .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 12px;
}
@media (max-width: 767px) {
    .products-section .swiper-button-next,
    .products-section .swiper-button-prev { display: none; }
}

.testimonials-section .swiper {
    padding: 10px 10px 50px;
}
.testimonials-section .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 10px;
}

/* Toast */
.toast-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--amber-500);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 6px 24px rgba(149, 104, 59, 0.3);
    opacity: 0;
    transition: all 0.4s var(--ease-out);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    letter-spacing: 0.3px;
}
.toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cart-bounce { animation: cartBounce 0.5s ease; }
@keyframes cartBounce { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* Ripple */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}
@keyframes rippleEffect {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(4); opacity: 0; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
    .hero-honeycomb-grid { width: 320px; height: 350px; }
    .honeycomb-cell { width: 120px; height: 138px; }
    .cell-1 { right: 100px; } .cell-2 { right: 0; } .cell-3 { right: 200px; } .cell-4 { right: 100px; } .cell-5 { right: 0; }
}
@media (max-width: 991px) {
    .header-search { display: none; }
    .header-end { flex: 0 0 auto; gap: 8px; }
    .header-actions .action-text { display: none; }
    .header-actions { gap: 2px; }
    .header-action-btn { padding: 6px 8px; }
    .header-action-btn i { font-size: 18px; }
    .language-switch { display: none; }
    .header-wrapper { gap: 10px; }
    .header-logo img { height: 44px; }
    .main-header .container { padding-top: 10px; padding-bottom: 10px; }
    .hero-visual-col { display: none; }
    .hero-text-col { text-align: center; }
    .hero-subtitle { margin: 0 auto 28px; }
    .hero-btns { justify-content: center; }
    .hero-stats { justify-content: center; }
    .promo-card { padding: 28px; }
    .promo-visual { display: none; }
    .newsletter-card { padding: 32px; text-align: center; }
    .newsletter-form { margin-top: 20px; }
}
@media (max-width: 767px) {
    .feature-item { flex-direction: column; text-align: center; padding: 16px 10px; }
    .feature-icon { width: 42px; height: 42px; font-size: 16px; }
    .feature-info h4 { font-size: 13px; }
    .feature-info p { font-size: 11px; }
    .category-card-inner { padding: 22px 8px; }
    .hexagon-shape { width: 50px; height: 58px; font-size: 20px; }
    .products-section { padding: 40px 0; }
    .section-title { font-size: 22px; }
    .promo-countdown { flex-wrap: wrap; justify-content: center; }
    .footer-bottom-content { flex-direction: column; text-align: center; }
    .features-bar { margin-top: -20px; }
    .products-section .swiper { padding: 5px 0 35px; }
    .hero-badge { font-size: 12px; padding: 7px 18px; }
    .newsletter-card { text-align: center; }
    .newsletter-form { margin-top: 16px; }
}
@media (max-width: 575px) {
    .header-logo img { height: 46px; }
    .hero-title { font-size: 24px; }
    .hero-subtitle { font-size: 14px; }
    .hero-btns { gap: 10px; }
    .hero-btns .btn-honey, .hero-btns .btn-outline-honey { padding: 11px 22px; font-size: 13px; }
    .products-section .swiper { padding: 5px 0 30px; }
    .hero-stats { gap: 18px; }
    .stat-number { font-size: 24px; }
    .stat-label { font-size: 10px; }
    .promo-card, .newsletter-card { padding: 22px; }
    .footer-top { padding: 40px 0 16px; }
    .features-bar { margin-top: -16px; }
    .hero-floating-products { display: none; }
    .section-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================
   MODERN MOBILE PRODUCT CARDS (≤ 575px)
   Tighter rhythm, cleaner actions, softer depth, and badges/wishlist split to
   opposite corners so they stop overlapping. Touch devices have no hover, so the
   eye-overlay is dropped and the wishlist heart stays visible.
   ============================================ */
@media (max-width: 575.98px) {
    .product-card {
        border-radius: 18px;
        border-color: rgba(197, 156, 109, .12);
        box-shadow: 0 8px 22px -12px rgba(28, 20, 16, .18);
    }
    .product-card:active { transform: scale(.985); transition: transform .12s ease; }

    /* Badges → inline-end (visual end), wishlist → inline-start: no more overlap. */
    .product-badges { top: 10px; inset-inline-end: 10px; inset-inline-start: auto; right: auto; left: auto; gap: 5px; }
    .product-badges span { font-size: 9px; padding: 4px 9px; border-radius: 7px; }
    .product-wishlist {
        top: 10px; inset-inline-start: 10px; inset-inline-end: auto; right: auto; left: auto;
        width: 34px; height: 34px; font-size: 13px; opacity: 1;
    }

    /* No hover on touch — hide the eye overlay; the whole image already links out. */
    .product-overlay { display: none; }

    /* Info block — compact and legible. */
    .product-info { padding: 11px 12px 13px; }
    .product-category { font-size: 9px; letter-spacing: 1px; margin-bottom: 4px; }
    .product-title { font-size: 13px; line-height: 1.4; margin-bottom: 6px; min-height: 2.55em; }
    .product-rating { gap: 5px; margin-bottom: 8px; }
    .product-rating .stars i { font-size: 10px; }
    .rating-count { font-size: 9.5px; }
    .product-price { gap: 6px; margin-bottom: 0; }
    .current-price { font-size: 16.5px; }
    .old-price { font-size: 11px; }

    /* Actions — details grows, cart is a clear round accent button. */
    .product-actions { gap: 7px; }
    .btn-cart-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 13.5px; }
    .btn-details { padding: 9px 10px; font-size: 11.5px; border-radius: 12px; }
}

/* ============================================
   SLIMMER MOBILE HEADER + SHRINK-ON-SCROLL (≤ 767px)
   The mobile base was already near the desktop "scrolled" size, so scrolling
   barely shrank anything. Give mobile its own compact base and a distinct, tighter
   scrolled state (smaller logo, less padding, subtle blur/shadow) that animates.
   ============================================ */
@media (max-width: 767.98px) {
    .main-header .container { padding-top: 10px; padding-bottom: 10px; }
    .header-logo img { height: 42px; }

    /* Scrolled: noticeably slimmer. */
    .main-header.scrolled .container { padding-top: 5px; padding-bottom: 5px; }
    .main-header.scrolled .header-logo img { height: 31px; }
    .main-header.scrolled { box-shadow: 0 2px 18px rgba(28, 20, 16, .10); }
    .main-header.scrolled .header-action-btn { padding: 5px 7px; }
    .main-header.scrolled .header-action-btn i { font-size: 17px; }
    /* Keep the category nav tucked right under the shrunk header. */
    .main-header.scrolled + .main-nav { top: 50px; }
}
@media (max-width: 575.98px) {
    .header-logo img { height: 40px; }
    .main-header.scrolled .header-logo img { height: 30px; }
}

/* ============================================
   REFINED MOBILE HERO (≤ 767px)
   The hero row is hard-coded to min-height:560px with 70px text padding — far too
   tall on a phone. Give it a viewport-relative height, a bottom-anchored scrim so
   centered copy stays legible over any image, brighter subtitle, and full-width
   stacked CTAs.
   ============================================ */
@media (max-width: 767.98px) {
    /* Override the inline min-height:560px → a comfortable slice of the viewport. */
    .hero-slide .row { min-height: 60vh !important; }
    .hero-text-col { padding: 50px 0 56px; text-align: center; }
    /* Bottom-up scrim reads better than the side gradient under centered text. */
    .hero-overlay,
    .hero-overlay-dark {
        background: linear-gradient(to top, rgba(14, 11, 8, .86) 0%, rgba(14, 11, 8, .55) 46%, rgba(14, 11, 8, .34) 100%);
    }
    .hero-badge { margin-bottom: 16px; }
    .hero-subtitle { color: rgba(255, 255, 255, .84); margin: 0 auto 24px; max-width: 92%; }
    .hero-btns { justify-content: center; margin-bottom: 4px; }
}
@media (max-width: 575.98px) {
    .hero-slide .row { min-height: 56vh !important; }
    .hero-text-col { padding: 40px 0 46px; }
    .hero-title { font-size: 25px; line-height: 1.3; margin-bottom: 14px; }
    .hero-subtitle { font-size: 13.5px; line-height: 1.7; margin-bottom: 22px; }
    .hero-badge { font-size: 11.5px; padding: 6px 16px; }
    /* Stacked, thumb-width CTAs. */
    .hero-btns { flex-direction: column; gap: 10px; width: 100%; }
    .hero-btns .btn-honey, .hero-btns .btn-outline-honey { width: 100%; justify-content: center; }
}

/* ============================================
   REFINED MOBILE FOOTER (≤ 767px)
   Centre the brand block, tighten the stacked columns, and add breathing room so
   the footer reads cleanly instead of as a tall plain list.
   ============================================ */
@media (max-width: 767.98px) {
    .footer-top { padding: 36px 0 12px; }
    .footer-logo { height: 50px; margin-bottom: 14px; }

    /* Brand block centred; link columns stay start-aligned as tidy stacks. */
    .footer-brand { text-align: center; }
    .footer-brand p { max-width: 340px; margin-inline: auto; margin-bottom: 16px; font-size: 12.5px; line-height: 1.8; }
    .footer-social { justify-content: center; gap: 9px; }
    .footer-social a { width: 38px; height: 38px; font-size: 15px; }

    /* Each stacked column separated by a hairline for structure. */
    .footer-top .row > [class*="col-"] { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .footer-top .row > [class*="col-"]:last-child { border-bottom: 0; margin-bottom: 4px; padding-bottom: 0; }

    .footer-links h4, .footer-contact h4 { font-size: 15px; margin-bottom: 13px; padding-bottom: 9px; }
    .footer-links ul li a { padding: 5px 0; font-size: 12.5px; }
    .footer-contact ul li { padding: 6px 0; font-size: 12.5px; }

    .footer-bottom { padding: 16px 0; }
    .footer-bottom p { font-size: 11.5px; }
}

/* ============================================
   MODERN MOBILE HEADER (≤ 991px)
   Three balanced zones: [ menu ]   [ centred logo ]   [ search + cart ]. The
   search is a single icon that drops a full-width search bar under the header
   (desktop keeps the inline box). Language switcher, dark-mode, auth links,
   wishlist and notifications live in the side menu.
   ============================================ */
.mobile-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: none; background: none; cursor: pointer;
    color: var(--walnut, #4a2f18); font-size: 20px; line-height: 1;
    border-radius: 12px; transition: background .15s ease, color .15s ease;
}
.mobile-search-toggle:hover { background: var(--amber-50, #fbf3e6); }
@keyframes hdrSearchDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    /* Positioned so the revealed search bar can drop full-width beneath the row. */
    .header-wrapper { gap: 6px; align-items: center; position: relative; }
    /* Equal-weight side zones so the centred logo is perfectly centred:
       [menu ⟵ flex:1]   [ big logo ]   [flex:1 ⟶ search + cart]  */
    .mobile-menu-toggle { order: -1; margin: 0; flex: 1 1 0; display: flex; align-items: center; justify-content: flex-start; }
    .header-logo { order: 0; flex: 0 0 auto; display: flex; justify-content: center; }
    .header-logo img { height: 56px; }
    .header-end { order: 1; flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
    .header-actions { gap: 0; justify-content: flex-end; }
    .header-actions > *:not(.header-cart-wrap) { display: none !important; }
    /* Bigger, modern touch targets for the two side controls. */
    .header-cart-wrap .cart-btn i { font-size: 21px; }

    /* Search bar: collapsed by default, revealed as a full-width dropdown when the
       icon is tapped (JS toggles .search-open on the header). */
    .header-search {
        display: none;                      /* not !important — .search-open reveals it */
        position: absolute;
        top: calc(100% + 10px);
        inset-inline: 0;
        max-width: none;
        z-index: 1200;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: var(--parchment, #fffbf5);
        border: 1px solid rgba(197, 156, 109, .18);
        border-radius: 20px;
        box-shadow: 0 22px 48px -18px rgba(28, 20, 16, .34);
        animation: hdrSearchDrop .22s cubic-bezier(.22, 1, .36, 1);
    }
    .main-header.search-open .mobile-search-toggle { background: var(--amber-50, #fbf3e6); color: var(--amber-600, #a07432); }
    /* NOTE: the mobile search-overlay ROW LAYOUT lives in premium.css (it force-sets
       display on .header-search with !important and loads last), so it owns the
       flex row, the close/clear buttons and the hidden submit. */

    /* Shrink-on-scroll, but keep the logo prominent. */
    .main-header.scrolled .header-logo img { height: 44px; }
}
body.dark-mode .main-header.search-open .header-search { background: var(--surface-dark, #2a2420); border-color: rgba(197, 156, 109, .22); }
@media (max-width: 575.98px) {
    .header-logo img { height: 50px; }
    .main-header.scrolled .header-logo img { height: 40px; }
}

/* Language + dark-mode row inside the side menu (moved out of the header). */
.mobile-quick-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mobile-quick-row .ycl-wrap { flex: 1 1 auto; }
.mobile-quick-row .ycl-toggle { width: 100%; justify-content: space-between; }
.mobile-dark-toggle {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--sand); background: var(--parchment); color: var(--walnut, #4a2f18);
    border-radius: 999px; padding: 10px 15px; font-weight: 600; font-size: 13px; cursor: pointer; line-height: 1;
}
.mobile-dark-toggle span { display: none; }
.mobile-dark-toggle .dm-sun { display: none; }
body.dark-mode .mobile-dark-toggle { background: var(--surface-dark); border-color: rgba(197, 156, 109, .2); color: var(--text-dark); }
body.dark-mode .mobile-dark-toggle .dm-moon { display: none; }
body.dark-mode .mobile-dark-toggle .dm-sun { display: inline; color: var(--amber-400); }

/* ── Mobile menu: department → subcategory accordion (+ toggle) ── */
.mobile-nav-list .yc-m-dept { display: block; }
.mobile-nav-list .yc-m-dept-row { display: flex; align-items: center; gap: 6px; }
.mobile-nav-list .yc-m-dept-link { flex: 1 1 auto; min-width: 0; }
.yc-m-plus {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 10px;
    background: rgba(197, 156, 109, .10); color: var(--amber-600, #a07432);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .18s ease;
}
.yc-m-plus:hover { background: var(--amber-50); }
.yc-m-plus i { transition: transform .22s ease; }
.yc-m-dept.open .yc-m-plus { background: linear-gradient(135deg, #d4a843, #a07432); color: #fff; }
.yc-m-dept.open .yc-m-plus i { transform: rotate(45deg); }   /* + becomes × */
.yc-m-subs { list-style: none; margin: 2px 0 6px; padding: 0; display: none; }
.yc-m-dept.open .yc-m-subs { display: block; animation: mmSubIn .25s ease; }
@keyframes mmSubIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.yc-m-subs li a {
    display: flex; align-items: center; gap: 9px; padding: 8px 12px;
    margin-inline-start: 30px; border-radius: 10px;
    font-size: 13px; font-weight: 500; color: var(--earth, #6b5a3f);
}
.yc-m-subs li a i:first-child { width: auto; height: auto; background: none; color: var(--amber-500); font-size: 12px; }
.yc-m-subs li a:hover { background: var(--amber-50); color: var(--amber-700, #7a5626); }

/* ---- Product image lightbox (zoom + navigate) ---- */
.yc-lightbox { position: fixed; inset: 0; z-index: 20000; display: none; align-items: center; justify-content: center; background: rgba(20, 14, 8, .93); backdrop-filter: blur(3px); }
.yc-lightbox.open { display: flex; animation: ycLbFade .18s ease; }
@keyframes ycLbFade { from { opacity: 0; } to { opacity: 1; } }
.yc-lb-stage { max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.yc-lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: zoom-in; transition: transform .2s ease; user-select: none; -webkit-user-drag: none; }
.yc-lb-img.zoomed { transform: scale(2.3); cursor: zoom-out; transition: transform .12s ease; }
.yc-lb-close { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.yc-lb-close:hover { background: rgba(255, 255, 255, .3); }
.yc-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.3rem; cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.yc-lb-nav:hover { background: rgba(255, 255, 255, .3); }
.yc-lb-prev { right: 20px; }   /* RTL: previous image sits on the right */
.yc-lb-next { left: 20px; }    /* RTL: next image sits on the left */
.yc-lb-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .95rem; background: rgba(0, 0, 0, .4); padding: 5px 14px; border-radius: 20px; letter-spacing: 1px; }
@media (max-width: 640px) {
    .yc-lb-nav { width: 42px; height: 42px; font-size: 1.1rem; }
    .yc-lb-close { width: 40px; height: 40px; top: 12px; right: 12px; }
    .yc-lb-img.zoomed { transform: scale(2); }
}

/* ============================================
   PAGES-SPECIFIC STYLES v3
   Breadcrumb, Product Detail, Auth, Cart,
   Checkout, Contact — Warm Arabian Luxury
   ============================================ */

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-section {
    background: linear-gradient(135deg, var(--walnut, #62391C) 0%, var(--bark, #784625) 100%);
    padding: 32px 0;
    position: relative;
    overflow: hidden;
}

.breadcrumb-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}

.breadcrumb-content {
    position: relative;
    z-index: 2;
}

.breadcrumb-content h1 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 300;
}

.breadcrumb-nav a {
    color: var(--amber-300, var(--honey-300));
    transition: var(--transition-fast);
}

.breadcrumb-nav a:hover {
    color: var(--amber-200, var(--honey-200));
}

.breadcrumb-nav span {
    color: rgba(255,255,255,0.45);
}

.breadcrumb-nav i {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
}

/* ============================================
   PAGE: PRODUCT DETAILS
   ============================================ */
.product-detail-section {
    padding: 32px 0;
}

.product-gallery {
    position: relative;
}

.gallery-main {
    border-radius: 20px;
    overflow: hidden;
    /* Soft studio spotlight so the product reads like a premium catalogue shot. */
    background: radial-gradient(125% 100% at 50% 18%, #ffffff 0%, var(--parchment, #f5efe3) 100%);
    /* Portrait frame suits the tall product photos; contain keeps them whole
       (handle + base) — nothing is ever cropped. */
    aspect-ratio: 4 / 5;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(197, 156, 109, 0.18);
    box-shadow: 0 18px 44px -26px rgba(90, 60, 30, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
    position: relative;
    cursor: zoom-in;
    transition: var(--transition);
}

.gallery-main:hover {
    border-color: rgba(197, 156, 109, 0.42);
    box-shadow: 0 26px 54px -26px rgba(90, 60, 30, 0.46);
}

.gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    /* Fill the frame edge-to-edge (100% width). The portrait 4:5 frame means a
       landscape/square product photo is cropped on the SIDES, not top/bottom, so
       the full bottle (handle + base) stays visible while the image fills fully. */
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s var(--ease-out, ease);
}

.gallery-main:hover img {
    transform: scale(1.04);
}

.gallery-main .product-image-placeholder {
    font-size: 120px;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.gallery-main:hover .product-image-placeholder {
    transform: scale(1.05);
}

.gallery-zoom-btn {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: var(--radius-sm, 12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--walnut, var(--dark-brown));
    font-size: 16px;
    transition: var(--transition);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

.gallery-zoom-btn:hover {
    background: var(--amber-500, var(--honey-400));
    color: #fff;
    transform: scale(1.08);
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--sand, var(--honey-100));
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 26px;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--amber-500, var(--honey-400));
    box-shadow: 0 0 0 3px rgba(149, 104, 59, 0.12);
}

/* Product Info */
.product-detail-info {
    padding-right: 20px;
}

.detail-category {
    display: inline-block;
    background: var(--amber-50, var(--honey-50));
    color: var(--amber-600, var(--honey-600));
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    border: 1px solid var(--amber-100, var(--honey-200));
    letter-spacing: 0.5px;
}

.detail-title {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 23px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 8px;
    line-height: 1.35;
}

.detail-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--sand, var(--honey-100));
}

.detail-rating .stars i {
    color: var(--amber-400, var(--honey-400));
    font-size: 16px;
}

.detail-rating .rating-text {
    font-size: 13px;
    color: var(--stone, #888);
}

.detail-price-block {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 20px;
    background: var(--amber-50, #fbf3e6);
    border: 1px solid var(--amber-100, #f0e2c8);
    border-radius: 16px;
}

.detail-current-price {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-display, var(--font-secondary));
    color: var(--amber-600, var(--honey-600));
}

.detail-old-price {
    font-size: 20px;
    color: var(--dust, #bbb);
    text-decoration: line-through;
}

.detail-discount-badge {
    background: var(--danger, #C25450);
    color: #fff;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.detail-description {
    font-size: 14px;
    line-height: 1.8;
    color: var(--earth, #666);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--sand, var(--honey-100));
    font-weight: 300;
}

.detail-meta {
    margin-bottom: 16px;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
}

.meta-row .meta-label {
    font-weight: 600;
    color: var(--walnut, var(--dark-brown));
    min-width: 100px;
}

.meta-row .meta-value {
    color: var(--earth, #666);
    font-weight: 300;
}

.meta-row .in-stock {
    color: var(--sage, var(--success));
    font-weight: 600;
}

.meta-row .out-stock {
    color: var(--danger);
    font-weight: 600;
}

/* Quantity */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.quantity-selector label {
    font-weight: 600;
    font-size: 14px;
    color: var(--walnut, var(--dark-brown));
}

.quantity-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--sand, var(--honey-200));
    border-radius: var(--radius-sm, 12px);
    overflow: hidden;
}

.qty-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--parchment, var(--cream));
    cursor: pointer;
    font-size: 18px;
    color: var(--walnut, var(--dark-brown));
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: var(--amber-500, var(--honey-400));
    color: #fff;
}

.qty-input {
    width: 60px;
    height: 42px;
    border: none;
    text-align: center;
    font-family: var(--font-body, var(--font-primary));
    font-size: 16px;
    font-weight: 600;
    color: var(--walnut, var(--dark-brown));
    background: transparent;
    outline: none;
}

/* Detail Actions */
.detail-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.detail-actions .btn {
    border-radius: 13px;
}

.detail-actions .btn-honey {
    flex: 1;
    min-width: 190px;
    padding: 14px 30px;
    font-size: 15px;
}

.detail-actions .btn-outline-honey {
    padding: 14px 20px;
    min-width: 54px;
    color: var(--walnut, var(--dark-brown));
    border-color: var(--sand, var(--honey-200));
}

.detail-actions .btn-outline-honey:hover {
    background: var(--amber-500, #C59C6D);
    color: #fff;
    border-color: var(--amber-500, #C59C6D);
}

.detail-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1.5px solid var(--sand, var(--honey-100));
}

.detail-share span {
    font-size: 13px;
    font-weight: 600;
    color: var(--walnut, var(--dark-brown));
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 12px);
    border: 1px solid var(--sand, var(--honey-200));
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--earth, var(--brown));
    font-size: 14px;
    transition: var(--transition-fast);
}

.share-btn:hover {
    background: var(--amber-500, var(--honey-400));
    color: #fff;
    border-color: var(--amber-500, var(--honey-400));
}

/* Product Tabs — modern pills */
.product-tabs-section {
    padding: 38px 0;
    background: var(--parchment, #fff);
}

.product-tabs .nav-tabs {
    border-bottom: 1px solid var(--sand, var(--honey-100));
    gap: 8px;
    padding-bottom: 14px;
}

.product-tabs .nav-link {
    border: 1px solid transparent;
    color: var(--earth, var(--brown));
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 999px;
    transition: var(--transition);
    font-family: var(--font-body, var(--font-primary));
    position: relative;
}

.product-tabs .nav-link:hover:not(.active) {
    color: var(--amber-600, var(--honey-600));
    background: var(--amber-50, var(--honey-50));
}

.product-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--amber-500, #C59C6D), var(--amber-600, #95683B));
    border-color: transparent;
    box-shadow: 0 8px 18px -8px rgba(160, 116, 50, 0.5);
}

.tab-content-inner {
    padding: 30px 0;
    font-size: 14px;
    line-height: 2;
    color: var(--earth, #555);
    font-weight: 300;
}

.spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sand, var(--honey-100));
    border-radius: 14px;
    overflow: hidden;
}

.spec-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--sand, var(--honey-50));
}

.spec-table td {
    padding: 12px 18px;
    font-size: 14px;
}

.spec-table td:first-child {
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    width: 200px;
    background: #fdfaf4;
}

/* Review Card */
.review-card {
    background: var(--parchment, var(--cream));
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 15px;
    border: 1px solid var(--sand, var(--honey-50));
    transition: var(--transition);
}

.review-card:hover {
    border-color: var(--amber-200, var(--honey-200));
    box-shadow: var(--shadow-sm);
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--amber-500, var(--honey-400));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    font-family: var(--font-display, var(--font-secondary));
}

.reviewer-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--walnut, var(--dark-brown));
}

.review-date {
    font-size: 12px;
    color: var(--stone, #999);
    font-weight: 300;
}

.review-stars i {
    color: var(--amber-400, var(--honey-400));
    font-size: 13px;
}

.review-text {
    font-size: 13px;
    line-height: 1.9;
    color: var(--earth, #666);
    font-weight: 300;
}

/* Reviews carousel (rendered when 3+ approved reviews exist). Cards keep their
   look; Swiper just paginates them. Equal-height slides so the row is tidy. */
.reviewsSwiper {
    padding-bottom: 42px;
}
.reviewsSwiper .swiper-slide {
    height: auto;
    display: flex;
}
.reviewsSwiper .swiper-slide .review-card {
    width: 100%;
    margin-bottom: 0;
}
.reviews-pagination.swiper-pagination {
    bottom: 6px;
}
.reviews-pagination .swiper-pagination-bullet-active {
    background: var(--amber-500, var(--honey-400));
}

/* Related / similar products carousel on the product detail page. */
.related-section {
    padding: 10px 0 50px;
}
.relatedSwiper {
    padding: 6px 4px 46px;
}
.relatedSwiper .swiper-slide {
    height: auto;
}
.relatedSwiper-pagination.swiper-pagination {
    bottom: 8px;
}
.relatedSwiper-pagination .swiper-pagination-bullet-active {
    background: var(--amber-500, var(--honey-400));
}

/* Shop sidebar: subcategory tree under each department. A department with
   subcategories becomes a block row (the base `.filter-block ul li` is flex,
   which would otherwise push the nested list beside the link). The caret
   toggles the list open/closed; it also auto-opens for the active department. */
.shop-sidebar .shop-cat-tree > li.has-sub {
    display: block;
    padding: 0;
}
.shop-sidebar .shop-cat-tree > li.has-sub .cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    gap: 6px;
}
.shop-sidebar .shop-cat-tree > li.has-sub .cat-head > a {
    flex: 1;
    min-width: 0;
}
.shop-sidebar .subcat-toggle {
    background: none;
    border: none;
    color: var(--stone, #998);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1;
    transition: transform .2s ease, color .2s ease;
    flex-shrink: 0;
}
.shop-sidebar .subcat-toggle:hover {
    color: var(--amber-600, var(--honey-600));
}
.shop-sidebar .subcat-toggle.open {
    transform: rotate(180deg);
    color: var(--amber-600, var(--honey-600));
}
.shop-sidebar .subcat-list {
    list-style: none;
    margin: 4px 0 8px;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--sand, #eadfce);
    display: none;
}
.shop-sidebar .subcat-list.open {
    display: block;
}
.shop-sidebar .subcat-list li {
    margin: 0;
}
.shop-sidebar .subcat-list a {
    font-size: 13px;
    font-weight: 500;
    color: var(--earth, #6a5a44);
    padding: 5px 0;
    display: block;
}
.shop-sidebar .subcat-list a:hover {
    color: var(--amber-600, var(--honey-600));
}
.shop-sidebar .subcat-list li.active > a {
    color: var(--amber-600, var(--honey-600));
    font-weight: 700;
}

/* ============================================
   PAGE: AUTH (LOGIN/REGISTER)
   ============================================ */
.auth-section {
    padding: 60px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    border: 1px solid var(--sand, rgba(0,0,0,0.04));
}

.auth-visual {
    width: 45%;
    background: linear-gradient(160deg, #62391C 0%, #784625 50%, #62391C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
}

.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}

.auth-visual img {
    width: 100px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 24px rgba(197, 156, 109, 0.25));
    position: relative;
    z-index: 2;
}

.auth-visual h2 {
    color: #fff;
    font-family: var(--font-display, var(--font-secondary));
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.auth-visual p {
    color: rgba(255,255,255,0.4);
    text-align: center;
    font-size: 13px;
    position: relative;
    z-index: 2;
    font-weight: 300;
    line-height: 1.8;
}

.auth-form-side {
    flex: 1;
    padding: 44px 36px;
}

.auth-form-side h2 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 24px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 6px;
}

.auth-form-side .auth-subtitle {
    color: var(--stone, #888);
    font-size: 13px;
    margin-bottom: 28px;
    font-weight: 300;
}

.form-floating-custom {
    margin-bottom: 20px;
}

.form-floating-custom label {
    font-size: 12px;
    font-weight: 500;
    color: var(--walnut, var(--brown));
    margin-bottom: 6px;
    display: block;
}

/* Sub-wrapper that contains ONLY the input + its decorative icons. By making
   it the closest positioned ancestor, absolute children resolve top:50% to the
   input's vertical center, not (label + input) midpoint. Logical inset-inline
   properties (-start / -end) flip automatically under [dir="rtl"]. */
.form-floating-custom .input-wrap {
    position: relative;
}

.form-floating-custom .form-control {
    border: 1.5px solid var(--sand, var(--honey-100));
    border-radius: var(--radius-sm, 12px);
    padding: 13px 44px 13px 44px;
    font-family: var(--font-body, var(--font-primary));
    font-size: 13px;
    transition: all 0.3s var(--ease-out, ease);
    background: var(--parchment, var(--cream));
    height: auto;
    color: var(--walnut, var(--dark-brown));
    width: 100%;
    display: block;
}

.form-floating-custom .form-control:focus {
    border-color: var(--amber-400, var(--honey-400));
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06);
    background: #fff;
}

.form-floating-custom .input-icon,
.form-floating-custom .password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
}

/* LTR: leading icon on the left, eye toggle on the right.
   RTL: explicitly flipped — `inset-inline-*` was unreliable on some inputs
   because the password <input> element inherits direction:ltr (for the dotted
   masking), and that direction was being picked up by the absolutely-positioned
   icon siblings inside the .input-wrap. Hard-coded left/right is bulletproof. */
.form-floating-custom .input-icon {
    left: 15px;
    right: auto;
    color: var(--amber-400, var(--honey-400));
    z-index: 5;
    pointer-events: none;
}

.form-floating-custom .password-toggle {
    right: 12px;
    left: auto;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    margin: 0;
    color: var(--stone, #999);
    cursor: pointer;
    transition: var(--transition-fast, color .15s ease);
    z-index: 6;
}

[dir="rtl"] .form-floating-custom .input-icon,
.rtl .form-floating-custom .input-icon {
    right: 15px;
    left: auto;
}
[dir="rtl"] .form-floating-custom .password-toggle,
.rtl .form-floating-custom .password-toggle {
    left: 12px;
    right: auto;
}

.form-floating-custom .password-toggle:hover,
.form-floating-custom .password-toggle:focus-visible {
    color: var(--amber-500, var(--honey-500));
    outline: none;
}

/* Inline validation message rendered by jQuery Unobtrusive Validate. Sits
   underneath the input, low-key red so it doesn't fight the brand palette. */
.field-error,
span.field-validation-error,
.form-floating-custom .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #c0392b;
    font-weight: 500;
}
.input-validation-error {
    border-color: #c0392b !important;
    background-color: #fff5f4 !important;
}
.input-validation-error:focus {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.08) !important;
}

/* ─── OTP verify page ─────────────────────────────────────────────── */
.otp-card .otp-badge {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbf7f0 0%, #f0e6d2 100%);
    color: var(--amber-500, var(--honey-500, #A07432));
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(160, 116, 50, 0.18);
}
.otp-card .otp-badge i { line-height: 1; }

.otp-card h2 { text-align: center; }
.otp-card .auth-subtitle { text-align: center; }

.otp-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 28px 0 8px;
    flex-wrap: wrap;
}
.otp-digit {
    width: 48px;
    height: 60px;
    border: 1.5px solid var(--sand, var(--honey-100, #e1c896));
    border-radius: 12px;
    background: var(--parchment, var(--cream, #fbf7f0));
    color: var(--walnut, var(--dark-brown, #5A3A1B));
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', Tahoma, monospace;
}
.otp-digit:focus {
    outline: none;
    border-color: var(--amber-500, var(--honey-500, #A07432));
    background: #fff;
    box-shadow: 0 0 0 4px rgba(160, 116, 50, 0.12);
}
.otp-digit:not(:placeholder-shown),
.otp-digit[value]:not([value=""]) {
    background: #fff;
    border-color: var(--amber-400, var(--honey-400, #C89A4F));
}

.otp-resend {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--stone, #888);
}
.otp-countdown { display: inline-block; margin-inline-end: 8px; }
.otp-resend-btn {
    background: transparent;
    border: 0;
    color: var(--amber-500, var(--honey-500, #A07432));
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
    font-size: 13px;
}
.otp-resend-btn:hover:not(:disabled) {
    background: rgba(160, 116, 50, 0.08);
}
.otp-resend-btn:disabled { cursor: not-allowed; }
.otp-resend-btn i { margin-inline-end: 4px; }

@media (max-width: 480px) {
    .otp-inputs { gap: 6px; }
    .otp-digit { width: 42px; height: 52px; font-size: 22px; }
}

.form-check-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.form-check-custom .form-check-input {
    border-color: var(--amber-300, var(--honey-300));
    width: 17px;
    height: 17px;
    border-radius: 4px;
}

.form-check-custom .form-check-input:checked {
    background-color: var(--amber-500, var(--honey-400));
    border-color: var(--amber-500, var(--honey-400));
}

.form-check-custom label {
    font-size: 13px;
    color: var(--earth, var(--brown));
    margin-right: 6px;
}

.forgot-link {
    font-size: 12px;
    color: var(--amber-500, var(--honey-500));
    font-weight: 600;
}

.forgot-link:hover {
    color: var(--amber-600, var(--honey-600));
}

.auth-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    margin-bottom: 16px;
}

.auth-divider {
    text-align: center;
    position: relative;
    margin: 20px 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--sand, var(--honey-100));
}

.auth-divider span {
    background: #fff;
    padding: 0 14px;
    color: var(--stone, #999);
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.social-auth {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.social-auth-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1.5px solid var(--sand, var(--honey-100));
    border-radius: var(--radius-sm, 12px);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body, var(--font-primary));
    font-weight: 500;
    font-size: 13px;
    color: var(--walnut, var(--dark-brown));
    transition: all 0.3s var(--ease-out, ease);
}

.social-auth-btn:hover {
    border-color: var(--amber-300, var(--honey-300));
    background: var(--amber-50, var(--honey-50));
}

.auth-switch {
    text-align: center;
    font-size: 13px;
    color: var(--stone, #888);
}

.auth-switch a {
    color: var(--amber-500, var(--honey-500));
    font-weight: 600;
}

.auth-switch a:hover {
    color: var(--amber-600, var(--honey-600));
}

/* ============================================
   PAGE: CART
   ============================================ */
.cart-section {
    padding: 50px 0;
}

.cart-table-wrap {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sand, var(--honey-50));
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table thead {
    background: var(--parchment, var(--cream));
}

.cart-table th {
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--walnut, var(--dark-brown));
    text-align: right;
    border-bottom: 1.5px solid var(--sand, var(--honey-100));
    font-family: var(--font-display, var(--font-secondary));
    letter-spacing: 0.3px;
}

.cart-table td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.cart-product-cell {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-product-img {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--parchment, var(--cream-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    border: 1px solid var(--sand, var(--honey-100));
}

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

.cart-product-name {
    font-family: var(--font-display, var(--font-secondary));
    font-weight: 600;
    font-size: 14px;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 4px;
}

.cart-product-cat {
    font-size: 12px;
    color: var(--stone, #999);
    font-weight: 300;
}

.cart-price {
    font-weight: 700;
    font-size: 16px;
    color: var(--amber-600, var(--honey-600));
    font-family: var(--font-display, var(--font-secondary));
}

.cart-remove {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 12px);
    border: 1px solid var(--sand, #eee);
    background: transparent;
    cursor: pointer;
    color: var(--dust, #ccc);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cart-remove:hover {
    background: var(--danger, #C25450);
    color: #fff;
    border-color: var(--danger, #C25450);
}

/* Cart Summary */
.cart-summary {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sand, var(--honey-50));
    position: sticky;
    top: 120px;
}

.cart-summary h3 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 20px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--sand, var(--honey-100));
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
}

.summary-row .label {
    color: var(--stone, #888);
    font-weight: 300;
}

.summary-row .value {
    font-weight: 600;
    color: var(--walnut, var(--dark-brown));
}

.summary-row.total {
    border-top: 1.5px solid var(--sand, var(--honey-100));
    margin-top: 10px;
    padding-top: 16px;
}

.summary-row.total .label {
    font-size: 16px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    font-family: var(--font-display, var(--font-secondary));
}

.summary-row.total .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--amber-600, var(--honey-600));
    font-family: var(--font-display, var(--font-secondary));
}

.coupon-form {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}

.coupon-form input {
    flex: 1;
    border: 1.5px solid var(--sand, var(--honey-200));
    border-radius: var(--radius-sm, 12px);
    padding: 10px 16px;
    font-family: var(--font-body, var(--font-primary));
    font-size: 13px;
    outline: none;
    transition: var(--transition);
    background: var(--parchment, var(--cream));
}

.coupon-form input:focus {
    border-color: var(--amber-400, var(--honey-400));
    background: #fff;
}

.coupon-form button {
    border-radius: var(--radius-sm, 12px);
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 13px;
}

/* High-contrast, unmistakable primary CTA (checkout / place order). A flat brown
   button was blending into the warm card; a bright gold→brown gradient with a
   strong shadow makes it read as THE action on both light and dark backgrounds. */
.cart-summary .btn-honey {
    width: 100%;
    margin-top: 18px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, #E3B341 0%, #C59C6D 45%, #A07432 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 14px 28px -10px rgba(160, 116, 50, .75);
    letter-spacing: .3px;
}
.cart-summary .btn-honey:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 34px -10px rgba(160, 116, 50, .9);
}
.cart-summary .btn-honey i { font-size: 1.05em; }

.cart-summary .continue-shopping {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--amber-500, var(--honey-500));
    font-size: 13px;
    font-weight: 500;
}

/* Empty cart page */
.empty-cart-page {
    text-align: center;
    padding: 80px 20px;
}

.empty-cart-page .empty-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 30px;
    background: var(--amber-50, var(--honey-50));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 55px;
    color: var(--amber-300, var(--honey-300));
    animation: emptyCartBounce 3s ease-in-out infinite;
}

@keyframes emptyCartBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================
   PAGE: CHECKOUT
   ============================================ */
.checkout-section {
    padding: 50px 0;
}

/* Modern progress stepper: gradient circular icons with the label beneath and a
   filling connector between steps. */
.checkout-step {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 600px;
    margin: 4px auto 48px;
    position: relative;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
    width: 118px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--stone, #b3a084);
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-item .step-label { line-height: 1.35; transition: color .35s ease; }

.step-item.active,
.step-item.completed { color: var(--amber-700, #7a5626); }

.step-number {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--sand, #e3d6bf);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    color: var(--stone, #b3a084);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, background .4s ease, border-color .4s ease, color .4s ease;
    box-shadow: 0 5px 16px -8px rgba(90, 60, 30, 0.3);
    position: relative;
}

/* Soft halo ring that only lights up on the current (active) step. */
.step-number::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color .4s ease;
    pointer-events: none;
}

.step-item.active .step-number,
.step-item.completed .step-number {
    background: linear-gradient(135deg, #E9C25C 0%, #C59C6D 45%, #9C6E30 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 28px -10px rgba(160, 116, 50, 0.78);
}

.step-item.active .step-number { transform: translateY(-4px) scale(1.05); }
.step-item.active .step-number::after { border-color: rgba(197, 156, 109, 0.42); }

.step-line {
    flex: 1 1 auto;
    min-width: 24px;
    height: 4px;
    margin-top: 27px;   /* centre against the 58px circle */
    background: var(--sand, #e3d6bf);
    border-radius: 4px;
}

.step-line.active { background: linear-gradient(90deg, #E9C25C, #C59C6D); }

.checkout-form-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sand, var(--honey-50));
    margin-bottom: 25px;
}

.checkout-form-card h3 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 18px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--sand, var(--honey-100));
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-form-card h3 i {
    color: var(--amber-500, var(--honey-400));
}

.checkout-form-card .form-control,
.checkout-form-card .form-select {
    border: 1.5px solid var(--sand, var(--honey-100));
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: var(--font-body, var(--font-primary));
    font-size: 13px;
    transition: all 0.3s var(--ease-out, ease);
    background: var(--parchment, var(--cream));
}

.checkout-form-card .form-control:focus,
.checkout-form-card .form-select:focus {
    border-color: var(--amber-400, var(--honey-400));
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06);
    background: #fff;
}

.checkout-form-card label {
    font-size: 12px;
    font-weight: 500;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 5px;
}

/* Payment Methods */
.payment-method {
    border: 1.5px solid var(--sand, var(--honey-100));
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-method:hover,
.payment-method.selected {
    border-color: var(--amber-400, var(--honey-400));
    background: var(--amber-50, var(--honey-50));
}

.payment-method .method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--amber-300, var(--honey-300));
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.payment-method.selected .method-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--amber-500, var(--honey-400));
    border-radius: 50%;
}

.payment-method .method-icon {
    font-size: 22px;
    color: var(--amber-500, var(--honey-500));
}

.method-info h5 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 14px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin: 0;
}

.method-info p {
    font-size: 12px;
    color: var(--stone, #999);
    margin: 0;
    font-weight: 300;
}

/* Order Summary in Checkout */
.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.order-item-img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--parchment, var(--cream-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.order-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--walnut, var(--dark-brown));
    flex: 1;
}

.order-item-qty {
    font-size: 12px;
    color: var(--stone, #999);
    font-weight: 300;
}

.order-item-price {
    font-weight: 700;
    color: var(--amber-600, var(--honey-600));
    font-family: var(--font-display, var(--font-secondary));
}

/* ============================================
   PAGE: CONTACT
   ============================================ */
.contact-section {
    padding: 60px 0;
}

.contact-info-cards {
    margin-bottom: 50px;
}

.contact-info-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--sand, var(--honey-100));
    transition: all 0.4s var(--ease-out, ease);
    position: relative;
    height: 100%;
    box-shadow: var(--shadow-xs, none);
}

.contact-info-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--amber-500, var(--honey-400));
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out, ease);
}

.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--amber-200, var(--honey-300));
}

.contact-info-card:hover::before {
    transform: scaleX(1);
}

.contact-info-icon {
    width: 60px;
    height: 70px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--amber-500, var(--honey-400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    margin: 0 auto 16px;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(149, 104, 59, 0.2);
}

.contact-info-card:hover .contact-info-icon {
    transform: scale(1.08) rotate(8deg);
}

.contact-info-card h4 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 16px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 8px;
}

.contact-info-card p {
    font-size: 13px;
    color: var(--stone, #888);
    margin: 0;
    line-height: 1.7;
    font-weight: 300;
}

/* Contact Form */
.contact-form-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sand, var(--honey-50));
}

.contact-form-card h3 {
    font-family: var(--font-display, var(--font-secondary));
    font-size: 22px;
    font-weight: 700;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 25px;
}

.contact-form .form-control,
.contact-form .form-select {
    border: 1.5px solid var(--sand, var(--honey-100));
    border-radius: var(--radius-sm, 12px);
    padding: 13px 18px;
    font-family: var(--font-body, var(--font-primary));
    font-size: 13px;
    transition: all 0.3s var(--ease-out, ease);
    background: var(--parchment, var(--cream));
}

.contact-form .form-control:focus {
    border-color: var(--amber-400, var(--honey-400));
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06);
    background: #fff;
}

.contact-form textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.contact-form label {
    font-size: 12px;
    font-weight: 500;
    color: var(--walnut, var(--dark-brown));
    margin-bottom: 6px;
}

/* Map placeholder */
.map-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sand, var(--honey-50));
}

.map-placeholder {
    height: 100%;
    min-height: 400px;
    background: linear-gradient(135deg, var(--parchment, var(--cream-dark)), var(--ivory, var(--cream)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--amber-400, var(--honey-400));
}

.map-placeholder i {
    font-size: 55px;
    margin-bottom: 15px;
    opacity: 0.35;
}

.map-placeholder p {
    color: var(--stone, #999);
    font-size: 14px;
    font-weight: 300;
}

/* ============================================
   RESPONSIVE ADDITIONS
   ============================================ */
@media (max-width: 991px) {
    .auth-visual {
        display: none;
    }

    .auth-card {
        max-width: 500px;
    }

    .auth-form-side {
        padding: 36px 28px;
    }

    .product-detail-info {
        padding-right: 0;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .cart-table thead {
        display: none;
    }

    .cart-table tr {
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        border-bottom: 1px solid var(--sand, var(--honey-50));
    }

    .cart-table td {
        border: none;
        padding: 5px;
    }

    .cart-product-cell {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Keep all three steps on ONE row (never wrap) — just shrink to fit. */
    .checkout-step {
        flex-wrap: nowrap;
        gap: 0;
        max-width: 100%;
    }
    .step-item { width: 84px; font-size: 11.5px; gap: 10px; }
    .step-number { width: 48px; height: 48px; font-size: 16px; }
    .step-line { min-width: 10px; margin-top: 22px; }

    .contact-form-card {
        padding: 24px;
    }

    .gallery-thumbs {
        flex-wrap: wrap;
    }

    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .btn-honey,
    .detail-actions .btn-outline-honey {
        width: 100%;
    }
}

/* ============================================
   PAGE: SHOP / PRODUCTS LISTING
   ============================================ */
.shop-section { padding: 50px 0; }

.shop-toolbar {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--sand);
    padding: 14px 22px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: var(--shadow-xs);
}
.shop-toolbar .result-count {
    font-size: 13px;
    color: var(--earth);
    font-weight: 500;
}
.shop-toolbar .result-count strong {
    color: var(--amber-600);
    font-family: var(--font-display);
}
.shop-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}
.shop-toolbar select {
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--walnut);
    background: var(--parchment);
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}
.shop-toolbar select:hover, .shop-toolbar select:focus {
    border-color: var(--amber-400);
    background: #fff;
}
.view-toggle {
    display: flex;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.view-toggle button {
    background: var(--parchment);
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    color: var(--earth);
    transition: var(--transition-fast);
}
.view-toggle button.active {
    background: var(--amber-500);
    color: #fff;
}

/* Shop Sidebar */
.shop-sidebar {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--sand);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 120px;
}
.filter-block { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1.5px solid var(--sand); }
.filter-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-block h4 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--walnut);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-block h4 i { color: var(--amber-500); font-size: 13px; }
.filter-block ul li {
    padding: 7px 0;
    font-size: 13px;
    color: var(--earth);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-block ul li:hover { color: var(--amber-600); padding-right: 4px; }
.filter-block ul li .count {
    background: var(--parchment);
    color: var(--stone);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 500;
}
.filter-block ul li.active { color: var(--amber-600); font-weight: 600; }
.filter-block ul li.active .count { background: var(--amber-500); color: #fff; }

/* ── Shop filter: off-canvas on mobile, sticky card on desktop ───────────── */
.shop-filter-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--walnut);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.shop-filter-trigger:hover { border-color: var(--amber-400); color: var(--amber-600); }
.shop-filter-trigger i { color: var(--amber-500); }
.shop-filter-trigger .filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--amber-500); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
}

/* Desktop: neutralise the off-canvas wrapper so the sidebar card sits exactly
   where it always did (no extra padding from the offcanvas body). */
@media (min-width: 992px) {
    .shop-filter-offcanvas,
    .shop-filter-offcanvas > .offcanvas-body { padding: 0; overflow: visible; }
}

@media (max-width: 991.98px) {
    .shop-filter-trigger { display: inline-flex; }
    .shop-filter-offcanvas { width: min(86vw, 340px); }
    .shop-filter-offcanvas .offcanvas-header {
        border-bottom: 1px solid var(--sand);
        background: var(--parchment, #fbf6ed);
    }
    .shop-filter-offcanvas .offcanvas-title {
        display: flex; align-items: center; gap: 8px;
        font-family: var(--font-display); font-weight: 700; color: var(--walnut); font-size: 16px;
    }
    .shop-filter-offcanvas .offcanvas-title i { color: var(--amber-500); }
    /* Inside the panel the sidebar is plain content, not a floating sticky card. */
    .shop-filter-offcanvas .shop-sidebar {
        position: static; top: auto; border: 0; box-shadow: none;
        border-radius: 0; padding: 20px; background: transparent;
    }
}

/* Phones: Filter + Sort become equal-width controls on one row. */
@media (max-width: 575.98px) {
    .shop-toolbar-right { flex: 1; }
    .shop-toolbar-right > .shop-filter-trigger,
    .shop-toolbar-right > #sortForm { flex: 1; }
    .shop-toolbar-right #sortForm select { width: 100%; }
}

.price-range-input {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: var(--sand);
    outline: none;
    margin: 14px 0 8px;
}
.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--amber-500);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(149, 104, 59,0.25);
}
.price-range-vals {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--earth);
    font-weight: 500;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--earth);
}
.filter-check input {
    accent-color: var(--amber-500);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.filter-check .stars-mini i { color: var(--amber-400); font-size: 12px; }

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amber-50);
    color: var(--amber-700);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin: 3px 4px 3px 0;
    border: 1px solid var(--amber-100);
}
.filter-tag i { font-size: 9px; cursor: pointer; }
.filter-tag i:hover { color: var(--danger); }

/* Pagination */
.pagination-wrap {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.pagination-wrap a,
.pagination-wrap .active {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1.5px solid var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--walnut);
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition-fast);
    font-family: var(--font-display);
}
.pagination-wrap a:hover,
.pagination-wrap .active {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
    box-shadow: var(--shadow-gold);
}
.pagination-wrap .active {
    pointer-events: none;
    font-weight: 800;
    transform: scale(1.06);
}
.pagination-wrap a.page-nav {
    background: var(--cream, #FBF6ED);
    color: var(--amber-600, #a3763f);
}
.pagination-wrap a.page-nav:hover {
    background: var(--amber-500);
    color: #fff;
}
.pagination-wrap .page-ellipsis {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    color: var(--walnut);
    font-weight: 700;
    font-size: 16px;
    user-select: none;
}

/* List view variant for products */
.product-card.list-view {
    display: flex;
    align-items: stretch;
    text-align: right;
}
.product-card.list-view .product-image { width: 220px; flex-shrink: 0; }
.product-card.list-view .product-info { flex: 1; padding: 24px 22px; }

/* Mobile Filter Toggle */
.mobile-filter-btn {
    display: none;
    background: var(--amber-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 18px;
    font-weight: 600;
    font-size: 13px;
    gap: 8px;
    align-items: center;
}

/* ============================================
   PAGE: WISHLIST
   ============================================ */
.wishlist-section { padding: 50px 0; }
.wishlist-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1.5px dashed var(--sand);
}
.wishlist-empty .empty-heart {
    width: 130px;
    height: 130px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--amber-50), var(--cream));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: var(--amber-300);
}
.wishlist-empty h3 {
    font-family: var(--font-display);
    color: var(--walnut);
    margin-bottom: 8px;
}
.wishlist-empty p {
    color: var(--stone);
    margin-bottom: 24px;
    font-size: 14px;
}

/* ============================================
   PAGE: MY ACCOUNT DASHBOARD
   ============================================ */
.account-section { padding: 50px 0; background: var(--parchment); }
.account-sidebar {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-xs);
}
.account-user {
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1.5px solid var(--sand);
    margin-bottom: 18px;
}
.account-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 12px;
    font-family: var(--font-display);
    box-shadow: 0 8px 24px rgba(149, 104, 59,0.25);
    border: 4px solid #fff;
    position: relative;
}
.account-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed var(--amber-300);
    opacity: 0.5;
}
.account-user h4 {
    font-family: var(--font-display);
    color: var(--walnut);
    font-size: 17px;
    margin-bottom: 4px;
}
.account-user p { font-size: 12px; color: var(--stone); margin: 0; }
.account-nav { list-style: none; padding: 0; margin: 0; }
.account-nav li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: var(--earth);
    font-weight: 500;
    font-size: 13.5px;
    transition: var(--transition-fast);
    margin-bottom: 4px;
}
.account-nav li a i {
    width: 18px;
    color: var(--amber-500);
    font-size: 13px;
}
.account-nav li a:hover {
    background: var(--amber-50);
    color: var(--amber-700);
    padding-right: 18px;
}
.account-nav li.active a {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    color: #fff;
    box-shadow: var(--shadow-gold);
}
.account-nav li.active a i { color: #fff; }
.account-nav li a .badge-num {
    margin-right: auto;
    background: var(--amber-100);
    color: var(--amber-700);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 700;
}
.account-nav li.active a .badge-num { background: rgba(255,255,255,0.2); color: #fff; }

.account-content {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-xs);
}
.account-content h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--walnut);
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--sand);
    display: flex;
    align-items: center;
    gap: 10px;
}
.account-content h2 i { color: var(--amber-500); }

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.stat-card {
    background: linear-gradient(135deg, var(--amber-50), #fff);
    border: 1px solid var(--amber-100);
    border-radius: var(--radius-md);
    padding: 22px 18px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(197, 156, 109,0.15), transparent);
    border-radius: 50%;
}
.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--amber-300);
    box-shadow: var(--shadow-md);
}
.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: var(--amber-500);
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}
.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--walnut);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 12px;
    color: var(--stone);
    margin-top: 6px;
    display: block;
}

/* Address card */
.address-card {
    background: var(--parchment);
    border: 1.5px dashed var(--sand);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
}
.address-card.default { border-style: solid; border-color: var(--amber-300); background: var(--amber-50); }
.address-card .addr-label {
    background: var(--amber-500);
    color: #fff;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 50px;
    font-weight: 700;
    position: absolute;
    top: 14px;
    left: 14px;
    letter-spacing: 0.3px;
}
.address-card h5 {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--walnut);
    margin-bottom: 5px;
}
.address-card p {
    font-size: 13px;
    color: var(--earth);
    margin: 0 0 10px;
    line-height: 1.8;
}
.address-card .addr-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.address-card .addr-actions button {
    background: transparent;
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-size: 12px;
    color: var(--earth);
    cursor: pointer;
    transition: var(--transition-fast);
}
.address-card .addr-actions button:hover { background: var(--amber-500); color: #fff; border-color: var(--amber-500); }
.add-address-card {
    border: 2px dashed var(--amber-300);
    background: var(--amber-50);
    border-radius: var(--radius-md);
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--amber-600);
}
.add-address-card:hover { background: var(--amber-100); border-color: var(--amber-500); }
.add-address-card i { font-size: 28px; margin-bottom: 8px; display: block; }

/* ============================================
   PAGE: ORDERS
   ============================================ */
.orders-table {
    width: 100%;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.orders-table thead { background: var(--parchment); }
.orders-table th {
    padding: 14px 16px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--walnut);
    text-align: right;
    border-bottom: 1.5px solid var(--sand);
}
.orders-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 13px;
    color: var(--earth);
    vertical-align: middle;
}
.orders-table tr:hover td { background: var(--amber-50); }
.order-id {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--amber-600);
}
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.order-status.delivered { background: rgba(91,140,90,0.12); color: var(--sage); }
.order-status.shipping { background: rgba(91,143,173,0.12); color: var(--info); }
.order-status.processing { background: rgba(197, 156, 109,0.18); color: var(--amber-700); }
.order-status.cancelled { background: rgba(194,84,80,0.12); color: var(--danger); }
.order-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.order-action-btn {
    border: 1.5px solid var(--sand);
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 12px;
    color: var(--walnut);
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 600;
}
.order-action-btn:hover { background: var(--amber-500); color: #fff; border-color: var(--amber-500); }

/* ============================================
   PAGE: ORDER TRACKING / DETAILS
   ============================================ */
.tracking-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 30px;
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-xs);
    margin-bottom: 24px;
}
.tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--sand);
}
.tracking-header h3 { font-family: var(--font-display); color: var(--walnut); margin: 0; font-size: 20px; }
.tracking-header .order-meta { color: var(--stone); font-size: 13px; margin-top: 4px; }
.tracking-header .order-meta strong { color: var(--amber-600); font-family: var(--font-display); }

.tracking-timeline {
    position: relative;
    padding: 10px 0;
}
.tracking-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 23px;
    width: 2px;
    background: linear-gradient(180deg, var(--amber-400), var(--sand));
}
.timeline-step {
    display: flex;
    gap: 22px;
    padding: 12px 0;
    position: relative;
}
.timeline-step .step-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone);
    font-size: 16px;
    flex-shrink: 0;
    z-index: 2;
    transition: var(--transition);
}
.timeline-step.done .step-dot {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff;
}
.timeline-step.current .step-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(197, 156, 109,0.22);
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(197, 156, 109,0.4); }
    100% { box-shadow: 0 0 0 12px rgba(197, 156, 109,0); }
}
.timeline-step .step-content { flex: 1; padding-top: 6px; }
.timeline-step .step-title {
    font-family: var(--font-display);
    color: var(--walnut);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 3px;
}
.timeline-step .step-date {
    font-size: 12px;
    color: var(--stone);
}
.timeline-step .step-desc {
    font-size: 13px;
    color: var(--earth);
    margin-top: 5px;
    line-height: 1.7;
}

.invoice-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 14px;
}
.invoice-row .lbl { color: var(--stone); }
.invoice-row .val { color: var(--walnut); font-weight: 600; }
.invoice-row.total {
    border-top: 1.5px dashed var(--sand);
    margin-top: 12px;
    padding-top: 14px;
}
.invoice-row.total .lbl { font-family: var(--font-display); font-weight: 700; color: var(--walnut); font-size: 16px; }
.invoice-row.total .val { color: var(--amber-600); font-size: 20px; font-family: var(--font-display); }

/* ============================================
   PAGE: THANK YOU
   ============================================ */
.thankyou-section {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.thankyou-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
    opacity: 0.03;
}
.success-check {
    width: 130px;
    height: 130px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 58px;
    position: relative;
    box-shadow: 0 16px 40px rgba(98,57,28,0.30);
    animation: successPop 0.6s var(--ease-spring) both;
}
.success-check::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 3px dashed var(--gold);
    opacity: 0.4;
    animation: rotate 18s linear infinite;
}
@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes rotate { to { transform: rotate(360deg); } }
.thankyou-title {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--walnut);
    margin-bottom: 12px;
    font-weight: 700;
}
.thankyou-subtitle {
    color: var(--earth);
    font-size: 15px;
    max-width: 550px;
    margin: 0 auto 30px;
    line-height: 1.9;
}
.thankyou-order-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--amber-200);
    border-radius: 50px;
    padding: 11px 24px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--walnut);
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}
.thankyou-order-num strong { color: var(--amber-600); }
.thankyou-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 800px;
    margin: 0 auto 40px;
}
.ty-info-card {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: var(--radius-md);
    padding: 22px 18px;
    text-align: center;
}
.ty-info-card i {
    font-size: 26px;
    color: var(--amber-500);
    margin-bottom: 10px;
    display: block;
}
.ty-info-card h5 {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--stone);
    margin-bottom: 4px;
    font-weight: 500;
}
.ty-info-card p {
    margin: 0;
    color: var(--walnut);
    font-weight: 600;
    font-size: 14px;
}

/* ============================================
   PAGE: ABOUT
   ============================================ */
.about-hero {
    padding: 80px 0 50px;
    position: relative;
    background: linear-gradient(180deg, var(--parchment), #fff);
}
.about-hero h2 {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--walnut);
    margin-bottom: 18px;
}
.about-hero p {
    color: var(--earth);
    font-size: 15px;
    line-height: 2;
    margin-bottom: 22px;
}
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
    margin: 40px 0;
}
.about-stat {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: var(--radius-md);
    padding: 28px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.about-stat:hover { transform: translateY(-6px); border-color: var(--amber-300); box-shadow: var(--shadow-lg); }
.about-stat .num {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--amber-500), var(--amber-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.about-stat .lbl {
    color: var(--earth);
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}
.values-section { padding: 60px 0; background: var(--parchment); }
.value-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    border: 1px solid var(--sand);
    text-align: center;
    transition: var(--transition);
    height: 100%;
    position: relative;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--amber-200); }
.value-card .v-icon {
    width: 72px;
    height: 82px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(149, 104, 59,0.25);
}
.value-card h4 {
    font-family: var(--font-display);
    color: var(--walnut);
    font-size: 17px;
    margin-bottom: 10px;
}
.value-card p {
    color: var(--earth);
    font-size: 13px;
    line-height: 1.9;
    margin: 0;
}
.team-section { padding: 60px 0; }
.team-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--sand);
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.team-card .team-photo {
    height: 240px;
    background: linear-gradient(135deg, var(--amber-100), var(--cream));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber-300);
    font-size: 60px;
}
.team-card .team-info { padding: 20px; }
.team-card h5 { font-family: var(--font-display); color: var(--walnut); margin-bottom: 4px; font-size: 16px; }
.team-card span {
    color: var(--amber-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.team-card .team-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.team-card .team-social a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--parchment);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--earth);
    font-size: 12px;
    transition: var(--transition-fast);
}
.team-card .team-social a:hover { background: var(--amber-500); color: #fff; }

/* ============================================
   PAGE: FAQ
   ============================================ */
.faq-section { padding: 60px 0; }
.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}
.faq-tab {
    background: #fff;
    border: 1.5px solid var(--sand);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--earth);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.faq-tab i { color: var(--amber-500); }
.faq-tab:hover { border-color: var(--amber-400); color: var(--amber-700); }
.faq-tab.active {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-gold);
}
.faq-tab.active i { color: #fff; }
.faq-item {
    background: #fff;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--transition);
}
.faq-item:hover { border-color: var(--amber-200); }
.faq-item.open { border-color: var(--amber-400); box-shadow: var(--shadow-md); }
.faq-question {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--walnut);
    gap: 14px;
}
.faq-question .q-mark {
    width: 32px;
    height: 32px;
    background: var(--amber-50);
    color: var(--amber-600);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: var(--transition);
}
.faq-item.open .q-mark { background: var(--amber-500); color: #fff; transform: rotate(180deg); }
.faq-question .q-text { flex: 1; }
.faq-question .toggle-icon {
    color: var(--amber-500);
    font-size: 14px;
    transition: transform 0.3s var(--ease-out);
}
.faq-item.open .toggle-icon { transform: rotate(180deg); }
.faq-answer {
    padding: 0 24px 22px 70px;
    color: var(--earth);
    font-size: 14px;
    line-height: 2;
    display: none;
}
.faq-item.open .faq-answer { display: block; animation: faqSlide 0.3s var(--ease-out) both; }
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PAGE: 404
   ============================================ */
.error-section {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(180deg, #fff, var(--parchment));
}
.error-code {
    font-family: var(--font-display);
    font-size: 180px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    letter-spacing: -6px;
    position: relative;
}
.error-code .zero-shape {
    display: inline-flex;
    width: 120px;
    height: 140px;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-text-fill-color: transparent;
    margin: 0 8px;
    vertical-align: middle;
    box-shadow: 0 18px 50px rgba(149, 104, 59,0.25);
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-size: 50px;
}
.error-section h2 {
    font-family: var(--font-display);
    color: var(--walnut);
    font-size: 32px;
    margin-bottom: 14px;
}
.error-section p {
    color: var(--earth);
    font-size: 15px;
    max-width: 500px;
    margin: 0 auto 30px;
    line-height: 1.9;
}

/* ============================================
   LEGAL PAGES (TERMS / PRIVACY)
   ============================================ */
.legal-section { padding: 50px 0; }
.legal-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-xs);
}
.legal-card h2 {
    font-family: var(--font-display);
    color: var(--walnut);
    font-size: 22px;
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--sand);
}
.legal-card h2:first-child { margin-top: 0; }
.legal-card h3 {
    font-family: var(--font-display);
    color: var(--amber-700);
    font-size: 17px;
    margin: 20px 0 8px;
}
.legal-card p {
    color: var(--earth);
    font-size: 14px;
    line-height: 2;
    margin-bottom: 12px;
}
.legal-card ul { padding-right: 22px; margin-bottom: 14px; }
.legal-card ul li {
    color: var(--earth);
    font-size: 14px;
    line-height: 2;
    padding: 4px 0;
    list-style: disc;
}

/* Sticky table of contents */
.legal-toc {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 22px;
    border: 1px solid var(--sand);
    position: sticky;
    top: 120px;
}
.legal-toc h4 {
    font-family: var(--font-display);
    color: var(--walnut);
    font-size: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--sand);
}
.legal-toc ul li a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--earth);
    font-size: 13px;
    margin-bottom: 3px;
    transition: var(--transition-fast);
    border-right: 3px solid transparent;
}
.legal-toc ul li a:hover {
    background: var(--amber-50);
    color: var(--amber-700);
    border-right-color: var(--amber-400);
}

/* ============================================
   FORGOT PASSWORD
   ============================================ */
.forgot-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    background: linear-gradient(135deg, var(--amber-100), var(--amber-300));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber-700);
    font-size: 36px;
    box-shadow: 0 12px 30px rgba(149, 104, 59,0.2);
}

/* ============================================
   Cart bounce animation
   ============================================ */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.18) rotate(-5deg); }
    60% { transform: scale(0.95) rotate(3deg); }
}
.cart-bounce { animation: cartBounce 0.5s var(--ease-spring); }

/* Ripple */
.btn-honey, .btn-cart-icon { position: relative; overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    pointer-events: none;
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
}
@keyframes rippleEffect {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================
   RESPONSIVE: NEW PAGES
   ============================================ */
@media (max-width: 991px) {
    .shop-sidebar { position: relative; top: 0; margin-bottom: 24px; }
    .mobile-filter-btn { display: inline-flex; }
    .legal-toc { position: relative; top: 0; margin-bottom: 24px; }
    .account-sidebar { position: relative; top: 0; margin-bottom: 24px; }
    .error-code { font-size: 130px; }
    .error-code .zero-shape { width: 90px; height: 105px; font-size: 36px; }
    .thankyou-title { font-size: 28px; }
    .about-hero h2 { font-size: 28px; }
}

@media (max-width: 575px) {
    .shop-toolbar { flex-direction: column; align-items: stretch; }
    .shop-toolbar-right { justify-content: space-between; }
    .orders-table thead { display: none; }
    .orders-table tr {
        display: flex;
        flex-direction: column;
        padding: 14px;
        border-bottom: 1.5px solid var(--sand);
        gap: 6px;
    }
    .orders-table td { padding: 4px 0; border: none; }
    .orders-table td::before {
        content: attr(data-label) ': ';
        font-weight: 700;
        color: var(--walnut);
        margin-left: 6px;
    }
    .tracking-timeline::before { right: 18px; }
    .timeline-step .step-dot { width: 38px; height: 38px; font-size: 13px; }
    .timeline-step { gap: 14px; }
    .error-code { font-size: 90px; letter-spacing: -2px; }
    .error-code .zero-shape { width: 70px; height: 85px; font-size: 28px; }
    .account-content { padding: 22px 18px; }
    .legal-card { padding: 24px 20px; }
    .faq-question { padding: 16px 18px; font-size: 14px; }
    .faq-answer { padding: 0 18px 18px 52px; font-size: 13px; }
}

/* ============================================
   DARK MODE: NEW PAGES
   ============================================ */
body.dark-mode .shop-sidebar,
body.dark-mode .shop-toolbar,
body.dark-mode .account-sidebar,
body.dark-mode .account-content,
body.dark-mode .tracking-card,
body.dark-mode .legal-card,
body.dark-mode .legal-toc,
body.dark-mode .faq-item,
body.dark-mode .stat-card,
body.dark-mode .ty-info-card,
body.dark-mode .about-stat,
body.dark-mode .value-card,
body.dark-mode .team-card {
    background: #4F2D15;
    border-color: rgba(197, 156, 109, 0.12);
}
body.dark-mode .shop-sidebar h4,
body.dark-mode .account-content h2,
body.dark-mode .account-user h4,
body.dark-mode .tracking-header h3,
body.dark-mode .legal-card h2,
body.dark-mode .ty-info-card p,
body.dark-mode .faq-question,
body.dark-mode .stat-card .stat-value,
body.dark-mode .team-card h5,
body.dark-mode .value-card h4 {
    color: #F7F0E3;
}
body.dark-mode .filter-block ul li,
body.dark-mode .filter-check,
body.dark-mode .invoice-row .lbl,
body.dark-mode .invoice-row .val,
body.dark-mode .legal-card p,
body.dark-mode .legal-card ul li,
body.dark-mode .ty-info-card h5,
body.dark-mode .step-content .step-desc,
body.dark-mode .value-card p,
body.dark-mode .timeline-step .step-title,
body.dark-mode .faq-answer {
    color: rgba(248, 244, 238, 0.7);
}
body.dark-mode .filter-tag {
    background: rgba(197, 156, 109, 0.1);
    color: var(--amber-300);
    border-color: rgba(197, 156, 109, 0.25);
}
body.dark-mode .stat-card {
    background: linear-gradient(135deg, rgba(197, 156, 109,0.06), #4F2D15);
}
body.dark-mode .address-card { background: #5A3317; color: var(--cream); border-color: rgba(197, 156, 109,0.15); }
body.dark-mode .address-card p { color: rgba(255,255,255,0.7); }
body.dark-mode .address-card.default { background: rgba(197, 156, 109,0.08); }
body.dark-mode .pagination-wrap a,
body.dark-mode .pagination-wrap .active { background: #5A3317; color: var(--cream); border-color: rgba(197, 156, 109,0.15); }
body.dark-mode .orders-table { background: #4F2D15; }
body.dark-mode .orders-table thead { background: #5A3317; }
body.dark-mode .orders-table th,
body.dark-mode .orders-table td { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.05); }
body.dark-mode .orders-table tr:hover td { background: rgba(197, 156, 109,0.06); }
body.dark-mode .order-action-btn { background: transparent; color: var(--cream); border-color: rgba(197, 156, 109,0.2); }
body.dark-mode .faq-tab {
    background: #5A3317;
    border-color: rgba(197, 156, 109,0.15);
    color: rgba(255,255,255,0.7);
}
body.dark-mode .team-card .team-photo { background: linear-gradient(135deg, rgba(197, 156, 109,0.1), #4F2D15); }
body.dark-mode .wishlist-empty { background: #4F2D15; border-color: rgba(197, 156, 109,0.15); color: var(--cream); }
body.dark-mode .wishlist-empty h3 { color: var(--cream); }
body.dark-mode .legal-toc ul li a { color: rgba(255,255,255,0.7); }
body.dark-mode .step-item.active .step-number { color: #fff; }
body.dark-mode .step-line { background: rgba(255,255,255,0.1); }
body.dark-mode .price-range-vals { color: rgba(255,255,255,0.6); }

/* Form invalid state */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 4px rgba(194,84,80,0.08) !important;
}

/* Toastr overrides for RTL/luxury */
#toast-container > div {
    font-family: var(--font-body) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    opacity: 1 !important;
    padding: 14px 18px 14px 50px !important;
    background-position: 14px center !important;
}
#toast-container > .toast-success {
    background-color: #5B8C5A !important;
    background-image: none !important;
}
#toast-container > .toast-error {
    background-color: #C25450 !important;
    background-image: none !important;
}
#toast-container > .toast-info {
    background-color: #5B8FAD !important;
    background-image: none !important;
}
#toast-container > .toast-warning {
    background-color: #C59C6D !important;
    background-image: none !important;
}
.toast-title { font-family: var(--font-display) !important; font-weight: 700 !important; }
.toast-message { font-size: 13px !important; }


/* Rich-text content authored via the admin editor (product descriptions, etc.) */
.rich-content { line-height: 1.9; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 {
    color: var(--walnut, #4a3a24); font-weight: 800; margin: 1em 0 .5em;
}
.rich-content p { margin: 0 0 1em; }
.rich-content ul, .rich-content ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.rich-content li { margin: .3em 0; }
.rich-content a { color: var(--amber-600, #95683B); text-decoration: underline; }
.rich-content img { max-width: 100%; height: auto; border-radius: 8px; }
.rich-content table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.rich-content table td, .rich-content table th { border: 1px solid var(--sand, #E8DCC8); padding: 8px 10px; }

/* ============================================
   الركن اليماني - ENHANCEMENTS & DARK MODE
   Loads LAST — overrides main design system
   ============================================ */

/* ── Dark Mode Variables ── */
:root {
    --bg-dark: #2E1A0B;
    --surface-dark: #3E230F;
    --card-dark: #4F2D15;
    --card-hover-dark: #543012;
    --border-dark: rgba(197, 156, 109, 0.08);
    --border-hover-dark: rgba(197, 156, 109, 0.15);
    --text-dark: #E8DCC8;
    --text-secondary-dark: #A09487;
    --text-muted-dark: rgba(255,255,255,0.4);
}

/* ── Dark Mode Toggle (Header) ── */
.dark-mode-toggle { display: none; }

.dark-mode-toggle-header {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--parchment);
    border: 1px solid var(--sand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--amber-500);
    transition: all 0.3s var(--ease-out);
    margin-right: 4px;
    position: relative;
    overflow: hidden;
}
.dark-mode-toggle-header:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}
.dark-mode-toggle-header .fa-sun { display: none; }
.dark-mode-toggle-header .fa-moon { display: block; }

/* ── Cart Hover Dropdown ── */
.header-cart-wrap { position: relative; }
.cart-hover-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(28, 20, 16, 0.10);
    border: 1px solid var(--sand);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s var(--ease-out);
    z-index: 1000;
    overflow: hidden;
}
.header-cart-wrap:hover .cart-hover-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}
.cart-hover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sand);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--walnut);
}
.cart-hover-count { font-size: 11px; color: var(--stone); font-weight: 400; }
.cart-hover-empty { text-align: center; padding: 28px 18px; }
.cart-hover-empty i { font-size: 28px; margin-bottom: 10px; display: block; color: var(--amber-200); }
.cart-hover-empty p { font-size: 13px; color: var(--stone); margin: 0; font-weight: 300; }
.cart-hover-footer { padding: 12px 18px 14px; border-top: 1px solid var(--sand); }
.cart-hover-footer .btn { border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px; }

/* ── Hover-cart items list (populated by YC.renderMiniCart from /api/cart) ── */
.cart-hover-items { max-height: 280px; overflow-y: auto; padding: 6px 6px 4px; }
.cart-hover-items::-webkit-scrollbar { width: 6px; }
.cart-hover-items::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }
.cart-hover-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    transition: background 0.15s ease;
}
.cart-hover-item:hover { background: #fbf6ec; }
.cart-hover-item + .cart-hover-item { border-top: 1px dashed var(--sand); }
.cart-hover-item-img {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 8px; overflow: hidden;
    background: #fbf6ec; border: 1px solid var(--sand);
    display: flex; align-items: center; justify-content: center;
}
.cart-hover-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-hover-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-hover-item-name {
    font-size: 13px; font-weight: 600; color: var(--ink, #2a1f10);
    text-decoration: none; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.15s ease;
}
.cart-hover-item-name:hover { color: var(--amber-700, #a07432); }
.cart-hover-item-meta { font-size: 11px; color: var(--stone); }
.cart-hover-item-total {
    font-size: 12px; font-weight: 700; color: var(--amber-700, #a07432);
    white-space: nowrap; flex: 0 0 auto;
}
.cart-hover-more {
    text-align: center; font-size: 11px; color: var(--stone);
    padding: 6px 12px 4px; font-style: italic;
}

/* ── Fixed Header Enhancement ── */
.main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* Fix top bar overlapping header actions */
.top-bar {
    z-index: 999 !important;
}

/* Body padding for fixed header */
.top-bar + .main-header + .main-nav + .hero-section {
    /* Homepage: top-bar + header + nav are stacked */
}

/* Sub-pages: push content below fixed header */
.main-header + .offcanvas + .breadcrumb-section,
.main-header + div + .breadcrumb-section {
    /* Handled by .breadcrumb-section margin-top */
}
.top-bar-marquee {
    pointer-events: none;
}
.top-bar-marquee span {
    pointer-events: auto;
}

/* Dark scrollbar */
body.dark-mode::-webkit-scrollbar-track { background: var(--bg-dark); }
body.dark-mode::-webkit-scrollbar-thumb { border-color: var(--bg-dark); }

/* ============================================
   DARK MODE - Complete System
   ============================================ */
body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
}
body.dark-mode::before { opacity: 0.012; }
body.dark-mode::after { opacity: 0.008; }

/* ── Dark Toggle State ── */
body.dark-mode .dark-mode-toggle-header {
    background: rgba(197, 156, 109, 0.08);
    border-color: var(--border-dark);
    color: var(--amber-300);
}
body.dark-mode .dark-mode-toggle-header:hover {
    background: var(--amber-500);
    color: #fff;
}
body.dark-mode .dark-mode-toggle-header .fa-sun { display: block; }
body.dark-mode .dark-mode-toggle-header .fa-moon { display: none; }

/* ── Dark Top Bar ── */
body.dark-mode .top-bar {
    background: #1F1206;
    border-color: var(--border-dark);
}

/* ── Dark Header ── */
body.dark-mode .main-header {
    background: rgba(14, 11, 8, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border-dark);
}
body.dark-mode .main-header.scrolled {
    box-shadow: 0 1px 30px rgba(0,0,0,0.2);
}

/* ── Dark Navigation ── */
body.dark-mode .main-nav {
    background: var(--surface-dark);
    border-color: var(--border-dark);
}
body.dark-mode .nav-link { color: var(--text-secondary-dark); }
body.dark-mode .nav-link:hover,
body.dark-mode .nav-item.active .nav-link { color: var(--amber-400); }

/* ── Dark Search ── */
body.dark-mode .search-input {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .search-input::placeholder { color: var(--text-muted-dark); }
body.dark-mode .search-input:focus {
    border-color: var(--amber-400);
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06);
    background: rgba(255,255,255,0.06);
}

/* ── Dark Header Actions ── */
body.dark-mode .header-action-btn { color: var(--text-dark); }
body.dark-mode .header-action-btn i { color: var(--amber-400); }
body.dark-mode .header-action-btn:hover { background: rgba(197, 156, 109, 0.06); }
body.dark-mode .action-text { color: var(--text-muted-dark); }
body.dark-mode .badge-count { border-color: var(--bg-dark); }

body.dark-mode .mobile-menu-toggle {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
}
body.dark-mode .mobile-menu-toggle span { background: var(--amber-400); }

/* ── Dark Features Bar ── */
body.dark-mode .feature-item {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .feature-item:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
body.dark-mode .feature-info h4 { color: var(--text-dark); }
body.dark-mode .feature-info p { color: var(--text-muted-dark); }

/* ── Dark Categories ── */
body.dark-mode .categories-section { background: var(--bg-dark); }
body.dark-mode .categories-section::before { opacity: 0.005; }
body.dark-mode .category-card-inner {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .category-card:hover .category-card-inner {
    border-color: var(--border-hover-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
body.dark-mode .category-card-inner h3 { color: var(--text-dark); }
body.dark-mode .category-card-inner p { color: var(--text-muted-dark); }
body.dark-mode .category-count { background: rgba(197, 156, 109, 0.06); }

/* ── Dark Products ── */
body.dark-mode .products-section { background: var(--bg-dark) !important; }
body.dark-mode .products-section:nth-of-type(even),
body.dark-mode .products-alt { background: var(--surface-dark) !important; }

body.dark-mode .product-card {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .product-card:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
body.dark-mode .product-info { color: var(--text-dark); }
body.dark-mode .product-title, body.dark-mode .product-title a { color: var(--text-dark); }
body.dark-mode .product-card:hover .product-title { color: var(--amber-400); }
body.dark-mode .product-category { color: var(--amber-400); }
body.dark-mode .product-image { background: var(--surface-dark); }
body.dark-mode .rating-count { color: var(--text-muted-dark); }
body.dark-mode .old-price { color: var(--text-muted-dark); }
body.dark-mode .btn-details {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .btn-details:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}
body.dark-mode .product-wishlist {
    background: rgba(26, 21, 18, 0.9);
    color: var(--text-muted-dark);
}
body.dark-mode .overlay-btn {
    background: rgba(26, 21, 18, 0.9);
    color: var(--text-dark);
}

/* ── Dark Section Headers ── */
body.dark-mode .section-title { color: var(--text-dark); }
body.dark-mode .section-badge {
    background: rgba(197, 156, 109, 0.06);
    border-color: var(--border-dark);
}
body.dark-mode .section-view-all {
    background: rgba(197, 156, 109, 0.04);
    border-color: var(--border-dark);
    color: var(--amber-400);
}
body.dark-mode .section-view-all:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}

/* ── Dark Promo ── */
body.dark-mode .promo-card { border-color: var(--border-dark); }

/* ── Dark Testimonials ── */
body.dark-mode .testimonials-section { background: var(--bg-dark); }
body.dark-mode .testimonial-card {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .testimonial-card:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
body.dark-mode .testimonial-card::before { color: rgba(197, 156, 109, 0.04); }
body.dark-mode .testimonial-text { color: var(--text-secondary-dark); }
body.dark-mode .author-info h5 { color: var(--text-dark); }
body.dark-mode .author-info span { color: var(--text-muted-dark); }

/* ── Dark Newsletter ── */
body.dark-mode .newsletter-section { background: transparent; }
body.dark-mode .newsletter-card { border-color: var(--border-dark); }

/* ── Dark Footer ── */
body.dark-mode .main-footer { background: #1A0F05; }

/* ── Dark Mega Dropdown ── */
body.dark-mode .mega-dropdown {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
body.dark-mode .mega-col h4 { border-color: var(--border-dark); }
body.dark-mode .mega-col ul li a { color: var(--text-secondary-dark); }
body.dark-mode .mega-col ul li a:hover { color: var(--amber-400); }
body.dark-mode .mega-featured-card { background: rgba(197, 156, 109, 0.04); }

/* ── Dark Cart Dropdown ── */
body.dark-mode .cart-hover-dropdown {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
body.dark-mode .cart-hover-header { border-color: var(--border-dark); color: var(--text-dark); }
body.dark-mode .cart-hover-footer { border-color: var(--border-dark); }

/* ── Dark Swiper ── */
body.dark-mode .products-section .swiper-button-next,
body.dark-mode .products-section .swiper-button-prev {
    background: var(--card-dark);
    border-color: var(--border-dark);
    color: var(--amber-400);
}
body.dark-mode .products-section .swiper-button-next:hover,
body.dark-mode .products-section .swiper-button-prev:hover {
    background: var(--amber-500);
    color: #fff;
}

/* ── Dark Misc ── */
body.dark-mode .scroll-to-top { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
body.dark-mode .toast-notification { box-shadow: 0 6px 24px rgba(0,0,0,0.3); }

/* ── Dark Auth Pages ── */
body.dark-mode .breadcrumb-section { background: #241407; }
body.dark-mode .auth-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .auth-form-side { background: var(--card-dark); }
body.dark-mode .auth-form-side h2 { color: var(--text-dark); }
body.dark-mode .auth-form-side .auth-subtitle { color: var(--text-muted-dark); }
body.dark-mode .form-floating-custom label { color: var(--text-dark); }
body.dark-mode .form-floating-custom .form-control {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .form-floating-custom .form-control:focus {
    border-color: var(--amber-400);
    background: rgba(255,255,255,0.05);
}
body.dark-mode .form-floating-custom .input-icon { color: var(--amber-400); }
body.dark-mode .password-toggle { color: var(--text-muted-dark); }
body.dark-mode .form-check-custom label { color: var(--text-dark); }
body.dark-mode .forgot-link { color: var(--amber-400); }
body.dark-mode .auth-divider::before { background: var(--border-dark); }
body.dark-mode .auth-divider span { background: var(--card-dark); color: var(--text-muted-dark); }
body.dark-mode .social-auth-btn {
    border-color: var(--border-dark);
    color: var(--text-dark);
    background: transparent;
}
body.dark-mode .social-auth-btn:hover {
    border-color: var(--amber-400);
    background: rgba(197, 156, 109, 0.04);
}
body.dark-mode .auth-switch { color: var(--text-muted-dark); }
body.dark-mode .auth-switch a { color: var(--amber-400); }

/* ── Dark Cart & Checkout ── */
body.dark-mode .cart-table-wrap { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary h3 { color: var(--text-dark); }
body.dark-mode .checkout-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card h3 { color: var(--text-dark); }
body.dark-mode .contact-info-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-info-card h4 { color: var(--text-dark); }
body.dark-mode .contact-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .map-card { background: var(--card-dark); border-color: var(--border-dark); }

/* ── Dark Auth Section ── */
body.dark-mode .auth-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #241407 100%) !important;
}
body.dark-mode .auth-card {
    box-shadow: 0 4px 30px rgba(0,0,0,0.2) !important;
}

/* ============================================
   MOBILE HEADER FIX
   ============================================ */
@media (max-width: 991px) {
    .header-wrapper {
        flex-direction: row-reverse !important;
    }
    .header-logo {
        order: 0 !important;
        margin-left: auto;
    }
    .header-actions {
        order: 1 !important;
    }
    .mobile-menu-toggle {
        order: 2 !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   AUTH PAGES - Modern Immersive Design
   ============================================ */

/* Hide breadcrumb on auth pages for cleaner look */
body:has(.auth-section) .breadcrumb-section { display: none !important; }

/* Full immersive auth section */
.auth-section {
    padding: 100px 0 50px !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(197, 156, 109, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(197, 156, 109, 0.03) 0%, transparent 50%),
        linear-gradient(160deg, var(--ivory, #FBF6ED) 0%, var(--parchment, #F7F0E3) 50%, var(--ivory, #FBF6ED) 100%) !important;
    position: relative;
    overflow: hidden;
}
.auth-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 156, 109, 0.06) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    pointer-events: none;
}

/* Auth Card - Modern Glass */
.auth-card {
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 6px rgba(28, 20, 16, 0.02),
        0 12px 40px rgba(28, 20, 16, 0.06),
        0 0 0 1px rgba(28, 20, 16, 0.03) !important;
    border: none !important;
    max-width: 940px !important;
    margin: 40px auto !important;
    backdrop-filter: blur(2px);
}

/* Visual Side - Rich Dark */
.auth-visual {
    background: linear-gradient(165deg, #2E1A0B 0%, #62391C 40%, #784625 70%, #62391C 100%) !important;
    padding: 50px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 500px;
}
.auth-visual::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.03 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E") !important;
    background-size: 56px 100px !important;
}
.auth-visual::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 156, 109, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.auth-visual img {
    width: 85px !important;
    margin-bottom: 28px !important;
    filter: drop-shadow(0 0 30px rgba(197, 156, 109, 0.3)) !important;
    animation: none !important;
    position: relative;
    z-index: 2;
}
.auth-visual h2 {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 2;
    text-align: center;
}
.auth-visual p {
    font-size: 14px !important;
    color: rgba(255,255,255,0.4) !important;
    text-align: center !important;
    line-height: 1.9 !important;
    font-weight: 300 !important;
    max-width: 260px;
    position: relative;
    z-index: 2;
}

/* Form Side - Clean & Spacious */
.auth-form-side {
    padding: 44px 40px !important;
    background: #fff !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-form-side h2 {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--walnut) !important;
    margin-bottom: 6px !important;
}
.auth-form-side .auth-subtitle {
    font-size: 14px !important;
    color: var(--stone) !important;
    margin-bottom: 32px !important;
    font-weight: 300 !important;
}

/* ── Modern Form Inputs ── */
.form-floating-custom {
    margin-bottom: 20px !important;
    position: relative !important;
}
.form-floating-custom label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--earth, #6B5D52) !important;
    margin-bottom: 8px !important;
    display: block !important;
    letter-spacing: 0.3px;
}
.form-floating-custom .form-control {
    border: 1.5px solid var(--sand, #E8DCC8) !important;
    border-radius: 14px !important;
    padding: 15px 50px 15px 48px !important;
    font-size: 14px !important;
    background: var(--parchment, #F7F0E3) !important;
    transition: all 0.35s var(--ease-out, ease) !important;
    height: auto !important;
    font-family: var(--font-body) !important;
    color: var(--walnut, #62391C) !important;
    font-weight: 400;
    line-height: 1.4;
}
.form-floating-custom .form-control::placeholder {
    color: var(--dust, #C4B8AB) !important;
    font-weight: 300;
    font-size: 13px;
}
.form-floating-custom .form-control:focus {
    border-color: var(--amber-500) !important;
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.08), 0 4px 12px rgba(149, 104, 59, 0.06) !important;
    background: #fff !important;
    transform: translateY(-1px);
}

/* ── Icon positioning - anchored to the input bottom ── */
.form-floating-custom .input-icon,
.form-floating-custom > i.input-icon,
.form-floating-custom > span.input-icon {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    color: var(--amber-500) !important;
    font-size: 16px !important;
    z-index: 5 !important;
    width: 22px !important;
    height: 50px !important;
    text-align: center !important;
    line-height: 50px !important;
    pointer-events: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.form-floating-custom > span.input-icon i {
    font-size: 16px;
    line-height: 1;
}

/* Password toggle - perfectly centered vertically with input */
.password-toggle {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    color: var(--dust, #C4B8AB) !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    width: 30px;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.25s ease;
}
.password-toggle:hover {
    color: var(--amber-500) !important;
}

/* ── RTL flip for icons inside .form-floating-custom ──
   In RTL the leading (lock) icon belongs on the right (visual start of the
   field) and the eye toggle on the left (visual end). The !important LTR rules
   above only set ONE physical side, so we MUST also force the opposite side
   to auto here — otherwise both insets resolve and the browser falls back to
   the trailing one in RTL, stacking icons on top of each other. */
[dir="rtl"] .form-floating-custom .input-icon,
[dir="rtl"] .form-floating-custom > i.input-icon,
[dir="rtl"] .form-floating-custom > span.input-icon,
[dir="rtl"] .form-floating-custom .input-wrap .input-icon {
    right: 16px !important;
    left: auto !important;
}
[dir="rtl"] .password-toggle,
[dir="rtl"] .form-floating-custom .password-toggle,
[dir="rtl"] .form-floating-custom .input-wrap .password-toggle {
    left: 16px !important;
    right: auto !important;
}

/* ── Checkbox & Links ── */
.form-check-custom {
    margin-bottom: 24px !important;
}
.form-check-custom .form-check-input {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--sand) !important;
    margin-top: 0;
}
.form-check-custom .form-check-input:checked {
    background-color: var(--amber-500) !important;
    border-color: var(--amber-500) !important;
}
.form-check-custom label {
    font-size: 13px !important;
    color: var(--earth) !important;
}
.forgot-link {
    font-size: 13px !important;
    color: var(--amber-500) !important;
    font-weight: 500 !important;
}
.forgot-link:hover {
    color: var(--amber-600) !important;
    text-decoration: underline !important;
}

/* ── Submit Button - Bold & Modern ── */
.auth-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(149, 104, 59, 0.3) !important;
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600, #95683B)) !important;
    border: none !important;
    transition: all 0.35s var(--ease-out) !important;
}
.auth-btn:hover {
    box-shadow: 0 8px 32px rgba(149, 104, 59, 0.4) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--amber-600, #95683B), var(--amber-500)) !important;
}

/* ── Divider ── */
.auth-divider {
    margin: 24px 0 !important;
}
.auth-divider::before {
    background: var(--sand) !important;
}
.auth-divider span {
    font-size: 12px !important;
    color: var(--dust) !important;
    background: #fff !important;
    padding: 0 16px !important;
    letter-spacing: 0.3px;
}

/* ── Social Buttons - Modern Pill Style ── */
.social-auth {
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.social-auth-btn {
    border: 1.5px solid var(--sand) !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s var(--ease-out) !important;
    background: var(--parchment, #F7F0E3) !important;
    color: var(--walnut) !important;
}
.social-auth-btn:hover {
    border-color: var(--amber-300) !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(28, 20, 16, 0.06) !important;
    transform: translateY(-1px);
}
.social-auth-btn i {
    font-size: 16px;
}

/* ── Switch Link ── */
.auth-switch {
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 6px !important;
    color: var(--stone) !important;
}
.auth-switch a {
    color: var(--amber-500) !important;
    font-weight: 600 !important;
}
.auth-switch a:hover {
    text-decoration: underline !important;
}

/* ── Responsive Auth ── */
@media (max-width: 991px) {
    .auth-visual { display: none !important; }
    .auth-card {
        max-width: 500px !important;
        margin: 30px auto !important;
        border-radius: 24px !important;
    }
    .auth-form-side { padding: 36px 28px !important; }
}
@media (max-width: 575px) {
    .auth-section { padding: 20px 0 !important; min-height: calc(100vh - 60px) !important; }
    .auth-card { border-radius: 20px !important; margin: 16px !important; }
    .auth-form-side { padding: 28px 20px !important; }
    .auth-form-side h2 { font-size: 22px !important; }
    .auth-btn { padding: 14px !important; font-size: 15px !important; }
    .social-auth-btn { padding: 12px !important; font-size: 13px !important; }
}

/* ── Dark Mode Auth ── */
body.dark-mode .auth-section {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(197, 156, 109, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(197, 156, 109, 0.02) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-dark) 0%, #241407 100%) !important;
}
body.dark-mode .auth-section::before { background: radial-gradient(circle, rgba(197, 156, 109, 0.04) 0%, transparent 70%); }
body.dark-mode .auth-card {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--border-dark) !important;
}
body.dark-mode .auth-form-side {
    background: var(--card-dark) !important;
}
body.dark-mode .auth-form-side h2 { color: var(--text-dark) !important; }
body.dark-mode .auth-form-side .auth-subtitle { color: var(--text-muted-dark) !important; }
body.dark-mode .form-floating-custom label { color: var(--text-secondary-dark) !important; }
body.dark-mode .form-floating-custom .form-control {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-dark) !important;
}
body.dark-mode .form-floating-custom .form-control::placeholder { color: var(--text-muted-dark) !important; }
body.dark-mode .form-floating-custom .form-control:focus {
    border-color: var(--amber-400) !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06), 0 2px 8px rgba(0,0,0,0.1) !important;
}
body.dark-mode .form-floating-custom .input-icon,
body.dark-mode .form-floating-custom > i.input-icon,
body.dark-mode .form-floating-custom > span.input-icon { color: var(--amber-400) !important; }
body.dark-mode .password-toggle { color: var(--text-muted-dark) !important; }
body.dark-mode .form-check-custom .form-check-input { border-color: var(--border-dark) !important; }
body.dark-mode .form-check-custom label { color: var(--text-dark) !important; }
body.dark-mode .forgot-link { color: var(--amber-400) !important; }
body.dark-mode .auth-divider::before { background: var(--border-dark) !important; }
body.dark-mode .auth-divider span { background: var(--card-dark) !important; color: var(--text-muted-dark) !important; }
body.dark-mode .social-auth-btn {
    border-color: var(--border-dark) !important;
    color: var(--text-dark) !important;
    background: rgba(255,255,255,0.02) !important;
}
body.dark-mode .social-auth-btn:hover {
    border-color: var(--amber-400) !important;
    background: rgba(197, 156, 109, 0.04) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
body.dark-mode .auth-switch { color: var(--text-muted-dark) !important; }
body.dark-mode .auth-switch a { color: var(--amber-400) !important; }

/* ============================================
   DARK MODE: SUB-PAGES (Cart, Checkout, Product, Contact)
   ============================================ */

/* Cart page */
body.dark-mode .cart-section { background: var(--bg-dark); }
body.dark-mode .cart-table-wrap { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-table thead { background: var(--surface-dark); }
body.dark-mode .cart-table th { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .cart-table td { border-color: var(--border-dark); }
body.dark-mode .cart-product-name { color: var(--text-dark); }
body.dark-mode .cart-product-cat { color: var(--text-muted-dark); }
body.dark-mode .cart-product-img { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .cart-remove { border-color: var(--border-dark); color: var(--text-muted-dark); }
body.dark-mode .quantity-controls { border-color: var(--border-dark); }
body.dark-mode .qty-btn { background: var(--surface-dark); color: var(--text-dark); }
body.dark-mode .qty-input { color: var(--text-dark); }
body.dark-mode .cart-summary { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary h3 { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .summary-row .label { color: var(--text-muted-dark); }
body.dark-mode .summary-row .value { color: var(--text-dark); }
body.dark-mode .summary-row.total .label { color: var(--text-dark); }
body.dark-mode .coupon-form input { background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark); }

/* Checkout page */
body.dark-mode .checkout-section { background: var(--bg-dark); }
body.dark-mode .checkout-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card h3 { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card label { color: var(--text-dark); }
body.dark-mode .checkout-form-card .form-control,
body.dark-mode .checkout-form-card .form-select {
    background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark);
}
body.dark-mode .checkout-form-card .form-control:focus,
body.dark-mode .checkout-form-card .form-select:focus {
    border-color: var(--amber-400); background: rgba(255,255,255,0.04);
}
body.dark-mode .step-item { color: var(--text-muted-dark); }
body.dark-mode .step-number { border-color: var(--border-dark); }
body.dark-mode .step-line { background: var(--border-dark); }
body.dark-mode .payment-method { border-color: var(--border-dark); }
body.dark-mode .payment-method:hover,
body.dark-mode .payment-method.selected { border-color: var(--amber-400); background: rgba(197, 156, 109, 0.04); }
body.dark-mode .method-info h5 { color: var(--text-dark); }
body.dark-mode .method-info p { color: var(--text-muted-dark); }
body.dark-mode .order-item { border-color: var(--border-dark); }
body.dark-mode .order-item-img { background: var(--surface-dark); }
body.dark-mode .order-item-name { color: var(--text-dark); }
body.dark-mode .order-item-qty { color: var(--text-muted-dark); }

/* Product Details page */
body.dark-mode .product-detail-section { background: var(--bg-dark); }
body.dark-mode .gallery-main { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .gallery-thumb { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .gallery-thumb.active { border-color: var(--amber-400); }
body.dark-mode .gallery-zoom-btn { background: var(--card-dark); color: var(--text-dark); }
body.dark-mode .detail-category { background: rgba(197, 156, 109, 0.06); border-color: var(--border-dark); }
body.dark-mode .detail-title { color: var(--text-dark); }
body.dark-mode .detail-rating { border-color: var(--border-dark); }
body.dark-mode .detail-rating .rating-text { color: var(--text-muted-dark); }
body.dark-mode .detail-description { color: var(--text-secondary-dark); border-color: var(--border-dark); }
body.dark-mode .meta-row .meta-label { color: var(--text-dark); }
body.dark-mode .meta-row .meta-value { color: var(--text-secondary-dark); }
body.dark-mode .quantity-selector label { color: var(--text-dark); }
body.dark-mode .detail-share { border-color: var(--border-dark); }
body.dark-mode .detail-share span { color: var(--text-dark); }
body.dark-mode .share-btn { border-color: var(--border-dark); color: var(--text-muted-dark); }
body.dark-mode .product-tabs-section { background: var(--surface-dark); }
body.dark-mode .product-tabs .nav-tabs { border-color: var(--border-dark); }
body.dark-mode .product-tabs .nav-link { color: var(--text-muted-dark); }
body.dark-mode .product-tabs .nav-link.active { color: var(--amber-400); background: rgba(197, 156, 109, 0.04); }
body.dark-mode .tab-content-inner { color: var(--text-secondary-dark); }
body.dark-mode .tab-content-inner h4,
body.dark-mode .tab-content-inner h5 { color: var(--text-dark) !important; }
body.dark-mode .spec-table td:first-child { background: var(--card-dark); color: var(--text-dark); }
body.dark-mode .spec-table tr { border-color: var(--border-dark); }
body.dark-mode .review-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .reviewer-name { color: var(--text-dark); }
body.dark-mode .review-text { color: var(--text-secondary-dark); }

/* Contact page */
body.dark-mode .contact-section { background: var(--bg-dark); }
body.dark-mode .contact-info-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-info-card:hover { border-color: var(--border-hover-dark); }
body.dark-mode .contact-info-card h4 { color: var(--text-dark); }
body.dark-mode .contact-info-card p { color: var(--text-muted-dark); }
body.dark-mode .contact-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-form-card h3 { color: var(--text-dark); }
body.dark-mode .contact-form .form-control,
body.dark-mode .contact-form .form-select {
    background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark);
}
body.dark-mode .contact-form .form-control:focus {
    border-color: var(--amber-400); background: rgba(255,255,255,0.04);
}
body.dark-mode .contact-form label { color: var(--text-dark); }
body.dark-mode .map-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .map-placeholder { background: var(--surface-dark); }

/* ============================================================
   DARK MODE — GLOBAL FORM CONTROLS
   A site-wide baseline so every text input / textarea / select is
   legible in dark mode (previously only a handful of components
   were themed, leaving bright-white fields like the shop search &
   sort dropdown). Component-specific dark rules have higher
   specificity and still win where they exist.
   ============================================================ */
/* Baseline for bare text-like fields. Wrapped in :where() so it stays
   low-specificity — every component-specific dark rule (header search,
   checkout, contact…) still wins and keeps its bespoke look. */
body.dark-mode :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), textarea, select) {
    background-color: var(--surface-dark);
    border-color: rgba(197, 156, 109, 0.22);
    color: var(--text-dark);
}
/* Bootstrap .form-control/.form-select need enough weight to beat
   Bootstrap's own defaults, but stay below app component rules (0,3,0). */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--surface-dark);
    border-color: rgba(197, 156, 109, 0.22);
    color: var(--text-dark);
}
body.dark-mode :where(input, textarea, select)::placeholder,
body.dark-mode .form-control::placeholder {
    color: var(--text-muted-dark, rgba(255, 255, 255, 0.4));
    opacity: 1;
}
body.dark-mode :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), textarea, select):focus {
    background-color: var(--card-dark);
    border-color: var(--amber-500, #C59C6D);
    color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.15);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--card-dark);
    border-color: var(--amber-500, #C59C6D);
    color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.15);
}
/* Native dropdown options (the opened list) */
body.dark-mode select option,
body.dark-mode .form-select option {
    background-color: var(--card-dark);
    color: var(--text-dark);
}
/* Bootstrap .form-select ships a dark chevron SVG that vanishes on a
   dark field — swap it for a light one. */
body.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8DCC8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Checkboxes / radios adopt the brand accent so ticks are visible */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] { accent-color: var(--amber-500, #C59C6D); }
/* Chrome autofill: force dark background + light text */
body.dark-mode input:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-dark);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-dark) inset;
    caret-color: var(--text-dark);
    transition: background-color 5000s ease-in-out 0s;
}

/* Shop sort dropdown keeps its own hover/focus that flipped to white */
body.dark-mode .shop-toolbar select { background: var(--surface-dark); color: var(--text-dark); }
body.dark-mode .shop-toolbar select:hover,
body.dark-mode .shop-toolbar select:focus {
    background: var(--card-dark);
    border-color: var(--amber-400);
}

/* ── Breadcrumb fix for fixed header ── */
.breadcrumb-section {
    margin-top: 80px !important;
    padding: 28px 0 !important;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    /* Tighter banner on phones — the old 28px top+bottom padding left a big empty
       brown gap above/below the short title. */
    .breadcrumb-section { margin-top: 56px !important; padding: 13px 0 !important; }
    .breadcrumb-content h1 { font-size: 20px; margin-bottom: 3px; }
    .breadcrumb-nav { font-size: 12px; }
}

/* Breadcrumb dark mode */
body.dark-mode .breadcrumb-section { background: linear-gradient(135deg, #1F1206 0%, #2E1A0B 100%); }

/* ============================================
   ENHANCED HOVER EFFECTS & MICRO-INTERACTIONS
   ============================================ */

/* Smooth link transitions */
a:not(.btn-honey):not(.btn-outline-honey):not(.btn-details):not(.btn-cart-icon) {
    transition: color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

/* Button hover shine */
.btn-honey {
    position: relative;
    overflow: hidden;
}
.btn-honey::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255,255,255,0.08), transparent);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.7s var(--ease-out);
    pointer-events: none;
}
.btn-honey:hover::after {
    transform: rotate(45deg) translateX(100%);
}

/* Cart icon pulse */
.btn-cart-icon:hover {
    animation: cartPulse 0.4s var(--ease-out);
}
@keyframes cartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1.08); }
}

/* Details button arrow */
.btn-details:hover i {
    animation: arrowSlide 0.4s var(--ease-out);
}
@keyframes arrowSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
    100% { transform: translateX(-4px); }
}

/* Footer social enhanced */
.footer-social a {
    transition: all 0.35s var(--ease-spring);
}

/* Wishlist heart */
.product-wishlist.active {
    animation: heartBeat 0.4s var(--ease-spring);
}
@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Product card refined transition */
.product-card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.category-card-inner {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.testimonial-card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

/* Enhanced mega dropdown */
.mega-dropdown {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    border-top: 2px solid var(--amber-500) !important;
}
.mega-col ul li a { position: relative; }
.mega-col ul li a::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--amber-500);
    border-radius: 2px;
    transition: height 0.2s var(--ease-out);
    transform: translateY(-50%);
}
.mega-col ul li a:hover::before { height: 14px; }

/* Hero refinements */
.hero-badge { animation: none !important; }
.hero-title { text-shadow: 0 2px 40px rgba(0,0,0,0.2); }
.hero-subtitle { text-shadow: 0 1px 10px rgba(0,0,0,0.1); }

/* Hero nav arrows */
.hero-nav.swiper-button-next,
.hero-nav.swiper-button-prev {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    transition: all 0.3s var(--ease-out) !important;
}
.hero-nav.swiper-button-next:hover,
.hero-nav.swiper-button-prev:hover {
    background: var(--amber-500) !important;
    border-color: var(--amber-500) !important;
}
.hero-nav::after { font-size: 15px !important; }

.hero-pagination { bottom: 28px !important; }

/* Scroll progress */
.scroll-progress {
    height: 3px !important;
    box-shadow: 0 0 8px rgba(149, 104, 59, 0.3) !important;
}

/* Section z-index */
.products-section,
.categories-section,
.testimonials-section,
.newsletter-section,
.promo-banner {
    position: relative;
    z-index: 1;
}

/* ============================================
   COMPLETE MOBILE FIX
   ============================================ */
@media (max-width: 991px) {
    .main-header .container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .header-wrapper {
        gap: 8px !important;
        justify-content: space-between;
    }
    .header-logo img { height: 40px !important; }
    .header-actions { gap: 0 !important; order: 0; }
    .header-action-btn { padding: 5px 6px !important; }
    .header-action-btn i { font-size: 17px !important; }
    .badge-count {
        width: 15px !important;
        height: 15px !important;
        font-size: 8px !important;
        top: 0 !important;
        left: 3px !important;
        border-width: 1.5px !important;
    }
    .dark-mode-toggle-header {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
        margin-right: 2px !important;
    }
    .mobile-menu-toggle {
        width: 34px !important;
        height: 34px !important;
        padding: 7px !important;
        border-radius: 9px !important;
        order: -1;
    }
    .mobile-menu-toggle span {
        width: 18px !important;
        height: 1.5px !important;
    }
    .cart-hover-dropdown { display: none !important; }
    .language-switch { display: none !important; }
    .header-search { display: none !important; }
    .action-text { display: none !important; }
}

/* Mobile Menu */
#mobileMenu { max-width: 300px !important; }
#mobileMenu .offcanvas-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--sand);
}
#mobileMenu .mobile-logo { height: 38px !important; }
#mobileMenu .offcanvas-body { padding: 16px !important; }

body.dark-mode #mobileMenu {
    background: var(--card-dark);
}
body.dark-mode #mobileMenu .offcanvas-header { border-color: var(--border-dark); }
body.dark-mode .mobile-nav-list li a { color: var(--text-dark); }
body.dark-mode .mobile-nav-list li a:hover,
body.dark-mode .mobile-nav-list li a.active { background: rgba(197, 156, 109, 0.06); }
body.dark-mode .mobile-search .form-control {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .mobile-footer-actions { border-color: var(--border-dark); }
body.dark-mode .mobile-footer-actions a { color: var(--text-secondary-dark); }

/* ── Dark mode: header search-suggest dropdown ── */
body.dark-mode .search-suggest {
    background: var(--card-dark);
    border-color: rgba(197, 156, 109, .22);
    box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .7);
}
body.dark-mode .search-suggest-item { color: var(--text-dark); }
body.dark-mode .search-suggest-item:hover,
body.dark-mode .search-suggest-item.is-active { background: rgba(197, 156, 109, .12); }
body.dark-mode .search-suggest-name { color: var(--text-dark); }
body.dark-mode .search-suggest-cat,
body.dark-mode .search-suggest-empty,
body.dark-mode .search-suggest-loading { color: var(--text-secondary-dark); }
body.dark-mode .search-suggest-thumb { border-color: var(--border-dark); background-color: var(--surface-dark); }
body.dark-mode .search-suggest-all {
    background: linear-gradient(180deg, var(--surface-dark), var(--bg-dark));
    border-top-color: var(--border-dark);
    color: #E8D4B8;
}
body.dark-mode .search-suggest-all:hover {
    background: linear-gradient(135deg, var(--amber-400, #d8b57e), var(--amber-600, #a07432));
    color: #2E1A0B;
}

/* ── Dark mode: header mini-cart hover dropdown items ── */
body.dark-mode .cart-hover-item:hover { background: rgba(197, 156, 109, .1); }
body.dark-mode .cart-hover-item + .cart-hover-item { border-top-color: var(--border-dark); }
body.dark-mode .cart-hover-item-img { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .cart-hover-item-name { color: var(--text-dark); }
body.dark-mode .cart-hover-item-meta,
body.dark-mode .cart-hover-more { color: var(--text-secondary-dark); }

/* ── Dark mode: storefront language switcher (ycl-*) ── */
body.dark-mode .ycl-toggle {
    background: var(--surface-dark);
    border-color: rgba(197, 156, 109, .22);
    color: var(--text-dark);
}
body.dark-mode .ycl-toggle:hover { border-color: var(--amber-500, #C59C6D); }
body.dark-mode .ycl-menu {
    background: var(--card-dark);
    border-color: rgba(197, 156, 109, .2);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
}
body.dark-mode .ycl-item { color: var(--text-dark); }
body.dark-mode .ycl-item:hover { background: rgba(197, 156, 109, .12); color: var(--text-dark); }

/* ── Smooth Page Load ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.features-bar .feature-item {
    animation: fadeInUp 0.6s var(--ease-out) backwards;
}
.features-bar .col-6:nth-child(1) .feature-item { animation-delay: 0.1s; }
.features-bar .col-6:nth-child(2) .feature-item { animation-delay: 0.15s; }
.features-bar .col-6:nth-child(3) .feature-item { animation-delay: 0.2s; }
.features-bar .col-6:nth-child(4) .feature-item { animation-delay: 0.25s; }

/* ==========================================================================
   BRAND ENHANCEMENTS — Le Coin Yéménite palette
   #62391C brown · #C59C6D camel · #FBF6ED cream
   (loaded last, overrides earlier rules)
   ========================================================================== */

/* ---- Footer: layered brown depth + camel accent + readable cream text ---- */
.main-footer {
    background: linear-gradient(180deg, #45270F 0%, #62391C 50%, #4F2D15 100%);
    color: rgba(251, 246, 237, 0.62);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, transparent, #C59C6D, #D9BC93, #C59C6D, transparent) 1;
}
.main-footer::before { opacity: 0.05; width: 460px; height: 460px; }
.footer-logo { filter: brightness(1.15) saturate(1.05); }

.footer-brand p { color: rgba(251, 246, 237, 0.56); }
.footer-links ul li a,
.footer-contact ul li { color: rgba(251, 246, 237, 0.64); }
.footer-links ul li a:hover { color: var(--gold-light); }

.footer-links h4, .footer-contact h4 { color: #FBF6ED; }
.footer-links h4::after, .footer-contact h4::after {
    width: 38px; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.footer-contact ul li i { color: var(--gold-light); }

.footer-social a {
    background: rgba(197, 156, 109, 0.10);
    border: 1px solid rgba(197, 156, 109, 0.24);
    color: var(--gold-light);
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    border-color: var(--gold-light);
    color: #3A2212;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(98, 57, 28, 0.45);
}

.footer-bottom { border-top: 1px solid rgba(197, 156, 109, 0.18); }
.footer-bottom p { color: rgba(251, 246, 237, 0.46); }
.footer-bottom p a .dev-name,
.footer-bottom .dev-name { color: var(--gold-light); }

/* ---- Scroll-to-top: camel→brown gradient pill matching the brand ---- */
.scroll-to-top {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 4px 18px rgba(98, 57, 28, 0.30);
}
.scroll-to-top:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #3A2212;
    box-shadow: 0 8px 26px rgba(98, 57, 28, 0.42);
}

/* ---- Header top-bar: depth gradient + brighter camel accents ---- */
.top-bar {
    background: linear-gradient(90deg, #45270F 0%, #62391C 50%, #45270F 100%);
    color: rgba(251, 246, 237, 0.78);
    border-bottom: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: inset 0 -1px 0 rgba(197, 156, 109, 0.07);
}
.top-bar-item i { color: var(--gold-light); }
.top-bar-content .separator { color: rgba(197, 156, 109, 0.45); }
.top-bar-close { color: var(--gold-light); opacity: 0.6; }
.top-bar-close:hover { opacity: 1; background: rgba(197, 156, 109, 0.14); }

/* ---- Product cards: premium camel framing + reveal accent + gradient CTAs ---- */
.product-card {
    border: 1px solid rgba(98, 57, 28, 0.07);
    box-shadow: 0 2px 14px rgba(98, 57, 28, 0.05);
}
.product-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s var(--ease-out);
    z-index: 6;
}
.product-card:hover::after { transform: scaleX(1); }
.product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 44px rgba(98, 57, 28, 0.14), 0 0 0 1px rgba(197, 156, 109, 0.22);
    border-color: rgba(197, 156, 109, 0.30);
}
.product-image { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }

.product-category { color: var(--gold-dark); }
.product-card:hover .product-title,
.product-card:hover .product-title a { color: var(--gold-dark); }
.current-price { color: var(--gold-dark); }

.badge-best { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }

.overlay-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
}
.btn-cart-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 3px 10px rgba(98, 57, 28, 0.22);
}
.btn-cart-icon:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #3A2212;
}
.btn-details:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* ---- Hero: warm brand overlay + camel glow, premium badge & controls ---- */
.hero-overlay {
    background:
        radial-gradient(72% 92% at 88% 45%, rgba(197, 156, 109, 0.16), transparent 62%),
        linear-gradient(to left, rgba(42, 24, 8, 0.34) 0%, rgba(50, 29, 14, 0.60) 42%, rgba(28, 16, 6, 0.84) 100%);
}
.hero-overlay-dark {
    background:
        radial-gradient(72% 92% at 88% 45%, rgba(197, 156, 109, 0.14), transparent 60%),
        linear-gradient(to left, rgba(42, 24, 8, 0.40) 0%, rgba(50, 29, 14, 0.66) 42%, rgba(24, 14, 5, 0.88) 100%);
}
.text-gradient {
    background: linear-gradient(135deg, #E8D4B8, #D9BC93, #C59C6D);
    -webkit-background-clip: text;
    background-clip: text;
}
.hero-badge {
    background: rgba(197, 156, 109, 0.16);
    border: 1px solid rgba(197, 156, 109, 0.40);
    color: var(--gold-light);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.hero-badge i { color: var(--gold-light); }

.hero-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    box-shadow: 0 0 14px rgba(197, 156, 109, 0.55);
}
.swiper .swiper-button-next.hero-nav:hover,
.swiper .swiper-button-prev.hero-nav:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    transform: scale(1.08);
}

/* ---- Primary buttons: camel→brown gradient with depth (site-wide) ---- */
.btn-honey {
    background: linear-gradient(135deg, #C59C6D 0%, #95683B 100%);
    box-shadow: 0 4px 16px rgba(98, 57, 28, 0.28);
}
.btn-honey:hover {
    background: linear-gradient(135deg, #B0824F 0%, #7A5029 100%);
    color: #fff;
    box-shadow: 0 8px 28px rgba(98, 57, 28, 0.40);
}
.btn-outline-honey:hover,
.btn-outline-honey.on-dark:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}
.btn-outline-honey.on-dark {
    border-color: rgba(197, 156, 109, 0.45);
}

/* ---- Category cards: cohesive camel→brown hexagon range + camel hover ---- */
.honey-cat .hexagon-shape   { background: linear-gradient(135deg, #D9BC93, #C59C6D); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28); }
.oil-cat .hexagon-shape     { background: linear-gradient(135deg, #C59C6D, #A87A4A); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28); }
.coffee-cat .hexagon-shape  { background: linear-gradient(135deg, #7A5029, #62391C); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.34); }
.incense-cat .hexagon-shape { background: linear-gradient(135deg, #B0824F, #8A5A2A); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.30); }
.spice-cat .hexagon-shape   { background: linear-gradient(135deg, #A56A3B, #7A5029); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.30); }
.herbal-cat .hexagon-shape  { background: linear-gradient(135deg, #95683B, #62391C); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.32); }

.category-card:hover .category-card-inner {
    box-shadow: 0 16px 38px rgba(98, 57, 28, 0.12), 0 0 0 1px rgba(197, 156, 109, 0.18);
    border-color: rgba(197, 156, 109, 0.30);
}
.category-count { color: var(--gold-dark); background: var(--amber-50); }

/* ---- Forms & inputs: unified camel focus ring (site-wide baseline) ---- */
.form-control,
.form-select {
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
}
.form-control::placeholder { color: var(--stone); opacity: 1; font-weight: 300; }
.form-check-input:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); }
.form-check-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.18); }

/* Scoped form contexts — clearer camel focus (border + warm ring + subtle lift) */
.form-floating-custom .form-control:focus,
.checkout-form-card .form-control:focus,
.checkout-form-card .form-select:focus,
.contact-form .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16), 0 4px 14px rgba(98, 57, 28, 0.07);
    background: #fff;
}
.form-floating-custom .input-icon { color: var(--gold-dark); }
.form-floating-custom .form-control:focus ~ .input-icon { color: var(--gold); }

/* ---- Section headings: camel accent underline + gradient badge & link ---- */
.section-badge {
    background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
    border: 1px solid rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.section-badge i { color: var(--gold); }

.section-header-row .section-header-start { position: relative; }
.section-header-row .section-title { position: relative; padding-bottom: 14px; }
.section-header-row .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.section-view-all {
    border-color: rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.section-view-all:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* Centered section dividers (.section-line) + hex icon in brand camel */
.section-line::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.section-line::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hex-icon { color: var(--gold); }

/* ---- Cart & checkout summary panels: premium branded styling ---- */
.cart-summary,
.checkout-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #FDFAF4 100%);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.26);
}
.cart-summary h3,
.checkout-form-card h3 { border-bottom-color: rgba(197, 156, 109, 0.28); }

/* Camel top-accent strip on the focal order-summary panel.
   NOTE: do NOT set position:relative here — pages.css makes this panel
   `position: sticky; top: 120px`. Overriding only `position` (not `top`) left a
   stray `top:120px` on a relative box, shoving the panel 120px down into the
   footer and clipping the checkout button. Sticky is itself a positioning context,
   so ::before still anchors correctly. */
.cart-summary { overflow: hidden; }
.cart-summary::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

/* Highlighted cream total panel (cart + checkout) */
.summary-row.total {
    background: linear-gradient(135deg, var(--cream-dark), var(--sand));
    border: 1px solid rgba(197, 156, 109, 0.30);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
}
.summary-row.total .label { color: var(--walnut); }
.summary-row.total .value { color: var(--gold-dark); }

/* Coupon input + continue-shopping link */
.coupon-form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
    background: #fff;
}
.cart-summary .continue-shopping { color: var(--gold-dark); transition: color 0.2s var(--ease-out); }
.cart-summary .continue-shopping:hover { color: var(--gold); text-decoration: underline; }

/* Checkout order line items */
.order-item { border-bottom-color: rgba(197, 156, 109, 0.14); }
.order-item-img { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }
.order-item-price { color: var(--gold-dark); }

/* ---- Pagination: camel→brown active, subtle camel hover, gentle lift ---- */
.pagination-wrap a,
.pagination-wrap .active {
    border-color: var(--sand);
    box-shadow: 0 2px 8px -4px rgba(98, 57, 28, 0.16);
}
.pagination-wrap a:hover {
    background: var(--amber-50);
    color: var(--gold-dark);
    border-color: rgba(197, 156, 109, 0.45);
    transform: translateY(-2px);
}
.pagination-wrap .active,
.pagination-wrap .active:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border-color: var(--gold-dark);
    box-shadow: 0 6px 18px -6px rgba(98, 57, 28, 0.45);
    transform: translateY(-2px);
}

/* ---- Breadcrumb: warm depth glow + camel link/separator polish ---- */
.breadcrumb-section {
    background:
        radial-gradient(62% 130% at 86% 0%, rgba(197, 156, 109, 0.16), transparent 60%),
        linear-gradient(135deg, var(--walnut) 0%, var(--bark) 100%);
    border-bottom: 1px solid rgba(197, 156, 109, 0.26);
}
.breadcrumb-content h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); }
.breadcrumb-nav a { color: var(--gold-light); }
.breadcrumb-nav a:hover { color: #F4EBDA; }
.breadcrumb-nav i { color: rgba(197, 156, 109, 0.55); }

/* ---- SweetAlert dialogs: branded chrome (color stays semantic) ---- */
.swal2-popup {
    border-radius: 20px !important;
    font-family: var(--font-body) !important;
    border: 1px solid rgba(197, 156, 109, 0.22) !important;
    box-shadow: 0 24px 60px -20px rgba(98, 57, 28, 0.45) !important;
}
.swal2-title { font-family: var(--font-display) !important; color: var(--walnut) !important; }
.swal2-html-container { color: #6b5d4a !important; }
.swal2-styled { border-radius: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.32) !important; }
.swal2-icon.swal2-warning { border-color: var(--gold) !important; color: var(--gold-dark) !important; }

/* ---- Bootstrap alerts: rounded + warm camel "warning" (success/danger stay semantic) ---- */
.alert { border-radius: 12px; }
.alert.alert-warning {
    background: linear-gradient(135deg, #FBF6ED, #F4EBDA);
    border-color: rgba(197, 156, 109, 0.40);
    color: #7A5029;
}

/* ---- Fallback toast (when toastr is absent): camel→brown gradient ---- */
.toast-notification {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 8px 28px -8px rgba(98, 57, 28, 0.45);
}

/* ---- Account & orders pages: branded panels, accents, gradient states ---- */
.account-sidebar,
.account-content {
    background: linear-gradient(180deg, #ffffff 0%, #FDFAF4 100%);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.22);
}
.account-sidebar { position: relative; overflow: hidden; }
.account-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.account-user { border-bottom-color: rgba(197, 156, 109, 0.25); }

.account-nav li a:hover { background: var(--amber-50); color: var(--gold-dark); }
.account-nav li.active a {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 6px 18px -6px rgba(98, 57, 28, 0.45);
}
.account-content h2 { border-bottom-color: rgba(197, 156, 109, 0.25); }
.account-content h2 i { color: var(--gold-dark); }

/* Dashboard stat cards */
.stat-card { border-color: rgba(197, 156, 109, 0.25); }
.stat-card:hover {
    border-color: rgba(197, 156, 109, 0.50);
    box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22);
}
.stat-card .stat-icon { color: var(--gold-dark); }

/* Orders table */
.orders-table thead { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }
.orders-table th { border-bottom-color: rgba(197, 156, 109, 0.30); }
.order-id { color: var(--gold-dark); }
.order-action-btn { border-color: rgba(197, 156, 109, 0.35); }
.order-action-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* ---- Wishlist empty state: warm card + camel heart ---- */
.wishlist-empty {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1.5px dashed rgba(197, 156, 109, 0.45);
}
.wishlist-empty .empty-heart {
    background: linear-gradient(135deg, var(--amber-100), var(--cream-dark));
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(197, 156, 109, 0.25), 0 10px 26px -14px rgba(98, 57, 28, 0.30);
}

/* ---- Wallet / Points balance heroes: honeycomb texture + depth ---- */
.wallet-hero,
.points-hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px -16px rgba(98, 57, 28, 0.50);
}
.wallet-hero > *,
.points-hero > * { position: relative; z-index: 1; }
.wallet-hero::before,
.points-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23FBF6ED' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}
.wallet-hero .btn-light,
.points-hero .btn-light {
    color: var(--gold-dark);
    font-weight: 600;
    border: none;
    transition: var(--transition);
}
.wallet-hero .btn-light:hover,
.points-hero .btn-light:hover {
    background: #fff;
    color: var(--walnut);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.30);
}

/* ---- Product details: gradient accents on gallery, qty, tabs, reviews ---- */
.detail-category {
    background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
    border: 1px solid rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.gallery-main:hover {
    border-color: rgba(197, 156, 109, 0.45);
    box-shadow: 0 16px 40px -18px rgba(98, 57, 28, 0.30);
}
.gallery-zoom-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
}
.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.22);
}
.qty-btn:hover { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff; }
.share-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border-color: var(--gold-dark);
}

/* Tabs: gradient underline + camel-dark active */
.product-tabs .nav-link::after {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.product-tabs .nav-link.active,
.product-tabs .nav-link:hover {
    color: var(--gold-dark);
    background: var(--amber-50);
}

/* Reviews */
.review-card:hover {
    border-color: rgba(197, 156, 109, 0.40);
    box-shadow: 0 10px 26px -16px rgba(98, 57, 28, 0.22);
}
.reviewer-avatar { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.review-stars i, .detail-rating .stars i { color: var(--gold); }

/* ---- Auth pages (login/register): premium card + warm visual panel ---- */
.auth-card {
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 24px 60px -22px rgba(98, 57, 28, 0.40);
}
.auth-visual {
    background:
        radial-gradient(70% 85% at 50% 2%, rgba(197, 156, 109, 0.22), transparent 60%),
        linear-gradient(160deg, #62391C 0%, #784625 50%, #62391C 100%);
}
.auth-visual p { color: rgba(251, 246, 237, 0.55); }
.auth-form-side .auth-subtitle { color: var(--earth); }
.social-auth-btn:hover {
    border-color: rgba(197, 156, 109, 0.50);
    background: var(--amber-50);
}
.auth-switch a { color: var(--gold-dark); }
.auth-switch a:hover { color: var(--gold); }

/* ---- Footer newsletter: warm glow + camel input focus ---- */
.newsletter-card {
    background:
        radial-gradient(60% 120% at 85% 0%, rgba(197, 156, 109, 0.16), transparent 58%),
        linear-gradient(135deg, #62391C, #784625, #62391C);
    box-shadow: 0 16px 40px -18px rgba(98, 57, 28, 0.45);
}
.newsletter-card p { color: rgba(251, 246, 237, 0.55); }
.newsletter-form .input-group {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 156, 109, 0.22);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.newsletter-form .input-group:focus-within {
    border-color: rgba(197, 156, 109, 0.50);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.16);
}

/* ---- About page: warm camel card hovers ---- */
.about-stat:hover { border-color: rgba(197, 156, 109, 0.45); box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22); }
.value-card:hover { border-color: rgba(197, 156, 109, 0.40); box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22); }

/* ---- Contact page: gradient accent + camel hex icon + warm form card ---- */
.contact-info-card::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); height: 4px; }
.contact-info-card:hover { border-color: rgba(197, 156, 109, 0.40); }
.contact-info-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28);
}
.contact-form-card {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.22);
}

/* FAQ open-state is handled directly in home-sections.css (.faq-q/.faq-a —
   the classes the markup actually uses; the .faq-question block in pages.css
   is unused/legacy). */

/* ---- Product "new" badge: brand deep-brown (was sage green) ----
   Distinct from the camel "best seller" badge and the red "sale" badge;
   all three are also differentiated by their label text. */
.badge-new {
    background: linear-gradient(135deg, #62391C, #95683B);
    box-shadow: 0 2px 8px rgba(98, 57, 28, 0.28);
}

/* ---- OTP / verify page: gradient badge + standard camel focus ring ---- */
.otp-card .otp-badge {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(98, 57, 28, 0.40);
}
.otp-digit:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
}
.otp-digit:not(:placeholder-shown) { border-color: var(--gold); }

/* ---- Order tracking + thank-you: warm panels (green→camel handled in pages.css) ---- */
.tracking-card,
.ty-info-card {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.20);
}
.tracking-header { border-bottom-color: rgba(197, 156, 109, 0.25); }
.ty-info-card i { color: var(--gold-dark); }
.thankyou-order-num { border-color: rgba(197, 156, 109, 0.40); }

/* ===============================================================
   HOME PAGE — NEW SECTIONS (Flash Sale, Promo, Stats, Discount)
   Loaded after the main design system; respects existing tokens.
   =============================================================== */

/* ---- Flash Sale / Deal of the Day -------------------------------- */
.flash-sale-section { padding: 64px 0; }
.flash-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #45270F 0%, #4a2a10 50%, #6e3f15 100%);
    border-radius: 24px;
    padding: 48px;
    color: #FBF6ED;
    box-shadow: 0 32px 80px -24px rgba(110, 63, 21, .55), 0 8px 24px rgba(0, 0, 0, .18);
    isolation: isolate;
}
.flash-card::before {
    content: ""; position: absolute; inset: -40% -10% auto auto;
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(197, 156, 109, .55) 0%, transparent 60%);
    z-index: -1; filter: blur(8px);
}
.flash-glow {
    position: absolute; bottom: -120px; left: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(255, 184, 86, .35) 0%, transparent 65%);
    z-index: -1; animation: flash-pulse 4s ease-in-out infinite;
}
@keyframes flash-pulse {
    0%, 100% { transform: scale(1); opacity: .8; }
    50% { transform: scale(1.15); opacity: 1; }
}
.flash-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 184, 86, .4);
    border-radius: 999px; font-weight: 700; font-size: 14px;
    color: #E8D4B8;
    text-transform: uppercase; letter-spacing: .5px;
}
.flash-tag i { color: #D9BC93; animation: flash-bolt 1.5s ease-in-out infinite; }
@keyframes flash-bolt {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}
.flash-title { font-size: 36px; font-weight: 800; margin: 16px 0 8px; line-height: 1.2; }
.flash-subtitle { color: rgba(255, 248, 231, .75); margin-bottom: 24px; font-size: 15px; }
.flash-countdown {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, .35); padding: 16px 20px; border-radius: 16px;
    border: 1px solid rgba(197, 156, 109, .25);
    margin-bottom: 24px;
}
.cd-cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.cd-val {
    font-size: 28px; font-weight: 800; color: #E8D4B8;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.cd-lbl {
    font-size: 11px; color: rgba(255, 248, 231, .6);
    margin-top: 4px; text-transform: uppercase; letter-spacing: .5px;
}
.cd-sep { font-size: 24px; color: #D9BC93; font-weight: 700; opacity: .6; }
.flash-prices {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.flash-now { font-size: 40px; font-weight: 800; color: #E8D4B8; }
.flash-was { font-size: 22px; color: rgba(255, 248, 231, .5); text-decoration: line-through; }
.flash-pct {
    background: #d94e4e; color: #fff;
    padding: 4px 12px; border-radius: 8px; font-weight: 700;
}
.flash-cta {
    padding: 14px 32px; font-size: 17px;
    box-shadow: 0 12px 32px -8px rgba(255, 184, 86, .5);
}
/* The offer photo sits in a clean, rounded frame that it fills edge-to-edge
   (object-fit:cover) — no letterboxing, no feathered cut-out. Reads crisply for
   real product photography while staying square so the layout never shifts. */
.flash-image-wrap {
    position: relative; display: block;
    width: 100%; max-width: 400px; margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: 26px; overflow: hidden;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 28px 46px -18px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.flash-image {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.flash-image-wrap:hover .flash-image { transform: scale(1.05); }
.flash-stamp {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: linear-gradient(135deg, #d94e4e, #ff7a45);
    color: #fff; font-weight: 800; font-size: 20px;
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px rgba(217, 78, 78, .45);
    transform: rotate(8deg);
}
@media (max-width: 768px) {
    .flash-card { padding: 32px 24px; }
    .flash-title { font-size: 26px; }
    .flash-now { font-size: 30px; }
    .cd-val { font-size: 22px; }
    .cd-cell { min-width: 44px; }
}

/* ---- Promo Tiles (2-up) ------------------------------------------ */
.promo-section { padding: 32px 0 48px; }
.promo-tile {
    display: flex; gap: 22px; align-items: center;
    padding: 30px 32px;
    border-radius: 22px;
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .45);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
    min-height: 176px;
}
.promo-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .42); }
/* Soft corner glow */
.promo-tile::after {
    content: ""; position: absolute; inset: auto -18% -42% auto;
    width: 300px; height: 300px; z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
    pointer-events: none;
}
/* Diagonal sheen that sweeps across on hover */
.promo-tile::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
    width: 45%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
}
.promo-tile:hover::before { left: 130%; }
/* All promo-tile styles use the brand brown→camel palette (kept distinct by depth/warmth) */
.promo-tile.style-honey   { background: linear-gradient(135deg, #95683B 0%, #C59C6D 60%, #D9BC93 100%); color: #fff; }
.promo-tile.style-oils    { background: linear-gradient(135deg, #6E4520 0%, #A07440 60%, #CFAB76 100%); color: #fff; }
.promo-tile.style-coffee  { background: linear-gradient(135deg, #2E1A0E 0%, #5A3517 60%, #8A5A2A 100%); color: #fff; }
.promo-tile.style-incense { background: linear-gradient(135deg, #4A2A14 0%, #7A5029 60%, #B0824F 100%); color: #fff; }
.promo-icon {
    flex: 0 0 auto; width: 76px; height: 76px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px -10px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    transition: transform .3s ease;
}
.promo-tile:hover .promo-icon { transform: scale(1.06) rotate(-3deg); }
.promo-body { flex: 1; min-width: 0; }
.promo-tag {
    display: inline-block; font-size: 11.5px; font-weight: 800;
    padding: 4px 12px; background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px; margin-bottom: 8px; letter-spacing: .4px;
    text-transform: uppercase;
}
.promo-title { font-size: 23px; font-weight: 800; margin: 0 0 5px; line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.promo-sub { font-size: 14px; opacity: .9; margin: 0 0 14px; line-height: 1.5; }
.promo-cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 13.5px;
    padding: 7px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
    transition: background-color .2s ease, border-color .2s ease;
}
.promo-tile:hover .promo-cta { background: rgba(255, 255, 255, .95); color: #2d2724; border-color: #fff; }
.promo-cta i { transition: transform .25s ease; }
.promo-tile:hover .promo-cta i { transform: translateX(-5px); }

/* ---- Promo tile enhancements ------------------------------------- */
/* Oversized faded icon watermark anchored to the inline-end edge. Uses logical
   inset so it flips correctly between RTL (Arabic) and LTR. */
.promo-watermark {
    position: absolute; z-index: -1; pointer-events: none;
    inset-block-start: 50%; inset-inline-end: -6%;
    transform: translateY(-50%) rotate(-8deg);
    font-size: 168px; line-height: 1;
    color: rgba(255, 255, 255, .10);
    transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
    opacity: .9;
}
.promo-tile:hover .promo-watermark {
    transform: translateY(-50%) rotate(-3deg) scale(1.08);
    opacity: 1;
}
/* Glow ring that pulses around the icon to draw the eye. */
.promo-icon { position: relative; }
.promo-icon::after {
    content: ""; position: absolute; inset: -6px; border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, .35);
    opacity: 0; transform: scale(.85);
    transition: opacity .3s ease, transform .3s ease;
}
.promo-tile:hover .promo-icon::after { opacity: 1; transform: scale(1); }
/* Slightly punchier title + a thin accent under the tag for polish. */
.promo-title { letter-spacing: -.2px; }
.promo-tag { box-shadow: 0 2px 8px -4px rgba(0,0,0,.4); }
/* Stack icon above text on narrow screens so nothing gets squeezed. */
@media (max-width: 575.98px) {
    .promo-tile { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; min-height: 0; }
    .promo-watermark { font-size: 120px; inset-inline-end: -10%; }
    .promo-title { font-size: 20px; }
}

/* ---- Stats Counter ----------------------------------------------- */
.stats-section { padding: 56px 0; background: linear-gradient(180deg, #fff 0%, #FBF6ED 100%); }
.stats-row { justify-content: center; }
.stat-tile {
    text-align: center; padding: 28px 16px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(197, 156, 109, .18);
    box-shadow: 0 12px 32px -16px rgba(197, 156, 109, .25);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}
.stat-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px -16px rgba(197, 156, 109, .4); }
.stat-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, #C59C6D, #95683B); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 12px;
    box-shadow: 0 12px 32px -8px rgba(197, 156, 109, .45);
}
.stat-num {
    font-size: 36px; font-weight: 800; color: #45270F;
    font-variant-numeric: tabular-nums;
}
.stat-lbl { font-size: 14px; color: #8a7355; font-weight: 600; margin-top: 4px; }

/* ---- Discount carousel header badge ------------------------------ */
.section-badge.danger {
    background: linear-gradient(135deg, #d94e4e, #ff7a45);
    color: #fff;
    border-color: transparent;
}
.discount-section { padding: 56px 0; }

/* ---- Best sellers / per-category spacing ------------------------- */
.bestsellers-section { padding: 56px 0; }
.cat-block-section { padding: 64px 0; }
.cat-block-section.alt { background: var(--parchment, #FBF6ED); }

/* ---- Per-category section header --------------------------------- */
.cat-block-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 24px 28px; margin-bottom: 28px;
    background: linear-gradient(135deg, #FBF6ED 0%, #fff 100%);
    border-radius: 18px;
    border: 1px solid rgba(197, 156, 109, .25);
    box-shadow: 0 12px 32px -16px rgba(197, 156, 109, .35);
    position: relative; overflow: hidden;
}
.cat-block-header::before {
    content:""; position: absolute; inset: -50% -10% auto auto;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(197, 156, 109,.18), transparent 70%);
    z-index: 0; pointer-events: none;
}
.cat-block-header > * { position: relative; z-index: 1; }
.cat-block-title { display: flex; align-items: center; gap: 18px; flex: 1; }
.cat-block-icon {
    width: 72px; height: 72px; border-radius: 18px;
    background: linear-gradient(135deg, #C59C6D, #95683B);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px;
    box-shadow: 0 12px 28px -8px rgba(160, 116, 50, .55);
    flex-shrink: 0;
}
.cat-block-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600;
    color: #95683B; letter-spacing: .5px; margin-bottom: 4px;
}
.cat-block-name {
    margin: 0; font-size: 28px; font-weight: 800;
    color: #2d2724; line-height: 1.2;
}
.cat-block-count {
    display: inline-block; margin-top: 6px;
    font-size: 12px; color: #8a7355; font-weight: 600;
    padding: 3px 10px; background: rgba(160,116,50,.1); border-radius: 999px;
}
.cat-block-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px;
    background: linear-gradient(135deg, #C59C6D, #95683B);
    color: #fff; font-weight: 700; font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 24px -8px rgba(160,116,50,.45);
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.cat-block-cta:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 32px -8px rgba(160,116,50,.6); }
.cat-block-cta i { transition: transform .2s ease; }
.cat-block-cta:hover i { transform: translateX(-4px); }
@media (max-width: 768px) {
    .cat-block-header { flex-direction: column; align-items: flex-start; padding: 20px; }
    .cat-block-icon { width: 56px; height: 56px; font-size: 24px; }
    .cat-block-name { font-size: 22px; }
    .cat-block-cta { width: 100%; justify-content: center; }
}

/* ---- Swiper navigation — fix RTL overlap, push outside viewport edge */
/* The default Swiper layout placed both buttons on the same axis on RTL,
   which on narrow viewports caused them to stack on top of each other. We
   anchor each side explicitly and pull them just outside the slide column.  */
.swiper .swiper-button-next.products-nav,
.swiper .swiper-button-prev.products-nav,
.swiper .swiper-button-next.hero-nav,
.swiper .swiper-button-prev.hero-nav {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #95683B;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .25);
    margin-top: -24px;
    transition: background .2s ease, transform .2s ease;
}
.swiper .swiper-button-next.products-nav::after,
.swiper .swiper-button-prev.products-nav::after,
.swiper .swiper-button-next.hero-nav::after,
.swiper .swiper-button-prev.hero-nav::after {
    font-size: 18px; font-weight: 800;
}
.swiper .swiper-button-next.products-nav:hover,
.swiper .swiper-button-prev.products-nav:hover {
    background: #95683B; color: #fff; transform: scale(1.08);
}
/* RTL anchoring: prev is logically "to the right of slide #1" (so the user
   swipes backwards visually). Place it at the RIGHT edge. next sits at LEFT. */
[dir="rtl"] .swiper-button-next.products-nav,
[dir="rtl"] .swiper-button-next.hero-nav { left: 8px; right: auto; }
[dir="rtl"] .swiper-button-prev.products-nav,
[dir="rtl"] .swiper-button-prev.hero-nav { right: 8px; left: auto; }
[dir="ltr"] .swiper-button-next.products-nav,
[dir="ltr"] .swiper-button-next.hero-nav { right: 8px; left: auto; }
[dir="ltr"] .swiper-button-prev.products-nav,
[dir="ltr"] .swiper-button-prev.hero-nav { left: 8px; right: auto; }
/* Ensure pagination doesn't crowd the buttons */
.swiper .swiper-pagination { position: relative; padding-top: 16px; bottom: auto; }

/* ============================================================
   HEADER — modernized look. Gradient surface, polished search,
   crisp icon buttons with subtle motion and clear focus states.
   ============================================================ */
.main-header {
    background: linear-gradient(180deg, #ffffff 0%, #FBF6ED 100%);
    border-bottom: 1px solid rgba(197, 156, 109, .15);
    box-shadow: 0 6px 24px -12px rgba(90, 58, 27, .18);
}
.main-header.is-scrolled {
    box-shadow: 0 12px 32px -16px rgba(90, 58, 27, .25);
}
/* Don't override wrapper padding here — base style.css owns vertical rhythm
   and the sticky main-nav uses top: 82px which matches that height. Adding
   wrapper padding here grew the header to ~116px and the nav's first row
   slid behind the fixed header. */
.main-header .header-logo img { height: 50px !important; width: auto; transition: transform .25s ease; }
.main-header .header-logo:hover img { transform: scale(1.05) rotate(-2deg); }

/* Search */
.main-header .header-search { flex: 1; max-width: 580px; }
.main-header .search-form {
    position: relative;
    background: #fff;
    border: 1.5px solid #E8DCC8;
    border-radius: 999px;
    padding: 6px 6px 6px 10px;
    display: flex; align-items: center;
    box-shadow: 0 4px 12px -6px rgba(160, 116, 50, .15);
    transition: all .2s ease;
}
.main-header .search-form:focus-within {
    border-color: #C59C6D;
    box-shadow: 0 10px 26px -10px rgba(98, 57, 28, .40), 0 0 0 4px rgba(197, 156, 109, .18);
    transform: translateY(-1px);
}
.main-header .search-input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 10px 16px; font-size: 15px; color: #2d2724;
}
.main-header .search-input::placeholder { color: #b09a7a; }
.main-header .search-btn {
    /* Reset the base absolute positioning so the parent flexbox centers it. A
       proper rounded pill (icon + "بحث" label) instead of a tiny circle that
       clipped the text. */
    position: static;
    inset: auto;
    top: auto; bottom: auto; left: auto; right: auto;
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    padding: 0 22px;
    gap: 8px;
    background: linear-gradient(135deg, #C59C6D, #95683B);
    color: #fff; border: none; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-weight: 700; font-size: 14px; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 8px 20px -6px rgba(160, 116, 50, .45);
}
.main-header .search-btn .search-btn-text { font-size: 13.5px; }
.main-header .search-btn i { font-size: 15px; }
.main-header .search-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, #B0824F, #7A5029); filter: none; box-shadow: 0 12px 28px -6px rgba(98, 57, 28, .55); }
/* Tablet: collapse to an icon-only disc to save room. */
@media (max-width: 1100px) {
    .main-header .search-btn { width: 44px; padding: 0; border-radius: 50%; }
    .main-header .search-btn .search-btn-text { display: none; }
}

/* Header action buttons */
.main-header .header-actions { display: flex; align-items: center; gap: 6px; }
.main-header .header-action-btn {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 12px;
    color: #62391C; text-decoration: none;
    font-size: 11px; font-weight: 600;
    border-radius: 14px;
    background: transparent;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.main-header .header-action-btn i { font-size: 18px; }
.main-header .header-action-btn .action-text { font-size: 11px; opacity: .85; }
.main-header .header-action-btn:hover {
    background: rgba(197, 156, 109, .12);
    color: #95683B;
    transform: translateY(-1px);
}
.main-header .header-action-btn:hover i { color: #95683B; }

/* Badges */
.main-header .badge-count {
    position: absolute; top: 2px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #62391C, #95683B);
    color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px -2px rgba(98, 57, 28, .45);
}
.main-header .badge-count.has-items { animation: badgePop .35s ease; }
@keyframes badgePop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Cart hover dropdown — polish */
.main-header .header-cart-wrap { position: relative; }
.main-header .cart-hover-dropdown {
    position: absolute; top: calc(100% + 8px);
    left: 50%; transform: translateX(-50%) translateY(8px);
    width: 320px; padding: 16px;
    background: #fff; border-radius: 16px;
    border: 1px solid #E8DCC8;
    box-shadow: 0 24px 56px -16px rgba(90, 58, 27, .35);
    opacity: 0; pointer-events: none;
    transition: all .2s ease;
    z-index: 50;
}
.main-header .header-cart-wrap:hover .cart-hover-dropdown {
    opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.main-header .cart-hover-header { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #F4EBDA; font-weight: 700; color: #2d2724; }
.main-header .cart-hover-count { color: #95683B; font-size: 13px; }
.main-header .cart-hover-empty { text-align: center; padding: 24px 0; color: #8a7355; }
.main-header .cart-hover-empty i { font-size: 36px; color: #d8c8a8; margin-bottom: 8px; }
.main-header .cart-hover-footer { padding-top: 12px; border-top: 1px solid #F4EBDA; }

/* Dark mode toggle in header */
.main-header .dark-mode-toggle-header {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(197, 156, 109, .12);
    border: none; color: #62391C;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
    margin-right: 4px;
}
.main-header .dark-mode-toggle-header:hover { background: rgba(197, 156, 109, .25); transform: rotate(20deg); }
.main-header .dark-mode-toggle-header .fa-sun { display: none; }
body.dark-mode .main-header .dark-mode-toggle-header .fa-moon { display: none; }
body.dark-mode .main-header .dark-mode-toggle-header .fa-sun { display: inline-block; color: #E8D4B8; }

/* Top bar polish */
.top-bar {
    background: linear-gradient(90deg, #2d2724 0%, #4a3a26 50%, #2d2724 100%);
    color: #E8D4B8;
    font-size: 13px;
}
.top-bar-content { padding: 8px 0; display: flex; justify-content: center; align-items: center; gap: 12px; position: relative; }
.top-bar-marquee { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.top-bar-marquee span { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-marquee .separator { color: rgba(255, 208, 137, .4); }
.top-bar-close {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255, 208, 137, .7);
    cursor: pointer; padding: 4px;
}
.top-bar-close:hover { color: #fff; }

/* Dark mode for header */
body.dark-mode .main-header {
    background: linear-gradient(180deg, var(--card-dark) 0%, var(--bg-dark) 100%);
    border-bottom-color: var(--border-dark);
}
body.dark-mode .main-header .search-form { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .main-header .search-input { color: var(--text-dark); }
body.dark-mode .main-header .header-action-btn { color: var(--text-secondary-dark); }
body.dark-mode .main-header .header-action-btn:hover { color: #E8D4B8; background: rgba(197, 156, 109, .08); }
body.dark-mode .main-header .cart-hover-dropdown { background: var(--card-dark); border-color: var(--border-dark); color: var(--text-dark); }
body.dark-mode .main-header .dark-mode-toggle-header { background: rgba(197, 156, 109, .15); color: #E8D4B8; }

/* ============================================================
   DARK MODE — home sections fixes
   Without these, sections that have light backgrounds inherit
   the dark body color, leaving light-on-light unreadable text.
   ============================================================ */
body.dark-mode .cat-block-section,
body.dark-mode .cat-block-section.alt,
body.dark-mode .bestsellers-section,
body.dark-mode .discount-section,
body.dark-mode .stats-section {
    background: var(--surface-dark) !important;
}
body.dark-mode .cat-block-header {
    background:
        linear-gradient(135deg, rgba(197, 156, 109, .12) 0%, rgba(197, 156, 109, .03) 100%),
        linear-gradient(180deg, #2a2017 0%, #1a1410 100%);
    border: 1.5px solid rgba(197, 156, 109, .35);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(197, 156, 109, .12);
    position: relative;
}
body.dark-mode .cat-block-header::before {
    background: radial-gradient(circle, rgba(197, 156, 109, .22), transparent 70%);
}
body.dark-mode .cat-block-eyebrow { color: #E8D4B8; }
body.dark-mode .cat-block-name { color: #FBF6ED; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
body.dark-mode .cat-block-count { color: #E8D4B8; background: rgba(197, 156, 109, .18); border: 1px solid rgba(197, 156, 109, .25); }
body.dark-mode .cat-block-icon { box-shadow: 0 12px 28px -4px rgba(160, 116, 50, .55), 0 0 0 4px rgba(197, 156, 109, .12); }
body.dark-mode .cat-block-cta { box-shadow: 0 12px 28px -4px rgba(160, 116, 50, .7); }

/* Stat tile readability */
body.dark-mode .stat-tile { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .stat-num { color: var(--text-dark); }
body.dark-mode .stat-lbl { color: var(--text-secondary-dark); }

/* Promo tile keeps its gradient — but on dark mode the section bg around it
   should be the surface-dark so the tiles don't float on raw black. */
body.dark-mode .promo-section { background: var(--bg-dark); }

/* Section badge / view-all on darker backgrounds */
body.dark-mode .section-badge { background: rgba(197, 156, 109, .12); color: #E8D4B8; border: 1px solid rgba(197, 156, 109, .25); }
body.dark-mode .section-title { color: var(--text-dark); }
body.dark-mode .section-view-all { color: #E8D4B8; }

@media (max-width: 992px) {
    .main-header .header-action-btn .action-text { display: none; }
    .main-header .header-search { display: none; }
}

/* ---- Dark mode overrides for new sections ------------------------ */
body.dark-mode .promo-tile { box-shadow: 0 24px 64px -20px rgba(0, 0, 0, .6); }
body.dark-mode .stats-section { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--surface-dark) 100%); }
body.dark-mode .stat-tile { background: var(--card-dark); border-color: var(--border-dark); color: var(--text-dark); }

/* ---- Ads Swiper -------------------------------------------------- */
.ads-section { padding: 28px 0; }
/* No nav arrows / dots — a clean full-width auto-sliding banner. */
.ads-section .adsSwiper { position: relative; padding: 0; width: 100%; }
.ads-section .adsSwiper .swiper-slide { width: 100%; }
.ad-card {
    display: block; position: relative; overflow: hidden; width: 100%;
    border-radius: 18px; aspect-ratio: 1200 / 360;   /* uniform banner height across all slides */
    box-shadow: 0 16px 40px -22px rgba(0,0,0,.45);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ad-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -24px rgba(0,0,0,.42); }
.ad-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ad-card:hover img { transform: scale(1.05); }
.ad-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 10px;
    padding: clamp(22px, 5vw, 56px); color: #fff;
    /* Stronger side-anchored scrim so the copy is always legible over any image. */
    background: linear-gradient(90deg, rgba(15,9,3,.78) 0%, rgba(15,9,3,.5) 42%, rgba(15,9,3,.08) 70%, transparent 100%);
    text-align: start;
}
html[dir="rtl"] .ad-overlay {
    background: linear-gradient(270deg, rgba(15,9,3,.78) 0%, rgba(15,9,3,.5) 42%, rgba(15,9,3,.08) 70%, transparent 100%);
}
.ad-title {
    font-size: clamp(20px, 2.8vw, 34px); font-weight: 800; margin: 0; line-height: 1.2;
    max-width: 60%; text-shadow: 0 3px 14px rgba(0,0,0,.55); letter-spacing: -.01em;
}
.ad-sub {
    font-size: clamp(13px, 1.5vw, 17px); margin: 0; max-width: 55%; font-weight: 500;
    opacity: .96; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* A subtle "shop now" affordance appears on the ad card so it reads as clickable. */
.ad-card::after {
    content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; bottom: 18px; inset-inline-end: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #d4a843, #a07432); color: #fff; font-size: 18px;
    box-shadow: 0 10px 24px -8px rgba(160,116,50,.7);
    opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease;
}
html[dir="rtl"] .ad-card::after { content: "\f104"; transform: translateX(-6px); }
.ad-card:hover::after { opacity: 1; transform: translateX(0); }
@media (max-width: 575.98px) {
    .ad-title, .ad-sub { max-width: 80%; }
    .ad-card::after { display: none; }
}
/* Taller banner on phones so a full-width strip isn't too thin. */
@media (max-width: 575.98px) { .ad-card { aspect-ratio: 16 / 9; border-radius: 14px; } }
.ads-section .swiper-button-next,
.ads-section .swiper-button-prev {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #95683B;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.3); top: 45%;
}
.ads-section .swiper-button-next::after,
.ads-section .swiper-button-prev::after { font-size: 16px; font-weight: 700; }
.ads-section .ads-pagination { bottom: 8px; }
.ads-section .swiper-pagination-bullet-active { background: #95683B; }

/* ---- Partners — trusted brands marquee (black & white logos) ----- */
.partners-section {
    padding: 60px 0 56px;
    position: relative;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(160,116,50,.05) 0%, transparent 60%),
        #FBF6ED;
    border-top: 1px solid rgba(160,116,50,.10);
    border-bottom: 1px solid rgba(160,116,50,.10);
}
.partners-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.partners-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #95683B; background: rgba(160,116,50,.10);
    padding: 7px 18px; border-radius: 999px;
}
.partners-eyebrow i { font-size: 13px; }
.partners-title {
    font-size: clamp(22px, 3vw, 33px); font-weight: 800; line-height: 1.25;
    color: #3a2a16; margin: 16px 0 8px;
}
.partners-subtitle { font-size: 15px; color: #8a7355; margin: 0; }

/* Partners use the same Swiper carousel as the products sections. Each logo
   fills its slide and is centred; the carousel loops so logos repeat with no gap. */
.partnersSwiper { padding: 8px 4px; }
.partner-logo {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    height: 120px; padding: 0 16px; text-decoration: none;
}
.partner-logo img {
    /* Fixed height + auto width so viewBox-only SVGs keep their aspect ratio
       (with width:auto alone they collapse to 0). */
    height: 100px; width: auto; max-width: 160px; object-fit: contain; display: block;
    /* Strictly black & white; brightens (still grayscale) and lifts on hover. */
    filter: grayscale(100%);
    opacity: .7;
    transition: opacity .35s ease, transform .35s ease;
}
.partner-logo:hover img { opacity: 1; transform: scale(1.08); }

body.dark-mode .partners-section {
    background: radial-gradient(120% 100% at 50% 0%, rgba(197, 156, 109,.07) 0%, transparent 60%), var(--card-dark, #1c1b18);
    border-color: rgba(197, 156, 109,.12);
}
body.dark-mode .partners-title { color: #f3ead7; }
body.dark-mode .partners-subtitle { color: #b9a888; }
body.dark-mode .partner-logo img { filter: grayscale(100%) brightness(0) invert(1); opacity: .45; }
body.dark-mode .partner-logo:hover img { opacity: .92; }

@media (max-width: 575.98px) {
    .partners-section { padding: 44px 0 40px; }
    .partner-logo { height: 120px; padding: 0 22px; }
    /* Same size on all screens (per request). */
    .partner-logo img { height: 100px; max-width: 160px; }
}

/* ---- FAQ Accordion ---------------------------------------------- */
.faq-section { padding: 56px 0 64px; }
.faq-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.faq-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: #95683B;
    background: rgba(160,116,50,.10); border: 1px solid rgba(160,116,50,.20);
    padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
}
.faq-title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; color: var(--walnut, #784625); margin: 0; }
.faq-accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: linear-gradient(180deg, #ffffff, #FDFAF4); border: 1px solid rgba(197,156,109,.22); border-radius: 16px;
    overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-color: rgba(197,156,109,.40); }
.faq-item.open { border-color: #C59C6D; box-shadow: 0 14px 36px -20px rgba(98,57,28,.45); }
.faq-item.open .faq-q { color: #95683B; }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 700; color: var(--walnut, #784625);
    text-align: start;
}
.faq-chevron { color: #95683B; transition: transform .3s ease; flex: 0 0 auto; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner { padding: 0 22px 20px; color: var(--text-muted, #6b5d4f); font-size: 14.5px; line-height: 1.8; }

body.dark-mode .faq-item { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .faq-q { color: var(--text-dark, #f0e6d6); }
body.dark-mode .ad-card { box-shadow: 0 16px 40px -22px rgba(0,0,0,.7); }
body.dark-mode .stat-num { color: var(--text-dark); }
body.dark-mode .stat-lbl { color: var(--text-secondary-dark); }

/* ============================================================
   Announcement marquee + header + nav: a fixed stack pinned to the top.
   The header is forced position:fixed by enhancements.css (sticky can't be
   used because html/body have overflow-x:hidden, which disables sticky).
   So we pin all three bars as fixed, stacked, and offset the body by their
   combined height. Loaded after enhancements.css to win the cascade.

   Heights: marquee 40 + header 80 + nav 54 = 174.
   ============================================================ */
.top-bar {
    position: fixed !important;
    inset-inline: 0;
    top: 0 !important;
    z-index: 1002 !important;       /* above the header */
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.main-header { top: 40px !important; }              /* fixed, directly below the marquee */
.main-nav {
    position: fixed !important;
    inset-inline: 0;
    top: 120px !important;          /* 40 + 80, directly below the header (flush, no gap) */
    z-index: 1000 !important;
    display: none;                  /* shown ≥992px by the rule below (mirrors base) */
}
.main-header.scrolled + .main-nav { top: 120px !important; }
body { padding-top: 174px; }        /* clear marquee + header + nav */

/* Desktop: the nav is visible, so the full 183px offset applies. On mobile the
   nav is hidden, so drop its height from the offset. */
@media (min-width: 992px) { .main-nav { display: block; } }
@media (max-width: 991px) { body { padding-top: 99px; } }   /* marquee (40) + mobile header (59), flush — no gap */

/* Sub-pages already clear the fixed stack via body padding. */
.breadcrumb-section { margin-top: 8px !important; }

/* Track: two identical passes scrolled -50% for a seamless loop. Overrides the
   earlier .top-bar-marquee rules in this file. */
.top-bar-content { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; width: 100%; }
.top-bar-marquee {
    flex: 1; min-width: 0; overflow: hidden; display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.top-bar-track {
    display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
    will-change: transform; animation: marquee 34s linear infinite;
}
.top-bar-marquee:hover .top-bar-track { animation-play-state: paused; }
.top-bar-item { display: inline-flex; align-items: center; gap: 7px; }
.top-bar-item i { color: var(--amber-400, #C59C6D); font-size: 12px; }
.top-bar-content .separator { color: rgba(255, 208, 137, .35); font-weight: 100; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Admin rich-text (Jodit) output inside dynamic content pages ──
   Privacy / Terms / About / Contact render admin HTML in .legal-content.
   Give tables, images and quotes sensible storefront styling (the editor's
   own stylesheet is not loaded here). */
.legal-content table { border-collapse: collapse; width: auto; max-width: 100%; margin: 1.2em 0; }
.legal-content th, .legal-content td { border: 1px solid #E8DCC8; padding: 8px 12px; text-align: inherit; }
.legal-content th { background: #faf6f0; font-weight: 700; }
.legal-content img { max-width: 100%; height: auto; border-radius: 8px; }
.legal-content blockquote { border-inline-start: 4px solid #E8DCC8; margin: 1em 0; padding: .2em 1em; color: #6b5d4f; }
.legal-content hr { border: 0; border-top: 1px solid #e6ddd0; margin: 1.5em 0; }

/* ============================================================
   Floating Social Dock  (storefront)
   A modern frosted-glass vertical dock pinned to the page's
   start edge (right in RTL, left in LTR). Each item is a pill
   that expands a sliding label on hover and fills with the
   platform's brand colour. A live "chat" item pulses, and the
   "branches" item reveals a flyout listing every configured branch.
   All links/branches come from /Admin/Settings/Social.
   ============================================================ */

.yc-social-dock {
    position: fixed;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 940;                 /* below modals/toasts, above page chrome */
    display: flex;
    flex-direction: column;
    gap: 11px;
    pointer-events: none;          /* let the gap between pills pass clicks through */
}

/* Decorative vertical spine behind the pills */
.yc-dock-spine {
    position: absolute;
    inset-inline-start: 23px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        rgba(197, 156, 109, 0) 0%,
        rgba(197, 156, 109, .4) 16%,
        rgba(197, 156, 109, .4) 84%,
        rgba(197, 156, 109, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.yc-dock-item {
    /* per-platform colours — overridden by .yc-pf-* below; gold by default */
    --brand: #B0824F;
    --brand-grad: linear-gradient(135deg, #D9BC93, #C59C6D 55%, #95683B);

    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 48px;                   /* collapsed: just the icon */
    height: 48px;
    /* flat against the screen edge, rounded toward the content side */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 50px;
    border-end-end-radius: 50px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1.5px solid rgba(197, 156, 109, .26);
    border-inline-start: none;
    color: var(--brand);
    box-shadow: 0 10px 26px -14px rgba(28, 20, 16, .42);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width .42s cubic-bezier(.22, 1, .36, 1),
                background .4s ease,
                color .4s ease,
                box-shadow .4s ease,
                border-color .4s ease;
    /* staggered, direction-aware entrance */
    opacity: 0;
    transform: translateX(-26px);
    animation: yc-dock-in .55s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(.15s + var(--i, 0) * .07s);
}
[dir="rtl"] .yc-dock-item { transform: translateX(26px); }

@keyframes yc-dock-in {
    to { opacity: 1; transform: translateX(0); }
}

/* soft shine that sweeps across on hover */
.yc-dock-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}

.yc-dock-ico {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 18px;
    position: relative;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 1;
}

.yc-dock-label {
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    font-family: var(--font-body, 'Readex Pro', sans-serif);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .2px;
    transition: max-width .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, padding .42s ease;
}

/* Hover / focus: grow into a pill, reveal the label, fill with brand colour */
.yc-dock-item:hover,
.yc-dock-item:focus-visible {
    width: 196px;
    background: var(--brand-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--brand) 60%, transparent),
                0 6px 14px -8px rgba(0, 0, 0, .25);
    outline: none;
}

.yc-dock-item:hover::after,
.yc-dock-item:focus-visible::after { transform: translateX(120%); }

.yc-dock-item:hover .yc-dock-ico,
.yc-dock-item:focus-visible .yc-dock-ico {
    transform: scale(1.14) rotate(-6deg);
}

.yc-dock-item:hover .yc-dock-label,
.yc-dock-item:focus-visible .yc-dock-label {
    max-width: 150px;
    opacity: 1;
    padding-inline-end: 18px;
}

/* ---- per-platform brand colours ---- */
.yc-pf-facebook  { --brand: #1877F2; --brand-grad: linear-gradient(135deg, #4293ff, #1877F2 60%, #0a52c4); }
.yc-pf-instagram { --brand: #d6266f; --brand-grad: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 64%, #962fbf); }
.yc-pf-twitter   { --brand: #2E1A0B; --brand-grad: linear-gradient(135deg, #3a3f45, #2E1A0B 60%, #000); }
.yc-pf-whatsapp  { --brand: #1faa55; --brand-grad: linear-gradient(135deg, #43e07a, #25D366 50%, #0f9a47); }
.yc-pf-youtube   { --brand: #e8201b; --brand-grad: linear-gradient(135deg, #ff4d4a, #e8201b 60%, #b1100c); }
.yc-pf-tiktok    { --brand: #2E1A0B; --brand-grad: linear-gradient(135deg, #25F4EE, #2E1A0B 50%, #FE2C55); }
.yc-pf-telegram  { --brand: #229ED9; --brand-grad: linear-gradient(135deg, #37BBFE, #229ED9 55%, #1c86b8); }
.yc-pf-branches  { --brand: #B0824F; --brand-grad: linear-gradient(135deg, #D9BC93, #C59C6D 55%, #95683B); }

/* ---- Branches flyout ---- */
/* overflow must be visible so the flyout can escape the item box; the collapsed
   label is hidden via max-width:0, so nothing spills when not hovered. */
.yc-dock-branches { overflow: visible; }
/* overflow:visible (needed above for the flyout) un-clips the hover-shine
   pseudo, whose resting position (translateX(-120%)) then leaks out as a
   stray diagonal streak beside the pin — so drop the shine on this item. */
.yc-dock-branches::after { content: none; }

.yc-branches-flyout {
    position: absolute;
    inset-inline-start: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-12px) scale(.96);
    transform-origin: center inline-start;
    min-width: 240px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1.5px solid rgba(197, 156, 109, .3);
    border-radius: 18px;
    box-shadow: 0 26px 54px -18px rgba(28, 20, 16, .5);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
    z-index: 5;
}

/* little arrow pointing back to the pin */
.yc-branches-flyout::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(255, 255, 255, .97);
    border-inline-start: 1.5px solid rgba(197, 156, 109, .3);
    border-bottom: 1.5px solid rgba(197, 156, 109, .3);
}

.yc-dock-branches:hover .yc-branches-flyout,
.yc-dock-branches:focus-within .yc-branches-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}

.yc-branches-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display, 'El Messiri', serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--amber-800, #62391C);
    padding: 4px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(197, 156, 109, .35);
}
.yc-branches-head i { color: var(--gold, #C59C6D); }

.yc-branches-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yc-branches-list li {
    opacity: 0;
    transform: translateX(-8px);
}
[dir="rtl"] .yc-branches-list li { transform: translateX(8px); }

/* lines reveal one after another while the flyout is open */
.yc-dock-branches:hover .yc-branches-list li,
.yc-dock-branches:focus-within .yc-branches-list li {
    animation: yc-branch-in .38s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(.06s + var(--bi, 0) * .06s);
}

@keyframes yc-branch-in {
    to { opacity: 1; transform: translateX(0); }
}

.yc-branch-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--bark, #784625);
    font-family: var(--font-body, 'Readex Pro', sans-serif);
    font-weight: 500;
    font-size: 13.5px;
    position: relative;
    transition: background .25s ease, color .25s ease, padding-inline-start .25s ease;
}
.yc-branch-static { cursor: default; }

/* the growing accent "line" on the start edge */
.yc-branch-line::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-light, #D9BC93), var(--gold-dark, #95683B));
    transform: translateY(-50%);
    transition: height .25s ease;
}

a.yc-branch-line:hover {
    background: linear-gradient(135deg, rgba(232, 192, 106, .2), rgba(197, 156, 109, .12));
    color: var(--amber-800, #62391C);
    padding-inline-start: 16px;
}
a.yc-branch-line:hover::before { height: 64%; }

.yc-branch-dot {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 12px;
    color: var(--gold-dark, #95683B);
    background: rgba(197, 156, 109, .14);
    transition: background .25s ease, color .25s ease;
}
a.yc-branch-line:hover .yc-branch-dot {
    background: linear-gradient(135deg, var(--gold, #C59C6D), var(--gold-dark, #95683B));
    color: #fff;
}

.yc-branch-name { flex: 1; }

.yc-branch-go {
    font-size: 11px;
    opacity: 0;
    color: var(--gold-dark, #95683B);
    transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
a.yc-branch-line:hover .yc-branch-go { opacity: .85; transform: translateX(0); }

/* ============ Dark mode ============ */
body.dark-mode .yc-dock-item {
    background: rgba(34, 28, 22, .72);
    border-color: rgba(197, 156, 109, .3);
    color: var(--gold-light, #D9BC93);
}
body.dark-mode .yc-dock-item:hover,
body.dark-mode .yc-dock-item:focus-visible { color: #fff; }
body.dark-mode .yc-branches-flyout,
body.dark-mode .yc-branches-flyout::before {
    background: rgba(26, 21, 18, .97);
    border-color: rgba(197, 156, 109, .32);
}
body.dark-mode .yc-branches-head { color: var(--gold-light, #D9BC93); }
body.dark-mode .yc-branch-line { color: #E8DCC8; }
body.dark-mode a.yc-branch-line:hover { color: #fff; }

/* ============ Responsive ============ */
/* Keep the floating dock visible on mobile too, but compact so it hugs the
   screen edge without covering much content. Labels stay collapsed (no hover
   on touch), so it's just a slim column of icons. */
@media (max-width: 991.98px) {
    .yc-social-dock { gap: 8px; }
    .yc-dock-item { width: 38px; height: 38px; }
    .yc-dock-ico { flex: 0 0 38px; width: 38px; height: 38px; font-size: 15px; }
    .yc-dock-spine { display: none; }
    /* Don't let a label flyout open off-screen on small devices. */
    .yc-dock-item:hover { width: 38px; }
    .yc-dock-label { display: none; }
    .yc-branches-list { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .yc-dock-item,
    .yc-branches-list li { animation: none; opacity: 1; transform: none; }
    .yc-dock-item { transition: width .2s ease, background .2s ease, color .2s ease; }
}

/* ============================================================
   Modern UI polish layer (additive, scoped — loaded last)
   Adds delight + a more modern feel without touching the
   existing layout maths. Everything here is opt-in via a class
   or a body state, so it can't break the base design.
   ============================================================ */

/* Smooth in-page scrolling for anchor jumps, offset so the target
   lands BELOW the fixed header stack instead of hidden under it.
   Heights mirror the stack: 174px desktop, 99px on ≤991px. */
html { scroll-behavior: smooth; scroll-padding-top: 184px; }
@media (max-width: 991px) { html { scroll-padding-top: 108px; } }

/* ---- 1. Header elevation on scroll ----
   No height change (keeps the fixed-stack maths intact); just a
   crisper shadow + subtle blur once the user starts scrolling,
   which reads as "modern / floating". */
.main-header,
.main-nav { transition: box-shadow .3s ease, background-color .3s ease; }
body.yc-scrolled .main-header {
    box-shadow: 0 8px 28px rgba(28, 20, 16, .12);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
body.yc-scrolled .main-nav {
    box-shadow: 0 6px 18px rgba(28, 20, 16, .08);
}

/* ---- 2. Fly-to-cart ----
   A clone of the product image arcs into the cart icon on "add". */
.yc-fly-clone {
    position: fixed;
    z-index: 4000;
    border-radius: 14px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(28, 20, 16, .35);
    will-change: transform, opacity, width, height;
    transition: transform .85s cubic-bezier(.5, -0.2, .35, 1),
                opacity .85s ease,
                width .85s cubic-bezier(.5, -0.2, .35, 1),
                height .85s cubic-bezier(.5, -0.2, .35, 1);
}
/* Cart icon reacts when the clone "lands". */
.cart-btn.yc-cart-hit {
    animation: ycCartHit .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ycCartHit {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

/* ---- 3. Friendlier focus ring for keyboard users (accessibility) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--amber-400, #C59C6D);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- 4. Skeleton shimmer (for future AJAX loads) ---- */
.yc-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--sand, #E8DCC8);
    border-radius: var(--radius-sm, 12px);
}
.yc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: ycShimmer 1.4s infinite;
}
@keyframes ycShimmer { to { transform: translateX(100%); } }
body.dark-mode .yc-skeleton { background: #221d18; }
body.dark-mode .yc-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }

/* ---- 5. Cart row exit transition (used by the in-place cart update) ---- */
.cart-table tr.yc-row-out {
    transition: opacity .35s ease, transform .35s ease;
    opacity: 0;
    transform: translateX(24px);
}
/* gentle highlight when a row's subtotal updates */
@keyframes ycFlash { 0% { background: rgba(197, 156, 109, .18); } 100% { background: transparent; } }
.cart-table td.yc-flash { animation: ycFlash .8s ease; }

/* ---- 7. Slide-in cart drawer ---- */
.yc-drawer-overlay {
    position: fixed; inset: 0; z-index: 4900;
    background: rgba(28, 20, 16, .45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.yc-drawer-overlay.open { opacity: 1; visibility: visible; }
.yc-cart-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 5000;
    width: 390px; max-width: 92vw;
    background: var(--ivory, #FBF6ED);
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(28, 20, 16, .18);
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
html[dir="rtl"] .yc-cart-drawer { transform: translateX(-100%); box-shadow: 12px 0 40px rgba(28, 20, 16, .18); }
/* Open state must beat the RTL closed rule above. `html[dir="rtl"] .yc-cart-drawer`
   has higher specificity than a bare `.yc-cart-drawer.open`, so without the matching
   RTL open rule the drawer stayed off-screen on the Arabic site — the overlay blur
   showed but no panel, looking like a stuck blur. */
.yc-cart-drawer.open,
html[dir="rtl"] .yc-cart-drawer.open { transform: translateX(0); }
.yc-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; color: #fff;
    background: linear-gradient(135deg, var(--gold-dark, #95683B), var(--amber-500, #B0824F) 55%, var(--amber-400, #C59C6D));
}
.yc-drawer-title { font-family: var(--font-display, 'El Messiri', serif); font-weight: 700; font-size: 18px; }
.yc-drawer-close {
    background: rgba(255, 255, 255, .18); border: none; color: #fff; cursor: pointer;
    width: 34px; height: 34px; border-radius: 10px; font-size: 16px; transition: background .2s, transform .2s;
}
.yc-drawer-close:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); }
.yc-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.yc-drawer-empty { text-align: center; color: var(--stone, #A09487); padding: 60px 16px; }
.yc-drawer-empty i { font-size: 42px; color: var(--dust, #C4B8AB); margin-bottom: 10px; display: block; }
.yc-drawer-item {
    display: flex; gap: 12px; align-items: center; padding: 12px 6px;
    border-bottom: 1px solid var(--sand, #E8DCC8);
    animation: ycDrawerItemIn .35s ease both;
}
@keyframes ycDrawerItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.yc-drawer-item-img { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--parchment, #F8F4EE); }
.yc-drawer-item-img img { width: 100%; height: 100%; object-fit: cover; }
.yc-drawer-item-body { flex: 1; min-width: 0; }
.yc-drawer-item-name { font-weight: 600; font-size: 13.5px; color: var(--walnut, #62391C); text-decoration: none; display: block; margin-bottom: 4px; }
.yc-drawer-item-name:hover { color: var(--amber-600, #95683B); }
.yc-drawer-item-meta { font-size: 12.5px; color: var(--earth, #6B5D52); }
.yc-drawer-item-total { font-weight: 700; color: var(--amber-600, #95683B); font-size: 13.5px; white-space: nowrap; }
.yc-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--sand, #E8DCC8); background: var(--cream-dark, #F4EBDA); display: grid; gap: 10px; }
.yc-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--walnut, #62391C); margin-bottom: 2px; }
.yc-drawer-subtotal span:last-child { color: var(--amber-600, #95683B); font-size: 18px; }
body.dark-mode .yc-cart-drawer { background: var(--card-dark, #4F2D15); }
body.dark-mode .yc-drawer-item { border-color: var(--border-dark, rgba(197, 156, 109,.08)); }
body.dark-mode .yc-drawer-item-name { color: var(--text-dark, #E8DCC8); }
body.dark-mode .yc-drawer-foot { background: var(--surface-dark, #161210); border-color: var(--border-dark, rgba(197, 156, 109,.08)); }

/* ---- 8. Sticky add-to-cart bar (product detail, appears when the main CTA scrolls away) ---- */
.yc-sticky-buy {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1300;
    background: var(--ivory, #FBF6ED);
    border-top: 1px solid var(--sand, #E8DCC8);
    box-shadow: 0 -8px 24px rgba(28, 20, 16, .12);
    display: flex; align-items: center; gap: 14px;
    padding: 10px clamp(14px, 4vw, 40px);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.yc-sticky-buy.show { transform: translateY(0); }
.yc-sticky-buy .yc-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yc-sticky-buy .yc-sticky-name { font-weight: 600; font-size: 14px; color: var(--walnut, #62391C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yc-sticky-buy .yc-sticky-price { font-weight: 700; color: var(--amber-600, #95683B); font-size: 15px; }
.yc-sticky-buy .btn { white-space: nowrap; }
body.dark-mode .yc-sticky-buy { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.08)); }
body.dark-mode .yc-sticky-buy .yc-sticky-name { color: var(--text-dark, #E8DCC8); }
@media (max-width: 575.98px) { .yc-sticky-buy .yc-sticky-name { display: none; } }

/* ---- 9. Shop-by-category tabbed rail ---- */
.cat-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 18px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--sand, #E8DCC8); background: #fff; color: var(--earth, #6B5D52);
    padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    white-space: nowrap; font-family: inherit;
}
.cat-tab i { color: var(--amber-400, #C59C6D); transition: color .25s ease; }
.cat-tab:hover { border-color: var(--amber-300, #D9BC93); color: var(--walnut, #62391C); transform: translateY(-1px); }
.cat-tab.active {
    background: linear-gradient(135deg, var(--amber-500, #B0824F), var(--amber-400, #C59C6D));
    color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(149, 104, 59, .28);
}
.cat-tab.active i { color: #fff; }
.cat-tab-panel { display: none; }
.cat-tab-panel.active { display: block; animation: ycFadeIn .35s ease; }
@keyframes ycFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cat-tab-cta-wrap { text-align: center; margin-top: 14px; }
/* Mobile: wrap the category chips onto multiple centered rows instead of a
   horizontal scroller (which chopped long labels at both screen edges). */
@media (max-width: 575.98px) {
    .cat-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
        gap: 8px;
        padding: 6px 0 16px;
    }
    .cat-tab {
        padding: 8px 14px;
        font-size: 13px;
        max-width: 100%;
    }
    .cat-tab span { overflow: hidden; text-overflow: ellipsis; }
}
body.dark-mode .cat-tab { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.12)); color: var(--text-secondary-dark, #A09487); }
body.dark-mode .cat-tab:hover { color: var(--text-dark, #E8DCC8); }

/* ---- 10. Collapsible checkout panels (declutter optional fields) ---- */
.checkout-extras { border: 1px solid var(--sand, #E8DCC8); border-radius: var(--radius-sm, 12px); overflow: hidden; background: #fff; }
.checkout-extras > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--walnut, #62391C);
    transition: background .2s ease;
}
.checkout-extras > summary::-webkit-details-marker { display: none; }
.checkout-extras > summary i { color: var(--amber-500, #B0824F); }
.checkout-extras > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-inline-start: auto; font-size: 12px; color: var(--stone, #A09487);
    transition: transform .25s ease;
}
.checkout-extras[open] > summary::after { transform: rotate(180deg); }
.checkout-extras > summary:hover { background: var(--cream-dark, #F4EBDA); }
.checkout-extras-body { padding: 4px 16px 16px; animation: ycFadeIn .3s ease; }
body.dark-mode .checkout-extras { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.12)); }
body.dark-mode .checkout-extras > summary { color: var(--text-dark, #E8DCC8); }

/* ---- 6. Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yc-fly-clone,
    .cart-btn.yc-cart-hit,
    .yc-skeleton::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Dynamic category navigation (header mega-menu + mobile)
   and the home "أقسام المتجر" subcategory enhancement.
   Brand palette pulled from theme vars with brown fallbacks.
   ============================================================ */
:root {
    --yc-cat-accent: var(--primary, #a3763f);
    --yc-cat-accent-2: var(--primary-dark, #8a6234);
    --yc-cat-surface: #fff;
    --yc-cat-ink: #4a3b2a;
    --yc-cat-muted: #8b7b68;
    --yc-cat-line: rgba(139, 98, 52, .14);
}

/* ---------- Desktop mega dropdown ---------- */
.nav-menu .nav-item.yc-has-mega { position: relative; }

.nav-item.yc-has-mega > .nav-link .yc-caret {
    font-size: .62em;
    margin-inline-start: 4px;
    transition: transform .25s ease;
    opacity: .7;
}
.nav-item.yc-has-mega:hover > .nav-link .yc-caret { transform: rotate(180deg); }

.yc-mega {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 50%;
    transform: translateX(50%) translateY(8px);
    min-width: 460px;
    max-width: 620px;
    background: var(--yc-cat-surface);
    border: 1px solid var(--yc-cat-line);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(74, 59, 42, .18);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1200;
}
/* bridge the 10px gap so hover doesn't drop */
.yc-mega::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.nav-item.yc-has-mega:hover .yc-mega,
.nav-item.yc-has-mega:focus-within .yc-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
}
.yc-mega-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.yc-mega-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    color: var(--yc-cat-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.yc-mega-link:hover {
    background: linear-gradient(135deg, rgba(163,118,63,.12), rgba(163,118,63,.05));
    color: var(--yc-cat-accent-2);
    transform: translateX(-3px);
}
.yc-mega-thumb {
    width: 34px; height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--yc-cat-line);
}
.yc-mega-dot {
    width: 36px; height: 36px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    font-size: .88rem;
    box-shadow: 0 4px 10px -3px rgba(163, 118, 63, .5);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.yc-mega-link:hover .yc-mega-dot {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 7px 16px -4px rgba(163, 118, 63, .6);
}

/* ---------- Mobile category accordion ---------- */
.yc-m-dept > a {
    font-weight: 700 !important;
    color: var(--yc-cat-accent-2) !important;
}
.yc-m-sub > a {
    padding-inline-start: 26px !important;
    font-size: .9rem;
    opacity: .9;
}
.yc-m-sub > a i { font-size: .75em; opacity: .6; }

/* ---------- Home category cards: subcategory chips ---------- */
.category-card-inner { position: relative; }
.cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.cat-sub-chip {
    font-size: .74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(163, 118, 63, .10);
    color: var(--yc-cat-accent-2);
    text-decoration: none;
    border: 1px solid var(--yc-cat-line);
    transition: background .18s ease, color .18s ease, transform .18s ease;
    position: relative;
    z-index: 3;
}
.cat-sub-chip:hover {
    background: var(--yc-cat-accent);
    color: #fff;
    transform: translateY(-2px);
}
.cat-sub-more {
    font-size: .74rem;
    font-weight: 700;
    color: var(--yc-cat-muted);
    align-self: center;
}

@media (max-width: 991px) {
    .yc-mega { min-width: 320px; }
    .yc-mega-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Home "أقسام المتجر" — centered modern category tree
   ============================================================ */
.yc-cats-modern { text-align: center; }
.yc-cats-head {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.yc-cats-head .section-title { margin: 0; }
.yc-cats-all {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--yc-cat-accent-2); font-weight: 700; text-decoration: none;
    padding: 6px 15px; border-radius: 999px; border: 1px solid var(--yc-cat-line);
    transition: background .18s ease, color .18s ease;
}
.yc-cats-all:hover { background: var(--yc-cat-accent); color: #fff; }

/* ---- Modern responsive category card grid ---- */
.yc-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    margin-top: 34px;
    text-align: start;
}
.yc-cat-grid:has(.yc-cat-card:only-child) { grid-template-columns: minmax(340px, 560px); justify-content: center; }

.yc-cat-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--yc-cat-surface);
    border: 1px solid var(--yc-cat-line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 16px 38px rgba(74, 59, 42, .08);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.yc-cat-card::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    opacity: 0; transition: opacity .22s ease;
}
.yc-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 52px rgba(74, 59, 42, .16);
    border-color: rgba(163, 118, 63, .3);
}
.yc-cat-card:hover::before { opacity: 1; }

.yc-cat-card-head {
    display: flex; align-items: center; gap: 15px;
    text-decoration: none; color: var(--yc-cat-ink);
}
.yc-cat-card-ico {
    flex: 0 0 auto;
    width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    background: linear-gradient(135deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    color: #fff; font-size: 1.55rem;
    box-shadow: 0 10px 22px rgba(139, 98, 52, .28);
    transition: transform .22s ease;
}
.yc-cat-card:hover .yc-cat-card-ico { transform: scale(1.06) rotate(-3deg); }
.yc-cat-card-ico img { width: 100%; height: 100%; object-fit: cover; }
.yc-cat-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.yc-cat-card-name {
    font-size: 1.18rem; font-weight: 800; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yc-cat-card-count {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--yc-cat-muted); font-weight: 600;
}
.yc-cat-card-count i { font-size: .72rem; color: var(--yc-cat-accent); }
.yc-cat-card-arrow {
    flex: 0 0 auto;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(163, 118, 63, .09);
    color: var(--yc-cat-accent-2); font-size: .85rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.yc-cat-card:hover .yc-cat-card-arrow {
    background: var(--yc-cat-accent); color: #fff; transform: translateX(-3px);
}

.yc-cat-card-subs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed var(--yc-cat-line);
}
.yc-cat-chip {
    font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px;
    background: rgba(163, 118, 63, .08); color: var(--yc-cat-accent-2);
    border: 1px solid var(--yc-cat-line); text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.yc-cat-chip:hover {
    background: var(--yc-cat-accent); color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(139, 98, 52, .25);
}

@media (max-width: 575px) {
    .yc-cat-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
    .yc-cat-card { padding: 16px; border-radius: 18px; }
    .yc-cat-card-ico { width: 56px; height: 56px; font-size: 1.3rem; }
    .yc-cat-card-name { font-size: 1.05rem; }
}

/* ============================================================
   DARK MODE — category nav (mega dropdown, mobile accordion)
   and the home "أقسام المتجر" cards.
   Without these the whole component kept its light (#fff) surface
   and dark-brown ink/chips, leaving bright cards + low-contrast
   text on the dark storefront. We remap the component's own
   custom properties, then fix the few spots that used the dark
   accent color as *text* (unreadable on a dark card).
   ============================================================ */
body.dark-mode {
    --yc-cat-surface: var(--card-dark, #4F2D15);
    --yc-cat-ink: #F4EBDA;
    --yc-cat-muted: #B9A88A;
    --yc-cat-line: rgba(197, 156, 109, .16);
}

/* ---- Home category cards ---- */
body.dark-mode .yc-cat-card { box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); }
body.dark-mode .yc-cat-card:hover {
    box-shadow: 0 26px 52px -16px rgba(0, 0, 0, .85);
    border-color: rgba(197, 156, 109, .35);
}
body.dark-mode .yc-cat-card-name { color: #F4EBDA; }
body.dark-mode .yc-cat-card-count { color: var(--text-secondary-dark, #A09487); }
body.dark-mode .yc-cat-card-arrow { background: rgba(197, 156, 109, .16); color: #E8D4B8; }
body.dark-mode .yc-cat-card-subs { border-top-color: rgba(197, 156, 109, .18); }
body.dark-mode .yc-cat-chip {
    background: rgba(197, 156, 109, .12);
    color: #E8D4B8;
    border-color: rgba(197, 156, 109, .22);
}
body.dark-mode .yc-cat-chip:hover { background: var(--yc-cat-accent); color: #2E1A0B; }
body.dark-mode .yc-cats-all { color: #E8D4B8; border-color: rgba(197, 156, 109, .25); }
body.dark-mode .yc-cats-all:hover { background: var(--yc-cat-accent); color: #2E1A0B; }

/* ---- Desktop mega dropdown ---- */
body.dark-mode .yc-mega {
    background: var(--card-dark, #4F2D15);
    border-color: rgba(197, 156, 109, .18);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}
body.dark-mode .yc-mega-link { color: #E8DCC8; }
body.dark-mode .yc-mega-link:hover { background: rgba(197, 156, 109, .14); color: #F4EBDA; }
body.dark-mode .yc-mega-thumb { border-color: rgba(197, 156, 109, .2); }

/* ---- Mobile accordion + legacy home chips ---- */
body.dark-mode .yc-m-dept > a { color: #E8D4B8 !important; }
body.dark-mode .yc-m-sub > a { color: var(--text-dark, #E8DCC8) !important; }
body.dark-mode .cat-sub-chip {
    background: rgba(197, 156, 109, .12);
    color: #E8D4B8;
    border-color: rgba(197, 156, 109, .22);
}
body.dark-mode .cat-sub-chip:hover { background: var(--yc-cat-accent); color: #2E1A0B; }
body.dark-mode .cat-sub-more { color: var(--text-secondary-dark, #A09487); }

/* ============================================================
   premium.css — Phase 1 UI polish
   Adds a desktop custom cursor and a full-page-hero scroll
   indicator, plus small non-conflicting touches. The existing
   card/button hover micro-animations live in style.css /
   enhancements.css and are intentionally left untouched here.
   ============================================================ */

/* ============ Custom cursor — honey dot + trailing liquid ring ============ */
/* premium.js adds .yc-cursor-on to <html> ONLY for fine-pointer, non-touch,
   motion-allowed, wide-enough (>=992) devices and creates two followers: a
   small honey DOT that tracks fast + crisp, and a larger RING that trails with
   a liquid skew and blooms over interactive elements. Touch / reduced-motion
   users keep the native cursor completely untouched. */
html.yc-cursor-on,
html.yc-cursor-on * { cursor: none !important; }

/* Shared base — we use custom classNames, so we replicate the positioning that
   MouseFollower's built-in .mf-cursor rule would otherwise provide. */
.yc-cursor-ring,
.yc-cursor-dot {
    position: fixed; top: 0; left: 0;
    direction: ltr;                   /* MouseFollower assumes LTR coords even on RTL pages */
    pointer-events: none;
    contain: layout style size;
    will-change: transform;
    transition: opacity .25s ease;
}
/* Default = VISIBLE. MouseFollower starts the element off-screen (initialPos), so
   there's no flash before the first move. We only HIDE while the pointer is
   provably outside the window — so a missed/edge-case event can never leave the
   page cursor-less (the previous default-hidden approach could). We deliberately
   do NOT depend on the library's own -hidden state, which our custom class names
   don't visually react to. */
html.yc-cursor-hide .yc-cursor-ring,
html.yc-cursor-hide .yc-cursor-dot { opacity: 0; }
.yc-cursor-ring::before,
.yc-cursor-dot::before {
    content: ""; position: absolute; top: 0; left: 0;
    border-radius: 50%; box-sizing: border-box;
}

/* ---- Ring: outline that trails + stretches with velocity (skewing) ---- */
.yc-cursor-ring { z-index: 20050; }
.yc-cursor-ring::before {
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border: 1.5px solid var(--amber-500, #c59c6d);
    background: rgba(197, 156, 109, .05);
    box-shadow: 0 0 0 0 rgba(212, 168, 67, 0), 0 8px 22px -8px rgba(160, 116, 50, .5);
    transition: width .3s cubic-bezier(.22, 1, .36, 1),
                height .3s cubic-bezier(.22, 1, .36, 1),
                margin .3s cubic-bezier(.22, 1, .36, 1),
                background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .18s ease;
}

/* ---- Dot: small solid honey drop, tracks fast ---- */
.yc-cursor-dot { z-index: 20060; }
.yc-cursor-dot::before {
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    background: linear-gradient(135deg, #d4a843, #a07432);
    box-shadow: 0 0 10px 1px rgba(212, 168, 67, .55);
    transition: width .25s ease, height .25s ease, margin .25s ease,
                opacity .25s ease, transform .18s ease, background .3s ease;
}

/* ---- Hover over interactive elements: ring blooms, dot recedes ---- */
.yc-cursor-ring.-active::before {
    width: 80px; height: 80px; margin: -40px 0 0 -40px;
    border-color: var(--amber-400, #d4a843);
    background: rgba(212, 168, 67, .12);
    box-shadow: 0 0 0 4px rgba(212, 168, 67, .08), 0 14px 34px -10px rgba(160, 116, 50, .6);
}
.yc-cursor-dot.-active::before {
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    opacity: .65;
}

/* ---- Tactile press feedback (mousedown) ---- */
.yc-cursor-ring.-pressed::before { transform: scale(.8); }
.yc-cursor-dot.-pressed::before  { transform: scale(1.7); }

/* ---- Dark mode: brighter gold + a real glow (the light-mode brown drop-shadow
   is invisible on dark surfaces, so we replace it with a gold bloom) ---- */
body.dark-mode .yc-cursor-ring::before {
    border-color: var(--amber-400, #d4a843);
    background: rgba(212, 168, 67, .06);
    box-shadow: 0 0 0 0 rgba(232, 193, 90, 0), 0 0 16px -1px rgba(212, 168, 67, .45);
}
body.dark-mode .yc-cursor-ring.-active::before {
    border-color: #e8c15a;
    background: rgba(232, 193, 90, .13);
    box-shadow: 0 0 0 4px rgba(232, 193, 90, .10), 0 0 28px -2px rgba(232, 193, 90, .5);
}
body.dark-mode .yc-cursor-dot::before {
    background: linear-gradient(135deg, #f0cf6a, #d4a843);
    box-shadow: 0 0 12px 1px rgba(240, 207, 106, .6);
}

/* ============ Dark-mode logo swap ============ */
/* _BrandLogo renders BOTH a light and a dark logo (only when a dark-mode logo is
   configured in /Admin/Settings). We hide the inactive variant so the visible one
   keeps its normal sizing/display — no layout shift, and light mode is byte-for-
   byte what it was before. Default (no .dark-mode class yet) shows the light logo,
   so there's no wrong-logo flash before the dark-mode script runs. */
body:not(.dark-mode) .yc-logo--dark { display: none !important; }
body.dark-mode .yc-logo--light { display: none !important; }

/* ============ Hero scroll indicator ============ */
/* .hero-section is position:relative, so this anchors to the hero's
   bottom edge — perfect now that the hero fills the viewport. */
.hero-scroll-indicator {
    position: absolute;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 4px 8px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    background: none; border: 0; cursor: pointer;
    font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
    transition: opacity .3s ease, color .2s ease;
}
.hero-scroll-indicator:hover { color: #fff; }
.hero-scroll-mouse {
    width: 25px; height: 40px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 15px;
    display: flex; justify-content: center;
    padding-top: 7px;
}
.hero-scroll-dot {
    width: 4px; height: 8px;
    border-radius: 4px;
    background: #fff;
    animation: heroScrollDot 1.7s cubic-bezier(.4, 0, .2, 1) infinite;
}
.hero-scroll-text { display: inline-flex; align-items: center; gap: 5px; }
.hero-scroll-chevron { animation: heroScrollBob 1.7s ease-in-out infinite; }

@keyframes heroScrollDot {
    0%   { opacity: 0; transform: translateY(-5px); }
    35%  { opacity: 1; }
    75%  { opacity: 0; transform: translateY(11px); }
    100% { opacity: 0; }
}
@keyframes heroScrollBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* Hide on phones (the hero is a shorter tuned slice there — no room). */
@media (max-width: 767.98px) { .hero-scroll-indicator { display: none; } }

/* Honor reduced-motion for every animation premium.css introduces. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-dot,
    .hero-scroll-chevron { animation: none; }
    .yc-cursor-ring::before,
    .yc-cursor-dot::before { transition: none; }
}

/* ============================================================
   Phase 3 home sections — Brand Story, Promo Video, Instagram
   ============================================================ */

/* Dashboard drag-to-reorder: sections are flex children whose visual order is
   set by an inline `order` on each <section> (server-rendered from the admin
   order). No JS, so there's no reflow flash; falls back to DOM order. */
.home-sections { display: flex; flex-direction: column; min-width: 0; }
.home-sections > section { min-width: 0; }

/* ---------- Brand Story / lifestyle ---------- */
.brand-stories { padding: 30px 0; }
.brand-story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 30px 0;
}
.brand-story-row.image-end .brand-story-stage { order: 2; }

/* 3-D display stage: perspective wrapper hosting the media, an ambient glow
   halo, a mirrored floor reflection and (via [data-mist]) drifting motes. */
.brand-story-stage {
    position: relative;
    z-index: 0;
    perspective: 1200px;
    transform-style: preserve-3d;
}
/* Ambient gold glow that pools behind the product — deepens on hover. */
.brand-story-stage .bs-glow {
    position: absolute;
    inset: -6% -4% 2%;
    z-index: 0;
    border-radius: 44px;
    background: radial-gradient(60% 62% at 50% 42%, rgba(197, 156, 109, .38), transparent 72%);
    filter: blur(34px);
    opacity: .6;
    transform: translateZ(-60px);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.brand-story-stage:hover .bs-glow { opacity: .92; transform: translateZ(-40px); }

.brand-story-media {
    position: relative;
    z-index: 2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 54px -28px rgba(90, 58, 27, .5);
    transform-style: preserve-3d;
    /* --rx/--ry are set live by motion.js on pointer move (tilt variant). */
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
    will-change: transform;
}
.brand-story-media:hover { box-shadow: 0 40px 70px -30px rgba(90, 58, 27, .62); }
.brand-story-media img {
    width: 100%;
    height: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.brand-story-row:hover .brand-story-media img { transform: scale(1.06); }

/* Inner bevel + faint gold vignette for a framed, glassy depth. */
.brand-story-media .bs-frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 46px rgba(160, 116, 50, .16);
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 42%);
}
/* Cursor-tracking gloss sweep (--mx/--my set by motion.js). */
.brand-story-media .bs-glare {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: soft-light;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%);
    transition: opacity .35s ease;
}
.brand-story-media:hover .bs-glare { opacity: 1; }

/* Mirrored floor reflection fading downward. */
.brand-story-stage .bs-reflection {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40%;
    margin-top: 8px;
    z-index: 0;
    border-radius: 22px;
    background-size: cover;
    background-position: center bottom;
    transform: scaleY(-1);
    opacity: .26;
    filter: blur(1px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 68%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 68%);
}

/* Floating variant: gentle idle levitation (no pointer tilt). */
.bs-fx-float .brand-story-media { animation: bsFloat 6.5s ease-in-out infinite; }
@keyframes bsFloat {
    0%, 100% { transform: translateY(0) rotate(-.35deg); }
    50%      { transform: translateY(-14px) rotate(.35deg); }
}

/* The stage also carries [data-mist]; its generic child rule flattens children
   to position:relative — re-assert absolute layering for the decorative layers
   (higher specificity + later source order wins the tie). */
.brand-story-stage[data-mist] > .bs-glow,
.brand-story-stage[data-mist] > .bs-reflection { position: absolute; z-index: 0; }

/* Transparent cutout mode: a product PNG/SVG floats free on the glow — no glass
   frame, no crop box. It still tilts to the cursor (media) while the shape
   levitates (img), so the two transforms never collide. */
.bs-fx-transparent .brand-story-media {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.bs-fx-transparent .brand-story-media img {
    max-height: 480px;
    object-fit: contain;
    filter: drop-shadow(0 26px 26px rgba(70, 45, 20, .4));
    animation: bsLevitate 6.5s ease-in-out infinite;
}
.bs-fx-transparent .bs-frame,
.bs-fx-transparent .bs-glare,
.bs-fx-transparent .bs-reflection { display: none; }
.bs-fx-transparent .bs-glow { inset: 2% -2% 4%; opacity: .78; }
.bs-fx-transparent:hover .bs-glow { opacity: 1; }
/* Levitation lives on the img so it composes with the media's pointer tilt. */
.brand-story-row:hover .bs-fx-transparent .brand-story-media img { transform: none; }
@keyframes bsLevitate {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* Cutout mode: a REAL studio product photo on a WHITE background, floated by
   dropping the white via multiply blend (no alpha channel required). Best for
   catalog shots. Same levitate + pointer-tilt as the transparent variant. */
.bs-fx-cutout .brand-story-media {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.bs-fx-cutout .brand-story-media img {
    max-height: 480px;
    object-fit: contain;
    mix-blend-mode: multiply;           /* white → transparent against the page */
    animation: bsLevitate 6.5s ease-in-out infinite;
}
.bs-fx-cutout .bs-frame,
.bs-fx-cutout .bs-glare,
.bs-fx-cutout .bs-reflection { display: none; }
.bs-fx-cutout .bs-glow { inset: 2% -2% 4%; opacity: .7; }
.bs-fx-cutout:hover .bs-glow { opacity: .92; }
.brand-story-row:hover .bs-fx-cutout .brand-story-media img { transform: none; }
/* Dark mode: multiply would hide a dark bottle on a dark page — fall back to a
   clean white product card instead. */
body.dark-mode .bs-fx-cutout .brand-story-media img {
    mix-blend-mode: normal;
    background: #fff;
    border-radius: 18px;
    padding: 12px;
}

.brand-story-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 60px;
    background: rgba(197, 156, 109, .14);
    color: var(--amber-700, #7a5626);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.brand-story-title {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--text-dark, #2d2724);
}
.brand-story-text {
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--text-muted, #6b5d4a);
    margin-bottom: 22px;
    max-width: 54ch;
}
.brand-story-cta i { margin-inline-start: 8px; transition: transform .25s ease; }
.brand-story-cta:hover i { transform: translateX(-4px); }
body.dark-mode .brand-story-title { color: var(--text-dark-mode, #F4EBDA); }
body.dark-mode .brand-story-text { color: var(--text-muted-dark, #c9bca6); }
@media (max-width: 767.98px) {
    .brand-story-row { grid-template-columns: 1fr; gap: 20px; padding: 22px 0; text-align: center; }
    .brand-story-row.image-end .brand-story-stage { order: 0; }
    .brand-story-text { margin-inline: auto; }
    /* Keep the stacked mobile layout tight: drop the floor reflection & flatten. */
    .brand-story-stage .bs-reflection { display: none; }
    .brand-story-media { transform: none; }
}
/* Touch / no-hover devices: no pointer tilt or gloss (they can't drive it). */
@media (hover: none), (pointer: coarse) {
    .brand-story-media { transform: none; }
    .brand-story-media .bs-glare { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-story-media,
    .bs-fx-float .brand-story-media,
    .bs-fx-transparent .brand-story-media img,
    .bs-fx-cutout .brand-story-media img { transform: none !important; animation: none !important; }
    .brand-story-stage .bs-glow,
    .brand-story-stage .bs-reflection,
    .brand-story-media .bs-glare { display: none; }
    .brand-story-row:hover .brand-story-media img { transform: none; }
}

/* ---------- Brand Story — App-Store card grid + tap-to-expand ----------
   .bs-cards lays the stories out as one section of image-forward cards
   (3-up desktop → 2-up tablet → 1-up phone). Clicking a card morphs it
   (shared-element FLIP, driven by motion.js) into a centred full-screen
   panel — image on top, full story below — and dims the page behind it;
   Escape / overlay / close-button collapse it back. The panel animates by
   real size, so content reflows without distortion. No JS → the cards stay
   static, readable, with a working CTA link. */
.brand-stories.bs-cards { padding: 30px 0 46px; }
.brand-stories.bs-cards .bs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 28px);
}
@media (max-width: 991.98px) { .brand-stories.bs-cards .bs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .brand-stories.bs-cards .bs-grid { grid-template-columns: 1fr; } }

.brand-stories.bs-cards .brand-story-row {
    position: relative;                     /* positioning context for the FLIP + affordance */
    display: flex;
    flex-direction: column;
    gap: 0; margin: 0; padding: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 75, .08), transparent 60%),
        linear-gradient(180deg, #fffdf9 0%, #fbf5ea 100%);
    border: 1px solid #efe6d4;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 18px 40px -30px rgba(90, 58, 27, .40), 0 2px 10px rgba(90, 58, 27, .05);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.brand-stories.bs-cards .brand-story-row:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -28px rgba(90, 58, 27, .50); }
.brand-stories.bs-cards .brand-story-row:focus-visible { outline: 2px solid var(--amber-500, #c9a24b); outline-offset: 3px; }
body.dark-mode .brand-stories.bs-cards .brand-story-row {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 75, .12), transparent 60%),
        linear-gradient(180deg, #2a2118 0%, #221a12 100%);
    border-color: rgba(201, 162, 75, .18);
}

/* Clean image-card look: no alternating order, no 3-D glass decorations. */
.brand-stories.bs-cards .brand-story-row .brand-story-stage { order: 0; position: relative; perspective: none; }
.brand-stories.bs-cards .bs-glow,
.brand-stories.bs-cards .bs-frame,
.brand-stories.bs-cards .bs-glare,
.brand-stories.bs-cards .bs-reflection,
.brand-stories.bs-cards .yc-mist { display: none; }
.brand-stories.bs-cards .brand-story-media { transform: none !important; box-shadow: none; border-radius: 0; overflow: hidden; }
.brand-stories.bs-cards .brand-story-media img {
    width: 100%; height: 200px; max-height: none; object-fit: cover;
    transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.brand-stories.bs-cards .brand-story-row:hover .brand-story-media img { transform: scale(1.05); }

.brand-stories.bs-cards .brand-story-body { display: flex; flex-direction: column; padding: 20px 20px 22px; text-align: start; }
.brand-stories.bs-cards .brand-story-tag { margin-bottom: 10px; }
.brand-stories.bs-cards .brand-story-title { font-size: 1.16rem; line-height: 1.35; margin-bottom: 8px; }
.brand-stories.bs-cards .brand-story-text {
    font-size: .92rem; line-height: 1.7; margin: 0 0 14px; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.brand-stories.bs-cards .brand-story-cta { margin-top: auto; align-self: flex-start; }

/* "Expand" affordance over the image. */
.brand-stories.bs-cards .brand-story-stage::after {
    content: "\f065";                       /* fa expand */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff; background: rgba(20, 14, 6, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.brand-stories.bs-cards .brand-story-row:hover .brand-story-stage::after,
.brand-stories.bs-cards .brand-story-row:focus-visible .brand-story-stage::after { opacity: 1; transform: scale(1); }

/* --- Open panel (row is position:fixed, geometry animated by motion.js). --- */
.brand-stories.bs-cards .brand-story-row.bs-open {
    cursor: default;
    box-shadow: 0 50px 100px -30px rgba(28, 16, 6, .60);
    overflow: hidden;                       /* clips the content reflow during the morph */
    -webkit-overflow-scrolling: touch;
}
.brand-stories.bs-cards .brand-story-row.bs-open:hover { transform: none; }   /* JS owns geometry while open */
.brand-stories.bs-cards .brand-story-row.bs-open .brand-story-stage::after { display: none; }
.brand-stories.bs-cards .brand-story-row.bs-open .brand-story-media img { height: clamp(220px, 40vh, 380px); transform: none !important; }
.brand-stories.bs-cards .brand-story-row.bs-open .brand-story-body { padding: clamp(22px, 3.5vw, 40px); }
.brand-stories.bs-cards .brand-story-row.bs-open .brand-story-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.brand-stories.bs-cards .brand-story-row.bs-open .brand-story-text {
    -webkit-line-clamp: unset; display: block; overflow: visible; font-size: 1rem; line-height: 1.9; margin-bottom: 20px;
}

/* Dim + blur behind the open panel. */
.bs-overlay {
    position: fixed; inset: 0; z-index: 4999;
    background: rgba(24, 16, 7, .58);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bs-close {
    position: fixed; top: 18px; inset-inline-end: 18px; z-index: 5001;
    width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    color: #5a3a1b; background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    transition: transform .2s ease, background-color .2s ease;
}
.bs-close:hover { transform: scale(1.08); background: #fff; }
.bs-placeholder { margin: 0; }              /* holds the card's grid cell while it's fixed */

/* ================= Interactive Bento (brand stories) =================
   One editorial composition: a tall hero card (col 1, spans both rows) and
   two stacked cards (col 2, 40/60). Each card is image-forward; hover (fine
   pointer) OR .is-expanded (tap/click, set by JS) reveals the copy over a warm
   scrim with a subtle image zoom — the card's box never changes size, so there
   is no layout shift. Namespaced .yc-bento-* so it shares nothing with the old
   bs-cards rules above. RTL-safe via logical properties; degrades under
   prefers-reduced-motion and on no-hover devices. */
.yc-bento-section { padding: 30px 0 46px; }

/* Small elegant "click any image…" note above the grid. */
.yc-bento-note {
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: var(--amber-700, #7a5626);
    margin: 0 0 22px;
    letter-spacing: .01em;
}
.yc-bento-note-star { color: var(--amber-500, #c9a24b); margin-inline-end: 4px; }
body.dark-mode .yc-bento-note { color: var(--amber-300, #e2c39a); }

.yc-bento-grid {
    display: grid;
    grid-template-columns: 1.62fr 1fr;          /* ≈ 62% / 38% */
    gap: clamp(14px, 1.6vw, 22px);
    min-height: clamp(460px, 52vw, 620px);
}
/* The 3-card composition: hero spans both rows; right column splits 40 / 60. */
.yc-bento-grid.is-trio { grid-template-rows: 2fr 3fr; }
.yc-bento-grid.is-trio .is-large  { grid-column: 1; grid-row: 1 / 3; }
.yc-bento-grid.is-trio .is-top    { grid-column: 2; grid-row: 1; }
.yc-bento-grid.is-trio .is-bottom { grid-column: 2; grid-row: 2; }
/* Non-trio fallback (1, 2 or 4+ stories): hero still leads, others auto-flow. */
.yc-bento-grid:not(.is-trio) { grid-auto-rows: minmax(240px, 1fr); }
.yc-bento-grid:not(.is-trio) .is-large { grid-column: 1; grid-row: span 2; }
.yc-bento-grid .is-wide { grid-column: 1 / -1; }
.yc-bento-card:only-child { grid-column: 1 / -1; grid-row: auto; }

/* ---- Card shell ---- */
.yc-bento-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #efe6d4;                          /* warm placeholder while the image loads */
    box-shadow: 0 18px 40px -30px rgba(90, 58, 27, .40), 0 2px 10px rgba(90, 58, 27, .05);
    transition: box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
    isolation: isolate;
    min-height: 240px;
}
.yc-bento-card:hover { box-shadow: 0 30px 56px -28px rgba(90, 58, 27, .50); }
body.dark-mode .yc-bento-card { background: #241c14; border: 1px solid rgba(201, 162, 75, .18); }

/* ---- Media button: fills the whole card, holds the image + hint ---- */
.yc-bento-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.yc-bento-media:focus-visible { outline: 3px solid var(--amber-500, #c9a24b); outline-offset: -3px; }
.yc-bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: translateZ(0);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
/* Warm gradient scrim — faint at rest (keeps the hint legible), deepens on
   reveal so the copy reads clearly (≈ dark-cream, bottom-weighted). */
.yc-bento-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(43, 28, 13, .30) 0%,
        rgba(43, 28, 13, .06) 34%,
        transparent 60%);
    transition: opacity .55s ease, background .55s ease;
}

/* ---- "Click to expand" pill (collapsed only), reading-start top corner ---- */
.yc-bento-hint {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 60px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--amber-700, #7a5626);
    background: rgba(255, 251, 244, .9);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 4px 14px -4px rgba(90, 58, 27, .4);
    transition: opacity .35s ease, transform .35s ease;
}
.yc-bento-hint i { font-size: 10px; transition: transform .35s ease; }

/* ---- Content overlay: sits over the media, revealed on hover / expand ---- */
.yc-bento-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 8px;
    padding: clamp(18px, 2.2vw, 30px);
    /* Collapsed: invisible + lifted, and removed from the a11y / tab order so the
       CTA is not reachable until the card is opened. SEO text stays in the DOM. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
    pointer-events: none;                         /* clicks fall through to the media button… */
}
.yc-bento-content .yc-bento-cta { pointer-events: auto; }  /* …except the CTA link */

.yc-bento-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 60px;
    background: rgba(255, 251, 244, .16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fbefda;
    font-size: 12.5px;
    font-weight: 600;
}
.yc-bento-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 1.1rem + .9vw, 1.9rem);
    line-height: 1.28;
    text-shadow: 0 2px 14px rgba(30, 18, 6, .5);
}
.yc-bento-card.is-large .yc-bento-title { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.25rem); }
.yc-bento-text {
    margin: 0;
    color: #f4e8d6;
    font-size: .95rem;
    line-height: 1.7;
    max-width: 52ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(30, 18, 6, .5);
}
.yc-bento-cta {
    margin-top: 6px;
    align-self: flex-start;
    white-space: nowrap;
}
.yc-bento-cta i { margin-inline-start: 8px; transition: transform .25s ease; }
.yc-bento-cta:hover i { transform: translateX(-4px); }
/* Stagger: badge → title → text → CTA. */
.yc-bento-content > * { transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }

/* ---- Revealed state: shared by real hover (fine pointer) and .is-expanded ---- */
.yc-bento-card.is-expanded .yc-bento-img { transform: scale(1.05); }
.yc-bento-card.is-expanded .yc-bento-scrim {
    background: linear-gradient(to top,
        rgba(38, 24, 10, .86) 0%,
        rgba(38, 24, 10, .55) 42%,
        rgba(38, 24, 10, .12) 72%,
        transparent 100%);
}
.yc-bento-card.is-expanded .yc-bento-hint { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.yc-bento-card.is-expanded .yc-bento-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.yc-bento-card.is-expanded .yc-bento-content .yc-bento-title,
.yc-bento-card.is-expanded .yc-bento-content .yc-bento-text,
.yc-bento-card.is-expanded .yc-bento-content .yc-bento-cta { pointer-events: none; }
.yc-bento-card.is-expanded .yc-bento-content .yc-bento-cta { pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
    .yc-bento-card:hover .yc-bento-img { transform: scale(1.05); }
    .yc-bento-card:hover .yc-bento-scrim {
        background: linear-gradient(to top,
            rgba(38, 24, 10, .86) 0%,
            rgba(38, 24, 10, .55) 42%,
            rgba(38, 24, 10, .12) 72%,
            transparent 100%);
    }
    .yc-bento-card:hover .yc-bento-hint { opacity: 0; transform: translateY(-6px); }
    .yc-bento-card:hover .yc-bento-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Staggered entrance of each line on hover. */
    .yc-bento-card:hover .yc-bento-tag   { transition-delay: .06s; }
    .yc-bento-card:hover .yc-bento-title { transition-delay: .12s; }
    .yc-bento-card:hover .yc-bento-text  { transition-delay: .18s; }
    .yc-bento-card:hover .yc-bento-cta   { transition-delay: .24s; }
}
/* Same stagger when opened by click/tap. */
.yc-bento-card.is-expanded .yc-bento-tag   { transition-delay: .06s; }
.yc-bento-card.is-expanded .yc-bento-title { transition-delay: .12s; }
.yc-bento-card.is-expanded .yc-bento-text  { transition-delay: .18s; }
.yc-bento-card.is-expanded .yc-bento-cta   { transition-delay: .24s; }

/* ---- Tablet: keep the bento but calmer proportions ---- */
@media (max-width: 1199.98px) {
    .yc-bento-grid { min-height: clamp(420px, 56vw, 540px); }
}

/* ---- Mobile: dedicated vertical stack (not a shrunk bento) ---- */
@media (max-width: 767.98px) {
    .yc-bento-grid,
    .yc-bento-grid.is-trio { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; gap: 16px; }
    .yc-bento-grid.is-trio .is-large,
    .yc-bento-grid.is-trio .is-top,
    .yc-bento-grid.is-trio .is-bottom,
    .yc-bento-grid .is-wide,
    .yc-bento-grid:not(.is-trio) .is-large { grid-column: 1; grid-row: auto; }
    .yc-bento-card { min-height: 250px; height: clamp(230px, 62vw, 300px); }
    .yc-bento-card.is-large { height: clamp(260px, 72vw, 340px); }
    .yc-bento-text { -webkit-line-clamp: 2; }
}

/* ---- No-hover devices: reveal only via tap (JS .is-expanded) ---- */
@media (hover: none), (pointer: coarse) {
    .yc-bento-card .yc-bento-img { transform: none; }
}

/* ---- Reduced motion: cut movement, keep the reveal instant ---- */
@media (prefers-reduced-motion: reduce) {
    .yc-bento-card,
    .yc-bento-img,
    .yc-bento-scrim,
    .yc-bento-content,
    .yc-bento-content > *,
    .yc-bento-hint { transition: none !important; }
    .yc-bento-content { transform: none; }
    .yc-bento-card.is-expanded .yc-bento-img,
    .yc-bento-card:hover .yc-bento-img { transform: none; }
    .yc-bento-content > * { transition-delay: 0s !important; }
}

/* ---------- Promo Video ---------- */
.video-section { padding: 24px 0 46px; }
.video-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 420px;
    display: flex;
    align-items: center;
}
.video-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14, 11, 8, .8) 0%, rgba(14, 11, 8, .45) 55%, rgba(14, 11, 8, .5) 100%);
}
.video-inner { position: relative; z-index: 2; text-align: center; color: #fff; width: 100%; }
.video-eyebrow {
    display: inline-block;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    color: var(--amber-300, #e2c39a);
    margin-bottom: 12px;
}
.video-title {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    color: #fff;
    margin-bottom: 26px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
.video-play {
    width: 86px; height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-500, #c59c6d), var(--amber-700, #7a5626));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    text-decoration: none;
    box-shadow: 0 0 0 0 rgba(197, 156, 109, .6);
    animation: videoPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
    transition: transform .2s ease;
}
.video-play:hover { transform: scale(1.08); color: #fff; }
.video-play i { margin-inline-start: 5px; }
@keyframes videoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(197, 156, 109, .55); }
    70%  { box-shadow: 0 0 0 26px rgba(197, 156, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(197, 156, 109, 0); }
}

/* ---------- Instagram grid (modern) ---------- */
.instagram-section { padding: 46px 0; }
.ig-head { text-align: center; margin-bottom: 30px; }
.ig-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px; border-radius: 60px;
    background: linear-gradient(90deg, rgba(240,148,51,.14), rgba(220,39,67,.14), rgba(188,24,136,.14));
    color: #c13584;
    font-size: 13px; font-weight: 700; margin-bottom: 12px;
}
.ig-title { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--text-dark, #2d2724); margin-bottom: 8px; }
.ig-sub { color: var(--text-muted, #6b5d4a); max-width: 60ch; margin: 0 auto 16px; font-size: .98rem; }
body.dark-mode .ig-title { color: var(--text-dark-mode, #F4EBDA); }
body.dark-mode .ig-sub { color: var(--text-muted-dark, #c9bca6); }

/* Instagram-gradient follow button */
.ig-follow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 26px; border-radius: 60px;
    color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 12px 26px -10px rgba(204, 35, 102, .6);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ig-follow:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px -10px rgba(204, 35, 102, .7); }
.ig-follow i { font-size: 18px; }

.ig-grid-home {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.ig-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    display: block;
    box-shadow: 0 10px 24px -16px rgba(90, 58, 27, .5);
}
.ig-cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.ig-cell:hover img { transform: scale(1.12); }
/* Instagram-gradient hover overlay with a popping icon */
.ig-cell-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 26px;
    background: linear-gradient(45deg, rgba(240,148,51,.85), rgba(220,39,67,.82), rgba(188,24,136,.85));
    opacity: 0;
    transition: opacity .3s ease;
}
.ig-cell-overlay i { transform: scale(.6); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ig-cell:hover .ig-cell-overlay { opacity: 1; }
.ig-cell:hover .ig-cell-overlay i { transform: scale(1); }
@media (max-width: 991.98px) { .ig-grid-home { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .ig-grid-home { grid-template-columns: repeat(3, 1fr); gap: 9px; } }

@media (prefers-reduced-motion: reduce) {
    .brand-story-media img,
    .ig-cell img { transition: none; }
    .video-play { animation: none; }
}

/* ============================================================
   Mobile header (≤991px) — modern 3-zone layout  [ ☰ | logo | search ]
   AUTHORITATIVE: supersedes the older, conflicting mobile-header blocks in
   style.css / enhancements.css (premium.css loads last in the bundle, so this
   wins). RTL: the hamburger hugs the far right, the logo is absolutely centred,
   and the search pill hugs the far left. The cart + other action icons are
   removed from the header on mobile — they live in the bottom tab bar (.yc-bnav).
   ============================================================ */
@media (max-width: 991.98px) {
    /* Grid with equal side tracks → the logo is ALWAYS dead-centre regardless of
       how wide the search pill / hamburger are. In RTL, column 1 is the right.
       minmax(0,1fr) (not plain 1fr) FORCES the two side tracks to be exactly equal
       — plain 1fr is minmax(auto,1fr), so the side holding cart+search grew wider
       than the hamburger side and shoved the logo off-centre. */
    .main-header .header-wrapper {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center !important;
        gap: 6px !important;
        min-height: 64px;
    }

    /* Logo — centre column. grid-row:1 pins it so nothing can wrap to a 2nd line. */
    .main-header .header-logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    /* The logo is a wide text image. Cap its height AND width so the two side
       controls (cart+search / hamburger) get equal room and the grid can keep it
       truly centred — a full-size logo simply doesn't leave balanced space on a
       phone, which is what shoved it off-centre. */
    .main-header .header-logo img { height: 40px !important; width: auto; max-width: 40vw; object-fit: contain; }
    .main-header.scrolled .header-logo img { height: 40px !important; }

    /* Hamburger — column 1 = RTL far right; hugged to the right edge. Square tile.
       grid-row:1 + order:0 keep it on the single header row (an old enhancements.css
       `order:2` was disrupting grid auto-placement and dropping it to a 2nd line). */
    .main-header .mobile-menu-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 0 !important;
        justify-self: start !important;   /* RTL start = right edge */
        width: 42px !important; height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        border-radius: 14px !important;
        background: var(--amber-50, #fbf3e6);
        border: 1px solid rgba(197, 156, 109, .22);
    }
    .main-header .mobile-menu-toggle span {
        width: 20px !important; height: 2px !important;
        border-radius: 2px; background: var(--walnut, #4a2f18);
    }

    /* Search zone — column 3 = RTL far left; holds the search pill + a compact cart. */
    .main-header .header-end {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;     /* RTL end = left edge */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        min-width: 0;
    }
    /* Keep the cart AND the notifications bell from the header actions (account /
       wishlist / language / dark-toggle / logout stay in the side menu). */
    .main-header .header-actions { display: flex !important; align-items: center; gap: 4px !important; }
    .main-header .header-actions > *:not(.header-cart-wrap):not(.header-noti-wrap) { display: none !important; }
    .main-header .header-cart-wrap { display: block !important; position: relative; }

    /* Notifications bell — reveal it on mobile as a 42px tile matching the cart +
       search + hamburger (it was hidden by the actions rule above). */
    .main-header .header-noti-wrap { display: block !important; position: relative; }
    .main-header .header-noti-wrap .noti-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 42px; height: 42px; padding: 0;
        border-radius: 14px;
        background: var(--amber-50, #fbf3e6);
        border: 1px solid rgba(197, 156, 109, .22);
        color: var(--walnut, #4a2f18); font-size: 18px; position: relative;
    }
    .main-header .header-noti-wrap .noti-btn .action-text { display: none !important; }
    body.dark-mode .main-header .header-noti-wrap .noti-btn {
        background: rgba(197, 156, 109, .12); border-color: rgba(197, 156, 109, .22); color: var(--amber-100, #f6e8cf);
    }
    .main-header .cart-hover-dropdown { display: none !important; }
    /* Compact cart icon button — same height/tile language as the search pill + hamburger. */
    .main-header .header-cart-wrap .cart-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 42px; height: 42px; padding: 0;
        border-radius: 14px;
        background: var(--amber-50, #fbf3e6);
        border: 1px solid rgba(197, 156, 109, .22);
        color: var(--walnut, #4a2f18); font-size: 18px; position: relative;
    }
    .main-header .header-cart-wrap .cart-btn .action-text { display: none !important; }
    body.dark-mode .main-header .header-cart-wrap .cart-btn {
        background: rgba(197, 156, 109, .12); border-color: rgba(197, 156, 109, .22); color: var(--amber-100, #f6e8cf);
    }

    /* The search control — a clean 46px icon tile matching the cart + hamburger,
       so the left zone (search + cart) stays compact and fits even at 320px. */
    .main-header .mobile-search-toggle {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        width: 42px; height: 42px; padding: 0;
        border-radius: 14px;
        background: var(--amber-50, #fbf3e6);
        border: 1px solid rgba(197, 156, 109, .22);
        color: var(--walnut, #4a2f18);
        font-size: 18px;
    }
    .main-header .mobile-search-toggle:hover,
    .main-header.search-open .mobile-search-toggle { background: var(--amber-100, #f6e8cf); }
    /* Label is redundant next to the magnifier icon on mobile — hide for the compact tile. */
    .mobile-search-label { display: none !important; }

    /* Reveal the full-width search dropdown when tapped (an older enhancements.css
       rule killed it with display:none !important). A single clean ROW:
       [ 🔍 search pill ............. ✕clear ]  [ ✕close ]. */
    .main-header.search-open .header-search {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
    .main-header .header-search .search-form { flex: 1 1 auto; min-width: 0; }
    /* No submit button on mobile — search runs as you type and Enter submits, so the
       pill stays clean (the old submit + clear crowding looked cluttered). */
    .main-header .header-search .search-btn { display: none !important; }
    /* Distinct round close tile beside the pill (RTL: sits at the right edge). */
    .main-header .header-search .search-close {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 auto;
        width: 44px; height: 44px; font-size: 17px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid rgba(197, 156, 109, .28);
        color: var(--walnut, #4a2f18);
        box-shadow: 0 6px 16px -8px rgba(28, 20, 16, .35);
    }
    /* One × only on mobile: the close tile (which clears too). The in-pill clear is
       hidden so the pill stays clean — just [ input ]. The decorative lead magnifier
       is dropped on mobile too — it was overlapping / cutting the placeholder text —
       so the input gets clean symmetric padding and full width for the text. */
    .main-header .header-search .search-clear { display: none !important; }
    .main-header .header-search .search-lead-icon { display: none !important; }
    .main-header .header-search .search-input { padding-inline-start: 18px !important; padding-inline-end: 18px !important; }
    body.dark-mode .main-header .header-search .search-close {
        background: rgba(197, 156, 109, .14); border-color: rgba(197, 156, 109, .28);
        color: var(--amber-100, #f6e8cf);
    }

    body.dark-mode .main-header .mobile-menu-toggle,
    body.dark-mode .main-header .mobile-search-toggle {
        background: rgba(197, 156, 109, .12); border-color: rgba(197, 156, 109, .22);
        color: var(--amber-100, #f6e8cf);
    }
    body.dark-mode .main-header .mobile-menu-toggle span { background: var(--amber-200, #ecd9b6); }
}

/* Hero CTA buttons — stop them stretching full-width on phones; centre them at a
   comfortable, tappable size instead. */
@media (max-width: 575.98px) {
    .hero-btns { flex-direction: column !important; align-items: center !important; gap: 10px; width: 100%; }
    .hero-btns .btn-honey,
    .hero-btns .btn-outline-honey {
        width: fit-content !important;   /* size to content, not the full row */
        min-width: 210px;                /* but keep a comfortable tap target */
        max-width: 100%;
        align-self: center !important;   /* beats the default align-items:stretch */
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   LUXURY MOTION LAYER — "fragrance diffusion"
   A single, cohesive motion system for a Yemeni honey & perfume house.
   Signature: slow gold mist/motes that rise and fade, like scent
   diffusing. Supporting motion is deliberately quiet: a light shimmer on
   gold accents, a one-pass sheen on cards, gentle float, and hero
   parallax (JS-driven). EVERYTHING lives inside prefers-reduced-motion:
   no-preference, so reduced-motion users get a completely still page.
   Motes/mist are injected by motion.js into any [data-mist] container.
   ════════════════════════════════════════════════════════════════════ */

/* Layer the mist inside a positioned, clipped container (heroes/CTAs). */
.yc-mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
[data-mist] { position: relative; }
[data-mist] > .container,
[data-mist] > *:not(.yc-mist) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    /* — Signature: drifting fragrance motes — */
    .yc-mote {
        position: absolute;
        bottom: -12%;
        width: var(--mote-size, 10px);
        height: var(--mote-size, 10px);
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, rgba(233,200,119,.9), rgba(201,162,75,.35) 55%, transparent 72%);
        filter: blur(1px);
        opacity: 0;
        will-change: transform, opacity;
        animation: ycMoteRise var(--mote-dur, 14s) ease-in-out var(--mote-delay, 0s) infinite;
    }
    @keyframes ycMoteRise {
        0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
        12%  { opacity: var(--mote-peak, .55); }
        50%  { transform: translate3d(var(--mote-drift, 18px), -52vh, 0) scale(1); }
        80%  { opacity: var(--mote-peak, .55); }
        100% { transform: translate3d(calc(var(--mote-drift, 18px) * -1), -104vh, 0) scale(.6); opacity: 0; }
    }

    /* — Living gold glow on gradient words (no colour/layout change at rest) — */
    .text-gradient { animation: ycGoldGlow 5.5s ease-in-out infinite; }
    @keyframes ycGoldGlow {
        0%, 100% { filter: brightness(1); }
        50%      { filter: brightness(1.12) drop-shadow(0 0 7px rgba(233,200,119,.35)); }
    }

    /* — One-pass diagonal sheen across premium cards on hover.
         Uses an injected .yc-sheen child (motion.js) so it never collides with
         cards that already use ::before/::after for their own accents. — */
    .value-card, .mv-card { overflow: hidden; }
    .yc-sheen {
        position: absolute; top: 0; inset-inline-start: -140%;
        width: 60%; height: 100%; z-index: 2; pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
        transform: skewX(-18deg);
        transition: none;
    }
    .value-card:hover > .yc-sheen, .ci-card:hover > .yc-sheen,
    .mv-card:hover > .yc-sheen, .branch-card:hover > .yc-sheen {
        animation: ycSheen .9s ease;
    }
    @keyframes ycSheen { to { inset-inline-start: 160%; } }

    /* — Gentle ambient float utility (icons, badges) — */
    .yc-float { animation: ycFloat 5.5s ease-in-out infinite; }
    .yc-float-slow { animation: ycFloat 8s ease-in-out infinite; }
    @keyframes ycFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    /* — Hero parallax target (JS sets --sy) — */
    .yc-parallax { transform: translate3d(0, var(--sy, 0px), 0); will-change: transform; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED PRODUCT CARD — premium polish (applies to the single
   _ProductCardNew partial used everywhere: home, shop, brand, related,
   wishlist). Refines the shared card with a smoother lift, a layered
   warm shadow, and a light "sheen" line that sweeps the image on hover.
   Builds on the base rules in style.css / enhancements.css (this file
   loads last, so these win). Motion is reduced-motion guarded.
   ════════════════════════════════════════════════════════════════════ */
.product-card {
    border-radius: 20px;
    transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 22px 46px -18px rgba(98, 57, 28, .32),
        0 6px 16px -10px rgba(98, 57, 28, .20),
        0 0 0 1px rgba(197, 156, 109, .28);
    border-color: rgba(197, 156, 109, .34);
}
/* Details button — unmistakably part of the brand identity (cream → brown). */
.btn-details {
    background: var(--cream, #FBF6ED);
    border: 1px solid var(--sand, #E8DCC8);
    color: var(--walnut, #62391C);
    font-weight: 600;
}
.btn-details:hover {
    background: linear-gradient(135deg, var(--amber-600, #95683B), var(--amber-700, #7A5029));
    border-color: var(--amber-700, #7A5029);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    /* Sheen: a soft diagonal light line sweeps across the photo on hover. */
    .product-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 48%, transparent 64%);
        transform: translateX(-130%);
        transition: transform .75s cubic-bezier(.2,.8,.2,1);
    }
    .product-card:hover .product-image::after { transform: translateX(130%); }
    html[dir="rtl"] .product-image::after { transform: translateX(130%); }
    html[dir="rtl"] .product-card:hover .product-image::after { transform: translateX(-130%); }

    /* Cart button gets a touch more life on hover. */
    .btn-cart-icon { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, background .28s; }
    .product-card:hover .btn-cart-icon { box-shadow: 0 8px 18px -6px rgba(98, 57, 28, .4); }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARD — hover reveal cart + traveling outline (site-wide)
   The bottom "details" button was removed; the add-to-cart action now
   lives in the image overlay next to the eye, revealed on hover just
   like the eye icon. On hover the card also gets a light traveling line
   that runs around its outline, a 0.5s transition and a deeper shadow.
   This file loads last, so these rules win over style/enhancements.css.
   ════════════════════════════════════════════════════════════════════ */

/* --- Cart action inside the overlay (gold accent vs the white eye btn) --- */
.product-overlay .overlay-btn--cart {
    background: linear-gradient(135deg, var(--gold, #C59C6D), var(--gold-dark, #95683B));
    color: #fff;
    box-shadow: 0 3px 12px rgba(98, 57, 28, .28);
}
.product-overlay .overlay-btn--cart:hover {
    background: linear-gradient(135deg, var(--gold-light, #E0C39B), var(--gold, #C59C6D));
    color: #3A2212;
    transform: scale(1.1);
}
/* Keep the JS-hooked .btn-cart-icon sized like an overlay button when it
   lives in the overlay (base .btn-cart-icon is 40px / square accent). */
.product-overlay .btn-cart-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm, 12px);
    font-size: 13px;
}
.product-overlay .overlay-btn--cart[disabled] {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.4);
}

/* --- 0.5s transition + richer, beautiful shadow on hover --- */
.product-card {
    transition: transform .5s cubic-bezier(.2,.8,.2,1),
                box-shadow .5s ease,
                border-color .5s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 26px 52px -20px rgba(98, 57, 28, .38),
        0 10px 24px -14px rgba(98, 57, 28, .22),
        0 0 0 1px rgba(197, 156, 109, .30);
    border-color: rgba(197, 156, 109, .38);
}

/* --- Traveling line that runs around the card outline on hover --- */
@property --yc-card-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@media (prefers-reduced-motion: no-preference) {
    /* A masked gradient ring sits exactly on the card border; a bright
       segment sweeps around it while everything else stays transparent. */
    .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;                 /* = outline thickness */
        background: conic-gradient(from var(--yc-card-angle),
            transparent 0deg,
            transparent 250deg,
            rgba(197, 156, 109, .55) 300deg,
            var(--gold-light, #E0C39B) 340deg,
            #fff 350deg,
            var(--gold, #C59C6D) 358deg,
            transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        opacity: 0;
        transition: opacity .4s ease;
        pointer-events: none;
        z-index: 7;
    }
    .product-card:hover::before {
        opacity: 1;
        animation: yc-card-outline 2.2s linear infinite;
    }
    @keyframes yc-card-outline {
        to { --yc-card-angle: 360deg; }
    }
}

/* --- Touch devices: no hover, so keep the overlay (and its cart) visible.
   Overrides the mobile `.product-overlay { display:none }` in style.css. --- */
@media (max-width: 575.98px) {
    .product-overlay {
        display: flex;
        transform: translateY(0);
        background: linear-gradient(transparent, rgba(14, 11, 8, .28));
        padding: 10px;
        gap: 8px;
    }
    .product-overlay .overlay-btn { width: 36px; height: 36px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARD — refined internal spacing & typography (senior polish)
   Even vertical rhythm now that the bottom button row is gone: the info
   block breathes, the price is the anchored bottom line, and the currency
   unit reads as a quiet suffix rather than competing with the number.
   ════════════════════════════════════════════════════════════════════ */
.product-info {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
}
.product-title {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 9px;
    min-height: 3em;           /* still reserves 2 lines → equal card heights */
    letter-spacing: .1px;
}
.product-rating { margin-bottom: 12px; }

/* Price is the last line: pin to the bottom, no trailing margin, tidy gap. */
.product-price {
    margin-top: auto;
    margin-bottom: 0;
    gap: 6px;
    padding-top: 2px;
}
.current-price { font-size: 19px; line-height: 1.1; }
/* Currency unit — smaller, lighter, so the amount leads. */
.current-price .currency,
.old-price .currency {
    font-size: .62em;
    font-weight: 600;
    opacity: .68;
    margin-inline-start: 1px;
}
.price-from-label { align-self: center; }

/* Mobile: same rhythm, tightened. */
@media (max-width: 575.98px) {
    .product-info { padding: 12px 13px 13px; }
    .product-title { font-size: 13px; line-height: 1.4; margin-bottom: 7px; min-height: 2.55em; }
    .product-rating { margin-bottom: 9px; }
    .current-price { font-size: 16.5px; }
}