/* ========================================================
   STOREFRONT v3 - Premium Arabic E-Commerce Design
   Inspired by Salla.com & Modern E-Commerce Standards
   ======================================================== */

/* === DESIGN TOKENS === */
:root {
    /* Colors - 6valley inspired (overridden per-store via inline CSS vars) */
    --sf-primary: #1455ac;
    --sf-primary-rgb: 20,85,172;
    --sf-primary-light: rgba(20,85,172,.08);
    --sf-primary-lighter: rgba(20,85,172,.04);
    --sf-secondary: #f58300;
    --sf-secondary-rgb: 245,131,0;
    --sf-accent: #e74c3c;
    --sf-accent-light: rgba(231,76,60,.08);
    --sf-success: #27ae60;
    --sf-success-light: rgba(39,174,96,.08);
    --sf-warning: #f39c12;
    --sf-warning-light: rgba(243,156,18,.08);
    --sf-info: #3498db;

    /* Surfaces */
    --sf-bg: #f8f9fb;
    --sf-bg-warm: #faf8f5;
    --sf-card-bg: #ffffff;
    --sf-text: #1a2332;
    --sf-text-muted: #6c757d;
    --sf-text-light: #adb5bd;
    --sf-border: #e8edf2;
    --sf-border-light: #f0f2f5;

    /* Spacing Scale */
    --sf-space-xs: 0.25rem;
    --sf-space-sm: 0.5rem;
    --sf-space-md: 1rem;
    --sf-space-lg: 1.5rem;
    --sf-space-xl: 2rem;
    --sf-space-2xl: 3rem;
    --sf-space-3xl: 4rem;

    /* Border Radius */
    --sf-radius-xl: 20px;
    --sf-radius: 16px;
    --sf-radius-md: 12px;
    --sf-radius-sm: 8px;
    --sf-radius-xs: 6px;
    --sf-radius-full: 50px;

    /* Shadows */
    --sf-shadow: 0 2px 12px rgba(0,0,0,.05);
    --sf-shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --sf-shadow-lg: 0 12px 40px rgba(0,0,0,.12);
    --sf-shadow-hover: 0 16px 48px rgba(0,0,0,.14);
    --sf-shadow-inset: inset 0 2px 4px rgba(0,0,0,.04);
    --sf-shadow-glow: 0 0 24px rgba(26,73,88,.15);

    /* Typography */
    --sf-font: 'Cairo','IBM Plex Sans Arabic','Segoe UI','Helvetica Neue',sans-serif;
    --sf-font-size-xs: 0.72rem;
    --sf-font-size-sm: 0.82rem;
    --sf-font-size-base: 0.9rem;
    --sf-font-size-lg: 1.05rem;
    --sf-font-size-xl: 1.3rem;
    --sf-font-size-2xl: 1.6rem;
    --sf-font-size-3xl: 2.2rem;

    /* Transitions */
    --sf-transition: .3s cubic-bezier(.4,0,.2,1);
    --sf-transition-fast: .15s ease;
    --sf-transition-slow: .5s cubic-bezier(.4,0,.2,1);
    --sf-transition-bounce: .5s cubic-bezier(.68,-.55,.27,1.55);

    /* Z-Index Scale */
    --sf-z-dropdown: 100;
    --sf-z-sticky: 200;
    --sf-z-modal: 300;
    --sf-z-toast: 400;
    --sf-z-fab: 90;
}

/* === BASE LAYOUT === */
.sf-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--sf-font);
    background: var(--sf-bg);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    color: var(--sf-text);
}
.sf-layout[dir="ltr"] { direction: ltr; }
.sf-layout[dir="ltr"] .sf-tree__children { margin-right: 0; margin-left: 1.2rem; }
.sf-layout[dir="ltr"] .sf-tree__arrow { transform: rotate(180deg); }
.sf-layout[dir="ltr"] .sf-tree__parent:hover .sf-tree__arrow { transform: rotate(180deg) translateX(-2px); }
.sf-main {
    flex: 1;
    width: 100%;
    padding: 0;
}
.sf-main__inner {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

/* =============================================
   ANNOUNCEMENT BAR
   ============================================= */
.sf-announce {
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
}
.sf-announce i { font-size: 1rem; }
.sf-announce__close {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
    transition: var(--sf-transition);
}
.sf-announce__close:hover { color: #fff; }

/* =============================================
   HEADER — Premium v5 (sf-hd-*)
   ============================================= */

/* ── Wrapper ── */
.sf-hd {
    position: sticky;
    top: 0;
    z-index: var(--sf-z-sticky, 200);
    width: 100%;
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.sf-hd--compact { box-shadow: 0 4px 24px rgba(0,0,0,.10); }
.sf-hd--hidden  { transform: translateY(-100%); pointer-events: none; }

/* ── Row 1: Top Bar ── */
.sf-hd-topbar {
    background: linear-gradient(135deg, var(--sf-primary) 0%, color-mix(in srgb, var(--sf-primary) 80%, var(--sf-secondary)) 100%);
    color: rgba(255,255,255,.92);
    font-size: 0.76rem;
    padding: 0.3rem 0;
    overflow: hidden;
    max-height: 42px;
    transition: max-height .35s ease, opacity .35s ease, padding .35s ease;
}
.sf-hd--compact .sf-hd-topbar { max-height: 0; opacity: 0; padding: 0; }

.sf-hd-topbar__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* contacts */
.sf-hd-topbar__contacts {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.sf-hd-topbar__link {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color .25s ease;
    font-size: 0.76rem;
}
.sf-hd-topbar__link:hover { color: #fff; }
.sf-hd-topbar__link i { font-size: 0.82rem; }

/* announcement marquee */
.sf-hd-topbar__announce {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    animation: sfHdPulse 3s ease-in-out infinite;
    color: rgba(255,255,255,.95);
    font-weight: 600;
}
.sf-hd-topbar__announce i { font-size: 0.85rem; }

/* actions */
.sf-hd-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sf-hd-topbar__lang {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    padding: 0.18rem 0.65rem;
    border-radius: var(--sf-radius-xs, 4px);
    font-family: var(--sf-font);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sf-transition);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sf-hd-topbar__lang:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); }

/* ── Row 2: Main Header ── */
.sf-hd-main {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--sf-border);
    transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.sf-hd--compact .sf-hd-main {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    border-bottom-color: rgba(0,0,0,.04);
}

.sf-hd-main__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0.65rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* hamburger (mobile) */
.sf-hd-burger {
    display: none;
    background: none;
    border: none;
    color: var(--sf-text);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--sf-radius-sm);
    transition: var(--sf-transition);
    flex-shrink: 0;
}
.sf-hd-burger:hover { background: var(--sf-bg); color: var(--sf-primary); }

/* brand */
.sf-hd-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--sf-text);
    flex-shrink: 0;
    transition: var(--sf-transition);
}
.sf-hd-brand:hover { opacity: .85; color: var(--sf-text); }
.sf-hd-brand__logo {
    height: 44px;
    width: 44px;
    border-radius: var(--sf-radius-md);
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: var(--sf-shadow);
    transition: width .3s ease, height .3s ease;
}
.sf-hd--compact .sf-hd-brand__logo { height: 36px; width: 36px; }
.sf-hd-brand__placeholder {
    width: 44px;
    height: 44px;
    border-radius: var(--sf-radius-md);
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: width .3s ease, height .3s ease;
}
.sf-hd--compact .sf-hd-brand__placeholder { width: 36px; height: 36px; }
.sf-hd-brand__name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sf-primary);
    white-space: nowrap;
}

/* search */
.sf-hd-search {
    flex: 1;
    max-width: 540px;
    display: flex;
    align-items: center;
    background: var(--sf-bg);
    border: 2px solid var(--sf-border);
    border-radius: 50px;
    padding: 0 1rem;
    transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
    position: relative;
}
.sf-hd-search:focus-within {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 4px rgba(var(--sf-primary-rgb),.12), 0 4px 16px rgba(var(--sf-primary-rgb),.08);
    transform: scale(1.01);
}
.sf-hd-search i { color: var(--sf-text-muted); font-size: 1rem; }
.sf-hd-search input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0.55rem 0.6rem;
    font-size: 0.88rem;
    font-family: var(--sf-font);
    color: var(--sf-text);
}
.sf-hd-search input::placeholder { color: var(--sf-text-light); }

/* mobile search toggle */
.sf-hd-search-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--sf-text);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.45rem;
    border-radius: var(--sf-radius-sm);
    transition: var(--sf-transition);
}
.sf-hd-search-toggle:hover { background: var(--sf-bg); color: var(--sf-primary); }

/* icons / actions */
.sf-hd-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.sf-hd-action {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sf-radius-sm);
    color: var(--sf-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--sf-transition);
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--sf-font);
}
.sf-hd-action:hover { background: var(--sf-bg); color: var(--sf-primary); }
.sf-hd-action i { font-size: 1.25rem; }
.sf-hd-action span { white-space: nowrap; }
.sf-hd-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--sf-secondary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: sfBadgePop .4s cubic-bezier(.68,-.55,.27,1.55);
}
.sf-hd-cart-total {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sf-primary);
    white-space: nowrap;
}

/* ── Row 3: Navigation Bar ── */
.sf-hd-nav {
    background: var(--sf-primary);
    max-height: 50px;
    overflow: visible;
    transition: max-height .35s ease, opacity .35s ease;
}
.sf-hd--compact .sf-hd-nav { max-height: 0; opacity: 0; overflow: hidden; }

.sf-hd-nav__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0;
}

/* nav links */
.sf-hd-nav__link {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    transition: color .25s ease, background .25s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sf-font);
    white-space: nowrap;
    position: relative;
}
.sf-hd-nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.sf-hd-nav__link i { font-size: 1rem; }

/* underline-from-center hover */
.sf-hd-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgba(255,255,255,.8);
    transition: width .3s ease, left .3s ease;
    border-radius: 1px;
}
.sf-hd-nav__link:hover::after { width: 60%; left: 20%; }

/* categories dropdown */
.sf-hd-cat-wrap { position: relative; }
.sf-hd-chevron { font-size: .7rem; transition: transform .3s ease; margin-right: 2px; }
.sf-hd-chevron.open { transform: rotate(180deg); }

/* ── Mega Menu ── */
.sf-hd-mega {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    padding: 1.2rem;
    min-width: 520px;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.5rem;
    z-index: var(--sf-z-dropdown, 100);
    animation: sfHdMegaIn .3s ease;
}
.sf-hd-mega__group { padding: 0.3rem 0; }
.sf-hd-mega__parent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    color: var(--sf-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--sf-radius-sm);
    transition: var(--sf-transition);
    opacity: 0;
    transform: translateY(8px);
    animation: sfHdStagger .35s ease forwards;
}
.sf-hd-mega__parent:hover { background: var(--sf-bg); color: var(--sf-primary); }
.sf-hd-mega__group:nth-child(1) .sf-hd-mega__parent { animation-delay: .05s; }
.sf-hd-mega__group:nth-child(2) .sf-hd-mega__parent { animation-delay: .1s; }
.sf-hd-mega__group:nth-child(3) .sf-hd-mega__parent { animation-delay: .15s; }
.sf-hd-mega__group:nth-child(4) .sf-hd-mega__parent { animation-delay: .2s; }
.sf-hd-mega__group:nth-child(5) .sf-hd-mega__parent { animation-delay: .25s; }
.sf-hd-mega__group:nth-child(6) .sf-hd-mega__parent { animation-delay: .3s; }
.sf-hd-mega__group:nth-child(7) .sf-hd-mega__parent { animation-delay: .35s; }
.sf-hd-mega__group:nth-child(8) .sf-hd-mega__parent { animation-delay: .4s; }

.sf-hd-mega__img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.sf-hd-mega__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--sf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary);
    font-size: 0.9rem;
}
.sf-hd-mega__count {
    margin-right: auto;
    margin-left: 0;
    background: var(--sf-bg);
    color: var(--sf-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}
.sf-hd-mega__children { padding-right: 2.8rem; }
.sf-hd-mega__child {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    color: var(--sf-text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    border-radius: 6px;
    transition: var(--sf-transition);
}
.sf-hd-mega__child:hover { color: var(--sf-primary); background: var(--sf-bg); }

/* ── Mobile Drawer ── */
.sf-hd-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: calc(var(--sf-z-modal, 300) - 1);
    opacity: 0;
    transition: opacity .3s ease;
}
.sf-hd-drawer-overlay.active { display: block; opacity: 1; }

.sf-hd-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: #fff;
    z-index: var(--sf-z-modal, 300);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.sf-layout[dir="ltr"] .sf-hd-drawer { right: auto; left: 0; transform: translateX(-100%); }
.sf-hd-drawer.open { transform: translateX(0); }

.sf-hd-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--sf-border);
}
.sf-hd-drawer__close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--sf-text-muted);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--sf-radius-sm);
    transition: var(--sf-transition);
}
.sf-hd-drawer__close:hover { background: var(--sf-bg); color: var(--sf-accent); }

.sf-hd-drawer__body { padding: 0.5rem 0; flex: 1; }
.sf-hd-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1.2rem;
    color: var(--sf-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: right;
    font-family: var(--sf-font);
    transition: var(--sf-transition);
}
.sf-layout[dir="ltr"] .sf-hd-drawer__link { text-align: left; }
.sf-hd-drawer__link:hover { background: var(--sf-bg); color: var(--sf-primary); }
.sf-hd-drawer__link i { font-size: 1.1rem; color: var(--sf-primary); width: 22px; text-align: center; }

/* drawer categories */
.sf-hd-drawer__cats-toggle {
    width: 100%;
    justify-content: flex-start;
}
.sf-hd-drawer__cats-list {
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
}
.sf-layout[dir="ltr"] .sf-hd-drawer__cats-list { padding-right: 0; padding-left: 1.5rem; }
.sf-hd-drawer__cat-parent {
    font-weight: 700;
    color: var(--sf-primary);
}
.sf-hd-drawer__cat-child {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    padding-right: 1.5rem;
}
.sf-layout[dir="ltr"] .sf-hd-drawer__cat-child { padding-right: 0; padding-left: 1.5rem; }

.sf-hd-drawer__footer {
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Mobile Search Row (collapsible) ── */
.sf-hd-mobile-search {
    display: none;
    padding: 0.5rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--sf-border);
}
.sf-hd-mobile-search.active { display: block; }
.sf-hd-mobile-search .sf-hd-search {
    max-width: 100%;
}

/* ── LTR Overrides ── */
.sf-layout[dir="ltr"] .sf-hd-mega__count { margin-right: 0; margin-left: auto; }
.sf-layout[dir="ltr"] .sf-hd-mega__children { padding-right: 0; padding-left: 2.8rem; }

/* ── Animations ── */
@keyframes sfHdPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}
@keyframes sfHdMegaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sfHdStagger {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media(max-width:1024px) {
    .sf-hd-topbar__announce { display: none; }
    .sf-hd-nav__link span.sf-hd-nav__label { display: none; }
}

@media(max-width:768px) {
    .sf-hd-topbar { display: none; }
    .sf-hd-nav { display: none; }
    .sf-hd-burger { display: flex; }
    .sf-hd-search { display: none; }
    .sf-hd-search-toggle { display: flex; }
    .sf-hd-action span { display: none; }
    .sf-hd-main__inner { padding: 0.5rem 1rem; gap: 0.6rem; }
    .sf-hd-brand__name { font-size: 0.95rem; }
    .sf-hd-cart-total { display: none; }
}

@media(max-width:480px) {
    .sf-hd-brand__name { display: none; }
    .sf-hd-action { padding: 0.4rem; }
    .sf-hd-drawer { width: 85vw; }
}

/* =============================================
   HERO SECTION
   ============================================= */
.sf-hero {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-secondary) 60%, color-mix(in srgb, var(--sf-secondary) 80%, #4ec6e0) 100%);
    border-radius: 0;
    padding: 4rem 2.5rem;
    margin: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.sf-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
.sf-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 40%;
    height: 160%;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.sf-hero__bg { position: absolute; inset: 0; z-index: 1; }
.sf-hero__content { position: relative; z-index: 2; max-width: 700px; text-align: center; }
.sf-hero__logo {
    width: 80px;
    height: 80px;
    border-radius: var(--sf-radius);
    object-fit: contain;
    background: rgba(255,255,255,.15);
    padding: 6px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.sf-hero__title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.6rem;
    line-height: 1.3;
}
.sf-hero__desc {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0 0 1.2rem;
    line-height: 1.7;
}
.sf-hero__stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
    justify-content: center;
}
.sf-hero__stats span, .sf-hero__stat { display: flex; align-items: center; gap: 0.4rem; }
.sf-hero__stats i { font-size: 1.1rem; }
.sf-hero__stat-num { font-size: 1.4rem; font-weight: 800; }
.sf-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--sf-primary);
    padding: 0.7rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--sf-transition);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.sf-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    color: var(--sf-primary);
}

/* =============================================
   CATEGORY BAR (Scrollable)
   ============================================= */
.sf-cat-bar {
    padding: 1rem 2rem 1.5rem;
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
}
.sf-cat-scroll {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sf-cat-scroll::-webkit-scrollbar { display: none; }
.sf-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: var(--sf-card-bg);
    border: 2px solid transparent;
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: var(--sf-transition);
    min-width: 90px;
    text-align: center;
    font-family: var(--sf-font);
}
.sf-cat-item:hover { border-color: var(--sf-primary); transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.sf-cat-item.active { border-color: var(--sf-primary); background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff; }
.sf-cat-item__img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sf-bg);
}
.sf-cat-item__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    background: var(--sf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--sf-primary);
    overflow: hidden;
}
.sf-cat-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sf-cat-item.active .sf-cat-item__icon { background: rgba(255,255,255,.2); color: #fff; }
.sf-cat-item__name,
.sf-cat-item > span {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sf-text);
    display: block !important;
    line-height: 1.4;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-cat-item.active > span,
.sf-cat-item.active .sf-cat-item__name { color: #fff !important; }
.sf-cat-item__count,
.sf-cat-item > small {
    font-size: 0.7rem;
    color: var(--sf-text-muted);
    display: block !important;
}
.sf-cat-item.active .sf-cat-item__count,
.sf-cat-item.active > small { color: rgba(255,255,255,.75); }

/* Category group (parent + children) */
.sf-cat-group {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.sf-cat-group::after {
    content: '';
    width: 1px;
    background: var(--sf-border);
    margin: 0.3rem 0.2rem;
    align-self: stretch;
}
.sf-cat-group:last-child::after { display: none; }
.sf-cat-item--child {
    min-width: 70px;
    padding: 0.4rem 0.6rem;
}
.sf-cat-item--child .sf-cat-item__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 0.9rem;
}
.sf-cat-item--child > span { font-size: 0.75rem; }

/* =============================================
   SECTION WRAPPER
   ============================================= */
.sf-section {
    margin-bottom: 2.5rem;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    width: 100%;
}
.sf-section__head, .sf-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    background: var(--sf-card-bg);
    padding: 1.2rem 1.5rem;
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    border: 1px solid var(--sf-border);
    border-right: 4px solid var(--sf-primary);
}
.sf-section__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sf-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sf-section__title h2 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.sf-section__title i { font-size: 1.3rem; }
.sf-section__more, .sf-section__view-all {
    color: var(--sf-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--sf-transition);
}
.sf-section__more:hover { gap: 0.6rem; }

/* Section subtitle */
.sf-section__subtitle {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--sf-text-muted);
    display: block;
    margin-top: 2px;
}

/* Section icon circle */
.sf-section__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.sf-section__icon--deals { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; }
.sf-section__icon--featured { background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; }

/* Section badge */
.sf-section__badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.sf-section__badge--deals { background: #fde8e8; color: #e74c3c; }
.sf-section__badge--featured { background: #fef3e0; color: #e67e22; }

/* Deals section header */
.sf-section__header--deals {
    border-right-color: #e74c3c;
    background: linear-gradient(135deg, #fff 0%, #fef5f5 100%);
}
/* Featured section header */
.sf-section__header--featured {
    border-right-color: #f39c12;
    background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}

/* =============================================
   PRODUCT SLIDER (with arrows + auto-play)
   ============================================= */
.sf-slider {
    position: relative;
}
.sf-slider__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
}
.sf-slider__track::-webkit-scrollbar { display: none; }
.sf-slider__track .sf-product {
    min-width: 240px;
    max-width: 280px;
    scroll-snap-align: start;
    flex-shrink: 0;
}
.sf-slider__prev,
.sf-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sf-card-bg);
    border: 2px solid var(--sf-border);
    box-shadow: var(--sf-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--sf-text);
    cursor: pointer;
    transition: var(--sf-transition);
    z-index: 5;
}
.sf-slider__prev:hover,
.sf-slider__next:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow-lg);
}
.sf-slider__prev { right: -16px; }
.sf-slider__next { left: -16px; }
.sf-slider__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
}
.sf-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sf-border);
    border: none;
    cursor: pointer;
    transition: var(--sf-transition);
    padding: 0;
}
.sf-slider__dot.active {
    background: var(--sf-primary);
    width: 28px;
    border-radius: 10px;
}

/* =============================================
   PRODUCT CAROUSEL (Horizontal Scroll - legacy)
   ============================================= */
.sf-product-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.5rem;
}
.sf-product-carousel::-webkit-scrollbar { display: none; }
.sf-product-carousel .sf-product {
    min-width: 240px;
    max-width: 260px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* =============================================
   PRODUCT CARD
   ============================================= */
.sf-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
.sf-product {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-xl);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    border: 1px solid var(--sf-border);
    transition: var(--sf-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
.sf-product:hover {
    transform: translateY(-6px);
    box-shadow: var(--sf-shadow-hover);
    border-color: transparent;
}

/* Badges */
.sf-product__badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
}
.sf-product__discount {
    background: var(--sf-accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(231,76,60,.3);
}
.sf-product__featured {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sf-product__new {
    background: var(--sf-success);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Image */
.sf-product__img-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--sf-bg);
}
.sf-product__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.sf-product__img-link:hover .sf-product__img { transform: scale(1.08); }
.sf-product__img--empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-border);
    font-size: 3.5rem;
    background: linear-gradient(135deg, var(--sf-bg) 0%, #eef1f5 100%);
}
.sf-product__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    gap: 0.4rem;
    opacity: 0;
    transition: var(--sf-transition);
}
.sf-product__img-link:hover .sf-product__overlay { opacity: 1; }

/* Body */
.sf-product__body {
    padding: 0.8rem 1rem 0.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sf-product__cat {
    font-size: 0.72rem;
    color: var(--sf-text-muted);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--sf-bg);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}
.sf-product__cat i { font-size: 0.65rem; }
.sf-product__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sf-text);
    margin-bottom: 0.4rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-product__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.3rem;
}
.sf-product__price--current {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sf-primary);
    letter-spacing: -0.5px;
}
.sf-product__price--old {
    font-size: 0.8rem;
    color: var(--sf-text-light);
    text-decoration: line-through;
}

/* Add to Cart Button */
.sf-product__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 1.4rem);
    margin: 0 auto 0.7rem;
    padding: 0.65rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border: none;
    border-radius: var(--sf-radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--sf-transition);
    font-family: var(--sf-font);
}
.sf-product__add:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* =============================================
   FILTERS & SEARCH (Inline)
   ============================================= */
.sf-filters-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.sf-search {
    display: flex;
    align-items: center;
    background: var(--sf-card-bg);
    border: 2px solid var(--sf-border);
    border-radius: 50px;
    padding: 0.45rem 1rem;
    flex: 1;
    min-width: 200px;
    position: relative;
    transition: var(--sf-transition);
}
.sf-search:focus-within { border-color: var(--sf-primary); }
.sf-search i { color: var(--sf-text-muted); margin-left: 0.5rem; }
.sf-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.88rem;
    font-family: var(--sf-font);
    background: transparent;
    color: var(--sf-text);
}
.sf-search__clear {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--sf-text-light);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--sf-transition);
}
.sf-search__clear:hover { color: var(--sf-accent); }

.sf-sort-select {
    padding: 0.5rem 1rem;
    border: 2px solid var(--sf-border);
    border-radius: 50px;
    font-size: 0.85rem;
    font-family: var(--sf-font);
    background: var(--sf-card-bg);
    color: var(--sf-text);
    cursor: pointer;
    outline: none;
    transition: var(--sf-transition);
    min-width: 160px;
}
.sf-sort-select:focus { border-color: var(--sf-primary); }

.sf-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-sm);
    margin-bottom: 1rem;
    box-shadow: var(--sf-shadow);
    font-size: 0.85rem;
}
.sf-results-info__count { color: var(--sf-text-muted); margin-right: 4px; }
.sf-results-info__clear {
    background: none;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--sf-accent);
    transition: var(--sf-transition);
    font-family: var(--sf-font);
}
.sf-results-info__clear:hover { background: var(--sf-accent); color: #fff; border-color: var(--sf-accent); }

/* =============================================
   FILTER BAR (Search + Sort)
   ============================================= */
.sf-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.sf-filter-bar__search {
    display: flex;
    align-items: center;
    background: var(--sf-card-bg);
    border: 2px solid var(--sf-border);
    border-radius: 50px;
    padding: 0.45rem 1rem;
    flex: 1;
    min-width: 200px;
    position: relative;
    transition: var(--sf-transition);
}
.sf-filter-bar__search:focus-within { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,73,88,.08); }
.sf-filter-bar__search i { color: var(--sf-text-muted); margin-left: 0.5rem; }
.sf-filter-bar__search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.88rem;
    font-family: var(--sf-font);
    background: transparent;
    color: var(--sf-text);
}
.sf-filter-bar__search input::placeholder { color: var(--sf-text-light); }
.sf-filter-bar__clear {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--sf-text-light);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--sf-transition);
}
.sf-filter-bar__clear:hover { color: var(--sf-accent); }
.sf-filter-bar__sort select {
    padding: 0.55rem 1rem;
    border: 2px solid var(--sf-border);
    border-radius: 50px;
    font-size: 0.85rem;
    font-family: var(--sf-font);
    background: var(--sf-card-bg);
    color: var(--sf-text);
    cursor: pointer;
    outline: none;
    transition: var(--sf-transition);
    min-width: 160px;
}
.sf-filter-bar__sort select:focus { border-color: var(--sf-primary); }

/* =============================================
   ACTIVE FILTERS
   ============================================= */
.sf-active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-sm);
    box-shadow: var(--sf-shadow);
    font-size: 0.85rem;
}
.sf-active-filters__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, rgba(26,73,88,.08), rgba(45,122,148,.08));
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--sf-primary);
    font-weight: 600;
}
.sf-active-filters__tag button {
    background: none;
    border: none;
    color: var(--sf-accent);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-right: 2px;
    transition: var(--sf-transition);
}
.sf-active-filters__tag button:hover { transform: scale(1.2); }
.sf-active-filters__count { color: var(--sf-text-muted); margin-right: auto; font-size: 0.82rem; }
.sf-active-filters__clear-all {
    background: none;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--sf-accent);
    transition: var(--sf-transition);
    font-family: var(--sf-font);
}
.sf-active-filters__clear-all:hover { background: var(--sf-accent); color: #fff; border-color: var(--sf-accent); }

/* =============================================
   PRODUCT NAME LINK
   ============================================= */
.sf-product__name-link {
    text-decoration: none;
    color: inherit;
}
.sf-product__name-link:hover .sf-product__name { color: var(--sf-primary); }

/* =============================================
   EMPTY STATE BUTTON
   ============================================= */
.sf-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--sf-radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--sf-transition);
    font-family: var(--sf-font);
}
.sf-empty__btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* =============================================
   PAGINATION
   ============================================= */
.sf-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}
.sf-pagination__pages {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.sf-pagination__dots {
    color: var(--sf-text-muted);
    font-size: 0.85rem;
    padding: 0 0.3rem;
}
.sf-pagination__btn, .sf-pagination button {
    min-width: 38px;
    height: 38px;
    border-radius: var(--sf-radius-sm);
    border: 2px solid var(--sf-border);
    background: var(--sf-card-bg);
    color: var(--sf-text);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--sf-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sf-font);
}
.sf-pagination button:hover:not(:disabled) { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-pagination button.active {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border-color: transparent;
}
.sf-pagination button:disabled { opacity: 0.4; cursor: default; }
.sf-pagination__btn {
    padding: 0 1rem !important;
    gap: 0.3rem;
    font-size: 0.82rem !important;
}

/* =============================================
   EMPTY STATE
   ============================================= */
.sf-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--sf-text-light);
}
.sf-empty i { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.sf-empty p { font-size: 1rem; color: var(--sf-text-muted); margin-bottom: 0.5rem; }

/* =============================================
   TRUST BAR
   ============================================= */
.sf-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 2rem 0;
    margin: 0 auto;
    max-width: 1340px;
}
.sf-trust-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}
.sf-trust-item:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-trust-item__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--sf-radius-md);
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.sf-trust-item__text h6 { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--sf-text); }
.sf-trust-item__text p { margin: 0; font-size: 0.75rem; color: var(--sf-text-muted); }

/* =============================================
   NEWSLETTER
   ============================================= */
.sf-newsletter {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    border-radius: var(--sf-radius-xl);
    padding: 2.5rem;
    margin: 1rem auto;
    max-width: 1340px;
    color: #fff;
    text-align: center;
}
.sf-newsletter h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.4rem; }
.sf-newsletter p { opacity: 0.85; font-size: 0.9rem; margin: 0 0 1.2rem; }
.sf-newsletter__form {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.sf-newsletter__form input {
    flex: 1;
    padding: 0.65rem 1.2rem;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    font-family: var(--sf-font);
}
.sf-newsletter__form input::placeholder { color: rgba(255,255,255,.6); }
.sf-newsletter__form input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.2); }
.sf-newsletter__form button {
    padding: 0.65rem 1.8rem;
    background: #fff;
    color: var(--sf-primary);
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--sf-transition);
    font-family: var(--sf-font);
    white-space: nowrap;
}
.sf-newsletter__form button:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* =============================================
   FOOTER
   ============================================= */
.sf-footer {
    background: var(--sf-text);
    color: rgba(255,255,255,.8);
    padding: 3rem 0 0;
    margin-top: 2rem;
}
.sf-footer__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}
.sf-footer__col h6 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255,255,255,.1);
}
.sf-footer__col a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.3rem 0;
    transition: var(--sf-transition);
}
.sf-footer__col a:hover { color: #fff; padding-right: 0.3rem; }
.sf-footer__col a i { font-size: 0.9rem; }
.sf-footer__brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.sf-footer__logo { height: 40px; width: 40px; border-radius: var(--sf-radius-sm); object-fit: contain; }
.sf-footer__brand h6 { margin: 0; border: none; padding: 0; }
.sf-footer__social {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.sf-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    transition: var(--sf-transition);
}
.sf-footer__social a:hover { background: var(--sf-primary); color: #fff; transform: translateY(-2px); }

/* Payment Icons */
.sf-footer__payments {
    max-width: 1340px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.sf-payment-icon {
    background: rgba(255,255,255,.1);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sf-payment-icon i { font-size: 1rem; }

/* Footer Bottom */
.sf-footer__bottom {
    text-align: center;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 0.8rem;
    color: rgba(255,255,255,.45);
}
.sf-footer__bottom a { color: var(--sf-secondary); text-decoration: none; font-weight: 600; }
.sf-footer__bottom a:hover { color: #fff; }

/* =============================================
   FLOATING ELEMENTS
   ============================================= */
/* WhatsApp FAB */
.sf-whatsapp-fab {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    z-index: 90;
    transition: var(--sf-transition);
    animation: sfPulse 2s infinite;
}
.sf-whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,.5);
    color: #fff;
}

/* Back to Top */
.sf-back-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sf-card-bg);
    color: var(--sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 2px solid var(--sf-border);
    cursor: pointer;
    z-index: 90;
    transition: var(--sf-transition);
    opacity: 0;
    visibility: hidden;
}
.sf-back-top.visible { opacity: 1; visibility: visible; }
.sf-back-top:hover { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); transform: translateY(-2px); }

/* =============================================
   PRODUCT DETAIL PAGE
   ============================================= */
.sf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    flex-wrap: wrap;
}
.sf-breadcrumb a { color: var(--sf-primary); text-decoration: none; transition: var(--sf-transition); }
.sf-breadcrumb a:hover { opacity: 0.7; }
.sf-breadcrumb__current { color: var(--sf-text); font-weight: 600; }
.sf-breadcrumb .bi-chevron-left { font-size: 0.7rem; }

.sf-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--sf-shadow);
}
.sf-detail__gallery { position: relative; }
.sf-detail__main-wrap { position: relative; }
.sf-detail__main-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
}
.sf-detail__main-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-bg);
    color: var(--sf-primary);
    font-size: 4rem;
    min-height: 300px;
    border-radius: var(--sf-radius);
}
.sf-detail__disc-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--sf-accent);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    z-index: 2;
}
.sf-detail__thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.sf-detail__thumbs::-webkit-scrollbar { display: none; }
.sf-detail__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--sf-radius-sm);
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--sf-transition);
    flex-shrink: 0;
}
.sf-detail__thumb:hover { border-color: var(--sf-text-light); }
.sf-detail__thumb.active { border-color: var(--sf-primary); box-shadow: 0 0 0 2px rgba(26,73,88,.2); }

.sf-detail__info h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--sf-text); }
.sf-detail__category { color: var(--sf-text-muted); font-size: 0.85rem; margin-bottom: 0.8rem; }
.sf-detail__category i { margin-left: 4px; }

.sf-detail__rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.sf-detail__stars { display: inline-flex; gap: 2px; color: #f1c40f; }
.sf-detail__rating-text { font-weight: 700; color: var(--sf-text); font-size: 0.9rem; }
.sf-detail__rating-count { color: var(--sf-text-muted); font-size: 0.82rem; }

.sf-detail__prices { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; }
.sf-detail__current { font-size: 1.8rem; font-weight: 800; color: var(--sf-primary); }
.sf-detail__old { font-size: 1rem; color: var(--sf-text-light); text-decoration: line-through; }
.sf-detail__badge { background: #fff0f0; color: var(--sf-accent); padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; }

.sf-detail__stock { margin-bottom: 1rem; font-size: 0.88rem; }
.sf-detail__stock--available { color: var(--sf-success); font-weight: 600; }
.sf-detail__stock--out { color: var(--sf-accent); font-weight: 600; }
.sf-detail__stock-warn { color: var(--sf-warning); font-size: 0.8rem; margin-right: 4px; }

.sf-detail__variants { margin-bottom: 1rem; }
.sf-detail__variant-group { margin-bottom: 0.8rem; }
.sf-detail__variant-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4rem; color: var(--sf-text); }
.sf-detail__variant-opts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sf-variant-btn {
    padding: 0.4rem 1rem;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-card-bg);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--sf-transition);
    font-family: var(--sf-font);
    color: var(--sf-text);
}
.sf-variant-btn:hover { border-color: var(--sf-primary); }
.sf-variant-btn.active { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }

.sf-detail__qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.sf-detail__qty-label { font-weight: 600; font-size: 0.9rem; color: var(--sf-text); }
.sf-detail__qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    overflow: hidden;
}
.sf-detail__qty button {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--sf-bg);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--sf-text);
    transition: var(--sf-transition);
}
.sf-detail__qty button:hover { background: var(--sf-primary); color: #fff; }
.sf-detail__qty input {
    width: 52px;
    height: 40px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--sf-font);
    outline: none;
    color: var(--sf-text);
    -moz-appearance: textfield;
}
.sf-detail__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.sf-detail__add-btn {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border: none;
    border-radius: var(--sf-radius);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--sf-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--sf-font);
}
.sf-detail__add-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); filter: brightness(1.05); }
.sf-detail__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Trust Badges under Add to Cart */
.sf-detail__trust {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sf-border);
}
.sf-detail__trust-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--sf-text-muted);
}
.sf-detail__trust-item i { color: var(--sf-success); font-size: 0.9rem; }

/* Share */
.sf-detail__share {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sf-border);
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}
.sf-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-text);
    text-decoration: none;
    transition: var(--sf-transition);
    cursor: pointer;
    background: var(--sf-card-bg);
    font-size: 1rem;
}
.sf-share-btn:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.sf-share-btn--wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.sf-share-btn--tw:hover { background: #1DA1F2; color: #fff; border-color: #1DA1F2; }
.sf-share-btn--copy:hover { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }

/* Description */
.sf-detail__desc {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--sf-shadow);
}
.sf-detail__desc h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; color: var(--sf-text); display: flex; align-items: center; gap: 0.4rem; }
.sf-detail__desc h3 i { color: var(--sf-primary); }

/* Reviews */
.sf-reviews {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--sf-shadow);
}
.sf-reviews__header { margin-bottom: 1.5rem; }
.sf-reviews__header h3 { font-size: 1.1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.sf-reviews__header h3 i { color: #f1c40f; }
.sf-reviews__summary { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
.sf-reviews__avg { font-size: 3rem; font-weight: 800; color: var(--sf-primary); line-height: 1; }
.sf-reviews__avg-stars { display: flex; flex-direction: column; gap: 4px; color: #f1c40f; }
.sf-reviews__avg-stars span { color: var(--sf-text-muted); font-size: 0.82rem; }
.sf-reviews__bars { flex: 1; min-width: 200px; }
.sf-reviews__bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 4px; font-size: 0.82rem; }
.sf-reviews__bar-row i { color: #f1c40f; font-size: 0.7rem; }
.sf-reviews__bar { flex: 1; height: 8px; background: var(--sf-bg); border-radius: 4px; overflow: hidden; }
.sf-reviews__bar-fill { height: 100%; background: linear-gradient(90deg, #f1c40f, #f39c12); border-radius: 4px; transition: width .6s ease; }
.sf-reviews__bar-count { color: var(--sf-text-muted); min-width: 20px; text-align: left; }
.sf-reviews__empty { text-align: center; padding: 2rem; color: var(--sf-text-light); }
.sf-reviews__empty i { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.sf-reviews__list { display: flex; flex-direction: column; gap: 1rem; }
.sf-review { display: flex; gap: 1rem; padding: 1rem; background: var(--sf-bg); border-radius: var(--sf-radius-md); }
.sf-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.sf-review__content { flex: 1; }
.sf-review__header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sf-review__name { font-weight: 600; color: var(--sf-text); font-size: 0.9rem; }
.sf-review__date { color: var(--sf-text-light); font-size: 0.78rem; }
.sf-review__stars { color: #f1c40f; font-size: 0.82rem; display: inline-flex; gap: 1px; }
.sf-review__comment { margin-top: 0.4rem; color: var(--sf-text-muted); font-size: 0.88rem; line-height: 1.6; }

/* Sticky Add to Cart (Mobile) */
.sf-sticky-atc {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sf-card-bg);
    padding: 0.8rem 1rem;
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    z-index: 95;
    align-items: center;
    gap: 0.8rem;
    border-top: 1px solid var(--sf-border);
}
.sf-sticky-atc__price { font-weight: 800; font-size: 1.1rem; color: var(--sf-primary); }
.sf-sticky-atc__btn {
    flex: 1;
    padding: 0.7rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border: none;
    border-radius: var(--sf-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: var(--sf-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* =============================================
   PAGE WRAP (shared container for cart/checkout/confirm/track)
   ============================================= */
.sf-page-wrap {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 2rem 1.5rem;
}

/* =============================================
   CART PAGE
   ============================================= */
.sf-steps { display: flex; align-items: center; justify-content: center; gap: 0; padding: 1.5rem 0 1rem; }
.sf-step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.sf-step__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--sf-bg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--sf-text-light); transition: var(--sf-transition); }
.sf-step.active .sf-step__icon { background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.sf-step.done .sf-step__icon { background: var(--sf-success); color: #fff; }
.sf-step span { font-size: 0.78rem; color: var(--sf-text-light); font-weight: 500; }
.sf-step.active span { color: var(--sf-primary); font-weight: 700; }
.sf-step.done span { color: var(--sf-success); font-weight: 600; }
.sf-step__line { width: 60px; height: 3px; background: var(--sf-border); border-radius: 2px; margin: 0 0.5rem; margin-bottom: 1.2rem; }
.sf-step__line--done { background: linear-gradient(90deg, var(--sf-success), var(--sf-primary)); }

.sf-page-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.sf-page-header h2 { font-size: 1.3rem; font-weight: 800; color: var(--sf-text); margin: 0; }
.sf-page-header__count { background: var(--sf-primary); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }

.sf-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
.sf-cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 40px;
    align-items: center;
    padding: 1rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-md);
    margin-bottom: 0.6rem;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}
.sf-cart-item:hover { box-shadow: var(--sf-shadow-md); }
.sf-cart-item__product { display: flex; align-items: center; gap: 0.8rem; }
.sf-cart-item__img { width: 70px; height: 70px; border-radius: var(--sf-radius-sm); object-fit: cover; flex-shrink: 0; }
.sf-cart-item__img--empty { display: flex; align-items: center; justify-content: center; background: var(--sf-bg); color: var(--sf-primary); font-size: 1.5rem; }
.sf-cart-item__info { min-width: 0; }
.sf-cart-item__name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cart-item__variant { font-size: 0.78rem; color: var(--sf-text-muted); margin-top: 2px; }
.sf-cart-item__variant i { font-size: 0.7rem; margin-left: 2px; }
.sf-cart-item__price { font-weight: 600; font-size: 0.9rem; }
.sf-cart-item__qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    overflow: hidden;
    width: fit-content;
}
.sf-cart-item__qty button {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--sf-bg);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--sf-text);
    transition: var(--sf-transition);
}
.sf-cart-item__qty button:hover { background: var(--sf-primary); color: #fff; }
.sf-cart-item__qty span { padding: 0 0.6rem; font-weight: 700; font-size: 0.9rem; }
.sf-cart-item__total { font-weight: 800; font-size: 0.95rem; color: var(--sf-primary); }
.sf-cart-item__remove {
    background: none;
    border: none;
    color: var(--sf-text-light);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.3rem;
    border-radius: 50%;
    transition: var(--sf-transition);
}
.sf-cart-item__remove:hover { color: var(--sf-accent); background: #fff0f0; }

.sf-cart__header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 40px; padding: 0.6rem 1rem; background: var(--sf-bg); border-radius: var(--sf-radius-sm); font-size: 0.8rem; color: var(--sf-text-muted); font-weight: 600; margin-bottom: 0.5rem; }
.sf-cart__actions { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; }
.sf-cart__continue { color: var(--sf-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: var(--sf-transition); display: flex; align-items: center; gap: 0.3rem; }
.sf-cart__continue:hover { opacity: 0.7; }
.sf-cart__clear { background: none; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 0.3rem 0.8rem; font-size: 0.82rem; color: var(--sf-accent); cursor: pointer; transition: var(--sf-transition); font-family: var(--sf-font); }
.sf-cart__clear:hover { background: var(--sf-accent); color: #fff; border-color: var(--sf-accent); }

/* Summary Sidebar */
.sf-summary {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    box-shadow: var(--sf-shadow);
}
.sf-summary h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.4rem; }
.sf-summary h3 i { color: var(--sf-primary); }
.sf-summary__coupon { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.sf-summary__coupon input {
    flex: 1;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 0.85rem;
    font-family: var(--sf-font);
    outline: none;
}
.sf-summary__coupon input:focus { border-color: var(--sf-primary); }
.sf-summary__coupon button {
    padding: 0.5rem 1rem;
    background: var(--sf-primary);
    color: #fff;
    border: none;
    border-radius: var(--sf-radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: var(--sf-font);
    transition: var(--sf-transition);
}
.sf-summary__coupon button:hover { filter: brightness(1.1); }
.sf-summary__divider { height: 1px; background: var(--sf-border); margin: 0.6rem 0; }
.sf-summary__row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.88rem; }
.sf-summary__row--total { font-weight: 800; font-size: 1.1rem; color: var(--sf-primary); padding: 0.5rem 0; }
.sf-summary__row--discount { color: var(--sf-success); }
.sf-summary__row--discount i { margin-left: 4px; }
.sf-summary__shipping-note { font-size: 0.78rem; color: var(--sf-text-muted); font-style: italic; }
.sf-summary__btn {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border: none;
    border-radius: var(--sf-radius);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 0.8rem;
    transition: var(--sf-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--sf-font);
}
.sf-summary__btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-summary__btn:disabled { opacity: 0.6; }
.sf-summary__secure { text-align: center; font-size: 0.78rem; color: var(--sf-success); margin-top: 0.6rem; }
.sf-summary__secure i { margin-left: 4px; }

.sf-cart-empty { text-align: center; padding: 4rem 2rem; }
.sf-cart-empty__icon { font-size: 4rem; color: var(--sf-border); margin-bottom: 1rem; }
.sf-cart-empty h3 { font-size: 1.2rem; color: var(--sf-text); margin-bottom: 0.4rem; }
.sf-cart-empty p { color: var(--sf-text-muted); font-size: 0.9rem; margin-bottom: 1rem; max-width: 300px; margin-left: auto; margin-right: auto; }
.sf-cart-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: var(--sf-transition);
}
.sf-cart-empty__btn:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); color: #fff; }

/* =============================================
   CHECKOUT PAGE
   ============================================= */
.sf-checkout { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; }
.sf-checkout__section { background: var(--sf-card-bg); border-radius: var(--sf-radius); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--sf-shadow); }
.sf-checkout__section-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.sf-checkout__section-icon { width: 40px; height: 40px; border-radius: var(--sf-radius-sm); background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.sf-checkout__section-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--sf-text); margin: 0; }
.sf-input-icon { position: relative; }
.sf-input-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sf-text-light); font-size: 1rem; }
.sf-input-icon input { padding-left: 36px; }
.sf-checkout__shipping-list, .sf-checkout__payment-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sf-shipping-opt, .sf-payment-opt {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: var(--sf-bg);
    border: 2px solid transparent;
    border-radius: var(--sf-radius-md);
    cursor: pointer;
    transition: var(--sf-transition);
}
.sf-shipping-opt:hover, .sf-payment-opt:hover { border-color: var(--sf-border); }
.sf-shipping-opt.active, .sf-payment-opt.active { border-color: var(--sf-primary); background: rgba(26,73,88,.04); }
.sf-shipping-opt__radio, .sf-payment-opt__radio { width: 20px; height: 20px; border: 2px solid var(--sf-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-shipping-opt__radio-dot, .sf-payment-opt__radio-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: var(--sf-transition); }
.sf-shipping-opt__radio-dot.active, .sf-payment-opt__radio-dot.active { background: var(--sf-primary); }
.sf-shipping-opt.active .sf-shipping-opt__radio, .sf-payment-opt.active .sf-payment-opt__radio { border-color: var(--sf-primary); }
.sf-shipping-opt__info { flex: 1; }
.sf-shipping-opt__name { font-weight: 600; font-size: 0.9rem; }
.sf-shipping-opt__provider { color: var(--sf-text-muted); font-size: 0.78rem; }
.sf-shipping-opt__days { font-size: 0.8rem; color: var(--sf-text-muted); margin-top: 2px; }
.sf-shipping-opt__days i { margin-left: 2px; }
.sf-shipping-opt__price { font-weight: 700; white-space: nowrap; }
.sf-shipping-opt__free { color: var(--sf-success); font-weight: 700; }
.sf-shipping-opt__free-note { display: block; color: var(--sf-text-muted); font-size: 0.72rem; }
.sf-summary--sticky { position: sticky; top: 5rem; }
.sf-checkout__items-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; max-height: 250px; overflow-y: auto; }
.sf-checkout__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--sf-bg); }
.sf-checkout__item-img { width: 44px; height: 44px; border-radius: var(--sf-radius-sm); object-fit: cover; flex-shrink: 0; }
.sf-checkout__item-img--empty { display: flex; align-items: center; justify-content: center; background: var(--sf-bg); color: var(--sf-primary); font-size: 1rem; }
.sf-checkout__item-info { flex: 1; min-width: 0; }
.sf-checkout__item-name { font-size: 0.82rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-checkout__item-qty { font-size: 0.78rem; color: var(--sf-text-muted); }
.sf-checkout__item-price { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.sf-checkout__error { color: var(--sf-accent); font-size: 0.82rem; margin-top: 0.6rem; text-align: center; background: #fff5f5; padding: 0.5rem; border-radius: var(--sf-radius-sm); animation: sfFadeIn .3s ease; }
.sf-checkout__error i { margin-left: 4px; }

/* =============================================
   ORDER CONFIRMATION
   ============================================= */
.sf-confirm {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-xl);
    margin: 2rem auto;
    max-width: 600px;
    box-shadow: var(--sf-shadow);
}
.sf-confirm__circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf-success), #2ecc71);
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 35px rgba(39,174,96,0.3);
    animation: sfConfirmPop 0.7s cubic-bezier(.68,-.55,.27,1.55);
    position: relative;
}
.sf-confirm__circle::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(39,174,96,.15);
    animation: sfConfirmRing 1.5s ease-out;
}
.sf-confirm__title { font-size: 1.4rem; font-weight: 800; color: var(--sf-text); margin-bottom: 0.5rem; }
.sf-confirm__subtitle { color: var(--sf-text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.sf-confirm__order-box {
    background: var(--sf-bg);
    border: 2px dashed var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}
.sf-confirm__order-label { font-size: 0.82rem; color: var(--sf-text-muted); margin-bottom: 0.3rem; }
.sf-confirm__order-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--sf-primary);
    letter-spacing: 1px;
    direction: ltr;
}
.sf-confirm__order-note { color: var(--sf-text-muted); font-size: 0.8rem; margin-top: 0.3rem; }
.sf-confirm__actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.sf-confirm__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border-radius: var(--sf-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--sf-transition);
    font-size: 0.9rem;
    font-family: var(--sf-font);
}
.sf-confirm__btn--primary {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.sf-confirm__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); color: #fff; }
.sf-confirm__btn--outline {
    background: var(--sf-card-bg);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}
.sf-confirm__btn--outline:hover { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-confirm__whatsapp { padding-top: 1rem; border-top: 1px solid var(--sf-border); }
.sf-confirm__whatsapp a {
    color: #25D366;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--sf-transition);
}
.sf-confirm__whatsapp a:hover { opacity: 0.8; }

/* =============================================
   TRACKING PAGE
   ============================================= */
.sf-track { padding: 1rem 0; }
.sf-track__form {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sf-shadow);
}
.sf-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-right: 1.5rem;
}
.sf-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.8rem 0;
    position: relative;
}
.sf-timeline__item::before {
    content: '';
    position: absolute;
    right: -1.1rem;
    top: 2.4rem;
    bottom: -0.8rem;
    width: 2px;
    background: var(--sf-border);
}
.sf-timeline__item:last-child::before { display: none; }
.sf-timeline__item.done::before { background: var(--sf-success); }
.sf-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sf-border);
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.sf-timeline__item.done .sf-timeline__dot { background: var(--sf-success); }
.sf-timeline__item.active .sf-timeline__dot { background: var(--sf-primary); box-shadow: 0 0 0 4px rgba(26,73,88,.2); animation: sfPulse 2s infinite; }
.sf-timeline__status { font-weight: 600; font-size: 0.9rem; }
.sf-timeline__date { font-size: 0.78rem; color: var(--sf-text-muted); }
.sf-timeline__note { font-size: 0.82rem; color: var(--sf-text-muted); background: var(--sf-bg); padding: 0.3rem 0.6rem; border-radius: 6px; margin-top: 2px; }

/* =============================================
   TOAST
   ============================================= */
.sf-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 999;
    animation: sfSlideUp .4s ease, sfSlideDown .4s ease 1.6s forwards;
    box-shadow: var(--sf-shadow-lg);
    font-family: var(--sf-font);
}
.sf-toast--success { background: var(--sf-success); color: #fff; }
.sf-toast--error { background: var(--sf-accent); color: #fff; }

/* Coupon Messages */
.sf-coupon-msg { font-size: 0.82rem; margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--sf-radius-sm); display: flex; align-items: center; gap: 0.3rem; }
.sf-coupon-msg--ok { color: #155724; background: #d4edda; }
.sf-coupon-msg--err { color: #721c24; background: #f8d7da; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes sfSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sfSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sfBadgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes sfBounceIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes sfPulse {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
    70% { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* =============================================
   TRUST STRIP (below header)
   ============================================= */
.sf-trust-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    width: 100%;
}
.sf-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
}
.sf-trust-strip__item i { color: #fff; font-size: 1.1rem; opacity: .85; }

/* =============================================
   HERO SECTION (Banner + Category Sidebar)
   ============================================= */
.sf-hero-section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    max-width: 1340px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

/* Hero Slider (left) */
.sf-hero-slider {
    position: relative;
    border-radius: var(--sf-radius-xl);
    overflow: hidden;
    min-height: 440px;
    box-shadow: var(--sf-shadow-lg);
}
.sf-hero-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.sf-hero-slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 4rem;
    color: #fff;
    position: relative;
    text-align: center;
}
.sf-hero-slide::after {
    content: '';
    position: absolute;
    bottom: -30%; right: -10%;
    width: 40%; height: 160%;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.sf-hero-slide--1 { background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-secondary) 60%, color-mix(in srgb, var(--sf-secondary) 80%, #4ec6e0) 100%); }
.sf-hero-slide--2 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }
.sf-hero-slide--3 { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.sf-hero-slide::before {
    content: '';
    position: absolute;
    top: -50%; left: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
.sf-hero-slide__content { position: relative; z-index: 2; max-width: 600px; }
.sf-hero-slide__logo {
    width: 90px; height: 90px;
    border-radius: var(--sf-radius-xl);
    object-fit: contain;
    background: rgba(255,255,255,.2);
    padding: 8px;
    margin: 0 auto 1.2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    border: 2px solid rgba(255,255,255,.3);
}
.sf-hero-slide__title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.6rem;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sf-hero-slide__desc {
    font-size: 1.05rem;
    opacity: 0.9;
    margin: 0 0 1.4rem;
    line-height: 1.7;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.sf-hero-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--sf-primary);
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--sf-transition);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.5);
    font-family: var(--sf-font);
}
.sf-hero-slide__cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.sf-hero-slide__stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    opacity: 0.85;
}
.sf-hero-slide__stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sf-hero-slide__stat-num { font-size: 1.4rem; font-weight: 800; }

/* Hero nav arrows */
.sf-hero-slider__prev,
.sf-hero-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--sf-transition);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-hero-slider__prev:hover,
.sf-hero-slider__next:hover { background: rgba(255,255,255,.4); }
.sf-hero-slider__prev { right: 12px; }
.sf-hero-slider__next { left: 12px; }

/* Hero dots */
.sf-hero-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.sf-hero-slider__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    transition: var(--sf-transition);
    padding: 0;
}
.sf-hero-slider__dot.active {
    background: #fff;
    width: 28px;
    border-radius: 10px;
}

/* Category Sidebar (right) */
/* Category Tree Sidebar */
.sf-hero-cats {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: var(--sf-shadow-md);
    border: 1px solid var(--sf-border);
    scrollbar-width: thin;
}
.sf-hero-cats__header {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-hero-cats__header i { color: #fff; }
.sf-hero-cats__tree { padding: 0.5rem; }

/* Tree Group */
.sf-tree__group { border-bottom: 1px solid var(--sf-border); }
.sf-tree__group:last-child { border-bottom: none; }

/* Parent Item */
.sf-tree__parent {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--sf-radius-sm);
    color: var(--sf-text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--sf-transition);
    text-decoration: none;
}
.sf-tree__parent:hover {
    background: var(--sf-bg);
    color: var(--sf-primary);
}
.sf-tree__icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--sf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--sf-primary);
    flex-shrink: 0;
    overflow: hidden;
}
.sf-tree__parent:hover .sf-tree__icon { background: color-mix(in srgb, var(--sf-primary) 12%, white); }
.sf-tree__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sf-tree__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-tree__count {
    font-size: 0.7rem;
    color: var(--sf-text-muted);
    background: var(--sf-bg);
    padding: 1px 7px;
    border-radius: 50px;
    font-weight: 500;
    flex-shrink: 0;
}
.sf-tree__arrow {
    font-size: 0.6rem;
    color: var(--sf-text-light);
    transition: var(--sf-transition);
    flex-shrink: 0;
}
.sf-tree__parent:hover .sf-tree__arrow { color: var(--sf-primary); transform: translateX(-2px); }

/* Children Items */
.sf-tree__children {
    padding: 0 0.5rem 0.4rem 0;
    margin-right: 1.2rem;
}
.sf-tree__child {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    color: var(--sf-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sf-transition);
    text-decoration: none;
}
.sf-tree__child:hover {
    color: var(--sf-primary);
    background: var(--sf-bg);
}
.sf-tree__child i { font-size: 0.7rem; color: var(--sf-text-light); }
.sf-tree__child:hover i { color: var(--sf-primary); }
.sf-tree__child span:first-of-type { flex: 1; }

/* =============================================
   THREE PROMOTIONAL BANNERS
   ============================================= */
.sf-banners-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 2rem 1rem;
}
.sf-banner {
    border-radius: var(--sf-radius);
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-border);
    transition: var(--sf-transition);
    cursor: default;
    overflow: hidden;
    position: relative;
}
.sf-banner:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-hover); }
.sf-banner--shipping { background: linear-gradient(135deg, #e8f5e9, #f1f8e9); border-color: #c8e6c9; }
.sf-banner--deals { background: linear-gradient(135deg, #fce4ec, #fff3e0); border-color: #ffcdd2; }
.sf-banner--new { background: linear-gradient(135deg, #e3f2fd, #e8eaf6); border-color: #bbdefb; }
.sf-banner__icon {
    width: 52px; height: 52px;
    border-radius: var(--sf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.sf-banner--shipping .sf-banner__icon { background: linear-gradient(135deg,#27ae60,#2ecc71); color:#fff; box-shadow: 0 4px 12px rgba(39,174,96,.25); }
.sf-banner--deals .sf-banner__icon { background: linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; box-shadow: 0 4px 12px rgba(231,76,60,.25); }
.sf-banner--new .sf-banner__icon { background: linear-gradient(135deg,#3498db,#2980b9); color:#fff; box-shadow: 0 4px 12px rgba(52,152,219,.25); }
.sf-banner__text h6 { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.2rem; color: var(--sf-text); }
.sf-banner__text p { font-size: 0.78rem; color: var(--sf-text-muted); margin: 0; line-height: 1.5; }

/* =============================================
   TRIPLE PRODUCT GRID (Top Rated / Best Selling / Newest)
   ============================================= */
.sf-triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1340px;
    margin: 0 auto 2.5rem;
    padding: 0 2rem;
}
.sf-triple-grid__col {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.2rem;
    box-shadow: var(--sf-shadow);
    border: 1px solid var(--sf-border);
}
.sf-triple-grid__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sf-text);
    margin: 0 0 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--sf-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-triple-grid__title i { font-size: 1rem; }
.sf-triple-grid__title--rated i { color: #f1c40f; }
.sf-triple-grid__title--selling i { color: #e74c3c; }
.sf-triple-grid__title--newest i { color: #3498db; }

/* Mini Product Card */
.sf-mini-product {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--sf-bg);
    transition: var(--sf-transition);
    text-decoration: none;
    color: inherit;
}
.sf-mini-product:last-child { border-bottom: none; }
.sf-mini-product:hover {
    background: var(--sf-bg);
    border-radius: var(--sf-radius-sm);
    padding: 0.7rem 0.6rem;
    margin: 0 -0.6rem;
}
.sf-mini-product__img {
    width: 70px; height: 70px;
    border-radius: var(--sf-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--sf-bg);
}
.sf-mini-product__img-empty {
    width: 70px; height: 70px;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sf-text-light);
    font-size: 1.5rem;
}
.sf-mini-product__info { flex: 1; min-width: 0; }
.sf-mini-product__name {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: var(--sf-text);
}
.sf-mini-product__stars {
    color: #f1c40f;
    font-size: 0.72rem;
    display: flex;
    gap: 1px;
    margin-bottom: 0.2rem;
}
.sf-mini-product__stars i.empty { color: var(--sf-border); }
.sf-mini-product__price {
    font-weight: 800;
    color: var(--sf-primary);
    font-size: 0.92rem;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}
.sf-mini-product__old-price {
    font-size: 0.75rem;
    color: var(--sf-text-light);
    text-decoration: line-through;
    font-weight: 500;
}

/* =============================================
   CATEGORY BROWSE (fallback section)
   ============================================= */
.sf-browse-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
}
.sf-browse-cats__card {
    background: var(--sf-card-bg);
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--sf-transition);
    font-family: var(--sf-font);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.sf-browse-cats__card:hover {
    border-color: var(--sf-primary);
    transform: translateY(-6px);
    box-shadow: var(--sf-shadow-hover);
    background: linear-gradient(180deg, var(--sf-card-bg) 0%, rgba(26,73,88,.02) 100%);
}
.sf-browse-cats__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--sf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sf-primary);
    overflow: hidden;
    transition: var(--sf-transition);
}
.sf-browse-cats__card:hover .sf-browse-cats__icon {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,73,88,.2);
}
.sf-browse-cats__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sf-browse-cats__card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sf-text);
    margin: 0;
}
.sf-browse-cats__card small {
    font-size: 0.82rem;
    color: var(--sf-text-muted);
}

/* =============================================
   SCROLL ANIMATIONS (only active after JS ready)
   ============================================= */
.sf-anim-ready .sf-animate-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.sf-anim-ready .sf-animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px) {
    .sf-hero-section { grid-template-columns: 1fr; }
    .sf-hero-cats { display: none; }
    .sf-triple-grid { grid-template-columns: 1fr; }
    .sf-banners-row { grid-template-columns: 1fr; }
    .sf-products { grid-template-columns: repeat(3, 1fr); }
    .sf-trust-bar { grid-template-columns: repeat(2, 1fr); }
    .sf-footer__inner { grid-template-columns: 1fr 1fr; }
    .sf-browse-cats { grid-template-columns: repeat(2, 1fr); }
    .sf-trust-strip { gap: 1rem; flex-wrap: wrap; justify-content: center; }
}
@media(max-width:768px) {
    .sf-main { padding: 0; }
    .sf-section { padding: 0 1rem; }
    .sf-cat-bar { padding: 0.8rem 1rem 1.2rem; }
    .sf-hero { padding: 2rem 1.5rem; min-height: 200px; border-radius: 0; margin: 0; }
    .sf-hero__title { font-size: 1.5rem; }
    .sf-hero__desc { font-size: 0.88rem; }

    .sf-hero-section { padding: 0.8rem 1rem; }
    .sf-hero-slider { min-height: 280px; border-radius: var(--sf-radius); }
    .sf-hero-slide { padding: 2rem 1.5rem; }
    .sf-hero-slide__title { font-size: 1.4rem; }
    .sf-hero-slide__stats { gap: 1rem; font-size: 0.82rem; }
    .sf-banners-row { padding: 0 1rem; grid-template-columns: 1fr; gap: 0.8rem; }
    .sf-triple-grid { padding: 0 1rem; gap: 1rem; }
    .sf-trust-strip { gap: 0.8rem; padding: 0.5rem 1rem; flex-wrap: wrap; justify-content: center; font-size: 0.75rem; }
    .sf-browse-cats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .sf-browse-cats__card { padding: 1.5rem 1rem; }
    .sf-browse-cats__icon { width: 60px; height: 60px; font-size: 1.5rem; }

    .sf-products { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .sf-product-carousel .sf-product { min-width: 180px; max-width: 200px; }

    .sf-detail { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
    .sf-detail__info h1 { font-size: 1.2rem; }
    .sf-detail__current { font-size: 1.4rem; }
    .sf-sticky-atc { display: flex; }

    .sf-page-wrap { padding: 0 1rem; }

    .sf-cart-layout { grid-template-columns: 1fr; }
    .sf-cart__header { display: none; }
    .sf-cart-item { grid-template-columns: 1fr; gap: 0.5rem; }
    .sf-cart-item__product { grid-column: 1; }
    .sf-cart-item__price, .sf-cart-item__total { display: inline; }

    .sf-checkout { grid-template-columns: 1fr; }
    .sf-summary--sticky { position: static; }

    .sf-confirm { padding: 2rem 1.2rem; margin: 1rem auto; }
    .sf-confirm__circle { width: 90px; height: 90px; font-size: 2.2rem; }
    .sf-confirm__title { font-size: 1.2rem; }
    .sf-confirm__actions { flex-direction: column; }
    .sf-confirm__btn { justify-content: center; }

    .sf-trust-bar { grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 1.5rem 1rem; }
    .sf-trust-item { padding: 0.8rem; }

    .sf-newsletter { padding: 1.5rem; border-radius: var(--sf-radius); margin: 1rem; }
    .sf-newsletter__form { flex-direction: column; }

    .sf-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }

    .sf-steps { gap: 0; }
    .sf-step__line { width: 30px; }
    .sf-step span { font-size: 0.7rem; }

    .sf-whatsapp-fab { bottom: 1rem; left: 1rem; width: 50px; height: 50px; font-size: 1.4rem; }
    .sf-back-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }

    .sf-reviews__summary { flex-direction: column; }
    .sf-review { padding: 0.8rem; }
    .sf-detail__share { flex-wrap: wrap; }
}
@media(max-width:480px) {
    .sf-products { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .sf-product__body { padding: 0.6rem 0.7rem 0.4rem; }
    .sf-product__name { font-size: 0.82rem; }
    .sf-product__price--current { font-size: 0.9rem; }
    .sf-product__add { font-size: 0.78rem; padding: 0.5rem; }

    .sf-hero__title { font-size: 1.2rem; }
    .sf-hero__stats { flex-wrap: wrap; gap: 0.8rem; }

    .sf-results-info { flex-direction: column; gap: 0.5rem; text-align: center; }
    .sf-cat-item { min-width: 75px; padding: 0.5rem 0.6rem; }
    .sf-cat-item__img, .sf-cat-item__icon { width: 40px; height: 40px; }

    .sf-filter-bar { flex-direction: column; }
    .sf-filter-bar__search { min-width: auto; }
    .sf-filter-bar__sort select { min-width: auto; width: 100%; }
    .sf-active-filters { flex-direction: column; text-align: center; }
    .sf-pagination { flex-wrap: wrap; gap: 0.3rem; }
    .sf-pagination__btn { font-size: 0.75rem !important; padding: 0 0.6rem !important; }

    .sf-hero__logo { width: 60px; height: 60px; }
    .sf-detail__trust { flex-direction: column; align-items: center; gap: 0.5rem; }

    .sf-hero-slide__title { font-size: 1.1rem; }
    .sf-hero-slide__logo { width: 56px; height: 56px; }
    .sf-hero-slide__desc { font-size: 0.85rem; }
    .sf-hero-slide__stats { flex-wrap: wrap; gap: 0.6rem; }
    .sf-hero-slider__prev, .sf-hero-slider__next { width: 32px; height: 32px; font-size: 0.8rem; }
    .sf-trust-strip__item span { display: none; }
    .sf-trust-strip { gap: 1.5rem; }
    .sf-mini-product__img, .sf-mini-product__img-empty { width: 56px; height: 56px; }
    .sf-mini-product__name { font-size: 0.8rem; }
    .sf-mini-product__price { font-size: 0.82rem; }
    .sf-slider__prev, .sf-slider__next { width: 34px; height: 34px; font-size: 0.9rem; }
    .sf-slider__prev { right: -8px; }
    .sf-slider__next { left: -8px; }
}

/* =============================================
   v3 ENHANCEMENTS - SKELETON LOADING
   ============================================= */
.sf-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sfShimmer 1.5s infinite ease-in-out;
    border-radius: var(--sf-radius-sm);
}
.sf-skeleton--circle { border-radius: 50%; }
.sf-skeleton--text { height: 14px; border-radius: 4px; }
.sf-skeleton--text-lg { height: 20px; border-radius: 4px; }
.sf-skeleton--btn { height: 40px; border-radius: var(--sf-radius-sm); }
.sf-skeleton--img { aspect-ratio: 1; border-radius: var(--sf-radius); }

/* Skeleton Product Card */
.sf-skeleton-card {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-xl);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    border: 1px solid var(--sf-border);
}
.sf-skeleton-card__img {
    aspect-ratio: 1;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sfShimmer 1.5s infinite ease-in-out;
}
.sf-skeleton-card__body { padding: 1rem; }
.sf-skeleton-card__line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sfShimmer 1.5s infinite ease-in-out;
    margin-bottom: 0.5rem;
}
.sf-skeleton-card__line--short { width: 60%; }
.sf-skeleton-card__line--price { width: 40%; height: 16px; margin-top: 0.5rem; }
.sf-skeleton-card__btn {
    height: 38px;
    border-radius: var(--sf-radius-sm);
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sfShimmer 1.5s infinite ease-in-out;
    margin-top: 0.5rem;
}

@keyframes sfShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================
   v3 ENHANCEMENTS - TOAST NOTIFICATIONS (Premium)
   ============================================= */
.sf-toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--sf-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}
.sf-toast-v3 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--sf-radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--sf-font);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    animation: sfToastIn 0.4s cubic-bezier(.68,-.55,.27,1.55), sfToastOut 0.3s ease 2.7s forwards;
    max-width: 420px;
    white-space: nowrap;
}
.sf-toast-v3--success {
    background: rgba(39,174,96,.95);
    color: #fff;
}
.sf-toast-v3--error {
    background: rgba(231,76,60,.95);
    color: #fff;
}
.sf-toast-v3--info {
    background: rgba(26,73,88,.95);
    color: #fff;
}
.sf-toast-v3__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sf-toast-v3__content { flex: 1; min-width: 0; }
.sf-toast-v3__title { font-weight: 700; font-size: 0.85rem; }
.sf-toast-v3__msg { font-size: 0.78rem; opacity: 0.9; font-weight: 400; }
.sf-toast-v3__close {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px;
    transition: var(--sf-transition-fast);
}
.sf-toast-v3__close:hover { color: #fff; }

@keyframes sfToastIn {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sfToastOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.95); pointer-events: none; }
}

/* =============================================
   v3 ENHANCEMENTS - IMAGE ZOOM (Product Detail)
   ============================================= */
.sf-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: var(--sf-radius);
}
.sf-zoom-container:hover .sf-zoom-img {
    transform: scale(2);
}
.sf-zoom-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    transform-origin: center center;
}
.sf-zoom-lens {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid var(--sf-primary);
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    pointer-events: none;
    z-index: 5;
    display: none;
    box-shadow: 0 0 0 3px rgba(26,73,88,.1);
}
.sf-zoom-container:hover .sf-zoom-lens { display: block; }

/* =============================================
   v3 ENHANCEMENTS - GLASSMORPHISM
   ============================================= */
.sf-glass {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.3);
}
.sf-glass--dark {
    background: rgba(26,35,50,.7);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
}

/* =============================================
   v3 ENHANCEMENTS - ENHANCED PRODUCT CARD
   ============================================= */
/* Quick Actions Overlay */
.sf-product__quick-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.5rem;
    z-index: 4;
    opacity: 0;
    transition: var(--sf-transition);
}
.sf-product__img-link:hover .sf-product__quick-actions { opacity: 1; }
.sf-product__quick-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--sf-text);
    cursor: pointer;
    transition: var(--sf-transition);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transform: translateY(10px);
}
.sf-product__img-link:hover .sf-product__quick-btn { transform: translateY(0); }
.sf-product__quick-btn:nth-child(2) { transition-delay: 0.05s; }
.sf-product__quick-btn:nth-child(3) { transition-delay: 0.1s; }
.sf-product__quick-btn:hover {
    background: var(--sf-primary);
    color: #fff;
    transform: translateY(0) scale(1.1);
}

/* Wishlist Button */
.sf-product__wishlist {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--sf-text-light);
    cursor: pointer;
    z-index: 4;
    transition: var(--sf-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    opacity: 0;
}
.sf-product:hover .sf-product__wishlist { opacity: 1; }
.sf-product__wishlist:hover,
.sf-product__wishlist.active {
    color: var(--sf-accent);
    animation: sfHeartBeat 0.6s ease;
}

/* Product Rating Stars */
.sf-product__rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}
.sf-product__stars {
    display: inline-flex;
    gap: 1px;
    color: #f1c40f;
    font-size: 0.7rem;
}
.sf-product__stars i.empty { color: var(--sf-border); }
.sf-product__rating-count {
    font-size: 0.7rem;
    color: var(--sf-text-light);
}

/* Stock Badge on Product Card */
.sf-product__stock-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: var(--sf-radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    z-index: 3;
}
.sf-product__stock-badge--low {
    background: var(--sf-warning-light);
    color: #e67e22;
    border: 1px solid rgba(243,156,18,.2);
}
.sf-product__stock-badge--out {
    background: var(--sf-accent-light);
    color: var(--sf-accent);
    border: 1px solid rgba(231,76,60,.2);
}

/* =============================================
   v3 ENHANCEMENTS - RIPPLE EFFECT
   ============================================= */
.sf-ripple {
    position: relative;
    overflow: hidden;
}
.sf-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.sf-ripple:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: 0s;
}
.sf-ripple:not(:active)::after {
    transition: width 0.6s, height 0.6s, opacity 0.6s;
}

/* =============================================
   v3 ENHANCEMENTS - GRADIENT TEXT
   ============================================= */
.sf-gradient-text {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================
   v3 ENHANCEMENTS - FLOATING LABELS
   ============================================= */
.sf-float-label {
    position: relative;
}
.sf-float-label input,
.sf-float-label select,
.sf-float-label textarea {
    width: 100%;
    padding: 1rem 1rem 0.5rem;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: var(--sf-font-size-base);
    font-family: var(--sf-font);
    background: var(--sf-card-bg);
    color: var(--sf-text);
    transition: var(--sf-transition);
    outline: none;
}
.sf-float-label input:focus,
.sf-float-label select:focus,
.sf-float-label textarea:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px var(--sf-primary-light);
}
.sf-float-label label {
    position: absolute;
    top: 0.35rem;
    right: 1rem;
    font-size: 0.7rem;
    color: var(--sf-text-muted);
    pointer-events: none;
    transition: var(--sf-transition);
    font-weight: 600;
}
.sf-layout[dir="ltr"] .sf-float-label label { right: auto; left: 1rem; }

/* =============================================
   v3 ENHANCEMENTS - PROGRESS BAR
   ============================================= */
.sf-progress {
    height: 6px;
    background: var(--sf-bg);
    border-radius: var(--sf-radius-full);
    overflow: hidden;
    position: relative;
}
.sf-progress__bar {
    height: 100%;
    border-radius: var(--sf-radius-full);
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-secondary));
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.sf-progress__bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation: sfProgressShine 2s infinite;
}

/* Free shipping progress bar */
.sf-free-shipping {
    background: var(--sf-success-light);
    border: 1px solid rgba(39,174,96,.15);
    border-radius: var(--sf-radius-md);
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}
.sf-free-shipping__text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sf-free-shipping__text i { color: var(--sf-success); }
.sf-free-shipping__bar {
    height: 8px;
    background: rgba(39,174,96,.15);
    border-radius: var(--sf-radius-full);
    overflow: hidden;
}
.sf-free-shipping__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sf-success), #2ecc71);
    border-radius: var(--sf-radius-full);
    transition: width 0.8s ease;
}
.sf-free-shipping__amount {
    font-size: 0.75rem;
    color: var(--sf-success);
    margin-top: 0.3rem;
    font-weight: 600;
}

/* =============================================
   v3 ENHANCEMENTS - COUNTDOWN TIMER
   ============================================= */
.sf-countdown {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    direction: ltr;
}
.sf-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--sf-accent);
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: var(--sf-radius-xs);
    min-width: 40px;
}
.sf-countdown__num {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}
.sf-countdown__label {
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.85;
}
.sf-countdown__sep {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sf-accent);
}

/* =============================================
   v3 ENHANCEMENTS - MINI CART DRAWER
   ============================================= */
.sf-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: var(--sf-z-modal);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.sf-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.sf-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: var(--sf-card-bg);
    z-index: calc(var(--sf-z-modal) + 1);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0,0,0,.15);
}
.sf-layout[dir="ltr"] .sf-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
.sf-drawer.open { transform: translateX(0); }
.sf-layout[dir="ltr"] .sf-drawer.open { transform: translateX(0); }

.sf-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--sf-border);
    background: var(--sf-bg);
}
.sf-drawer__title {
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sf-drawer__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--sf-card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--sf-text-muted);
    transition: var(--sf-transition);
}
.sf-drawer__close:hover { background: var(--sf-accent-light); color: var(--sf-accent); }
.sf-drawer__body { flex: 1; overflow-y: auto; padding: 1rem; }
.sf-drawer__footer {
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--sf-border);
    background: var(--sf-bg);
}

/* =============================================
   v3 ENHANCEMENTS - ENHANCED ANIMATIONS
   ============================================= */
@keyframes sfHeartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes sfProgressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

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

@keyframes sfRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sfScaleIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes sfSlideInRight {
    0% { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes sfSlideInLeft {
    0% { transform: translateX(-30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes sfBlur {
    0% { filter: blur(8px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

@keyframes sfCounterUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sfGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(26,73,88,.1); }
    50% { box-shadow: 0 0 20px rgba(26,73,88,.25); }
}

@keyframes sfWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Scroll-triggered animation variants */
.sf-anim-ready .sf-animate-in { opacity: 0; transform: translateY(25px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.4,0,.2,1); }
.sf-anim-ready .sf-animate-in.visible { opacity: 1; transform: translateY(0); }
.sf-anim-ready .sf-animate-in--left { transform: translateX(-30px); }
.sf-anim-ready .sf-animate-in--left.visible { transform: translateX(0); }
.sf-anim-ready .sf-animate-in--right { transform: translateX(30px); }
.sf-anim-ready .sf-animate-in--right.visible { transform: translateX(0); }
.sf-anim-ready .sf-animate-in--scale { transform: scale(0.9); }
.sf-anim-ready .sf-animate-in--scale.visible { transform: scale(1); }
.sf-anim-ready .sf-animate-in--blur { filter: blur(6px); transform: none; }
.sf-anim-ready .sf-animate-in--blur.visible { filter: blur(0); }

/* Stagger animation delays */
.sf-stagger > *:nth-child(1) { transition-delay: 0s; }
.sf-stagger > *:nth-child(2) { transition-delay: 0.06s; }
.sf-stagger > *:nth-child(3) { transition-delay: 0.12s; }
.sf-stagger > *:nth-child(4) { transition-delay: 0.18s; }
.sf-stagger > *:nth-child(5) { transition-delay: 0.24s; }
.sf-stagger > *:nth-child(6) { transition-delay: 0.3s; }
.sf-stagger > *:nth-child(7) { transition-delay: 0.36s; }
.sf-stagger > *:nth-child(8) { transition-delay: 0.42s; }

/* =============================================
   v3 ENHANCEMENTS - CATEGORY PAGE
   ============================================= */
.sf-cat-hero {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-secondary) 60%, color-mix(in srgb, var(--sf-secondary) 80%, #4ec6e0) 100%);
    padding: 2.5rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sf-cat-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 50%;
    height: 180%;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.sf-cat-hero__inner {
    max-width: 1340px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.sf-cat-hero__title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 0.3rem;
}
.sf-cat-hero__desc {
    font-size: 0.9rem;
    opacity: 0.85;
}
.sf-cat-hero__count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,.15);
    padding: 0.3rem 0.8rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

/* Sub-categories strip */
.sf-sub-cats {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.5rem 0;
}
.sf-sub-cats::-webkit-scrollbar { display: none; }
.sf-sub-cat {
    padding: 0.45rem 1.2rem;
    border-radius: var(--sf-radius-full);
    background: var(--sf-card-bg);
    border: 2px solid var(--sf-border);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--sf-transition);
    text-decoration: none;
    color: var(--sf-text);
    font-family: var(--sf-font);
}
.sf-sub-cat:hover { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-sub-cat.active {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    border-color: transparent;
}

/* =============================================
   v3 ENHANCEMENTS - ENHANCED CHECKOUT
   ============================================= */
.sf-checkout__section-head--step {
    position: relative;
    padding-right: 3rem;
}
.sf-checkout__step-num {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
.sf-layout[dir="ltr"] .sf-checkout__section-head--step { padding-right: 0; padding-left: 3rem; }
.sf-layout[dir="ltr"] .sf-checkout__step-num { right: auto; left: 0; }

/* =============================================
   v3 ENHANCEMENTS - LOADING SPINNER
   ============================================= */
.sf-spinner {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border: 3px solid var(--sf-border);
    border-top-color: var(--sf-primary);
    border-radius: 50%;
    animation: sfRotate 0.8s linear infinite;
}
.sf-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
.sf-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
.sf-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

/* Full-page loading overlay */
.sf-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: var(--sf-text-muted);
    font-size: 0.9rem;
}

/* =============================================
   v3 ENHANCEMENTS - BADGE/CHIP SYSTEM
   ============================================= */
.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.sf-chip--primary { background: var(--sf-primary-light); color: var(--sf-primary); }
.sf-chip--accent { background: var(--sf-accent-light); color: var(--sf-accent); }
.sf-chip--success { background: var(--sf-success-light); color: var(--sf-success); }
.sf-chip--warning { background: var(--sf-warning-light); color: var(--sf-warning); }

/* Search suggestions dropdown */
.sf-search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-border);
    border-top: none;
    border-radius: 0 0 var(--sf-radius-md) var(--sf-radius-md);
    box-shadow: var(--sf-shadow-lg);
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
}
.sf-search-suggest__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: var(--sf-transition-fast);
    text-decoration: none;
    color: var(--sf-text);
}
.sf-search-suggest__item:hover { background: var(--sf-bg); }
.sf-search-suggest__item img {
    width: 36px;
    height: 36px;
    border-radius: var(--sf-radius-xs);
    object-fit: cover;
}
.sf-search-suggest__name { font-size: 0.85rem; font-weight: 600; }
.sf-search-suggest__price { font-size: 0.78rem; color: var(--sf-primary); font-weight: 700; }

/* =============================================
   v3 ENHANCEMENTS - MOBILE BOTTOM NAV
   ============================================= */
.sf-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sf-card-bg);
    border-top: 1px solid var(--sf-border);
    z-index: var(--sf-z-sticky);
    padding: 0.4rem 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.sf-bottom-nav__items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
}
.sf-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--sf-text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    transition: var(--sf-transition-fast);
    border-radius: var(--sf-radius-sm);
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sf-font);
}
.sf-bottom-nav__item i { font-size: 1.2rem; }
.sf-bottom-nav__item.active,
.sf-bottom-nav__item:hover { color: var(--sf-primary); }
.sf-bottom-nav__item .sf-cart-badge {
    position: absolute;
    top: 0;
    right: 2px;
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
}

/* =============================================
   v3 ENHANCEMENTS - ORDER CONFIRMATION (Premium)
   ============================================= */
.sf-confirm-v3 {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 560px;
    margin: 2rem auto;
}
.sf-confirm-v3__circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 12px 40px rgba(39,174,96,.3);
    animation: sfConfirmPop 0.7s cubic-bezier(.68,-.55,.27,1.55);
    position: relative;
}
.sf-confirm-v3__circle::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(39,174,96,.15);
    animation: sfConfirmRing 1.5s ease-out;
}
@keyframes sfConfirmPop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    50% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sfConfirmRing {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Confetti particles */
.sf-confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}
.sf-confetti__particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: sfConfettiFall 3s ease-in forwards;
}
@keyframes sfConfettiFall {
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* =============================================
   v3 RESPONSIVE ENHANCEMENTS
   ============================================= */
/* Large Desktop (1440px+) */
@media(min-width:1441px) {
    .sf-main__inner { max-width: 1440px; }
    .sf-products { grid-template-columns: repeat(5, 1fr); }
    .sf-hero-section { max-width: 1440px; }
    .sf-section { max-width: 1440px; }
}

/* Tablet Landscape (1024-768px) - enhanced */
@media(max-width:1024px) {
    .sf-bottom-nav { display: block; }
    .sf-whatsapp-fab { bottom: 5rem; }
    .sf-back-top { bottom: 5rem; }
}

/* Mobile (768px and below) - enhanced */
@media(max-width:768px) {
    /* Mobile Bottom Nav */
    .sf-bottom-nav { display: block; }

    /* Add bottom padding for bottom nav */
    .sf-layout { padding-bottom: 60px; }

    /* Floating buttons above bottom nav */
    .sf-whatsapp-fab { bottom: 5rem; }
    .sf-back-top { bottom: 5rem; }

    /* Category hero */
    .sf-cat-hero { padding: 1.5rem 1rem; }
    .sf-cat-hero__title { font-size: 1.3rem; }

    /* Drawer adjustments */
    .sf-drawer { width: 320px; }
}

/* Small Mobile (480px and below) - enhanced */
@media(max-width:480px) {
    .sf-bottom-nav__item { font-size: 0.62rem; padding: 0.2rem 0.4rem; }
    .sf-bottom-nav__item i { font-size: 1.1rem; }

    /* Touch-friendly button sizes */
    .sf-product__add { padding: 0.6rem; min-height: 44px; }
    .sf-pagination button { min-width: 42px; min-height: 42px; }

    /* Toast on mobile */
    .sf-toast-v3 { max-width: calc(100vw - 2rem); font-size: 0.82rem; }

    /* Checkout on mobile */
    .sf-checkout__section { padding: 1rem; }

    /* Drawer full width on very small screens */
    .sf-drawer { width: 100vw; max-width: 100vw; }
}

/* =============================================================
   6VALLEY-STYLE REDESIGN - OVERRIDE & NEW SECTIONS
   ============================================================= */

/* ── 6valley Product Card v4 ── */
.sf-product-v4 {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius-md);
    overflow: hidden;
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
.sf-product-v4:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-md);
    border-color: var(--sf-primary);
}
.sf-product-v4__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--sf-bg);
}
.sf-product-v4__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.sf-product-v4:hover .sf-product-v4__img-wrap img { transform: scale(1.08); }
.sf-product-v4__img-placeholder,
.sf-product-v4__no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ee 100%);
    color: #c8d0da;
    font-size: 2.5rem;
}
.sf-product-v4__discount {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--sf-radius-xs);
    z-index: 2;
    direction: ltr;
}
.sf-product-v4__wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--sf-text-light);
    transition: var(--sf-transition);
    z-index: 2;
    backdrop-filter: blur(4px);
}
.sf-product-v4__wishlist:hover { color: var(--sf-accent); transform: scale(1.1); }
.sf-product-v4__wishlist.active { color: var(--sf-accent); }
.sf-product-v4__wishlist.active i::before { content: "\F415"; } /* bi-heart-fill */
.sf-product-v4__quick-add {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    padding: 1.2rem 0.8rem 0.6rem;
    transition: bottom .3s ease;
    display: flex;
    justify-content: center;
}
.sf-product-v4:hover .sf-product-v4__quick-add { bottom: 0; }
.sf-product-v4__quick-add button {
    background: var(--sf-primary);
    color: #fff;
    border: none;
    padding: 0.45rem 1.2rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sf-font);
    transition: var(--sf-transition);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sf-product-v4__quick-add button:hover { background: var(--sf-secondary); }
.sf-product-v4__body {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}
.sf-product-v4__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sf-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.5em;
    transition: color .2s;
}
.sf-product-v4__name:hover { color: var(--sf-primary); }
.sf-product-v4__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
}
.sf-product-v4__stars { color: #f5a623; display: flex; align-items: center; gap: 2px; }
.sf-product-v4__stars i { font-size: 0.7rem; }
.sf-product-v4__stars span { font-size: 0.72rem; color: var(--sf-text-muted); margin-inline-start: 4px; }
.sf-product-v4__review-count { color: var(--sf-text-muted); font-size: 0.72rem; }
.sf-product-v4__prices {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.3rem;
}
.sf-product-v4__price {
    font-weight: 800;
    font-size: 1rem;
    color: var(--sf-primary);
}
.sf-product-v4__price-old {
    font-size: 0.82rem;
    color: var(--sf-text-light);
    text-decoration: line-through;
}

/* ── Category Showcase (6valley style) ── */
.sf-cat-showcase {
    /* Container handled by sf-page-wrap when used together */
}
.sf-cat-showcase__title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-cat-showcase__title i { color: var(--sf-secondary); }
.sf-cat-showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.sf-cat-showcase__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--sf-text);
    padding: 1rem 0.5rem;
    border-radius: var(--sf-radius-md);
    transition: var(--sf-transition);
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-border-light);
}
.sf-cat-showcase__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-md);
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}
.sf-cat-showcase__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sf-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sf-primary);
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.sf-cat-showcase__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sf-cat-showcase__name { font-size: 0.82rem; font-weight: 600; text-align: center; }
.sf-cat-showcase__count { font-size: 0.72rem; color: var(--sf-text-muted); }

/* ── Flash Deals Section ── */
.sf-flash-deal {
    /* Container handled by sf-page-wrap when used together */
}
.sf-flash-deal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.sf-flash-deal__title {
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sf-text);
}
.sf-flash-deal__title h2 { font-size: inherit; font-weight: inherit; margin: 0; }
.sf-flash-deal__title i { color: var(--sf-accent); font-size: 1.3rem; }
.sf-flash-deal__subtitle {
    font-size: 0.85rem;
    color: var(--sf-accent);
    font-weight: 600;
    margin-right: 0.5rem;
}
.sf-flash-deal__right { display: flex; align-items: center; gap: 1rem; }
.sf-flash-deal__viewall {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sf-flash-deal__viewall:hover { text-decoration: underline; }

/* Countdown Timer */
.sf-countdown { display: flex; gap: 0.4rem; direction: ltr; }
.sf-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--sf-primary);
    color: #fff;
    border-radius: var(--sf-radius-sm);
    padding: 0.35rem 0.55rem;
    min-width: 48px;
}
.sf-countdown__num { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.sf-countdown__label { font-size: 0.6rem; opacity: 0.8; text-transform: uppercase; }
.sf-countdown__sep { font-size: 1.2rem; font-weight: 800; color: var(--sf-primary); align-self: center; padding-bottom: 12px; }
.sf-countdown__expired { color: var(--sf-accent); font-weight: 700; font-size: 0.9rem; }

/* ── Section Headers (6valley style) ── */
.sf-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
/* When section-header is NOT inside sf-page-wrap, it needs its own container */
.sf-section-header:not(.sf-page-wrap .sf-section-header) {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}
.sf-section-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sf-text);
}
.sf-section-header h2 i { color: var(--sf-secondary); font-size: 1.1rem; }
.sf-section-header__title {
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sf-text);
}
.sf-section-header__title i { color: var(--sf-secondary); }
.sf-section-header__viewall {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--sf-transition);
}
.sf-section-header__viewall:hover { text-decoration: underline; }
.sf-section-header__link {
    color: var(--sf-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.3rem; transition: var(--sf-transition);
    white-space: nowrap;
}
.sf-section-header__link:hover { text-decoration: underline; }

/* ── Products Grid (6valley) ── */
.sf-products-v4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
/* When NOT inside sf-page-wrap, grid needs its own container */
.sf-products-v4:not(.sf-page-wrap .sf-products-v4) {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem 1.5rem;
}

/* ── Promo Banners Row ── */
.sf-promo-banners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.sf-promo-banner {
    border-radius: var(--sf-radius-md);
    overflow: hidden;
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--sf-transition);
}
.sf-promo-banner:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-promo-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-promo-banner__overlay {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.sf-promo-banner__title { font-size: 1.1rem; font-weight: 800; }
.sf-promo-banner__desc { font-size: 0.82rem; margin-top: 0.3rem; opacity: 0.9; }

/* ── Deal of the Day ── */
.sf-deal-of-day {
    max-width: 1340px;
    margin: 0 auto 1.5rem;
    padding: 0 2rem;
}
.sf-deal-of-day__card {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: var(--sf-shadow);
    border: 1px solid var(--sf-border-light);
}
.sf-deal-of-day__img {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.sf-deal-of-day__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-deal-of-day__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-bg);
    color: var(--sf-border);
    font-size: 4rem;
}
.sf-deal-of-day__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 0.5rem 1rem;
    border-radius: var(--sf-radius-sm);
    direction: ltr;
    z-index: 2;
}
.sf-deal-of-day__info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
}
.sf-deal-of-day__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--sf-accent-light);
    color: var(--sf-accent);
    padding: 0.3rem 0.8rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    width: fit-content;
}
.sf-deal-of-day__name { font-size: 1.3rem; font-weight: 800; color: var(--sf-text); line-height: 1.3; }
.sf-deal-of-day__desc { font-size: 0.9rem; color: var(--sf-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-deal-of-day__prices { display: flex; align-items: center; gap: 0.8rem; }
.sf-deal-of-day__price { font-size: 1.6rem; font-weight: 800; color: var(--sf-primary); }
.sf-deal-of-day__price-old { font-size: 1.1rem; color: var(--sf-text-light); text-decoration: line-through; }
.sf-deal-of-day__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: var(--sf-radius-full);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--sf-transition);
    width: fit-content;
    border: none;
    cursor: pointer;
    font-family: var(--sf-font);
}
.sf-deal-of-day__cta:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); color: #fff; }

/* ── Category Page Sidebar ── */
.sf-cat-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    max-width: 1340px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;
}
.sf-cat-sidebar {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.2rem;
    box-shadow: var(--sf-shadow);
    align-self: start;
    position: sticky;
    top: 5rem;
}
.sf-cat-sidebar__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--sf-text);
}
.sf-cat-sidebar__title i { color: var(--sf-primary); }
.sf-cat-sidebar__divider { height: 1px; background: var(--sf-border); margin: 0.8rem 0; }
.sf-cat-sidebar__list { list-style: none; padding: 0; margin: 0; }
.sf-cat-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.5rem;
    border-radius: var(--sf-radius-xs);
    color: var(--sf-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--sf-transition);
    cursor: pointer;
}
.sf-cat-sidebar__item:hover { background: var(--sf-primary-light); color: var(--sf-primary); }
.sf-cat-sidebar__item.active { background: var(--sf-primary); color: #fff; font-weight: 600; }
.sf-cat-sidebar__count { font-size: 0.72rem; color: var(--sf-text-muted); background: var(--sf-bg); padding: 1px 8px; border-radius: 10px; }
.sf-cat-sidebar__item.active .sf-cat-sidebar__count { background: rgba(255,255,255,.2); color: #fff; }

/* Sidebar sections */
.sf-cat-sidebar__section { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sf-border); }
.sf-cat-sidebar__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sf-cat-sidebar__section h4 { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.8rem; color: var(--sf-text); display: flex; align-items: center; gap: 0.4rem; }
.sf-cat-sidebar__section h4 i { color: var(--sf-primary); font-size: 0.85rem; }
.sf-cat-sidebar__link {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem;
    border-radius: var(--sf-radius-xs); color: var(--sf-text); text-decoration: none;
    font-size: 0.85rem; transition: var(--sf-transition); cursor: pointer;
}
.sf-cat-sidebar__link:hover { background: color-mix(in srgb, var(--sf-primary) 8%, transparent); color: var(--sf-primary); }
.sf-cat-sidebar__link.active { background: var(--sf-primary); color: #fff; font-weight: 600; }
.sf-cat-sidebar__link small { margin-inline-start: auto; color: var(--sf-text-muted); font-size: 0.75rem; }
.sf-cat-sidebar__link.active small { color: rgba(255,255,255,.7); }
.sf-cat-sidebar__clear {
    width: 100%; margin-top: 0.5rem; padding: 0.5rem; background: none; border: 1px solid var(--sf-danger, #e74c3c);
    color: var(--sf-danger, #e74c3c); border-radius: var(--sf-radius-xs); font-size: 0.82rem;
    font-weight: 600; cursor: pointer; font-family: var(--sf-font); transition: var(--sf-transition);
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
}
.sf-cat-sidebar__clear:hover { background: var(--sf-danger, #e74c3c); color: #fff; }

/* Category main area */
.sf-cat-main { min-width: 0; }

/* Breadcrumb (shared) */
.sf-breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; font-size: 0.85rem; color: var(--sf-text-muted); flex-wrap: wrap; }
.sf-breadcrumb a { color: var(--sf-primary); text-decoration: none; transition: var(--sf-transition); font-weight: 500; }
.sf-breadcrumb a:hover { opacity: 0.7; }
.sf-breadcrumb span { color: var(--sf-text); font-weight: 600; }
.sf-breadcrumb .bi-chevron-left { font-size: 0.65rem; color: var(--sf-text-light); }

/* Category Header */
.sf-cat-header { padding: 1.5rem 0; }
.sf-cat-header__info { display: flex; align-items: center; gap: 1rem; }
.sf-cat-header__img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid var(--sf-border); }
.sf-cat-header__icon {
    width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
}
.sf-cat-header__title { font-size: 1.5rem; font-weight: 800; color: var(--sf-text); margin: 0 0 0.2rem; }
.sf-cat-header__count { color: var(--sf-text-muted); font-size: 0.85rem; margin: 0; }

/* Price Range Filter */
.sf-price-filter { display: flex; gap: 0.5rem; align-items: center; }
.sf-price-filter input {
    flex: 1; padding: 0.4rem 0.5rem; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-xs);
    font-size: 0.82rem; font-family: var(--sf-font); text-align: center; outline: none; width: 80px;
}
.sf-price-filter input:focus { border-color: var(--sf-primary); }
.sf-price-filter span { color: var(--sf-text-muted); font-size: 0.82rem; }
.sf-price-filter button {
    padding: 0.4rem 0.6rem; background: var(--sf-primary); color: #fff; border: none;
    border-radius: var(--sf-radius-xs); cursor: pointer; font-size: 0.82rem; transition: var(--sf-transition);
}
.sf-price-filter button:hover { filter: brightness(1.1); }

/* Rating Filter */
.sf-rating-filter { display: flex; flex-direction: column; gap: 0.3rem; }
.sf-rating-filter__btn {
    display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem; background: none;
    border: 1px solid transparent; border-radius: var(--sf-radius-xs); cursor: pointer;
    font-size: 0.82rem; color: #f5a623; transition: var(--sf-transition); font-family: var(--sf-font);
}
.sf-rating-filter__btn span { color: var(--sf-text-muted); font-size: 0.78rem; }
.sf-rating-filter__btn:hover { background: color-mix(in srgb, #f5a623 8%, transparent); }
.sf-rating-filter__btn.active { border-color: #f5a623; background: color-mix(in srgb, #f5a623 12%, transparent); }
.sf-rating-filter__btn i.bi-star { color: var(--sf-border); }

/* View mode toggle */
.sf-view-toggle { display: flex; gap: 0.3rem; }
.sf-view-toggle button {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius-xs);
    background: var(--sf-card-bg); color: var(--sf-text-muted); cursor: pointer;
    transition: var(--sf-transition); font-size: 1rem;
}
.sf-view-toggle button.active, .sf-view-toggle button:hover { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }

/* Products list view */
.sf-products-list { display: flex; flex-direction: column; gap: 1rem; }
.sf-products-list .sf-product-v4 {
    flex-direction: row; border-radius: var(--sf-radius);
}
.sf-products-list .sf-product-v4__img-wrap { width: 180px; min-width: 180px; aspect-ratio: 1; }
.sf-products-list .sf-product-v4__body { flex: 1; padding: 1rem; }

/* ── Product Detail Page ── */
.sf-pd-container { max-width: 1340px; margin: 0 auto; padding: 0 2rem 2rem; }
.sf-pd-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
    background: var(--sf-card-bg); border-radius: var(--sf-radius-xl); padding: 2rem;
    box-shadow: var(--sf-shadow); border: 1px solid var(--sf-border); margin-bottom: 2rem;
}
.sf-pd-gallery__main { position: relative; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-bg); }
.sf-pd-gallery__img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; border-radius: var(--sf-radius); }
.sf-pd-gallery__img--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sf-bg), #eef1f5); color: var(--sf-border); font-size: 4rem; min-height: 350px; }
.sf-pd-badge-disc { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; z-index: 2; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(231,76,60,.3); }
.sf-pd-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.sf-pd-gallery__thumbs::-webkit-scrollbar { display: none; }
.sf-pd-gallery__thumb { width: 68px; height: 68px; border-radius: var(--sf-radius-sm); object-fit: cover; border: 2px solid transparent; cursor: pointer; transition: var(--sf-transition); flex-shrink: 0; }
.sf-pd-gallery__thumb:hover { border-color: var(--sf-text-light); }
.sf-pd-gallery__thumb.active { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,73,88,.15); }
.sf-pd-info__cat { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--sf-text-muted); background: var(--sf-bg); padding: 4px 12px; border-radius: 20px; margin-bottom: 0.6rem; }
.sf-pd-info__cat i { font-size: 0.72rem; color: var(--sf-primary); }
.sf-pd-info__name { font-size: 1.6rem; font-weight: 800; color: var(--sf-text); margin: 0 0 0.6rem; line-height: 1.4; }
.sf-pd-info__rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.sf-pd-stars { display: inline-flex; gap: 2px; color: #f1c40f; font-size: 0.95rem; }
.sf-pd-info__rating-num { font-weight: 700; color: var(--sf-text); font-size: 0.95rem; }
.sf-pd-info__rating-count { color: var(--sf-text-muted); font-size: 0.82rem; }
.sf-pd-price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.sf-pd-price__current { font-size: 1.8rem; font-weight: 800; color: var(--sf-primary); letter-spacing: -0.5px; }
.sf-pd-price__old { font-size: 1rem; color: var(--sf-text-light); text-decoration: line-through; }
.sf-pd-price__save { font-size: 0.78rem; background: #fff0f0; color: var(--sf-accent, #e74c3c); padding: 3px 10px; border-radius: 20px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.sf-pd-stock { margin-bottom: 0.8rem; font-size: 0.88rem; }
.sf-pd-stock--ok { color: var(--sf-success, #27ae60); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.sf-pd-stock--out { color: var(--sf-accent, #e74c3c); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.sf-pd-stock--warn { color: var(--sf-warning, #f39c12); font-size: 0.8rem; margin-right: 6px; }
.sf-pd-divider { height: 1px; background: var(--sf-border); margin: 0.8rem 0; }
.sf-pd-variants { margin-bottom: 1rem; }
.sf-pd-variant-group { margin-bottom: 0.8rem; }
.sf-pd-variant-group label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4rem; color: var(--sf-text); }
.sf-pd-variant-opts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sf-pd-variant-btn { padding: 0.45rem 1.2rem; border: 2px solid var(--sf-border); border-radius: var(--sf-radius-sm); background: var(--sf-card-bg); cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: var(--sf-transition); font-family: var(--sf-font); color: var(--sf-text); }
.sf-pd-variant-btn:hover { border-color: var(--sf-primary); }
.sf-pd-variant-btn.active { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-pd-variant-btn small { opacity: 0.7; margin-right: 2px; }
.sf-pd-actions { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sf-pd-qty { display: flex; align-items: center; border: 2px solid var(--sf-border); border-radius: var(--sf-radius-sm); overflow: hidden; flex-shrink: 0; }
.sf-pd-qty button { width: 42px; height: 42px; border: none; background: var(--sf-bg); cursor: pointer; font-size: 1.1rem; color: var(--sf-text); transition: var(--sf-transition); }
.sf-pd-qty button:hover { background: var(--sf-primary); color: #fff; }
.sf-pd-qty input { width: 52px; height: 42px; border: none; text-align: center; font-weight: 700; font-size: 1rem; font-family: var(--sf-font); outline: none; color: var(--sf-text); -moz-appearance: textfield; }
.sf-pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sf-pd-add-btn {
    flex: 1; padding: 0.85rem; background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
    color: #fff; border: none; border-radius: var(--sf-radius-sm); font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: var(--sf-transition); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--sf-font);
}
.sf-pd-add-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); filter: brightness(1.05); }
.sf-pd-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-pd-buy-btn {
    padding: 0.85rem 1.5rem; background: var(--sf-secondary); color: #fff; border: none;
    border-radius: var(--sf-radius-sm); font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: var(--sf-transition); display: flex; align-items: center; gap: 0.5rem; font-family: var(--sf-font);
}
.sf-pd-buy-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); filter: brightness(1.05); }
.sf-pd-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-pd-wish-btn {
    width: 46px; height: 46px; border: 2px solid var(--sf-border); border-radius: var(--sf-radius-sm);
    background: var(--sf-card-bg); cursor: pointer; font-size: 1.2rem; color: var(--sf-text-muted);
    transition: var(--sf-transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sf-pd-wish-btn:hover { border-color: #e74c3c; color: #e74c3c; }
.sf-pd-wish-btn.active { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.sf-pd-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1rem; padding: 1rem; background: var(--sf-bg); border-radius: var(--sf-radius-sm); border: 1px solid var(--sf-border); }
.sf-pd-trust__item { display: flex; align-items: center; gap: 0.6rem; }
.sf-pd-trust__item i { font-size: 1.4rem; color: var(--sf-primary); flex-shrink: 0; }
.sf-pd-trust__item strong { display: block; font-size: 0.82rem; color: var(--sf-text); }
.sf-pd-trust__item small { display: block; font-size: 0.72rem; color: var(--sf-text-muted); }
.sf-pd-share { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--sf-border); font-size: 0.88rem; color: var(--sf-text-muted); }
.sf-pd-share__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sf-border); display: flex; align-items: center; justify-content: center; color: var(--sf-text); text-decoration: none; transition: var(--sf-transition); cursor: pointer; background: var(--sf-card-bg); font-size: 1rem; }
.sf-pd-share__btn:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.sf-pd-share__btn--wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.sf-pd-share__btn--tw:hover { background: #1DA1F2; color: #fff; border-color: #1DA1F2; }
.sf-pd-share__btn--copy:hover { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
/* Tabs */
.sf-pd-tabs { margin-bottom: 2rem; }
.sf-pd-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sf-border);
    margin-bottom: 0;
}
.sf-pd-tabs__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--sf-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sf-text-muted);
    cursor: pointer;
    transition: var(--sf-transition);
    position: relative;
}
.sf-pd-tabs__btn:hover { color: var(--sf-primary); }
.sf-pd-tabs__btn.active {
    color: var(--sf-primary);
    border-bottom-color: var(--sf-primary);
}
.sf-pd-tabs__btn i { font-size: 1rem; }
.sf-pd-tabs__count {
    background: var(--sf-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}
.sf-pd-tabs__panel {
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-border);
    border-top: none;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    box-shadow: var(--sf-shadow);
    animation: sfPdTabIn .3s ease;
}
@keyframes sfPdTabIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sf-pd-desc { padding: 1.5rem 2rem; }
.sf-pd-desc__body { white-space: pre-line; color: var(--sf-text-muted); line-height: 1.8; font-size: 0.92rem; }
.sf-pd-reviews { padding: 1.5rem 2rem; }
.sf-pd-reviews__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--sf-border); }
.sf-pd-reviews__header h3 { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sf-text); }
.sf-pd-reviews__header h3 i { color: #f1c40f; }
.sf-pd-reviews__count { font-size: 0.82rem; color: var(--sf-text-muted); background: var(--sf-bg); padding: 4px 12px; border-radius: 20px; font-weight: 600; }
.sf-pd-reviews__summary { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 1.5rem; padding: 1.2rem; background: var(--sf-bg); border-radius: var(--sf-radius-sm); }
.sf-pd-reviews__avg-block { text-align: center; min-width: 100px; }
.sf-pd-reviews__avg-num { font-size: 3rem; font-weight: 800; color: var(--sf-primary); line-height: 1; }
.sf-pd-reviews__avg-stars { display: flex; justify-content: center; gap: 2px; color: #f1c40f; margin: 0.3rem 0; font-size: 0.9rem; }
.sf-pd-reviews__avg-label { font-size: 0.78rem; color: var(--sf-text-muted); }
.sf-pd-reviews__bars { flex: 1; min-width: 200px; }
.sf-pd-reviews__bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 5px; font-size: 0.82rem; color: var(--sf-text-muted); }
.sf-pd-reviews__bar-row i { color: #f1c40f; font-size: 0.7rem; }
.sf-pd-reviews__bar { flex: 1; height: 8px; background: #e8edf2; border-radius: 4px; overflow: hidden; }
.sf-pd-reviews__bar-fill { height: 100%; background: linear-gradient(90deg, #f1c40f, #f39c12); border-radius: 4px; transition: width .6s ease; }
.sf-pd-reviews__bar-count { color: var(--sf-text-muted); min-width: 20px; text-align: left; font-weight: 600; }
.sf-pd-reviews__empty { text-align: center; padding: 2.5rem; color: var(--sf-text-light); }
.sf-pd-reviews__empty i { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; opacity: .5; }
.sf-pd-reviews__empty p { margin: 0; color: var(--sf-text-muted); }
.sf-pd-reviews__empty small { color: var(--sf-text-light); font-size: 0.82rem; }
.sf-pd-reviews__list { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.5rem; }
.sf-pd-review { display: flex; gap: 1rem; padding: 1rem; background: var(--sf-bg); border-radius: var(--sf-radius-sm); transition: var(--sf-transition); }
.sf-pd-review:hover { box-shadow: var(--sf-shadow); }
.sf-pd-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.sf-pd-review__body { flex: 1; }
.sf-pd-review__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.sf-pd-review__name { font-weight: 600; color: var(--sf-text); font-size: 0.9rem; }
.sf-pd-review__date { color: var(--sf-text-light); font-size: 0.78rem; }
.sf-pd-review__stars { color: #f1c40f; font-size: 0.82rem; display: inline-flex; gap: 1px; }
.sf-pd-review__comment { margin-top: 0.4rem; color: var(--sf-text-muted); font-size: 0.88rem; line-height: 1.6; }
.sf-pd-review-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--sf-border); }
.sf-pd-review-form h4 { font-size: 1.05rem; font-weight: 700; margin: 0 0 1.2rem; color: var(--sf-text); display: flex; align-items: center; gap: 0.5rem; }
.sf-pd-review-form h4 i { color: var(--sf-primary); }
.sf-pd-review-form__fields { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; }
.sf-pd-review-form__row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4rem; color: var(--sf-text); }
.sf-pd-review-form__row input,
.sf-pd-review-form__row textarea { width: 100%; padding: 0.7rem 1rem; border: 2px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 0.9rem; font-family: var(--sf-font); outline: none; color: var(--sf-text); transition: var(--sf-transition); background: var(--sf-card-bg); resize: vertical; }
.sf-pd-review-form__row input:focus,
.sf-pd-review-form__row textarea:focus { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,73,88,.08); }
.sf-pd-review-form__row input::placeholder,
.sf-pd-review-form__row textarea::placeholder { color: var(--sf-text-light); }
.sf-pd-review-form__stars { display: flex; gap: 4px; }
.sf-pd-review-form__star { background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--sf-border); transition: var(--sf-transition); padding: 2px; }
.sf-pd-review-form__star.active { color: #f1c40f; transform: scale(1.1); }
.sf-pd-review-form__star:hover { color: #f1c40f; transform: scale(1.15); }
.sf-pd-review-form__submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 2rem; background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff; border: none; border-radius: var(--sf-radius-sm); font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: var(--sf-transition); font-family: var(--sf-font); }
.sf-pd-review-form__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-pd-review-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.sf-pd-review-form__error { background: #fff5f5; color: var(--sf-accent, #e74c3c); padding: 0.6rem 1rem; border-radius: var(--sf-radius-sm); font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; border: 1px solid #ffcdd2; }
.sf-pd-review-form__success { background: #e8f5e9; color: #2e7d32; padding: 1rem; border-radius: var(--sf-radius-sm); font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid #a5d6a7; font-weight: 600; }
.sf-pd-related { margin-bottom: 2rem; }
.sf-pd-related__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.sf-pd-related__header h3 { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sf-text); }
.sf-pd-related__header h3 i { color: var(--sf-primary); }
.sf-pd-related__all { color: var(--sf-primary); text-decoration: none; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; transition: var(--sf-transition); }
.sf-pd-related__all:hover { gap: 0.6rem; }
.sf-sticky-atc__info { display: flex; flex-direction: column; gap: 2px; }
.sf-sticky-atc__name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ── Hero Banner v4 (6valley fullwidth) ── */
.sf-hero-v4 {
    max-width: 1340px;
    margin: 0 auto;
    padding: 1rem 2rem;
    position: relative;
}
.sf-hero-v4__slider {
    border-radius: var(--sf-radius);
    overflow: hidden;
    position: relative;
}
.sf-hero-v4__track {
    position: relative;
    width: 100%;
    height: 420px;
}
.sf-hero-v4__slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: var(--sf-primary, #1455ac);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
    z-index: 0;
}
.sf-hero-v4__slide.sf-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.sf-hero-v4__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Dark gradient overlay for text readability */
.sf-hero-v4__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        105deg,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.38) 45%,
        rgba(0,0,0,.10) 100%
    );
}
[dir="ltr"] .sf-hero-v4__overlay {
    background: linear-gradient(
        255deg,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.38) 45%,
        rgba(0,0,0,.10) 100%
    );
}
.sf-hero-v4__overlay--brand { background: rgba(0,0,0,.25); }
.sf-hero-v4__content {
    position: relative;
    z-index: 3;
    padding: 3rem 3.5rem;
    max-width: 680px;
    width: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sf-hero-v4__title {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    color: #fff;
}
.sf-hero-v4__subtitle {
    font-size: 1rem;
    opacity: 0.92;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    color: #fff;
    line-height: 1.6;
}
.sf-hero-v4__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #1a2332;
    border: none;
    padding: 0.72rem 1.9rem;
    border-radius: var(--sf-radius-full);
    font-weight: 700;
    text-decoration: none;
    transition: var(--sf-transition);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sf-hero-v4__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.28); color: #1a2332; background: #f8f8f8; }
.sf-hero-v4__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    padding: 6px 10px;
    background: rgba(0,0,0,.22);
    border-radius: 20px;
    backdrop-filter: blur(6px);
}
.sf-hero-v4__dot {
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.55);
    border: 2px solid rgba(255,255,255,.5);
    cursor: pointer;
    transition: all 0.35s ease;
    padding: 0;
}
.sf-hero-v4__dot.active {
    background: #fff;
    width: 28px;
    border-color: rgba(255,255,255,.9);
    transform: none;
}

/* ── Hero Progress Bar ── */
.sf-hero-v4__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: rgba(255,255,255,.85);
    border-radius: 0 2px 2px 0;
    z-index: 10;
    pointer-events: none;
}
.sf-hero-v4__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--sf-text);
    cursor: pointer;
    z-index: 10;
    transition: var(--sf-transition);
    box-shadow: var(--sf-shadow);
}
.sf-hero-v4__nav:hover { background: #fff; box-shadow: var(--sf-shadow-md); }
.sf-hero-v4__prev { left: 12px; }
.sf-hero-v4__next { right: 12px; }

/* ── All Products Filter Bar (6valley) ── */
.sf-filter-bar-v4 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius-sm);
}
.sf-filter-bar-v4__count { font-size: 0.9rem; font-weight: 700; color: var(--sf-text); }
.sf-filter-bar-v4__count span { color: var(--sf-primary); }
.sf-filter-bar-v4__spacer { flex: 1; }
.sf-filter-bar-v4__sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sf-filter-bar-v4__sort label { font-size: 0.82rem; color: var(--sf-text-muted); white-space: nowrap; }
.sf-filter-bar-v4__sort select,
.sf-filter-bar-v4__controls select {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-xs);
    font-size: 0.82rem;
    font-family: var(--sf-font);
    background: var(--sf-card-bg);
    outline: none;
    cursor: pointer;
    color: var(--sf-text);
}

/* ── 6valley Responsive Overrides ── */
@media(max-width:1024px) {
    .sf-cat-layout { grid-template-columns: 1fr; }
    .sf-cat-sidebar { position: static; }
    .sf-products-v4 { grid-template-columns: repeat(3, 1fr); }
    .sf-deal-of-day, .sf-deal-of-day__card { grid-template-columns: 1fr; }
    .sf-deal-of-day__img { min-height: 200px; }
    .sf-hero-v4__content { max-width: 70%; }
}
@media(max-width:768px) {
    .sf-products-v4 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .sf-cat-showcase__grid { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
    .sf-flash-deal__header { flex-direction: column; align-items: flex-start; }
    .sf-page-wrap { padding: 0 1rem 1rem; }
    .sf-hero-v4 { padding: 0.5rem 1rem; }
    .sf-hero-v4__track  { height: 260px; }
    .sf-hero-v4__content { max-width: 100%; padding: 1.5rem 1.8rem; }
    .sf-hero-v4__title { font-size: 1.35rem; }
    .sf-hero-v4__subtitle { font-size: 0.88rem; margin-bottom: 1rem; }
    .sf-hero-v4__nav { display: none; }
    .sf-promo-banners { grid-template-columns: 1fr; }
    .sf-promo-banner { height: 140px; }
    .sf-deal-of-day { padding: 1rem; }
    .sf-deal-of-day, .sf-deal-of-day__card { grid-template-columns: 1fr; }
    .sf-deal-of-day__img { min-height: 200px; }
    .sf-deal-of-day__info { padding: 1.2rem; }
    .sf-deal-of-day__name { font-size: 1.1rem; }
    .sf-deal-of-day__price { font-size: 1.3rem; }
    .sf-filter-bar-v4 { padding: 0.5rem 1rem; }
    .sf-cat-layout { padding: 0.5rem 1rem 1rem; }
    .sf-countdown__unit { min-width: 40px; padding: 0.25rem 0.4rem; }
    .sf-countdown__num { font-size: 1rem; }
    /* Product detail responsive */
    .sf-pd-container { padding: 0 1rem 1.5rem; }
    .sf-pd-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.2rem; }
    .sf-pd-info__name { font-size: 1.3rem; }
    .sf-pd-price__current { font-size: 1.4rem; }
    .sf-pd-actions { flex-direction: column; }
    .sf-pd-add-btn { width: 100%; }
    .sf-pd-buy-btn { width: 100%; justify-content: center; }
    .sf-pd-trust { grid-template-columns: 1fr; }
    .sf-pd-share { flex-wrap: wrap; }
    .sf-pd-reviews { padding: 1rem; }
    .sf-pd-reviews__summary { flex-direction: column; padding: 1rem; }
    .sf-pd-desc { padding: 1rem; }
    .sf-pd-tabs__btn { padding: 0.7rem 1rem; font-size: 0.85rem; }
    .sf-pd-review-form__fields { max-width: 100%; }
    /* Best selling / Top rated side by side -> stack */
    .sf-side-by-side { grid-template-columns: 1fr !important; }
}
@media(max-width:480px) {
    .sf-cat-showcase__grid { grid-template-columns: repeat(3, 1fr); }
    .sf-cat-showcase__icon { width: 48px; height: 48px; font-size: 1.2rem; }
    .sf-cat-showcase__name { font-size: 0.72rem; }
    .sf-hero-v4__slider { border-radius: var(--sf-radius-sm); }
    .sf-hero-v4__track  { height: 200px; }
    .sf-hero-v4__content { max-width: 100%; padding: 1rem 1.2rem; }
    .sf-hero-v4__title { font-size: 1.1rem; }
    .sf-hero-v4__subtitle { font-size: 0.82rem; }
    .sf-product-v4__quick-add { display: none; }
}

/* ── Side-by-Side Layout (Best Selling / Top Rated) ── */
.sf-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.sf-side-by-side > div {
    background: var(--sf-card-bg);
    border-radius: var(--sf-radius);
    padding: 1.2rem;
    border: 1px solid var(--sf-border-light);
    box-shadow: var(--sf-shadow);
}

/* ── Hero v4 Aliases (HTML class ↔ CSS class) ── */
.sf-hero-v4__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hero-v4__cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #fff; color: #1a2332;
    padding: 0.72rem 1.9rem;
    border-radius: var(--sf-radius-full); font-weight: 700; text-decoration: none;
    transition: var(--sf-transition); font-size: 0.95rem;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sf-hero-v4__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.28); color: #1a2332; background: #f8f8f8; }
.sf-hero-v4__slide--brand {
    background: linear-gradient(135deg, var(--sf-primary) 0%, #0d3b78 50%, #1a5276 100%);
    justify-content: center;
}
.sf-hero-v4__slide--brand .sf-hero-v4__content {
    text-align: center;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Product v4 Aliases ── */
.sf-product-v4__badge {
    position: absolute; top: 8px; left: 8px; background: var(--sf-accent, #e74c3c); color: #fff;
    font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.5rem;
    border-radius: var(--sf-radius-xs); z-index: 2; direction: ltr;
}
.sf-product-v4__wish {
    position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: none; display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 1rem; color: var(--sf-text-light);
    transition: var(--sf-transition); z-index: 2; backdrop-filter: blur(4px);
}
.sf-product-v4__wish:hover { color: var(--sf-accent); transform: scale(1.1); }
.sf-product-v4__wish.active { color: var(--sf-accent); }
.sf-product-v4__wish.active i::before { content: "\F415"; }
.sf-product-v4__quick {
    position: absolute; bottom: -50px; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    padding: 1.2rem 0.8rem 0.6rem; transition: bottom .3s ease; display: flex; justify-content: center;
}
.sf-product-v4:hover .sf-product-v4__quick { bottom: 0; }
.sf-product-v4__quick button {
    background: var(--sf-primary); color: #fff; border: none; padding: 0.45rem 1.2rem;
    border-radius: var(--sf-radius-full); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: var(--sf-font); transition: var(--sf-transition);
    display: flex; align-items: center; gap: 0.3rem;
}
.sf-product-v4__quick button:hover { background: var(--sf-secondary); }
.sf-product-v4__cat {
    font-size: 0.72rem; color: var(--sf-text-muted); margin-bottom: 0.1rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sf-product-v4__price--sale { font-weight: 800; font-size: 1rem; color: var(--sf-primary); }
.sf-product-v4__price--old { font-size: 0.82rem; color: var(--sf-text-light); text-decoration: line-through; }

/* ── Promo Banners Aliases (HTML uses plural sf-promo-banners__*) ── */
.sf-promo-banners__item {
    border-radius: var(--sf-radius-md); overflow: hidden; position: relative; height: 180px;
    display: flex; align-items: center; cursor: pointer; transition: var(--sf-transition);
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary));
}
.sf-promo-banners__item:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-promo-banners__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-promo-banners__text {
    position: relative; z-index: 1; padding: 1.5rem; color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.sf-promo-banners__text h4 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.3rem; }
.sf-promo-banners__text p { font-size: 0.82rem; margin: 0; opacity: 0.9; }
.sf-promo-banners__icon {
    position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%);
    font-size: 3rem; color: rgba(255,255,255,.15); z-index: 0;
}
[dir="rtl"] .sf-promo-banners__icon { right: auto; left: 1.5rem; }

/* ── Filter Bar v4 Missing Sub-classes ── */
.sf-filter-bar-v4__search {
    display: flex; align-items: center; gap: 0.4rem; flex: 1; max-width: 320px;
    background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
    padding: 0.4rem 0.8rem;
}
.sf-filter-bar-v4__search i { color: var(--sf-text-muted); font-size: 0.9rem; }
.sf-filter-bar-v4__search input {
    border: none; outline: none; background: transparent; font-size: 0.85rem;
    font-family: var(--sf-font); width: 100%; color: var(--sf-text);
}
.sf-filter-bar-v4__search input::placeholder { color: var(--sf-text-muted); }
.sf-filter-bar-v4__clear {
    background: none; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
    padding: 0.35rem 0.8rem; font-size: 0.82rem; color: var(--sf-text-muted);
    cursor: pointer; font-family: var(--sf-font); transition: var(--sf-transition);
    display: flex; align-items: center; gap: 0.3rem;
}
.sf-filter-bar-v4__clear:hover { color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-filter-bar-v4__controls {
    display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto;
}

/* ── Deal of Day Missing Sub-classes ── */
.sf-deal-of-day__img-empty {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--sf-bg); color: var(--sf-border); font-size: 4rem;
}
.sf-deal-of-day__price--current { font-size: 1.6rem; font-weight: 800; color: var(--sf-primary); }
.sf-deal-of-day__price--old { font-size: 1.1rem; color: var(--sf-text-light); text-decoration: line-through; }
.sf-deal-of-day__discount {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--sf-accent-light, #fff5f5); color: var(--sf-accent, #e74c3c);
    padding: 0.2rem 0.6rem; border-radius: var(--sf-radius-xs);
    font-size: 0.82rem; font-weight: 700; direction: ltr;
}
.sf-deal-of-day__actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sf-deal-of-day__btn {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.4rem;
    border-radius: var(--sf-radius-full); font-weight: 700; font-size: 0.9rem;
    text-decoration: none; transition: var(--sf-transition); border: none;
    cursor: pointer; font-family: var(--sf-font);
}
.sf-deal-of-day__btn:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-deal-of-day__btn--primary {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)); color: #fff;
}
.sf-deal-of-day__btn--primary:hover { color: #fff; }
.sf-deal-of-day__btn--cart {
    background: var(--sf-card-bg); color: var(--sf-primary);
    border: 2px solid var(--sf-primary);
}
.sf-deal-of-day__btn--cart:hover { background: var(--sf-primary); color: #fff; }

/* ── Countdown Individual Unit Spans ── */
.sf-countdown__days,
.sf-countdown__hours,
.sf-countdown__minutes,
.sf-countdown__seconds {
    font-size: 1.3rem; font-weight: 800; display: block; line-height: 1;
}

/* ── Star Rating Component ── */
.sf-stars { display: inline-flex; gap: 1px; color: #f5a623; }
.sf-stars i { font-size: 0.78rem; }
.sf-stars--sm i { font-size: 0.68rem; }
.sf-stars--lg i { font-size: 1rem; }

/* ── Quick-add hide on mobile (alias) ── */
@media(max-width:480px) {
    .sf-product-v4__quick { display: none; }
}
@media(max-width:768px) {
    .sf-promo-banners__item { height: 140px; }
    .sf-promo-banners__icon { display: none; }
    .sf-filter-bar-v4__search { max-width: 100%; }
    .sf-filter-bar-v4__controls { flex-wrap: wrap; }
}

/* =============================================
   v3 - REDUCED MOTION SUPPORT
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .sf-anim-ready .sf-animate-in { opacity: 1; transform: none; filter: none; }
}

/* =============================================
   v3 - PRINT STYLES
   ============================================= */
@media print {
    .sf-hd, .sf-footer, .sf-whatsapp-fab, .sf-back-top,
    .sf-bottom-nav, .sf-announce, .sf-newsletter, .sf-drawer-overlay,
    .sf-drawer, .sf-toast-container { display: none !important; }
    .sf-layout { padding-bottom: 0; }
    .sf-product__add, .sf-summary__btn { display: none; }
}