/* ============================================
   SHOPIUM STOREFRONT — Design System v2
   Consolidated CSS (no inline styles needed)
   ============================================ */

/* ── Design Tokens ── */
:root {
    /* Brand */
    --sf-primary: #1a8a5c;
    --sf-primary-hover: #15724c;
    --sf-primary-light: #e8f5ef;
    --sf-primary-dark: #0f5c3a;
    --sf-cta: #f07a1f;
    --sf-cta-hover: #d9690f;
    --sf-cta-light: #fef3e8;

    /* Semantic */
    --sf-danger: #e53e3e;
    --sf-danger-hover: #c53030;
    --sf-success: #10b981;
    --sf-success-light: #ecfdf5;
    --sf-success-border: #a7f3d0;
    --sf-warning: #f59e0b;
    --sf-info: #3b82f6;
    --sf-discount: #e53e3e;

    /* Surfaces */
    --sf-bg: #ffffff;
    --sf-bg-secondary: #f7f8fa;
    --sf-bg-tertiary: #f0f2f5;
    --sf-text: #1a1a2e;
    --sf-text-secondary: #4a4a5a;
    --sf-text-muted: #8a8a9a;
    --sf-border: #e5e7eb;
    --sf-border-light: #f0f0f0;

    /* Cards */
    --sf-card-bg: #ffffff;
    --sf-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --sf-card-shadow-hover: 0 10px 28px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);

    /* Layout */
    --sf-header-bg: #ffffff;
    --sf-header-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --sf-topbar-bg: #1a1a2e;
    --sf-topbar-text: #d0d0d8;
    --sf-footer-bg: #1a1a2e;
    --sf-footer-text: #b0b0c0;

    /* Radii */
    --sf-radius: 10px;
    --sf-radius-sm: 6px;
    --sf-radius-md: 8px;
    --sf-radius-lg: 14px;
    --sf-radius-xl: 18px;
    --sf-radius-full: 999px;

    /* Misc */
    --sf-transition: 0.2s ease;
    --sf-container: 1320px;
    --sf-font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Dark Mode ── */
html.dark {
    --sf-primary: #2ecc71;
    --sf-primary-hover: #27ae60;
    --sf-primary-light: #1a3a2a;
    --sf-primary-dark: #4ae88a;
    --sf-cta: #f5923e;
    --sf-cta-hover: #e8802a;
    --sf-cta-light: #3a2a1a;
    --sf-bg: #0f0f1a;
    --sf-bg-secondary: #1a1a2e;
    --sf-bg-tertiary: #22223a;
    --sf-text: #e8e8f0;
    --sf-text-secondary: #b0b0c0;
    --sf-text-muted: #707088;
    --sf-border: #2a2a40;
    --sf-border-light: #1f1f35;
    --sf-card-bg: #1a1a2e;
    --sf-card-shadow: 0 1px 4px rgba(0,0,0,0.2);
    --sf-card-shadow-hover: 0 8px 24px rgba(0,0,0,0.3);
    --sf-header-bg: #1a1a2e;
    --sf-header-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --sf-topbar-bg: #0a0a14;
    --sf-topbar-text: #909098;
    --sf-footer-bg: #0a0a14;
    --sf-footer-text: #707088;
    --sf-success-light: rgba(16,185,129,0.1);
    --sf-success-border: rgba(16,185,129,0.3);
}

/* ── Reset & Base ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: var(--sf-font); color: var(--sf-text); background: var(--sf-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
a { color: var(--sf-primary); text-decoration: none; transition: color var(--sf-transition) }
a:hover { color: var(--sf-primary-hover) }
img { max-width: 100%; height: auto; display: block }
[v-cloak] { display: none !important }
input, button, select, textarea { font-family: inherit; font-size: inherit }
button { cursor: pointer; border: none; background: none }
ul, ol { list-style: none }

/* ── Container ── */
.sf-container { max-width: var(--sf-container); margin: 0 auto; padding: 0 20px }
@media (max-width: 640px) { .sf-container { padding: 0 16px } }

/* ── Utilities ── */
.mt-2 { margin-top: 8px } .mt-3 { margin-top: 12px } .mt-4 { margin-top: 16px } .mt-6 { margin-top: 24px }
.mb-4 { margin-bottom: 16px } .mb-6 { margin-bottom: 24px } .ml-auto { margin-left: auto }
.text-center { text-align: center }
.sf-hide-mobile { display: block } .sf-show-mobile { display: none }
@media (max-width: 768px) { .sf-hide-mobile { display: none !important } .sf-show-mobile { display: block !important } }

/* ── Skeleton Loading ── */
.sf-skeleton {
    background: linear-gradient(90deg, var(--sf-bg-secondary) 25%, var(--sf-bg-tertiary) 50%, var(--sf-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: sfShimmer 1.5s ease-in-out infinite;
    border-radius: var(--sf-radius-md);
}
@keyframes sfShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.sf-skeleton-card { border-radius: var(--sf-radius-lg); overflow: hidden }
.sf-skeleton-img { width: 100%; aspect-ratio: 1 }
.sf-skeleton-text { height: 14px; margin: 12px 14px 8px; width: 70% }
.sf-skeleton-price { height: 18px; margin: 0 14px 14px; width: 40% }

/* ── Buttons ── */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--sf-radius); font-weight: 600; font-size: .9rem;
    transition: all var(--sf-transition); border: none; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.sf-btn-primary { background: var(--sf-primary); color: #fff }
.sf-btn-primary:hover { background: var(--sf-primary-hover); color: #fff }
.sf-btn-cta { background: var(--sf-cta); color: #fff }
.sf-btn-cta:hover { background: var(--sf-cta-hover); color: #fff }
.sf-btn-outline { background: transparent; border: 1.5px solid var(--sf-primary); color: var(--sf-primary) }
.sf-btn-outline:hover { background: var(--sf-primary); color: #fff }
.sf-btn-outline-cta { background: transparent; border: 1.5px solid var(--sf-cta); color: var(--sf-cta) }
.sf-btn-outline-cta:hover { background: var(--sf-cta); color: #fff }
.sf-btn-danger { background: var(--sf-danger); color: #fff }
.sf-btn-danger:hover { background: var(--sf-danger-hover); color: #fff }
.sf-btn-ghost { background: transparent; color: var(--sf-text-secondary) }
.sf-btn-ghost:hover { background: var(--sf-bg-secondary) }
.sf-btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--sf-radius-lg) }
.sf-btn-sm { padding: 6px 14px; font-size: .8rem }
.sf-btn-block { width: 100% }
.sf-btn:disabled { opacity: .5; cursor: not-allowed }

/* ── Form Inputs ── */
.sf-input, .sf-select, .sf-textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text); font-size: .9rem;
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition); outline: none;
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.1) }
.sf-input::placeholder { color: var(--sf-text-muted) }
.sf-textarea { resize: vertical; min-height: 80px }
.sf-label { display: block; font-size: .85rem; font-weight: 600; color: var(--sf-text); margin-bottom: 6px }
.sf-form-group { margin-bottom: 16px }
.sf-form-error { font-size: .8rem; color: var(--sf-danger); margin-top: 4px }
.sf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 640px) { .sf-form-row { grid-template-columns: 1fr } }

/* ── Top Bar ── */
.sf-topbar { background: var(--sf-topbar-bg); color: var(--sf-topbar-text); font-size: 12px; padding: 6px 0 }
.sf-topbar-inner { display: flex; justify-content: space-between; align-items: center }
.sf-topbar-left { display: flex; align-items: center; gap: 12px }
.sf-topbar-right { display: flex; align-items: center; gap: 16px }
.sf-topbar-right a { color: var(--sf-topbar-text); text-decoration: none; font-size: 12px }
.sf-topbar-right a:hover { color: #fff }
.sf-topbar-phone { font-weight: 600; color: #fff }
.sf-topbar-divider { width: 1px; height: 14px; background: rgba(255,255,255,.2) }

/* ── Header ── */
.sf-header { background: var(--sf-header-bg); box-shadow: var(--sf-header-shadow); position: sticky; top: 0; z-index: 100; transition: box-shadow var(--sf-transition) }
.sf-header.sf-header-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.1) }
.sf-header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 0; min-height: 64px }
.sf-logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.2 }
.sf-logo:hover { text-decoration: none }
.sf-logo-text { font-size: 1.5rem; font-weight: 900; color: var(--sf-primary); letter-spacing: -.5px }
.sf-logo-sub { font-size: .65rem; color: var(--sf-text-muted); letter-spacing: .5px; font-weight: 500 }
.sf-header-search { flex: 1; max-width: 560px; position: relative }
.sf-header-search-input {
    width: 100%; padding: 10px 44px 10px 16px; border: 1.5px solid var(--sf-border);
    border-radius: var(--sf-radius-full); background: var(--sf-bg-secondary); font-size: .9rem;
    color: var(--sf-text); outline: none; transition: border-color var(--sf-transition), background var(--sf-transition);
}
.sf-header-search-input:focus { border-color: var(--sf-primary); background: var(--sf-bg) }
.sf-header-search-input::placeholder { color: var(--sf-text-muted) }
.sf-header-search-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; background: var(--sf-primary); color: #fff;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background var(--sf-transition);
}
.sf-header-search-btn:hover { background: var(--sf-primary-hover) }
.sf-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto }
.sf-header-action {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--sf-text-secondary); transition: all var(--sf-transition);
    background: transparent; border: none; cursor: pointer; text-decoration: none;
}
.sf-header-action:hover { background: var(--sf-bg-secondary); color: var(--sf-primary) }
.sf-header-action-badge {
    position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--sf-cta); color: #fff; font-size: 10px; font-weight: 700;
    border-radius: var(--sf-radius-full); display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sf-theme-toggle { font-size: 18px }
.sf-icon-sun, .sf-icon-moon { display: none }
html:not(.dark) .sf-icon-sun { display: block }
html.dark .sf-icon-moon { display: block }
.sf-mobile-toggle {
    display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
    color: var(--sf-text); cursor: pointer;
}
@media (max-width: 768px) { .sf-mobile-toggle { display: flex } .sf-header-search { display: none } .sf-header-inner { gap: 12px } }

/* ── Category Nav Bar ── */
.sf-catnav { background: var(--sf-bg); border-bottom: 1px solid var(--sf-border) }
.sf-catnav-inner { display: flex; align-items: center; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch }
.sf-catnav-inner::-webkit-scrollbar { display: none }
.sf-catnav-link { padding: 10px 16px; font-size: .85rem; font-weight: 500; white-space: nowrap; color: var(--sf-text-secondary); text-decoration: none; position: relative; transition: color var(--sf-transition) }
.sf-catnav-link:hover { color: var(--sf-primary) }
.sf-catnav-item { position: relative }
.sf-mega-menu {
    display: none; position: absolute; top: 100%; left: 0; background: var(--sf-card-bg);
    border: 1px solid var(--sf-border); border-radius: 0 0 var(--sf-radius-lg) var(--sf-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: 20px; min-width: 300px; z-index: 110;
}
.sf-catnav-item:hover .sf-mega-menu { display: block }
.sf-mega-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.sf-mega-menu-link { display: block; padding: 6px 10px; font-size: .85rem; color: var(--sf-text-secondary); text-decoration: none; border-radius: var(--sf-radius-sm); transition: all var(--sf-transition) }
.sf-mega-menu-link:hover { background: var(--sf-primary-light); color: var(--sf-primary) }
@media (max-width: 768px) { .sf-catnav { display: none } }

/* ── Mobile Menu ── */
.sf-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; opacity: 0; transition: opacity .3s }
.sf-mobile-overlay.active { display: block; opacity: 1 }
.sf-mobile-menu {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; background: var(--sf-bg); z-index: 201;
    overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease; box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.sf-mobile-menu.active { transform: translateX(0) }
.sf-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--sf-border) }
.sf-mobile-menu-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); cursor: pointer; border-radius: 50% }
.sf-mobile-menu-close:hover { background: var(--sf-bg-secondary) }
.sf-mobile-menu-body { padding: 12px 0 }
.sf-mobile-menu-link {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 20px;
    font-size: .9rem; color: var(--sf-text); text-decoration: none; transition: background var(--sf-transition);
}
.sf-mobile-menu-link:hover { background: var(--sf-bg-secondary); color: var(--sf-primary) }
.sf-mobile-menu-divider { height: 1px; background: var(--sf-border); margin: 8px 20px }
.sf-mobile-sub-link { display: block; padding: 8px 20px 8px 40px; font-size: .85rem; color: var(--sf-text-muted); text-decoration: none }
.sf-mobile-sub-link:hover { color: var(--sf-primary) }
.sf-mobile-search { padding: 12px 20px }
.sf-mobile-search .sf-input { border-radius: var(--sf-radius-full) }

/* ── Search Overlay ── */
.sf-search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 210; padding: 80px 20px 20px }
.sf-search-overlay.active { display: flex; flex-direction: column; align-items: center }
.sf-search-overlay-inner { width: 100%; max-width: 600px; background: var(--sf-bg); border-radius: var(--sf-radius-xl); padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.2) }
.sf-search-overlay-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer }
.sf-search-overlay-content { width: 100%; max-width: 600px; background: var(--sf-bg); border-radius: var(--sf-radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden }
.sf-search-overlay-header { padding: 16px 20px; border-bottom: 1px solid var(--sf-border); display: flex; align-items: center; gap: 12px }
.sf-search-overlay-body { padding: 16px 20px; max-height: 60vh; overflow-y: auto }
.sf-search-form { flex: 1; display: flex; align-items: center; gap: 8px; position: relative }
.sf-search-icon { color: var(--sf-text-muted); flex-shrink: 0 }
.sf-search-input { flex: 1; border: none; outline: none; font-size: .95rem; background: transparent; color: var(--sf-text); padding: 6px 0 }
.sf-search-input::placeholder { color: var(--sf-text-muted) }
.sf-search-clear { background: none; border: none; color: var(--sf-text-muted); font-size: 1.2rem; cursor: pointer; padding: 4px }
.sf-search-close-btn { background: none; border: none; font-size: 1.5rem; color: var(--sf-text-muted); cursor: pointer; padding: 4px; line-height: 1 }
.sf-search-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--sf-text-muted); font-size: .9rem }
.sf-search-no-results { text-align: center; padding: 24px; color: var(--sf-text-muted); font-size: .9rem }
.sf-search-results { }
.sf-search-section { margin-bottom: 16px }
.sf-search-section:last-child { margin-bottom: 0 }
.sf-search-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-text-muted); margin-bottom: 8px }
.sf-search-category-item { display: block; padding: 8px 12px; font-size: .9rem; color: var(--sf-text-secondary); text-decoration: none; border-radius: var(--sf-radius-sm); transition: background var(--sf-transition) }
.sf-search-category-item:hover { background: var(--sf-bg-secondary); color: var(--sf-primary) }
.sf-search-product-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--sf-radius); text-decoration: none; transition: background var(--sf-transition) }
.sf-search-product-item:hover { background: var(--sf-bg-secondary) }
.sf-search-product-img { width: 48px; height: 48px; border-radius: var(--sf-radius-sm); object-fit: cover; background: var(--sf-bg-secondary); flex-shrink: 0 }
.sf-search-product-info { flex: 1; min-width: 0 }
.sf-search-product-name { font-size: .875rem; font-weight: 500; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sf-search-product-price { font-size: .85rem; font-weight: 700; color: var(--sf-primary); margin-top: 2px }
.sf-search-all-results { text-align: center; padding: 12px 0; border-top: 1px solid var(--sf-border); margin-top: 12px }
.sf-search-popular { }
.sf-search-popular-list { display: flex; flex-wrap: wrap; gap: 8px }
.sf-search-popular-item { padding: 6px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-full); font-size: .85rem; color: var(--sf-text-secondary); background: none; cursor: pointer; transition: all var(--sf-transition) }
.sf-search-popular-item:hover { border-color: var(--sf-primary); color: var(--sf-primary) }
.sf-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: 0 0 var(--sf-radius-lg) var(--sf-radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 120; max-height: 400px; overflow-y: auto; margin-top: 4px }

/* ── Cart Drawer ── */
.sf-cart-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; opacity: 0; transition: opacity .3s }
.sf-cart-drawer-overlay.active { display: block; opacity: 1 }
.sf-cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw;
    background: var(--sf-bg); z-index: 201; overflow-y: auto; transform: translateX(100%);
    transition: transform .3s ease; box-shadow: -4px 0 20px rgba(0,0,0,.15); display: flex; flex-direction: column;
}
.sf-cart-drawer.active { transform: translateX(0) }
.sf-cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--sf-border); font-weight: 700; font-size: 1.1rem }
.sf-cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px }
.sf-cart-drawer-footer { padding: 16px 20px; border-top: 1px solid var(--sf-border) }
.sf-cart-drawer-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sf-border-light) }
.sf-cart-drawer-item-img { width: 64px; height: 64px; border-radius: var(--sf-radius); object-fit: cover; background: var(--sf-bg-secondary); flex-shrink: 0 }
.sf-cart-drawer-item-info { flex: 1; min-width: 0 }
.sf-cart-drawer-item-name { font-size: .85rem; font-weight: 500; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px }
.sf-cart-drawer-item-price { font-size: .9rem; font-weight: 700; color: var(--sf-text) }
.sf-cart-drawer-item-qty { font-size: .8rem; color: var(--sf-text-muted) }
.sf-cart-drawer-item-meta { font-size: .8rem; color: var(--sf-text-muted) }
.sf-cart-drawer-item-remove { color: var(--sf-text-muted); cursor: pointer; align-self: flex-start; padding: 4px }
.sf-cart-drawer-item-remove:hover { color: var(--sf-danger) }
.sf-cart-drawer-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 700; margin-bottom: 12px }
.sf-cart-drawer-empty { text-align: center; padding: 40px 20px; color: var(--sf-text-muted) }

/* ── Main Content ── */
.sf-main { padding-top: 24px; padding-bottom: 48px; min-height: 60vh }
.sf-section { padding: 40px 0 }
.sf-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px }
.sf-section-title { font-size: 1.35rem; font-weight: 800; color: var(--sf-text); margin: 0 }
.sf-section-link { font-size: .9rem; font-weight: 600; color: var(--sf-primary); text-decoration: none; white-space: nowrap }
.sf-section-link:hover { color: var(--sf-primary-hover) }

/* ── Hero Section ── */
.sf-hero { background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%); color: #fff; padding: 60px 0; position: relative; overflow: hidden }
.sf-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.1), transparent 50%) }
.sf-hero-content { position: relative; z-index: 1 }
.sf-hero h1 { font-size: 2.2rem; font-weight: 900; margin-bottom: 12px; line-height: 1.2 }
.sf-hero p { font-size: 1.1rem; opacity: .9; margin-bottom: 24px; line-height: 1.5 }
@media (max-width: 768px) { .sf-hero { padding: 40px 0 } .sf-hero h1 { font-size: 1.6rem } .sf-hero p { font-size: .95rem } }

/* ── Category Scroll ── */
.sf-category-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory }
.sf-category-scroll::-webkit-scrollbar { display: none }
.sf-category-scroll-item { flex-shrink: 0; text-align: center; text-decoration: none; color: var(--sf-text); scroll-snap-align: start; width: 90px; transition: transform var(--sf-transition) }
.sf-category-scroll-item:hover { transform: translateY(-3px) }
.sf-category-scroll-img {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px;
    border: 2px solid var(--sf-border); background: var(--sf-bg-secondary); transition: border-color var(--sf-transition);
}
.sf-category-scroll-item:hover .sf-category-scroll-img { border-color: var(--sf-primary) }
.sf-category-scroll-img img { width: 100%; height: 100%; object-fit: cover }
.sf-category-scroll-name { font-size: .78rem; font-weight: 500; color: var(--sf-text-secondary); display: block; line-height: 1.3 }

/* ── Product Grid ── */
.sf-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
@media (max-width: 1024px) { .sf-product-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 768px) { .sf-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px } }

/* ── Product Card ── */
.sf-product-card {
    background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
    overflow: hidden; position: relative; box-shadow: var(--sf-card-shadow);
    transition: transform var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-product-card:hover { transform: translateY(-4px); box-shadow: var(--sf-card-shadow-hover) }
.sf-product-card-media { display: block; aspect-ratio: 1/1; background: var(--sf-bg-secondary); position: relative; overflow: hidden }
.sf-product-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease }
.sf-product-card:hover .sf-product-card-img { transform: scale(1.04) }
.sf-product-card-img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--sf-bg-secondary); color: var(--sf-text-muted); aspect-ratio: 1;
}
.sf-product-card-badge {
    position: absolute; top: 12px; left: 12px; background: var(--sf-discount); color: #fff;
    font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: var(--sf-radius-full);
    z-index: 2; line-height: 1;
}
.sf-product-card-badge-sale { background: var(--sf-danger) }
.sf-product-card-badge-new { background: var(--sf-success); top: auto; bottom: 12px; left: 12px }
.sf-product-card-badge + .sf-product-card-badge { top: auto; bottom: 12px }
.sf-product-card-body { padding: 14px 14px 16px }
.sf-product-card-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 0 }
.sf-product-card-rating svg { flex-shrink: 0 }
.sf-product-card-rating-count { font-size: .75rem; color: var(--sf-text-muted); margin-left: 2px }
.sf-product-card-name {
    font-size: .95rem; font-weight: 700; color: var(--sf-text); margin: 0 0 8px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
}
.sf-product-card-name a { color: inherit; text-decoration: none }
.sf-product-card-name a:hover { color: var(--sf-primary) }
.sf-product-card-prices { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.sf-product-card-price { font-size: 1.1rem; font-weight: 800; color: var(--sf-primary) }
.sf-product-card-old-price { font-size: .85rem; color: var(--sf-text-muted); text-decoration: line-through }
.sf-product-card-discount {
    font-size: .75rem; font-weight: 700; color: var(--sf-danger); background: rgba(229,62,62,.08);
    padding: 2px 6px; border-radius: var(--sf-radius-sm); line-height: 1.3;
}
.sf-product-card-actions { display: flex; gap: 8px; padding: 0 14px 14px }
.sf-product-card-cart-btn {
    flex: 1; padding: 9px 12px; border: none; border-radius: var(--sf-radius);
    cursor: pointer; font-size: .85rem; font-weight: 700; text-align: center;
    transition: background var(--sf-transition), color var(--sf-transition);
    background: var(--sf-primary); color: #fff;
}
.sf-product-card-cart-btn:hover { background: var(--sf-primary-hover) }
.sf-product-card-cart-btn:disabled { opacity: .5; cursor: not-allowed }
.sf-product-card-cart-btn.sf-btn-cta { background: var(--sf-cta) }
.sf-product-card-cart-btn.sf-btn-cta:hover { background: var(--sf-cta-hover) }
.sf-product-card-cart-btn.sf-btn-outline { background: transparent; border: 1.5px solid var(--sf-primary); color: var(--sf-primary) }
.sf-product-card-cart-btn.sf-btn-outline:hover { background: var(--sf-primary); color: #fff }
.sf-product-card-wish-btn {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
    color: var(--sf-text-muted); cursor: pointer; transition: all var(--sf-transition); flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.sf-product-card-wish-btn:hover, .sf-product-card-wish-btn.active { color: var(--sf-danger); border-color: var(--sf-danger) }
.sf-product-card-wish-btn.active svg { fill: var(--sf-danger) }
.sf-product-card-oos { opacity: .7 }
.sf-product-card-oos .sf-product-card-img { filter: grayscale(.3) }
.sf-product-card-oos-label { display: block; text-align: center; font-size: .8rem; font-weight: 600; color: var(--sf-text-muted); padding: 10px 0 }

/* ── Trust Badges ── */
.sf-trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 0 }
.sf-trust-badge { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg) }
.sf-trust-badge-title { font-size: .85rem; font-weight: 700; color: var(--sf-text) }
.sf-trust-badge-desc { font-size: .78rem; color: var(--sf-text-muted) }
@media (max-width: 1024px) { .sf-trust-badges { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .sf-trust-badges { grid-template-columns: 1fr } }

/* ── Grids ── */
.sf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
@media (max-width: 768px) { .sf-grid-3 { grid-template-columns: 1fr; gap: 12px } }

/* ── Blog Grid ── */
.sf-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
@media (max-width: 768px) { .sf-blog-grid { grid-template-columns: 1fr; gap: 16px } }
.sf-blog-card { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden; text-decoration: none; transition: transform var(--sf-transition), box-shadow var(--sf-transition) }
.sf-blog-card:hover { transform: translateY(-3px); box-shadow: var(--sf-card-shadow-hover) }
.sf-blog-card-image { aspect-ratio: 16/10; overflow: hidden; background: var(--sf-bg-secondary) }
.sf-blog-card-image img { width: 100%; height: 100%; object-fit: cover }
.sf-blog-card-body { padding: 16px }
.sf-blog-card-title { font-size: 1rem; font-weight: 700; color: var(--sf-text); margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sf-blog-card-excerpt { font-size: .85rem; color: var(--sf-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px }
.sf-blog-card-meta { font-size: .78rem; color: var(--sf-text-muted) }

/* ── Newsletter Section ── */
.sf-newsletter-section { background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%); color: #fff; padding: 48px 0 }
.sf-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 900px; margin: 0 auto }
.sf-newsletter-content h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px }
.sf-newsletter-content p { font-size: .9rem; opacity: .9 }
.sf-newsletter-form { display: flex; gap: 8px; flex-shrink: 0 }
.sf-newsletter-form .sf-input { width: 260px; border-radius: var(--sf-radius-full); border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); color: #fff }
.sf-newsletter-form .sf-input::placeholder { color: rgba(255,255,255,.6) }
.sf-newsletter-form .sf-input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.2) }
.sf-newsletter-form .sf-btn-cta { border-radius: var(--sf-radius-full); padding: 10px 24px }
@media (max-width: 768px) { .sf-newsletter-inner { flex-direction: column; text-align: center } .sf-newsletter-form { width: 100% } .sf-newsletter-form .sf-input { flex: 1; width: auto } }

/* ── Footer ── */
.sf-footer { background: var(--sf-footer-bg); color: var(--sf-footer-text); padding: 48px 0 0 }
.sf-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px }
@media (max-width: 1024px) { .sf-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px } }
@media (max-width: 480px) { .sf-footer-grid { grid-template-columns: 1fr; gap: 24px } }
.sf-footer-logo { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 12px }
.sf-footer-desc { font-size: .85rem; line-height: 1.6; margin-bottom: 16px }
.sf-footer-title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 16px }
.sf-footer-links li { margin-bottom: 8px }
.sf-footer-links a { color: var(--sf-footer-text); font-size: .85rem; text-decoration: none; transition: color var(--sf-transition) }
.sf-footer-links a:hover { color: #fff }
.sf-footer-social { display: flex; gap: 12px }
.sf-social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: var(--sf-footer-text); transition: all var(--sf-transition) }
.sf-social-link:hover { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff }
.sf-footer-contact p { font-size: .85rem; margin-bottom: 6px; color: var(--sf-footer-text) }
.sf-footer-payments { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1) }
.sf-footer-payment-label { font-size: .8rem; color: var(--sf-footer-text); font-weight: 500 }
.sf-payment-icons { display: flex; gap: 8px }
.sf-payment-icon { padding: 4px 10px; background: rgba(255,255,255,.1); border-radius: 4px; font-size: .75rem; font-weight: 700; color: #fff }
.sf-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem }
.sf-footer-powered { font-size: .8rem }
.sf-footer-powered strong { color: var(--sf-primary) }
@media (max-width: 640px) { .sf-footer-bottom { flex-direction: column; gap: 8px; text-align: center } }

/* ── WhatsApp Float ── */
.sf-whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 56px; height: 56px;
    border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,.4); transition: transform var(--sf-transition), box-shadow var(--sf-transition); text-decoration: none;
}
.sf-whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.5); color: #fff }
.sf-whatsapp-tooltip {
    display: none; position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
    background: #fff; color: #333; font-size: .8rem; font-weight: 500; padding: 8px 14px;
    border-radius: var(--sf-radius-md); white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.sf-whatsapp-float:hover .sf-whatsapp-tooltip { display: block }

/* ── Toast ── */
.sf-toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: 90%; max-width: 400px }
.sf-toast {
    pointer-events: auto; padding: 14px 20px; border-radius: var(--sf-radius-lg); color: #fff;
    font-size: .9rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.15);
    animation: sfToastIn .3s ease; display: flex; align-items: center; gap: 10px;
}
.sf-toast-success { background: var(--sf-success) }
.sf-toast-error { background: var(--sf-danger) }
.sf-toast-info { background: var(--sf-info) }
.sf-toast-warning { background: var(--sf-warning) }
@keyframes sfToastIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

/* ── Breadcrumb ── */
.sf-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 16px 0; font-size: .85rem; color: var(--sf-text-muted) }
.sf-breadcrumb a { color: var(--sf-text-muted); text-decoration: none }
.sf-breadcrumb a:hover { color: var(--sf-primary) }
.sf-breadcrumb-sep { margin: 0 4px }

/* ── Pagination ── */
.sf-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 32px 0 }
.sf-pagination-btn {
    min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text-secondary); font-size: .85rem; font-weight: 500;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--sf-transition);
}
.sf-pagination-btn:hover { border-color: var(--sf-primary); color: var(--sf-primary) }
.sf-pagination-btn.active { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff }
.sf-pagination-btn:disabled { opacity: .4; cursor: not-allowed }
.sf-pagination-dots { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); font-size: .85rem }

/* ══════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ══════════════════════════════════════════════ */

.sf-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 48px }
@media (max-width: 768px) { .sf-product-layout { grid-template-columns: 1fr; gap: 24px } }
.sf-gallery { position: sticky; top: 90px }
@media (max-width: 768px) { .sf-gallery { position: static } }
.sf-gallery-main { width: 100%; aspect-ratio: 1; border-radius: var(--sf-radius-xl); overflow: hidden; background: var(--sf-bg-secondary); margin-bottom: 12px; position: relative; border: 1px solid var(--sf-border) }
.sf-gallery-main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in }
.sf-gallery-main-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted) }
.sf-gallery-badge { position: absolute; top: 12px; left: 12px; background: var(--sf-discount); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: var(--sf-radius-full); z-index: 2 }
.sf-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px }
.sf-gallery-thumbs::-webkit-scrollbar { display: none }
.sf-gallery-thumb { width: 72px; height: 72px; border-radius: var(--sf-radius); overflow: hidden; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; background: var(--sf-bg-secondary); transition: border-color .15s }
.sf-gallery-thumb.active { border-color: var(--sf-primary) }
.sf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 768px) { .sf-gallery-thumb { width: 60px; height: 60px } }
.sf-product-info { align-self: start }
.sf-product-name { font-size: 1.5rem; font-weight: 800; color: var(--sf-text); margin: 0 0 10px; line-height: 1.3 }
@media (max-width: 768px) { .sf-product-name { font-size: 1.25rem } }
.sf-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px }
.sf-stars { display: flex; gap: 2px; color: #f59e0b }
.sf-rating-count { font-size: .85rem; color: var(--sf-text-muted) }
.sf-product-prices { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.sf-product-current-price { font-size: 1.75rem; font-weight: 800; color: var(--sf-primary) }
.sf-product-old-price { font-size: 1.1rem; color: var(--sf-text-muted); text-decoration: line-through }
.sf-product-discount-badge { font-size: .78rem; font-weight: 700; color: #fff; background: var(--sf-discount); padding: 3px 10px; border-radius: var(--sf-radius-full) }
.sf-product-short-desc { color: var(--sf-text-secondary); line-height: 1.6; margin-bottom: 20px; font-size: .95rem }
.sf-product-divider { border: none; border-top: 1px solid var(--sf-border); margin: 20px 0 }
.sf-shipping-badge {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--sf-primary-light); border: 1px solid var(--sf-primary); border-radius: var(--sf-radius);
    margin-bottom: 16px; font-size: .85rem; color: var(--sf-primary-dark);
}
.sf-shipping-badge svg { flex-shrink: 0; color: var(--sf-primary) }
.sf-shipping-badge strong { font-weight: 700 }
.sf-variant-group { margin-bottom: 16px }
.sf-variant-label { font-size: .875rem; font-weight: 600; color: var(--sf-text); margin-bottom: 8px }
.sf-variant-label span { font-weight: 400; color: var(--sf-text-muted) }
.sf-variant-options { display: flex; flex-wrap: wrap; gap: 8px }
.sf-variant-option-btn { padding: 8px 16px; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius); background: var(--sf-bg); color: var(--sf-text); font-size: .875rem; cursor: pointer; transition: all .15s; font-weight: 500 }
.sf-variant-option-btn:hover { border-color: var(--sf-primary) }
.sf-variant-option-btn.selected { border-color: var(--sf-primary); background: var(--sf-primary-light); color: var(--sf-primary) }
.sf-variant-option-btn.disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through }
.sf-color-swatch-btn { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--sf-border); cursor: pointer; transition: all .15s; position: relative }
.sf-color-swatch-btn:hover { border-color: var(--sf-primary) }
.sf-color-swatch-btn.selected { border-color: var(--sf-primary); box-shadow: 0 0 0 2px var(--sf-primary-light) }
.sf-color-swatch-btn.disabled { opacity: .3; cursor: not-allowed }
.sf-qty-group { margin-bottom: 20px }
.sf-qty-label { font-size: .875rem; font-weight: 600; color: var(--sf-text); margin-bottom: 8px }
.sf-qty-controls { display: inline-flex; align-items: center; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden }
.sf-qty-btn { width: 40px; height: 40px; border: none; background: var(--sf-bg); font-size: 1.1rem; cursor: pointer; color: var(--sf-text); display: flex; align-items: center; justify-content: center; transition: background .15s }
.sf-qty-btn:hover { background: var(--sf-bg-secondary) }
.sf-qty-btn:disabled { opacity: .3; cursor: not-allowed }
.sf-qty-value { width: 52px; height: 40px; text-align: center; font-weight: 600; border: none; border-left: 1px solid var(--sf-border); border-right: 1px solid var(--sf-border); background: var(--sf-bg); color: var(--sf-text); font-size: .95rem; outline: none }
.sf-add-to-cart-row { display: flex; gap: 10px; margin-bottom: 12px }
.sf-add-to-cart-btn, .sf-buy-now-btn { flex: 1; padding: 14px 24px; border: none; border-radius: var(--sf-radius-lg); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .2s, transform .1s }
.sf-add-to-cart-btn { background: var(--sf-primary); color: #fff }
.sf-add-to-cart-btn:hover { background: var(--sf-primary-hover) }
.sf-buy-now-btn { background: var(--sf-cta); color: #fff }
.sf-buy-now-btn:hover { background: var(--sf-cta-hover) }
.sf-add-to-cart-btn:active, .sf-buy-now-btn:active { transform: scale(.98) }
.sf-add-to-cart-btn:disabled, .sf-buy-now-btn:disabled { opacity: .5; cursor: not-allowed; transform: none }
.sf-wish-btn-lg { width: 50px; height: 50px; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); transition: all .2s; flex-shrink: 0 }
.sf-wish-btn-lg:hover, .sf-wish-btn-lg.active { color: var(--sf-danger); border-color: var(--sf-danger) }
.sf-stock-status { font-size: .875rem; margin-bottom: 16px; display: flex; align-items: center; gap: 6px }
.sf-stock-dot { width: 8px; height: 8px; border-radius: 50% }
.sf-stock-in { background: var(--sf-success) }
.sf-stock-out { background: var(--sf-danger) }
.sf-product-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px }
.sf-product-meta-label { font-size: .8rem; color: var(--sf-text-muted) }
.sf-product-meta-link { color: var(--sf-primary); text-decoration: none }
.sf-product-meta-link:hover { color: var(--sf-primary-hover) }
.sf-attr-color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sf-border); vertical-align: middle }
.sf-attr-value-inline { display: inline-flex; align-items: center; gap: 6px }
.sf-reviews-loading { text-align: center; padding: 32px; color: var(--sf-text-muted) }
.sf-stars-no-gap { font-size: 0; line-height: 1 }

/* ── Tabs ── */
.sf-tabs { margin-top: 48px }
.sf-tab-headers { display: flex; gap: 0; border-bottom: 2px solid var(--sf-border); overflow-x: auto }
.sf-tab-headers::-webkit-scrollbar { display: none }
.sf-tab-header {
    padding: 14px 24px; font-size: .9rem; font-weight: 600; color: var(--sf-text-muted);
    cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
    transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; margin-bottom: -2px;
}
.sf-tab-header:hover { color: var(--sf-text) }
.sf-tab-header.active { color: var(--sf-primary); border-bottom-color: var(--sf-primary) }
.sf-tab-content { padding: 24px 0 }
.sf-tab-panel { display: none }
.sf-tab-panel.active { display: block }
.sf-tab-desc { line-height: 1.7; color: var(--sf-text-secondary) }
.sf-tab-desc p { margin: 0 0 12px }
.sf-attr-table { width: 100%; border-collapse: collapse; font-size: .9rem }
.sf-attr-table tr { border-bottom: 1px solid var(--sf-border) }
.sf-attr-table td { padding: 10px 12px }
.sf-attr-table td:first-child { font-weight: 600; color: var(--sf-text-muted); width: 40%; background: var(--sf-bg-secondary) }
.sf-attr-table td:last-child { color: var(--sf-text) }
.sf-review { border-bottom: 1px solid var(--sf-border); padding: 16px 0 }
.sf-review:last-child { border-bottom: none }
.sf-review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px }
.sf-review-author { font-weight: 600; font-size: .9rem; color: var(--sf-text) }
.sf-review-date { font-size: .8rem; color: var(--sf-text-muted) }
.sf-review-body { color: var(--sf-text-secondary); line-height: 1.6; font-size: .9rem }
.sf-review-images { display: flex; gap: 8px; margin-top: 8px }
.sf-review-images img { width: 64px; height: 64px; border-radius: var(--sf-radius-sm); object-fit: cover; cursor: pointer }
.sf-reviews-empty { text-align: center; padding: 32px; color: var(--sf-text-muted) }
.sf-review-load-more { padding: 8px 20px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: none; cursor: pointer; font-size: .85rem; color: var(--sf-text); margin-top: 16px }
.sf-review-load-more:hover { border-color: var(--sf-primary); color: var(--sf-primary) }
.sf-related { padding: 48px 0 }
.sf-related-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 24px; color: var(--sf-text) }
.sf-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
@media (max-width: 1024px) { .sf-related-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 768px) { .sf-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px } }

/* ── Sticky Add to Cart (Mobile) ── */
.sf-sticky-atc { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--sf-bg); border-top: 1px solid var(--sf-border); padding: 12px 16px; z-index: 80; box-shadow: 0 -4px 16px rgba(0,0,0,.08) }
@media (max-width: 768px) { .sf-sticky-atc { display: flex; align-items: center; gap: 12px } }
.sf-sticky-atc-price { font-size: 1.1rem; font-weight: 800; color: var(--sf-primary); white-space: nowrap }
.sf-sticky-atc-btn { flex: 1; padding: 12px; border: none; border-radius: var(--sf-radius); background: var(--sf-primary); color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer }
.sf-sticky-atc-btn:hover { background: var(--sf-primary-hover) }

/* ── Countdown Timer ── */
.sf-countdown { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0 }
.sf-countdown-title { font-size: .85rem; font-weight: 600; opacity: .9; letter-spacing: .5px }
.sf-countdown-timer { display: flex; align-items: center; gap: 8px }
.sf-countdown-item { background: rgba(255,255,255,.2); border-radius: var(--sf-radius); padding: 8px 12px; text-align: center; min-width: 56px }
.sf-countdown-value { font-size: 1.4rem; font-weight: 800; display: block; line-height: 1.2 }
.sf-countdown-label { font-size: .65rem; text-transform: uppercase; opacity: .8; letter-spacing: .5px }
.sf-countdown-sep { font-size: 1.3rem; font-weight: 700; opacity: .6; line-height: 1 }

/* ── Marketplace Badge ── */
.sf-marketplace-badge { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 20px; text-align: center; text-decoration: none; display: block; transition: transform var(--sf-transition), box-shadow var(--sf-transition) }
.sf-marketplace-badge:hover { transform: translateY(-3px); box-shadow: var(--sf-card-shadow-hover) }
.sf-marketplace-badge-platform { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; color: var(--sf-text); text-transform: capitalize }
.sf-marketplace-badge-score { font-size: 2rem; font-weight: 900; color: var(--sf-primary); line-height: 1; margin-bottom: 4px }
.sf-marketplace-badge-reviews { font-size: .82rem; color: var(--sf-text-muted) }
.sf-marketplace-badge-stars { color: #f59e0b; margin: 6px 0 }

/* ══════════════════════════════════════════════
   LISTING & FILTER (Category + Search pages)
   ══════════════════════════════════════════════ */

.sf-listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px }
@media (max-width: 1024px) { .sf-listing-layout { grid-template-columns: 1fr } }
.sf-listing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap }
.sf-listing-title { font-size: 1.35rem; font-weight: 800; color: var(--sf-text); margin: 0 }
.sf-listing-count { font-size: .875rem; color: var(--sf-text-muted) }
.sf-listing-sort { display: flex; align-items: center; gap: 8px }
.sf-listing-sort label { font-size: .85rem; color: var(--sf-text-muted); white-space: nowrap }
.sf-listing-sort select {
    padding: 8px 32px 8px 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text); font-size: .85rem; cursor: pointer; outline: none;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a9a' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.sf-listing-main { flex: 1; min-width: 0 }
.sf-listing-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px }

/* Filter Sidebar */
.sf-filter-sidebar { position: sticky; top: 90px }
@media (max-width: 1024px) { .sf-filter-sidebar { display: none } }
.sf-filter-group { margin-bottom: 24px; border-bottom: 1px solid var(--sf-border); padding-bottom: 20px }
.sf-filter-group:last-child { border-bottom: none }
.sf-filter-title { font-size: .9rem; font-weight: 700; color: var(--sf-text); margin-bottom: 12px }
.sf-filter-group-title {
    font-size: .875rem; font-weight: 600; color: var(--sf-text); margin: 0 0 12px;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;
}
.sf-filter-group-title svg { transition: transform 0.2s }
.sf-filter-group-title.collapsed svg { transform: rotate(-90deg) }
.sf-filter-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .85rem; color: var(--sf-text-secondary); cursor: pointer }
.sf-filter-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sf-primary); cursor: pointer }
.sf-filter-count { color: var(--sf-text-muted); font-size: .8rem; margin-left: auto }
.sf-filter-count-badge { background: var(--sf-primary); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: .75rem; font-weight: 600; line-height: 1.4 }
.sf-filter-count-text { margin-left: auto; font-size: .75rem; color: var(--sf-text-muted) }
.sf-color-swatch-group { display: flex; flex-wrap: wrap; gap: 6px }
.sf-filter-checkbox {
    width: 16px; height: 16px; border: 1.5px solid var(--sf-border); border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s; background: var(--sf-bg);
}
.sf-filter-checkbox.checked { background: var(--sf-primary); border-color: var(--sf-primary) }
.sf-filter-checkbox.checked::after {
    content: ''; width: 8px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.sf-filter-color-swatch {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sf-border);
    cursor: pointer; transition: border-color 0.15s; flex-shrink: 0;
}
.sf-filter-color-swatch.selected { border-color: var(--sf-primary); box-shadow: 0 0 0 2px var(--sf-primary-light) }

/* Price Filter */
.sf-filter-price-inputs { display: flex; gap: 8px; align-items: center }
.sf-filter-price-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
    font-size: .85rem; outline: none; background: var(--sf-bg); color: var(--sf-text);
}
.sf-filter-price-input:focus { border-color: var(--sf-primary) }
.sf-filter-price-sep { color: var(--sf-text-muted); font-size: .85rem }

/* Toggle Switch */
.sf-filter-toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; color: var(--sf-text) }
.sf-filter-toggle {
    position: relative; width: 40px; height: 22px; background: var(--sf-border);
    border-radius: 11px; cursor: pointer; transition: background 0.2s; border: none; padding: 0;
}
.sf-filter-toggle.active { background: var(--sf-primary) }
.sf-filter-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sf-filter-toggle.active::after { transform: translateX(18px) }

/* Filter Actions */
.sf-filter-actions { display: flex; gap: 8px; margin-top: 16px }
.sf-filter-apply-btn {
    padding: 8px 16px; background: var(--sf-primary); color: #fff; border: none;
    border-radius: var(--sf-radius-sm); font-size: .825rem; font-weight: 500;
    cursor: pointer; transition: background 0.2s;
}
.sf-filter-apply-btn:hover { background: var(--sf-primary-hover) }
.sf-filter-reset-btn {
    padding: 8px 16px; background: none; color: var(--sf-text-muted);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: .825rem;
    cursor: pointer; transition: color 0.2s;
}
.sf-filter-reset-btn:hover { color: var(--sf-text) }

/* Mobile Filter */
.sf-mobile-filter-btn {
    display: none; width: 100%; padding: 10px; margin-bottom: 16px;
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-card-bg); color: var(--sf-text); font-size: .875rem; font-weight: 500;
    cursor: pointer; justify-content: center; align-items: center; gap: 8px;
}
@media (max-width: 768px) { .sf-mobile-filter-btn { display: flex } }

/* Filter Drawer (Mobile) */
.sf-filter-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999 }
.sf-filter-drawer-overlay.active { display: block }
.sf-filter-drawer {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 300px;
    background: var(--sf-bg); z-index: 1000; overflow-y: auto; padding: 20px;
    transform: translateX(-100%); transition: transform 0.3s;
}
.sf-filter-drawer.active { display: block; transform: translateX(0) }
.sf-filter-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-border) }
.sf-filter-drawer-header h3 { font-size: 1.1rem; font-weight: 600; margin: 0 }
.sf-filter-drawer-close { width: 32px; height: 32px; border: none; background: none; font-size: 1.5rem; cursor: pointer; color: var(--sf-text-muted) }

/* Load More */
.sf-load-more { text-align: center; margin-top: 32px }
.sf-load-more-btn {
    padding: 12px 40px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-card-bg); color: var(--sf-text); font-size: .9rem; font-weight: 500;
    cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.sf-load-more-btn:hover { border-color: var(--sf-primary); color: var(--sf-primary) }
.sf-load-more-btn:disabled { opacity: .6; cursor: not-allowed }

/* Empty State */
.sf-empty-state { text-align: center; padding: 60px 20px; color: var(--sf-text-muted) }
.sf-empty-state svg { margin-bottom: 16px; color: var(--sf-border) }
.sf-empty-state h3 { font-size: 1.1rem; color: var(--sf-text); margin: 0 0 8px }
.sf-empty-state p { margin: 0 0 24px }

/* Category Header */
.sf-cat-header { margin-bottom: 32px }
.sf-cat-header h1 { font-size: 2rem; font-weight: 800; color: var(--sf-text); margin: 0 0 8px }
.sf-cat-header-desc { color: var(--sf-text-muted); line-height: 1.6; max-width: 800px }

/* SEO Text */
.sf-seo-text { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--sf-border); font-size: .9rem; line-height: 1.7; color: var(--sf-text-secondary) }
.sf-seo-text h2, .sf-seo-text h3 { color: var(--sf-text); margin: 16px 0 8px }

/* ══════════════════════════════════════════════
   SEARCH PAGE
   ══════════════════════════════════════════════ */

.sf-search-page { padding: 24px 0 60px }
.sf-search-hero { margin-bottom: 32px }
.sf-search-hero-input-wrap { max-width: 600px; margin: 0 auto; position: relative }
.sf-search-hero-input {
    width: 100%; padding: 14px 48px 14px 16px; border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius-lg); font-size: 1rem; outline: none;
    background: var(--sf-bg); color: var(--sf-text); transition: border-color 0.2s;
}
.sf-search-hero-input:focus { border-color: var(--sf-primary) }
.sf-search-hero-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: var(--sf-radius-md);
    background: var(--sf-primary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.sf-search-hero-btn:hover { background: var(--sf-primary-hover) }
.sf-popular-searches { margin-top: 20px }
.sf-popular-searches-title { font-size: .9rem; font-weight: 600; color: var(--sf-text); margin-bottom: 10px }
.sf-popular-tags { display: flex; flex-wrap: wrap; gap: 8px }
.sf-popular-tag {
    padding: 6px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-full);
    font-size: .85rem; color: var(--sf-text-secondary); text-decoration: none;
    transition: border-color 0.15s, color 0.15s; background: var(--sf-card-bg); cursor: pointer;
}
.sf-popular-tag:hover { border-color: var(--sf-primary); color: var(--sf-primary) }
.sf-popular-searches-center { text-align: left; max-width: 400px; margin: 0 auto }

/* ══════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════ */

.cart-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem }
.cart-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--sf-text-muted); margin-bottom: 1.5rem }
.cart-breadcrumb a { color: var(--sf-text-muted); text-decoration: none }
.cart-breadcrumb a:hover { color: var(--sf-primary) }
.cart-breadcrumb svg { width: 14px; height: 14px; flex-shrink: 0 }
.cart-title { font-size: 1.5rem; font-weight: 700; color: var(--sf-text); margin-bottom: 1.5rem }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr } }

/* Cart Items */
.cart-items { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden }
.cart-item { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--sf-border); position: relative }
.cart-item:last-child { border-bottom: none }
.cart-item-img { width: 80px; height: 80px; border-radius: var(--sf-radius-md); object-fit: cover; background: var(--sf-bg-secondary); flex-shrink: 0 }
.cart-item-img-placeholder { width: 80px; height: 80px; border-radius: var(--sf-radius-md); background: var(--sf-bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); flex-shrink: 0 }
.cart-item-body { display: flex; flex-direction: column; gap: .375rem; min-width: 0 }
.cart-item-name { font-weight: 600; color: var(--sf-text); text-decoration: none; font-size: .9375rem; line-height: 1.4 }
.cart-item-name:hover { color: var(--sf-primary) }
.cart-item-variant { font-size: .8125rem; color: var(--sf-text-muted) }
.cart-item-price { font-size: .875rem; color: var(--sf-text-secondary) }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: .375rem; gap: 1rem; flex-wrap: wrap }
.cart-item-total { font-weight: 700; font-size: .9375rem; color: var(--sf-text); white-space: nowrap }
.cart-item-actions { display: flex; align-items: center; gap: .75rem }
.cart-item-updating { opacity: .5; pointer-events: none }

/* Quantity Selector */
.qty-selector { display: inline-flex; align-items: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); overflow: hidden; height: 36px }
.qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--sf-bg-secondary); border: none; cursor: pointer; color: var(--sf-text); font-size: 1.125rem; transition: background 0.15s }
.qty-btn:hover:not(:disabled) { background: var(--sf-border) }
.qty-btn:disabled { opacity: .4; cursor: not-allowed }
.qty-value { width: 44px; text-align: center; font-weight: 600; font-size: .875rem; border: none; background: transparent; color: var(--sf-text); -moz-appearance: textfield }
.qty-value::-webkit-outer-spin-button, .qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* Remove Button */
.cart-item-remove { background: none; border: none; color: var(--sf-text-muted); cursor: pointer; padding: .25rem; border-radius: .25rem; transition: color 0.15s; display: flex; align-items: center }
.cart-item-remove:hover { color: var(--sf-danger) }

/* Cart Header */
.cart-items-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sf-border); background: var(--sf-bg-secondary) }
.cart-items-header-title { font-weight: 600; color: var(--sf-text); font-size: .9375rem }
.cart-clear-btn { background: none; border: none; color: var(--sf-text-muted); cursor: pointer; font-size: .8125rem; text-decoration: underline; transition: color 0.15s }
.cart-clear-btn:hover { color: var(--sf-danger) }

/* Coupon Section */
.coupon-section { margin-top: 1rem; background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 1.25rem }
.coupon-title { font-weight: 600; font-size: .875rem; color: var(--sf-text); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem }
.coupon-form { display: flex; gap: .5rem }
.coupon-input {
    flex: 1; padding: .625rem .875rem; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
    font-size: .875rem; background: var(--sf-bg); color: var(--sf-text); outline: none; text-transform: uppercase;
}
.coupon-input:focus { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.1) }
.coupon-input::placeholder { text-transform: none }
.coupon-apply-btn {
    padding: .625rem 1.25rem; background: var(--sf-text); color: var(--sf-bg); border: none;
    border-radius: var(--sf-radius-md); font-size: .875rem; font-weight: 500; cursor: pointer;
    white-space: nowrap; transition: opacity 0.15s;
}
.coupon-apply-btn:hover { opacity: .85 }
.coupon-apply-btn:disabled { opacity: .5; cursor: not-allowed }
.coupon-error { color: var(--sf-danger); font-size: .8125rem; margin-top: .5rem }
.coupon-applied {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--sf-success-light); border: 1px solid var(--sf-success-border);
    border-radius: var(--sf-radius-md); padding: .625rem .875rem; margin-top: .75rem;
}
.coupon-applied-code { font-weight: 600; color: var(--sf-success); font-size: .875rem; display: flex; align-items: center; gap: .375rem }
.coupon-applied-discount { font-size: .8125rem; color: var(--sf-success) }
.coupon-remove-btn { background: none; border: none; color: var(--sf-text-muted); cursor: pointer; padding: .25rem; border-radius: .25rem; display: flex }
.coupon-remove-btn:hover { color: var(--sf-danger) }

/* Cart Summary */
.cart-summary { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 1.5rem; position: sticky; top: 5.5rem }
.cart-summary-title { font-size: 1.125rem; font-weight: 700; color: var(--sf-text); margin-bottom: 1.25rem }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-size: .9375rem; color: var(--sf-text-secondary) }
.cart-summary-row.discount { color: var(--sf-success) }
.cart-summary-row.shipping { color: var(--sf-text-muted); font-size: .875rem }
.cart-summary-divider { border: none; border-top: 1px solid var(--sf-border); margin: .75rem 0 }
.cart-summary-total { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0 }
.cart-summary-total-label { font-size: 1rem; font-weight: 700; color: var(--sf-text) }
.cart-summary-total-value { font-size: 1.25rem; font-weight: 700; color: var(--sf-primary) }
.cart-summary-actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem }

/* Cart Buttons */
.cart-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.5rem; border-radius: var(--sf-radius); font-size: .9375rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: none; transition: all 0.15s; width: 100%; text-align: center;
}
.cart-btn-primary { background: var(--sf-primary); color: #fff }
.cart-btn-primary:hover { background: var(--sf-primary-hover); color: #fff }
.cart-btn-secondary { background: transparent; color: var(--sf-text-secondary); border: 1px solid var(--sf-border) }
.cart-btn-secondary:hover { background: var(--sf-bg-secondary) }

/* Cart Empty */
.cart-empty { text-align: center; padding: 3rem 1.5rem }
.cart-empty-icon { color: var(--sf-text-muted); margin-bottom: 1rem }
.cart-empty-title { font-size: 1.25rem; font-weight: 600; color: var(--sf-text); margin-bottom: .5rem }
.cart-empty-desc { font-size: .9375rem; color: var(--sf-text-muted); margin-bottom: 1.5rem }

/* Cart Loading */
.cart-loading { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem }
.cart-skeleton { background: var(--sf-bg-secondary); border-radius: var(--sf-radius-md); height: 80px; animation: cartPulse 1.5s ease-in-out infinite }
.cart-skeleton-sm { height: 40px }
.cart-skeleton-md { height: 48px }
@keyframes cartPulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

/* ══════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════ */

.checkout-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem }
.checkout-title { font-size: 1.5rem; font-weight: 700; color: var(--sf-text); margin-bottom: 1.5rem }

/* Step Indicator */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2rem; padding: 0; list-style: none }
.checkout-step { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--sf-text-muted); font-weight: 500; cursor: default; white-space: nowrap }
.checkout-step.active { color: var(--sf-primary) }
.checkout-step.completed { color: var(--sf-success) }
.checkout-step-number {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor;
    display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; flex-shrink: 0;
}
.checkout-step.active .checkout-step-number { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary) }
.checkout-step.completed .checkout-step-number { background: var(--sf-success); color: #fff; border-color: var(--sf-success) }
.checkout-step-divider { width: 40px; height: 2px; background: var(--sf-border); margin: 0 .75rem; flex-shrink: 0 }
.checkout-step-divider.completed { background: var(--sf-success) }
@media (max-width: 640px) { .checkout-step-label { display: none } .checkout-step-divider { width: 24px; margin: 0 .375rem } }

/* Checkout Layout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr } }
.checkout-panel { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 1.5rem }
.checkout-panel-title { font-size: 1.125rem; font-weight: 700; color: var(--sf-text); margin-bottom: 1.25rem }

/* Address Cards */
.address-list { display: grid; gap: .75rem }
.address-card { border: 2px solid var(--sf-border); border-radius: var(--sf-radius); padding: 1rem 1.125rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative }
.address-card:hover { border-color: var(--sf-primary-light) }
.address-card.selected { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.12) }
.address-card-title { font-weight: 600; font-size: .9375rem; color: var(--sf-text); margin-bottom: .25rem; display: flex; align-items: center; gap: .5rem }
.address-card-name { font-size: .875rem; color: var(--sf-text-secondary) }
.address-card-detail { font-size: .8125rem; color: var(--sf-text-muted); margin-top: .25rem; line-height: 1.5 }
.address-card-phone { font-size: .8125rem; color: var(--sf-text-muted); margin-top: .25rem }
.address-card-check {
    position: absolute; top: .875rem; right: .875rem; width: 20px; height: 20px;
    border-radius: 50%; border: 2px solid var(--sf-border); display: flex; align-items: center; justify-content: center;
}
.address-card.selected .address-card-check { border-color: var(--sf-primary); background: var(--sf-primary) }
.address-card.selected .address-card-check svg { display: block }
.address-card .address-card-check svg { display: none }

/* Same Address Toggle */
.same-address-toggle { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sf-border) }
.same-address-toggle label { font-size: .875rem; color: var(--sf-text-secondary); cursor: pointer; user-select: none }
.same-address-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sf-primary); cursor: pointer }

/* Billing Section */
.billing-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--sf-border) }
.billing-section-title { font-weight: 600; font-size: .9375rem; color: var(--sf-text); margin-bottom: .75rem }

/* New Address Button */
.new-address-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .875rem;
    border: 2px dashed var(--sf-border); border-radius: var(--sf-radius); background: transparent; cursor: pointer;
    color: var(--sf-text-muted); font-size: .875rem; font-weight: 500; transition: all 0.15s; margin-top: .75rem;
}
.new-address-btn:hover { border-color: var(--sf-primary); color: var(--sf-primary); background: rgba(26,138,92,0.03) }

/* Checkout Form */
.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem }
@media (max-width: 540px) { .checkout-form-grid { grid-template-columns: 1fr } }
.checkout-form-full { grid-column: 1 / -1 }
.checkout-form-group { display: flex; flex-direction: column; gap: .3125rem }
.checkout-form-label { font-size: .8125rem; font-weight: 500; color: var(--sf-text-secondary) }
.checkout-form-input {
    padding: .625rem .875rem; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
    font-size: .875rem; background: var(--sf-bg); color: var(--sf-text); outline: none; transition: border-color 0.15s;
}
.checkout-form-input:focus { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.1) }
.checkout-form-input.has-error { border-color: var(--sf-danger) }
.checkout-form-error { font-size: .75rem; color: var(--sf-danger) }
.checkout-form-textarea { min-height: 80px; resize: vertical }
.checkout-form-actions { display: flex; gap: .75rem; margin-top: 1rem }

/* Shipping Methods */
.shipping-methods { display: grid; gap: .75rem }
.shipping-method { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--sf-border); border-radius: var(--sf-radius); padding: 1rem 1.125rem; cursor: pointer; transition: border-color 0.15s }
.shipping-method:hover { border-color: var(--sf-primary-light) }
.shipping-method.selected { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.12) }
.shipping-method-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 }
.shipping-method.selected .shipping-method-radio { border-color: var(--sf-primary) }
.shipping-method.selected .shipping-method-radio::after { content: ''; width: 10px; height: 10px; background: var(--sf-primary); border-radius: 50% }
.shipping-method-info { flex: 1 }
.shipping-method-name { font-weight: 600; font-size: .9375rem; color: var(--sf-text) }
.shipping-method-delivery { font-size: .8125rem; color: var(--sf-text-muted); margin-top: .125rem }
.shipping-method-price { font-weight: 700; font-size: .9375rem; color: var(--sf-text); white-space: nowrap }

/* Payment Methods */
.payment-methods { display: grid; gap: .75rem; margin-bottom: 1.25rem }
.payment-method { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--sf-border); border-radius: var(--sf-radius); padding: 1rem 1.125rem; cursor: pointer; transition: border-color 0.15s }
.payment-method:hover { border-color: var(--sf-primary-light) }
.payment-method.selected { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,0.12) }
.payment-method-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 }
.payment-method.selected .payment-method-radio { border-color: var(--sf-primary) }
.payment-method.selected .payment-method-radio::after { content: ''; width: 10px; height: 10px; background: var(--sf-primary); border-radius: 50% }
.payment-method-icon { color: var(--sf-text-muted); flex-shrink: 0 }
.payment-method-name { font-weight: 600; font-size: .9375rem; color: var(--sf-text) }

/* Card Form */
.card-form { margin-top: 1.25rem; padding: 1.25rem; background: var(--sf-bg-secondary); border-radius: var(--sf-radius) }
.card-form-title { font-weight: 600; font-size: .875rem; color: var(--sf-text); margin-bottom: 1rem }
.card-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem }

/* Terms */
.terms-check { display: flex; align-items: flex-start; gap: .625rem; margin-top: 1.25rem; padding: 1rem; background: var(--sf-bg-secondary); border-radius: var(--sf-radius-md) }
.terms-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sf-primary); margin-top: .125rem; flex-shrink: 0; cursor: pointer }
.terms-check label { font-size: .8125rem; color: var(--sf-text-secondary); line-height: 1.5; cursor: pointer }
.terms-check label a { color: var(--sf-primary); text-decoration: underline }

/* Order Summary (Checkout Sidebar) */
.order-summary { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 1.5rem; position: sticky; top: 5.5rem }
.order-summary-title { font-size: 1.125rem; font-weight: 700; color: var(--sf-text); margin-bottom: 1.25rem }
.order-summary-items { max-height: 300px; overflow-y: auto; margin-bottom: 1rem }
.order-summary-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--sf-border-light) }
.order-summary-item:last-child { border-bottom: none }
.order-summary-item-img { width: 48px; height: 48px; border-radius: var(--sf-radius-sm); object-fit: cover; background: var(--sf-bg-secondary); flex-shrink: 0 }
.order-summary-item-img-placeholder { width: 48px; height: 48px; border-radius: var(--sf-radius-sm); background: var(--sf-bg-secondary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted) }
.order-summary-item-info { flex: 1; min-width: 0 }
.order-summary-item-name { font-size: .8125rem; font-weight: 500; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.order-summary-item-qty { font-size: .75rem; color: var(--sf-text-muted) }
.order-summary-item-price { font-size: .8125rem; font-weight: 600; color: var(--sf-text); white-space: nowrap }
.order-summary-row { display: flex; justify-content: space-between; align-items: center; padding: .375rem 0; font-size: .875rem; color: var(--sf-text-secondary) }
.order-summary-row.discount { color: var(--sf-success) }
.order-summary-divider { border: none; border-top: 1px solid var(--sf-border); margin: .625rem 0 }
.order-summary-total { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0 }
.order-summary-total-label { font-size: 1rem; font-weight: 700; color: var(--sf-text) }
.order-summary-total-value { font-size: 1.25rem; font-weight: 700; color: var(--sf-primary) }

/* Checkout Buttons */
.checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.5rem; border-radius: var(--sf-radius); font-size: .9375rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.15s; width: 100%; text-align: center; text-decoration: none;
}
.checkout-btn-primary { background: var(--sf-primary); color: #fff }
.checkout-btn-primary:hover { background: var(--sf-primary-hover); color: #fff }
.checkout-btn-primary:disabled { opacity: .5; cursor: not-allowed }
.checkout-btn-secondary { background: transparent; color: var(--sf-text-secondary); border: 1px solid var(--sf-border) }
.checkout-btn-secondary:hover { background: var(--sf-bg-secondary) }
.checkout-btn-success { background: var(--sf-success); color: #fff }
.checkout-btn-success:hover { opacity: .9 }
.checkout-nav { display: flex; gap: .75rem; margin-top: 1.5rem }
.checkout-nav-back { flex: 0 0 auto }
.checkout-nav-next { flex: 1 }

/* Success */
.checkout-success { text-align: center; max-width: 560px; margin: 0 auto }
.checkout-success-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--sf-success-light); display: flex; align-items: center; justify-content: center; color: var(--sf-success) }
.checkout-success-title { font-size: 1.5rem; font-weight: 700; color: var(--sf-text); margin-bottom: .5rem }
.checkout-success-desc { font-size: .9375rem; color: var(--sf-text-muted); margin-bottom: .5rem; line-height: 1.6 }
.checkout-success-order-no { font-size: 1.125rem; font-weight: 700; color: var(--sf-primary); margin-bottom: 1.5rem; display: block }
.checkout-success-summary { text-align: left; background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 1.25rem; margin-bottom: 1.5rem }
.checkout-success-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap }

/* Checkout Loading */
.checkout-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; color: var(--sf-text-muted) }
.checkout-spinner { width: 40px; height: 40px; border: 3px solid var(--sf-border); border-top-color: var(--sf-primary); border-radius: 50%; animation: checkoutSpin .8s linear infinite; margin-bottom: 1rem }
@keyframes checkoutSpin { to { transform: rotate(360deg) } }

/* Checkout Alert */
.checkout-alert { padding: .875rem 1rem; border-radius: var(--sf-radius-md); font-size: .875rem; margin-bottom: 1rem }
.checkout-alert-error { background: rgba(229,62,62,0.08); color: var(--sf-danger); border: 1px solid rgba(229,62,62,0.2) }

/* Address Utilities */
.address-empty-state { text-align: center; padding: 1rem 0 }
.address-empty-text { color: var(--sf-text-muted); font-size: .9375rem; margin-bottom: 1rem }
.address-default-badge { font-size: .6875rem; background: var(--sf-primary); color: #fff; padding: .125rem .375rem; border-radius: .25rem; font-weight: 500 }
.new-address-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sf-border) }
.new-address-form-title { font-weight: 600; font-size: .9375rem; color: var(--sf-text); margin-bottom: 1rem }

/* Button Width Utilities */
.sf-btn-w-lg { max-width: 160px }
.sf-btn-w-md { max-width: 120px }
.sf-btn-w-sm { max-width: 260px; margin: 0 auto }

/* Payment & Checkout Utilities */
.payment-security-note { font-size: .75rem; color: var(--sf-text-muted); margin-top: .75rem }
.payment-security-note svg { display: inline; vertical-align: middle; margin-right: .25rem }
.checkout-success-summary-title { font-weight: 600; font-size: .9375rem; margin-bottom: .75rem; color: var(--sf-text) }
.spinner-inline { width: 18px; height: 18px; border-width: 2px; margin: 0 }
.mt-075 { margin-top: .75rem }
.pt-2 { padding-top: 20px }

/* ══════════════════════════════════════════════
   COMMON PAGE STYLES
   ══════════════════════════════════════════════ */

/* ── Auth Pages ── */
.sf-auth-container { max-width: 440px; margin: 48px auto; padding: 32px; background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-xl); box-shadow: var(--sf-card-shadow) }
.sf-auth-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 8px; color: var(--sf-text) }
.sf-auth-subtitle { font-size: .9rem; text-align: center; color: var(--sf-text-muted); margin-bottom: 24px }
.sf-auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: .8rem; color: var(--sf-text-muted) }
.sf-auth-divider::before, .sf-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--sf-border) }
.sf-auth-social-btn {
    width: 100%; padding: 12px; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text); font-size: .9rem; font-weight: 500; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all var(--sf-transition); margin-bottom: 8px;
}
.sf-auth-social-btn:hover { border-color: var(--sf-primary); background: var(--sf-primary-light) }
.sf-auth-link { font-size: .85rem; text-align: center; margin-top: 16px; color: var(--sf-text-muted) }
.sf-auth-link a { color: var(--sf-primary); font-weight: 600 }

/* Auth Pages — Full Layout */
.sf-auth-layout { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 300px); padding: 2rem 1rem }
.sf-auth-card { width: 100%; max-width: 440px; background: var(--sf-card-bg, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 30px rgba(0,0,0,0.06); padding: 2.5rem 2rem }
.dark .sf-auth-card { background: var(--sf-card-bg, #1e1e2e); box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 30px rgba(0,0,0,0.2) }
.sf-auth-description { text-align: center; color: var(--sf-text-muted, #6b7280); font-size: 0.9375rem; margin-bottom: 1.75rem; line-height: 1.5 }
.sf-auth-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.25rem; background: var(--sf-primary-light, #eef2ff) }
.dark .sf-auth-icon { background: rgba(99, 102, 241, 0.15) }
.sf-auth-icon svg { color: var(--sf-primary, #4f46e5) }
.sf-auth-form { display: flex; flex-direction: column; gap: 1rem }
.sf-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap }
.sf-auth-submit { width: 100%; padding: 0.75rem 1.5rem; background: var(--sf-primary, #4f46e5); color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; font-family: inherit; margin-top: 0.25rem }
.sf-auth-submit:hover { background: var(--sf-primary-hover, #4338ca) }
.sf-auth-submit:disabled { opacity: 0.6; cursor: not-allowed }
.sf-auth-submit--narrow { max-width: 200px; margin: 0 auto }
.sf-auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--sf-text-muted, #6b7280) }
.sf-auth-footer a { color: var(--sf-primary, #4f46e5); text-decoration: none; font-weight: 600 }
.sf-auth-footer a:hover { text-decoration: underline }
.sf-auth-link--btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.875rem; color: var(--sf-primary, #4f46e5); font-weight: 500 }
.sf-auth-link--btn:hover { text-decoration: underline }

/* Social Login Buttons */
.sf-social-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem }
.sf-social-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--sf-border, #e5e7eb); border-radius: 8px; background: var(--sf-card-bg, #fff); color: var(--sf-text, #374151); font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; text-decoration: none; font-family: inherit }
.sf-social-btn:hover { background: var(--sf-hover-bg, #f9fafb); border-color: var(--sf-border-hover, #d1d5db) }
.dark .sf-social-btn { background: var(--sf-card-bg, #1e1e2e); border-color: var(--sf-border, #374151); color: var(--sf-text, #e5e7eb) }
.dark .sf-social-btn:hover { background: var(--sf-hover-bg, #2a2a3e) }
.sf-social-btn:disabled { opacity: 0.6; cursor: not-allowed }
.sf-social-btn svg { flex-shrink: 0 }

/* Form Elements */
.sf-form-group { display: flex; flex-direction: column; gap: 0.375rem }
.sf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
@media (max-width: 480px) { .sf-form-row { grid-template-columns: 1fr } }
.sf-form-label { font-size: 0.875rem; font-weight: 500; color: var(--sf-text, #374151) }
.dark .sf-form-label { color: var(--sf-text, #d1d5db) }
.sf-form-input { width: 100%; padding: 0.6875rem 0.875rem; border: 1px solid var(--sf-border, #d1d5db); border-radius: 8px; font-size: 0.9375rem; font-family: inherit; background: var(--sf-input-bg, #fff); color: var(--sf-text, #111); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box }
.sf-form-input:focus { border-color: var(--sf-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) }
.sf-form-input.is-invalid { border-color: #ef4444 }
.dark .sf-form-input { background: var(--sf-input-bg, #16162a); border-color: var(--sf-border, #374151); color: var(--sf-text, #f0f0f0) }
.dark .sf-form-input:focus { border-color: var(--sf-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) }
.sf-form-error { font-size: 0.8125rem; color: #ef4444; margin-top: 0.125rem }
.sf-form-hint { font-size: 0.75rem; color: var(--sf-text-muted, #9ca3af); margin-top: 0.125rem }
.sf-form-required { color: #ef4444 }

/* Password Field */
.sf-password-wrapper { position: relative }
.sf-password-wrapper .sf-form-input { padding-right: 2.75rem }
.sf-password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--sf-text-muted, #9ca3af); padding: 0.25rem; display: flex; align-items: center }
.sf-password-toggle:hover { color: var(--sf-text, #374151) }

/* Password Strength */
.sf-password-strength { display: flex; gap: 0.25rem; margin-top: 0.375rem }
.sf-password-strength-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sf-border, #e5e7eb); transition: background 0.2s ease }
.dark .sf-password-strength-bar { background: var(--sf-border, #374151) }
.sf-password-strength-bar.active-weak { background: #ef4444 }
.sf-password-strength-bar.active-fair { background: #f59e0b }
.sf-password-strength-bar.active-good { background: #10b981 }
.sf-password-strength-bar.active-strong { background: #059669 }
.sf-password-strength-label { font-size: 0.75rem; margin-top: 0.25rem }
.sf-strength-weak { color: #ef4444 }
.sf-strength-fair { color: #f59e0b }
.sf-strength-good { color: #10b981 }
.sf-strength-strong { color: #059669 }

/* Checkbox */
.sf-checkbox-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--sf-text, #374151); cursor: pointer; user-select: none; line-height: 1.4 }
.dark .sf-checkbox-label { color: var(--sf-text, #d1d5db) }
.sf-checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0.125rem; accent-color: var(--sf-primary, #4f46e5); cursor: pointer; flex-shrink: 0 }
.sf-checkbox-label a { color: var(--sf-primary, #4f46e5); text-decoration: none; font-weight: 500 }
.sf-checkbox-label a:hover { text-decoration: underline }

/* Alerts */
.sf-alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem }
.sf-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca }
.dark .sf-alert-error { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border-color: rgba(239, 68, 68, 0.2) }

/* Spinner */
.sf-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: sf-spin 0.6s linear infinite; vertical-align: middle; margin-right: 0.5rem }
.sf-spinner--dark { border-color: rgba(0,0,0,0.15); border-top-color: var(--sf-text, #374151) }
@keyframes sf-spin { to { transform: rotate(360deg) } }

/* 2FA Section */
.sf-2fa-section { text-align: center }
.sf-2fa-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sf-primary-light, #eef2ff); margin: 0 auto 1rem }
.dark .sf-2fa-icon { background: rgba(99, 102, 241, 0.15) }
.sf-2fa-icon svg { color: var(--sf-primary, #4f46e5) }
.sf-2fa-description { font-size: 0.875rem; color: var(--sf-text-muted, #6b7280); margin-bottom: 1.25rem; line-height: 1.5 }
.sf-2fa-input { width: 100%; max-width: 200px; margin: 0 auto 1rem; text-align: center; font-size: 1.5rem; letter-spacing: 0.5em; padding: 0.75rem 1rem; border: 1px solid var(--sf-border, #d1d5db); border-radius: 8px; background: var(--sf-input-bg, #fff); color: var(--sf-text, #111); outline: none; font-family: 'JetBrains Mono', 'Fira Code', monospace; display: block }
.dark .sf-2fa-input { background: var(--sf-input-bg, #16162a); border-color: var(--sf-border, #374151); color: var(--sf-text, #f0f0f0) }
.sf-2fa-input:focus { border-color: var(--sf-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) }
.sf-2fa-back { margin-top: 1rem }

/* Success State */
.sf-success-state { text-align: center }
.sf-success-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.25rem; background: #ecfdf5 }
.dark .sf-success-icon { background: rgba(16, 185, 129, 0.15) }
.sf-success-icon svg { color: #10b981 }
.sf-success-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--sf-text, #111) }
.dark .sf-success-title { color: var(--sf-text, #f0f0f0) }
.sf-success-message { color: var(--sf-text-muted, #6b7280); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.5rem }
.sf-success-hint { color: var(--sf-text-muted, #9ca3af); font-size: 0.8125rem; line-height: 1.5; margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: var(--sf-hover-bg, #f9fafb); border-radius: 8px }
.dark .sf-success-hint { background: var(--sf-hover-bg, #16162a) }

/* Back Link */
.sf-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--sf-primary, #4f46e5); text-decoration: none; font-weight: 500 }
.sf-back-link:hover { text-decoration: underline }

/* Auth Page Responsive */
@media (max-width: 480px) {
    .sf-auth-card { padding: 2rem 1.25rem; border-radius: 8px; box-shadow: none; border: 1px solid var(--sf-border, #e5e7eb) }
    .dark .sf-auth-card { border-color: var(--sf-border, #374151) }
}

/* ── Account Pages ── */
.sf-account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px }
@media (max-width: 768px) { .sf-account-layout { grid-template-columns: 1fr } }
.sf-account-sidebar { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden; align-self: start; position: sticky; top: 90px }
.sf-account-nav-link {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: .875rem;
    color: var(--sf-text-secondary); text-decoration: none; border-left: 3px solid transparent;
    transition: all var(--sf-transition);
}
.sf-account-nav-link:hover { background: var(--sf-bg-secondary); color: var(--sf-primary) }
.sf-account-nav-link.active { background: var(--sf-primary-light); color: var(--sf-primary); border-left-color: var(--sf-primary); font-weight: 600 }
.sf-account-content { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 24px }
.sf-account-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; color: var(--sf-text) }

/* ── Status Badges ── */
.sf-badge { display: inline-block; padding: 3px 10px; border-radius: var(--sf-radius-full); font-size: .75rem; font-weight: 600 }
.sf-badge-success { background: #dcfce7; color: #166534 }
.sf-badge-warning { background: #fef3c7; color: #92400e }
.sf-badge-danger { background: #fee2e2; color: #991b1b }
.sf-badge-info { background: #dbeafe; color: #1e40af }
.sf-badge-gray { background: var(--sf-bg-secondary); color: var(--sf-text-muted) }
html.dark .sf-badge-success { background: #052e16; color: #4ade80 }
html.dark .sf-badge-warning { background: #451a03; color: #fbbf24 }
html.dark .sf-badge-danger { background: #450a0a; color: #f87171 }
html.dark .sf-badge-info { background: #172554; color: #60a5fa }

/* ── Card / Panel ── */
.sf-card { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 20px; box-shadow: var(--sf-card-shadow) }
.sf-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--sf-text) }

/* ── Cart Page Table (legacy) ── */
.sf-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px }
@media (max-width: 1024px) { .sf-cart-layout { grid-template-columns: 1fr } }
.sf-cart-table { width: 100%; border-collapse: collapse }
.sf-cart-table th { padding: 12px 0; font-size: .8rem; font-weight: 600; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--sf-border); text-align: left }
.sf-cart-table td { padding: 16px 0; border-bottom: 1px solid var(--sf-border-light); vertical-align: middle }
.sf-cart-item-info { display: flex; align-items: center; gap: 16px }
.sf-cart-item-img { width: 80px; height: 80px; border-radius: var(--sf-radius); object-fit: cover; background: var(--sf-bg-secondary); flex-shrink: 0 }
.sf-cart-item-name { font-size: .9rem; font-weight: 600; color: var(--sf-text) }
.sf-cart-item-variant { font-size: .8rem; color: var(--sf-text-muted); margin-top: 2px }
.sf-cart-item-price { font-size: .95rem; font-weight: 700; color: var(--sf-text); white-space: nowrap }
.sf-cart-item-remove { color: var(--sf-text-muted); cursor: pointer; padding: 4px; transition: color var(--sf-transition) }
.sf-cart-item-remove:hover { color: var(--sf-danger) }
.sf-order-summary { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 24px; align-self: start; position: sticky; top: 90px }
.sf-order-summary-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; color: var(--sf-text) }
.sf-order-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: .9rem; color: var(--sf-text-secondary) }
.sf-order-summary-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; margin-top: 12px; border-top: 2px solid var(--sf-border); font-size: 1.15rem; font-weight: 800; color: var(--sf-text) }
.sf-coupon-form { display: flex; gap: 8px; margin: 16px 0 }
.sf-coupon-form .sf-input { flex: 1 }
.sf-coupon-form .sf-btn { white-space: nowrap }

/* ── Checkout Page (legacy) ── */
.sf-checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px }
@media (max-width: 1024px) { .sf-checkout-layout { grid-template-columns: 1fr } }
.sf-checkout-section { margin-bottom: 32px }
.sf-checkout-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; color: var(--sf-text); padding-bottom: 8px; border-bottom: 1px solid var(--sf-border) }

/* ── 404 Page ── */
.sf-404 { text-align: center; padding: 80px 20px }
.sf-404 h1 { font-size: 5rem; font-weight: 900; color: var(--sf-primary); margin-bottom: 16px }
.sf-404 p { font-size: 1.1rem; color: var(--sf-text-muted); margin-bottom: 24px }
.sf-404-section { padding: 80px 0 100px; text-align: center; min-height: 60vh; display: flex; align-items: center; justify-content: center }
.sf-404-inner { max-width: 560px; margin: 0 auto }
.sf-404-number { font-size: 10rem; font-weight: 800; line-height: 1; color: var(--sf-text, #111827); opacity: 0.06; margin: 0; pointer-events: none; user-select: none; letter-spacing: -8px }
.sf-404-title { font-size: 1.75rem; font-weight: 700; color: var(--sf-text, #111827); margin: -24px 0 12px; position: relative }
.sf-404-desc { font-size: 1rem; color: var(--sf-text-muted, #6b7280); line-height: 1.6; margin: 0 0 32px }
.sf-404-search { margin: 0 auto 32px; max-width: 420px }
.sf-404-search-form { display: flex; gap: 8px }
.sf-404-search-input { flex: 1; padding: 12px 16px; border: 1px solid var(--sf-border, #d1d5db); border-radius: 8px; font-size: 0.95rem; outline: none; background: var(--sf-bg, #fff); color: var(--sf-text, #111827); transition: border-color 0.2s, box-shadow 0.2s }
.sf-404-search-input:focus { border-color: var(--sf-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,0.1) }
.sf-404-search-input::placeholder { color: var(--sf-text-muted, #9ca3af) }
.sf-404-search-btn { padding: 12px 20px; background: var(--sf-primary, #4f46e5); color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; gap: 6px; white-space: nowrap }
.sf-404-search-btn:hover { background: var(--sf-primary-dark, #3730a3) }
.sf-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.sf-404-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--sf-primary, #4f46e5); color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.2s }
.sf-404-btn-primary:hover { background: var(--sf-primary-dark, #3730a3); transform: translateY(-1px) }
.sf-404-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--sf-bg, #fff); color: var(--sf-text, #111827); border: 1px solid var(--sf-border, #d1d5db); border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: border-color 0.2s, transform 0.2s }
.sf-404-btn-secondary:hover { border-color: var(--sf-primary, #4f46e5); color: var(--sf-primary, #4f46e5); transform: translateY(-1px) }
.sf-404-products { margin-top: 64px; text-align: left }
.sf-404-products-title { font-size: 1.25rem; font-weight: 700; color: var(--sf-text, #111827); margin: 0 0 20px; text-align: center }
.sf-404-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 800px; margin: 0 auto }
@media (max-width: 768px) { .sf-404-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px } }
.sf-404-product-card { background: var(--sf-bg, #fff); border: 1px solid var(--sf-border, #e5e7eb); border-radius: 10px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; display: block }
.sf-404-product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07) }
.sf-404-product-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sf-bg-secondary, #f3f4f6) }
.sf-404-product-card-img-placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--sf-bg-secondary, #f3f4f6); color: var(--sf-text-muted, #9ca3af) }
.sf-404-product-card-body { padding: 10px 12px 14px }
.sf-404-product-card-name { font-size: 0.825rem; font-weight: 500; color: var(--sf-text, #111827); margin: 0 0 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sf-404-product-card-price { font-size: 0.9rem; font-weight: 700; color: var(--sf-text, #111827) }
@media (max-width: 640px) {
    .sf-404-section { padding: 48px 0 64px }
    .sf-404-number { font-size: 6rem; letter-spacing: -4px }
    .sf-404-title { font-size: 1.35rem; margin-top: -16px }
    .sf-404-desc { font-size: 0.9rem }
    .sf-404-search-form { flex-direction: column }
    .sf-404-search-btn { justify-content: center }
    .sf-404-actions { flex-direction: column; align-items: stretch }
    .sf-404-btn-primary, .sf-404-btn-secondary { justify-content: center }
}

/* ── Blog Index Page ── */
.sf-blog-hero { background: var(--sf-surface, #f9fafb); padding: 40px 0 32px; border-bottom: 1px solid var(--sf-border, #e5e7eb) }
.sf-blog-hero-title { font-size: 2rem; font-weight: 700; color: var(--sf-text, #111827); margin: 0 }
.sf-blog-section { padding: 40px 0 64px }
.sf-blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start }
@media (max-width: 1024px) { .sf-blog-layout { grid-template-columns: 1fr } }
.sf-tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px }
.sf-tag-pill { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 0.825rem; font-weight: 500; border: 1px solid var(--sf-border, #e5e7eb); background: var(--sf-bg, #fff); color: var(--sf-text-muted, #6b7280); cursor: pointer; text-decoration: none; transition: all 0.2s }
.sf-tag-pill:hover { border-color: var(--sf-primary, #4f46e5); color: var(--sf-primary, #4f46e5) }
.sf-tag-pill.active { background: var(--sf-primary, #4f46e5); border-color: var(--sf-primary, #4f46e5); color: #fff }
.sf-blog-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--sf-bg-secondary, #f3f4f6) }
.sf-blog-card-img-placeholder { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--sf-primary-light, #eef2ff) 0%, var(--sf-surface, #f9fafb) 100%); display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted, #9ca3af) }
.sf-blog-card-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sf-primary, #4f46e5); margin-bottom: 8px }
.sf-blog-card-meta-item { display: flex; align-items: center; gap: 4px }
.sf-blog-card-readmore { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 500; color: var(--sf-primary, #4f46e5); text-decoration: none; margin-top: 12px; transition: gap 0.2s }
.sf-blog-card-readmore:hover { gap: 8px }
.sf-blog-loadmore { text-align: center; padding: 40px 0 0 }
.sf-blog-loadmore-btn { display: inline-block; padding: 12px 32px; border: 1px solid var(--sf-border, #d1d5db); border-radius: 8px; background: var(--sf-bg, #fff); color: var(--sf-text, #111827); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s }
.sf-blog-loadmore-btn:hover { border-color: var(--sf-primary, #4f46e5); color: var(--sf-primary, #4f46e5) }
.sf-blog-loadmore-btn:disabled { opacity: 0.6; cursor: not-allowed }
.sf-blog-sidebar { position: sticky; top: 80px }
@media (max-width: 1024px) { .sf-blog-sidebar { display: none } }
.sf-sidebar-section { background: var(--sf-surface, #f9fafb); border-radius: 12px; padding: 20px; margin-bottom: 20px }
.sf-sidebar-title { font-size: 0.95rem; font-weight: 700; color: var(--sf-text, #111827); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--sf-primary, #4f46e5) }
.sf-sidebar-posts { list-style: none; padding: 0; margin: 0 }
.sf-sidebar-posts li { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sf-border, #e5e7eb) }
.sf-sidebar-posts li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none }
.sf-sidebar-post-link { font-size: 0.875rem; font-weight: 500; color: var(--sf-text, #111827); text-decoration: none; line-height: 1.5; display: block }
.sf-sidebar-post-link:hover { color: var(--sf-primary, #4f46e5) }
.sf-sidebar-post-date { font-size: 0.75rem; color: var(--sf-text-muted, #9ca3af); margin-top: 2px }
.sf-sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px }
.sf-sidebar-tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.775rem; background: var(--sf-bg, #fff); border: 1px solid var(--sf-border, #e5e7eb); color: var(--sf-text-muted, #6b7280); text-decoration: none; transition: all 0.2s }
.sf-sidebar-tag:hover { border-color: var(--sf-primary, #4f46e5); color: var(--sf-primary, #4f46e5) }
.sf-blog-empty { text-align: center; padding: 60px 20px; color: var(--sf-text-muted, #6b7280) }
.sf-blog-empty-icon { color: var(--sf-text-muted, #d1d5db); margin-bottom: 16px }
.sf-blog-empty-title { font-size: 1.125rem; font-weight: 600; color: var(--sf-text, #111827); margin: 0 0 8px }
.sf-blog-empty-desc { font-size: 0.9rem; margin: 0 }
@media (max-width: 640px) {
    .sf-blog-hero { padding: 24px 0 20px }
    .sf-blog-hero-title { font-size: 1.5rem }
    .sf-blog-section { padding: 24px 0 48px }
}

/* ── Blog Post / Article Page ── */
.sf-article-hero { background: var(--sf-surface, #f9fafb); padding: 40px 0 36px; border-bottom: 1px solid var(--sf-border, #e5e7eb) }
.sf-article-hero-inner { max-width: 800px; margin: 0 auto }
.sf-article-tags-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px }
.sf-article-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.725rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--sf-primary-light, #eef2ff); color: var(--sf-primary, #4f46e5); text-decoration: none; transition: background 0.2s }
.sf-article-tag:hover { background: var(--sf-primary, #4f46e5); color: #fff }
.sf-article-title { font-size: 2.25rem; font-weight: 700; color: var(--sf-text, #111827); margin: 0 0 16px; line-height: 1.25 }
.sf-article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--sf-text-muted, #6b7280) }
.sf-article-meta-item { display: flex; align-items: center; gap: 6px }
.sf-article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sf-text-muted, #9ca3af) }
.sf-article-featured { padding: 32px 0 0 }
.sf-article-featured-img { max-width: 800px; margin: 0 auto; display: block }
.sf-article-featured-img img { width: 100%; border-radius: 12px; display: block; aspect-ratio: 16 / 9; object-fit: cover }
.sf-article-body { padding: 40px 0 48px }
.sf-article-body-inner { max-width: 800px; margin: 0 auto }
.sf-blog-content { font-size: 1.05rem; line-height: 1.8; color: var(--sf-text, #374151) }
.sf-blog-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2em 0 0.75em; color: var(--sf-text, #111827); line-height: 1.3 }
.sf-blog-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75em 0 0.6em; color: var(--sf-text, #111827); line-height: 1.4 }
.sf-blog-content h4 { font-size: 1.1rem; font-weight: 600; margin: 1.5em 0 0.5em; color: var(--sf-text, #111827) }
.sf-blog-content p { margin: 0 0 1.25em }
.sf-blog-content a { color: var(--sf-primary, #4f46e5); text-decoration: underline; text-underline-offset: 2px }
.sf-blog-content a:hover { color: var(--sf-primary-dark, #3730a3) }
.sf-blog-content ul, .sf-blog-content ol { margin: 0 0 1.25em; padding-left: 1.5em }
.sf-blog-content li { margin-bottom: 0.4em }
.sf-blog-content blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--sf-primary, #4f46e5); background: var(--sf-surface, #f9fafb); border-radius: 0 8px 8px 0; font-style: italic; color: var(--sf-text-muted, #6b7280) }
.sf-blog-content blockquote p:last-child { margin-bottom: 0 }
.sf-blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5em 0 }
.sf-blog-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem }
.sf-blog-content th, .sf-blog-content td { padding: 10px 14px; border: 1px solid var(--sf-border, #e5e7eb); text-align: left }
.sf-blog-content th { background: var(--sf-surface, #f9fafb); font-weight: 600; color: var(--sf-text, #111827) }
.sf-blog-content pre { background: var(--sf-surface, #1f2937); color: #e5e7eb; padding: 16px 20px; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; margin: 1.5em 0; line-height: 1.6 }
.sf-blog-content code { background: var(--sf-surface, #f3f4f6); padding: 2px 6px; border-radius: 4px; font-size: 0.9em }
.sf-blog-content pre code { background: none; padding: 0; border-radius: 0; font-size: inherit }
.sf-blog-content hr { border: none; border-top: 1px solid var(--sf-border, #e5e7eb); margin: 2em 0 }
.sf-article-tags-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 24px 0; margin-top: 32px; border-top: 1px solid var(--sf-border, #e5e7eb) }
.sf-article-tags-label { font-size: 0.85rem; font-weight: 600; color: var(--sf-text, #111827) }
.sf-share-section { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 0 0 }
.sf-share-label { font-size: 0.85rem; font-weight: 600; color: var(--sf-text, #111827); margin-right: 4px }
.sf-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--sf-border, #e5e7eb); background: var(--sf-bg, #fff); color: var(--sf-text-muted, #6b7280); font-size: 0.8rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.2s }
.sf-share-btn:hover { border-color: var(--sf-primary, #4f46e5); color: var(--sf-primary, #4f46e5) }
.sf-share-btn.sf-share-copied { border-color: var(--sf-success, #059669); color: var(--sf-success, #059669) }
.sf-related-section { padding: 48px 0 64px; border-top: 1px solid var(--sf-border, #e5e7eb) }
.sf-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
@media (max-width: 768px) { .sf-related-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .sf-related-grid { grid-template-columns: 1fr } }
.sf-related-card { background: var(--sf-bg, #fff); border: 1px solid var(--sf-border, #e5e7eb); border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s }
.sf-related-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07) }
.sf-related-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--sf-bg-secondary, #f3f4f6) }
.sf-related-card-img-placeholder { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--sf-primary-light, #eef2ff) 0%, var(--sf-surface, #f9fafb) 100%); display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted, #9ca3af) }
.sf-related-card-body { padding: 14px 16px 18px }
.sf-related-card-title { font-size: 0.95rem; font-weight: 600; color: var(--sf-text, #111827); margin: 0 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sf-related-card-title a { color: inherit; text-decoration: none }
.sf-related-card-title a:hover { color: var(--sf-primary, #4f46e5) }
.sf-related-card-date { font-size: 0.775rem; color: var(--sf-text-muted, #9ca3af) }
@media (max-width: 640px) {
    .sf-article-hero { padding: 24px 0 20px }
    .sf-article-title { font-size: 1.65rem }
    .sf-article-body { padding: 28px 0 36px }
    .sf-blog-content { font-size: 1rem }
    .sf-related-section { padding: 32px 0 48px }
}

/* ── CMS Page ── */
.sf-page-hero { background: var(--sf-surface, #f9fafb); padding: 40px 0 32px; border-bottom: 1px solid var(--sf-border, #e5e7eb) }
.sf-page-title { font-size: 2rem; font-weight: 700; color: var(--sf-text, #111827); margin: 0; line-height: 1.3 }
.sf-page-content { padding: 48px 0 64px }
.sf-page-body { max-width: 800px; margin: 0 auto }
@media (max-width: 640px) {
    .sf-page-hero { padding: 24px 0 20px }
    .sf-page-title { font-size: 1.5rem }
    .sf-page-content { padding: 32px 0 48px }
}

/* ── Favorites Page (Account) ── */
.sf-account-content .sf-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
@media (max-width: 1200px) { .sf-account-content .sf-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 768px) { .sf-account-content .sf-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } }
.sf-account-content .sf-product-card { background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: 20px; overflow: hidden; position: relative; transition: transform var(--sf-transition), box-shadow var(--sf-transition); box-shadow: var(--sf-card-shadow) }
.sf-account-content .sf-product-card:hover { transform: translateY(-5px); box-shadow: var(--sf-card-shadow-hover) }
.sf-account-content .sf-product-card-media { display: block; background: var(--sf-bg-secondary); position: relative; overflow: hidden; aspect-ratio: 1 / 1 }
.sf-account-content .sf-product-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--sf-transition) }
.sf-account-content .sf-product-card:hover .sf-product-card-img { transform: scale(1.04) }
.sf-account-content .sf-product-card-img-placeholder, .sf-account-content .sf-product-card-placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted) }
.sf-account-content .sf-product-card-body { padding: 14px 14px 16px }
.sf-account-content .sf-product-card-name { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--sf-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35 }
.sf-account-content .sf-product-card-title { color: inherit; text-decoration: none }
.sf-account-content .sf-product-card-title:hover { color: var(--sf-primary) }
.sf-account-content .sf-product-card-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.sf-account-content .sf-product-card-price .sf-price-current, .sf-account-content .sf-product-card-price .sf-product-card-current-price { font-size: 1.1rem; font-weight: 800; color: var(--sf-text) }
.sf-account-content .sf-product-card-price .sf-price-compare, .sf-account-content .sf-product-card-price .sf-product-card-old-price { font-size: 0.86rem; color: var(--sf-text-muted); text-decoration: line-through }
.sf-account-content .sf-product-card-actions { display: flex; gap: 8px }
.sf-account-content .sf-product-card-cart-btn { flex: 1; border: none; border-radius: 12px; padding: 9px 12px; font-weight: 700; font-size: 0.85rem; background: var(--sf-primary); color: #fff; transition: background var(--sf-transition) }
.sf-account-content .sf-product-card-cart-btn:hover { background: var(--sf-primary-hover) }
.sf-account-content .sf-product-card-cart-btn:disabled { opacity: 0.6; cursor: not-allowed }
.sf-account-content .sf-product-card-wish-btn { width: 38px; height: 38px; border: 1px solid var(--sf-border); border-radius: 12px; background: #fff; color: var(--sf-text-muted); transition: color var(--sf-transition), border-color var(--sf-transition); flex-shrink: 0 }
.sf-account-content .sf-product-card-wish-btn:hover, .sf-account-content .sf-product-card-wish-btn.sf-product-wishlist-active { color: var(--sf-danger); border-color: var(--sf-danger) }
.sf-account-content .sf-product-card-wish-btn.sf-product-wishlist-active svg { fill: var(--sf-danger) }

/* ── Empty Icon Utility ── */
.sf-empty-icon { color: var(--sf-text-muted) }

/* ── Skeleton Loading ── */
.sf-skeleton { background: linear-gradient(90deg, var(--sf-bg-secondary, #f3f4f6) 25%, var(--sf-border, #e5e7eb) 50%, var(--sf-bg-secondary, #f3f4f6) 75%); background-size: 200% 100%; animation: sf-shimmer 1.5s ease-in-out infinite; border-radius: 8px }
@keyframes sf-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

/* ── Loading Spinner ── */
.sf-loading { display: flex; align-items: center; justify-content: center; padding: 20px }
.sf-loading-sm { padding: 8px }
.sf-loading-sm .sf-loading-spinner { width: 20px; height: 20px }
.sf-loading-spinner { width: 32px; height: 32px; animation: sfSpin .8s linear infinite; color: var(--sf-primary) }
@keyframes sfSpin { to { transform: rotate(360deg) } }

/* ── Quantity Selector ── */
.sf-quantity { display: inline-flex; align-items: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden }
.sf-quantity-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--sf-bg-secondary); border: none; cursor: pointer; color: var(--sf-text); transition: background var(--sf-transition) }
.sf-quantity-btn:hover:not(:disabled) { background: var(--sf-border) }
.sf-quantity-btn:disabled { opacity: .4; cursor: not-allowed }
.sf-quantity-input { width: 40px; height: 32px; text-align: center; font-weight: 600; font-size: .85rem; border: none; border-left: 1px solid var(--sf-border); border-right: 1px solid var(--sf-border); background: var(--sf-bg); color: var(--sf-text); outline: none; -moz-appearance: textfield }
.sf-quantity-input::-webkit-outer-spin-button, .sf-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* ── Price ── */
.sf-price { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
.sf-price-current { font-weight: 700; color: var(--sf-text) }
.sf-price-sale { color: var(--sf-primary) }
.sf-price-old { font-size: .85em; color: var(--sf-text-muted); text-decoration: line-through }
.sf-price-discount { font-size: .75em; font-weight: 700; color: var(--sf-danger); background: rgba(229,62,62,.08); padding: 2px 6px; border-radius: var(--sf-radius-sm) }
.sf-price-lg .sf-price-current { font-size: 1.5rem }
.sf-price-sm .sf-price-current { font-size: .9rem }

/* ── Rating ── */
.sf-rating { display: inline-flex; align-items: center; gap: 4px }
.sf-rating-stars { display: flex; gap: 1px }
.sf-rating-star { color: #d1d5db; font-size: 0 }
.sf-star-full { color: #f59e0b }
.sf-star-half { color: #f59e0b }
.sf-rating-value { font-size: .8rem; color: var(--sf-text-muted); margin-left: 2px }
.sf-rating-count { font-size: .75rem; color: var(--sf-text-muted) }
.sf-rating-sm .sf-rating-star svg { width: 14px; height: 14px }
.sf-rating-lg .sf-rating-star svg { width: 20px; height: 20px }

/* ── Modal ── */
.sf-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px }
.sf-modal { background: var(--sf-bg); border-radius: var(--sf-radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.2); width: 100%; max-height: 90vh; overflow-y: auto }
.sf-modal-sm { max-width: 400px }
.sf-modal-md { max-width: 560px }
.sf-modal-lg { max-width: 800px }
.sf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--sf-border) }
.sf-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--sf-text); margin: 0 }
.sf-modal-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--sf-text-muted); cursor: pointer; background: none; border: none; transition: background var(--sf-transition) }
.sf-modal-close:hover { background: var(--sf-bg-secondary) }
.sf-modal-body { padding: 24px }
.sf-modal-footer { padding: 16px 24px; border-top: 1px solid var(--sf-border); display: flex; justify-content: flex-end; gap: 8px }

/* ── Form Controls ── */
.sf-form-control {
    width: 100%; padding: 10px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text); font-size: .9rem; line-height: 1.5;
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-form-control:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,.1) }
.sf-form-select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-text); font-size: .9rem; line-height: 1.5;
    appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
    cursor: pointer; transition: border-color var(--sf-transition);
}
.sf-form-select:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(26,138,92,.1) }
.sf-textarea { resize: vertical; min-height: 100px }
.sf-is-invalid { border-color: var(--sf-danger) !important }
.sf-is-invalid:focus { box-shadow: 0 0 0 3px rgba(229,62,62,.1) !important }
.sf-has-error .sf-form-label { color: var(--sf-danger) }
.sf-text-danger { color: var(--sf-danger) }
html.dark .sf-form-control { background: var(--sf-bg-secondary); border-color: var(--sf-border); color: var(--sf-text) }
html.dark .sf-form-select { background-color: var(--sf-bg-secondary); border-color: var(--sf-border); color: var(--sf-text) }

/* ── Toast Parts ── */
.sf-toast-icon { flex-shrink: 0; display: flex; align-items: center }
.sf-toast-message { flex: 1; line-height: 1.4 }
.sf-toast-close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: rgba(255,255,255,.7); cursor: pointer; background: none; border: none; border-radius: 50%; transition: color .2s }
.sf-toast-close:hover { color: #fff }
.sf-toast-show { opacity: 1; transform: translateY(0) }
.sf-toast-hide { opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s }

/* ── Breadcrumb (Vue) ── */
.sf-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0 }
.sf-breadcrumb-item { display: inline-flex; align-items: center; font-size: .85rem; color: var(--sf-text-muted) }
.sf-breadcrumb-separator { margin: 0 8px; color: var(--sf-text-muted); opacity: .5 }
.sf-breadcrumb-link { color: var(--sf-text-muted); text-decoration: none; transition: color var(--sf-transition) }
.sf-breadcrumb-link:hover { color: var(--sf-primary) }
.sf-breadcrumb-text { color: var(--sf-text); font-weight: 500 }
.sf-breadcrumb-active { color: var(--sf-text) }

/* ── Badge Variants ── */
.sf-badge-neutral { background: var(--sf-bg-secondary); color: var(--sf-text-muted) }
html.dark .sf-badge-neutral { background: var(--sf-bg-tertiary); color: var(--sf-text-muted) }

/* ── Pagination (Vue) ── */
.sf-pagination-active { background: var(--sf-primary) !important; border-color: var(--sf-primary) !important; color: #fff !important }
.sf-pagination-prev, .sf-pagination-next { padding: 0 }

/* ── Alert (Vue) ── */
.sf-alert-content { flex: 1 }
.sf-alert-title { display: block; font-weight: 600; margin-bottom: 4px }
.sf-alert-message { line-height: 1.5 }
.sf-alert-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: inherit; opacity: .6; cursor: pointer; background: none; border: none; border-radius: 50% }
.sf-alert-close:hover { opacity: 1 }
.sf-alert { display: flex; align-items: flex-start; gap: 12px }
.sf-alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe }
.sf-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0 }
.sf-alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a }
html.dark .sf-alert-info { background: rgba(59,130,246,.1); color: #93c5fd; border-color: rgba(59,130,246,.2) }
html.dark .sf-alert-success { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: rgba(16,185,129,.2) }
html.dark .sf-alert-warning { background: rgba(245,158,11,.1); color: #fcd34d; border-color: rgba(245,158,11,.2) }

/* ── Radio ── */
.sf-radio { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sf-border); position: relative; flex-shrink: 0; transition: border-color var(--sf-transition) }
.sf-radio-checked { border-color: var(--sf-primary) }
.sf-radio-checked::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-primary) }

/* ── Tabs ── */
.sf-tabs { width: 100% }
.sf-tabs-nav { display: flex; border-bottom: 2px solid var(--sf-border); gap: 0; overflow-x: auto }
.sf-tabs-btn {
    padding: 12px 20px; font-size: .9rem; font-weight: 500; color: var(--sf-text-muted);
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; white-space: nowrap; transition: color var(--sf-transition), border-color var(--sf-transition);
}
.sf-tabs-btn:hover { color: var(--sf-text) }
.sf-tabs-btn-active { color: var(--sf-primary); border-bottom-color: var(--sf-primary) }
.sf-tabs-content { padding-top: 20px }

/* ── Empty State ── */
.sf-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; min-height: 200px }
.sf-empty-icon { color: var(--sf-text-muted); margin-bottom: 16px; opacity: .5 }
.sf-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--sf-text); margin: 0 0 8px }
.sf-empty-desc { font-size: .9rem; color: var(--sf-text-muted); margin: 0 0 16px; max-width: 360px }
.sf-empty-action { margin-top: 8px }

/* ── Address Card ── */
.sf-address-card { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg); transition: border-color var(--sf-transition) }
.sf-address-card:hover { border-color: var(--sf-primary) }
.sf-address-selected { border-color: var(--sf-primary); box-shadow: 0 0 0 2px rgba(26,138,92,.15) }
.sf-address-selectable { cursor: pointer }
.sf-address-radio { display: flex; align-items: flex-start; padding-top: 2px }
.sf-address-body { flex: 1 }
.sf-address-title { font-weight: 600; color: var(--sf-text); margin-bottom: 4px; display: flex; align-items: center }
.sf-address-name { font-size: .9rem; color: var(--sf-text); margin-bottom: 2px }
.sf-address-detail { font-size: .85rem; color: var(--sf-text-muted); line-height: 1.5 }
.sf-address-phone { font-size: .85rem; color: var(--sf-text-muted); margin-top: 4px }
.sf-address-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start }

/* ── Order Card ── */
.sf-order-card { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg); overflow: hidden }
.sf-order-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sf-border-light); background: var(--sf-bg-secondary) }
.sf-order-card-number { display: flex; align-items: center; gap: 6px; font-size: .9rem }
.sf-order-label { color: var(--sf-text-muted); font-weight: 400 }
.sf-order-card-body { padding: 16px }
.sf-order-card-info { display: flex; gap: 24px; flex-wrap: wrap }
.sf-order-info-item { display: flex; flex-direction: column; gap: 2px }
.sf-order-info-label { font-size: .8rem; color: var(--sf-text-muted) }
.sf-order-info-value { font-size: .9rem; color: var(--sf-text); font-weight: 500 }
.sf-order-total { color: var(--sf-primary); font-weight: 700 !important }
.sf-order-card-footer { padding: 12px 16px; border-top: 1px solid var(--sf-border-light); display: flex; justify-content: flex-end }

/* ── Timeline ── */
.sf-timeline { display: flex; flex-direction: column; gap: 0; padding: 8px 0 }
.sf-timeline-item { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 24px }
.sf-timeline-item:last-child { padding-bottom: 0 }
.sf-timeline-dot {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    background: var(--sf-bg-secondary); border: 2px solid var(--sf-border);
    display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); z-index: 1;
}
.sf-timeline-active .sf-timeline-dot { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff }
.sf-timeline-completed .sf-timeline-dot { background: var(--sf-success); border-color: var(--sf-success); color: #fff }
.sf-timeline-connector { position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--sf-border) }
.sf-timeline-completed .sf-timeline-connector { background: var(--sf-success) }
.sf-timeline-content { padding-top: 4px }
.sf-timeline-label { font-size: .9rem; font-weight: 500; color: var(--sf-text) }
.sf-timeline-active .sf-timeline-label { color: var(--sf-primary); font-weight: 600 }
.sf-timeline-date { font-size: .8rem; color: var(--sf-text-muted); margin-top: 2px }

/* ── Marketplace Platform Colors ── */
.sf-mp-trendyol { border-color: #f27a1a }
.sf-mp-trendyol .sf-marketplace-badge-platform { color: #f27a1a }
.sf-mp-hepsiburada { border-color: #ff6000 }
.sf-mp-hepsiburada .sf-marketplace-badge-platform { color: #ff6000 }
.sf-mp-n11 { border-color: #7B2D8E }
.sf-mp-n11 .sf-marketplace-badge-platform { color: #7B2D8E }
.sf-mp-amazon { border-color: #FF9900 }
.sf-mp-amazon .sf-marketplace-badge-platform { color: #FF9900 }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sf-section { padding: 24px 0 }
    .sf-section-title { font-size: 1.15rem }
    .sf-related-title { font-size: 1.15rem }
    .sf-main { padding-top: 16px; padding-bottom: 80px }
    .sf-cart-table th:nth-child(3), .sf-cart-table td:nth-child(3) { display: none }
}

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */

@media print {
    .sf-topbar, .sf-header, .sf-catnav, .sf-footer, .sf-newsletter-section,
    .sf-whatsapp-float, .sf-sticky-atc, .sf-toast-container { display: none !important }
    .sf-main { padding: 0 }
    body { color: #000; background: #fff }
}