/* ===============================================================
   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);
}
.flash-image-wrap { position: relative; display: inline-block; }
.flash-image {
    max-height: 320px; max-width: 100%;
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45));
    transition: transform .4s ease;
}
.flash-image-wrap:hover .flash-image { transform: scale(1.05) rotate(-2deg); }
.flash-stamp {
    position: absolute; top: -20px; right: -20px;
    background: linear-gradient(135deg, #d94e4e, #ff7a45);
    color: #fff; font-weight: 800; font-size: 22px;
    width: 90px; height: 90px; 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: 48px; 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;
    justify-content: flex-end; gap: 4px; padding: 22px 26px; color: #fff;
    background: linear-gradient(to top, rgba(20,12,4,.72) 0%, rgba(20,12,4,.25) 45%, transparent 75%);
}
.ad-title { font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ad-sub   { font-size: 14px; margin: 0; opacity: .92; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
/* 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: 92px; 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: 52px; width: auto; max-width: 190px; object-fit: contain; display: block;
    /* Strictly black & white; brightens (still grayscale) and lifts on hover. */
    filter: grayscale(100%);
    opacity: .55;
    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: 70px; padding: 0 26px; }
    .partner-logo img { height: 40px; max-width: 140px; }
}

/* ---- 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; }