/*
 * Theme: Minimalism
 * Inspired by gonbedding.vn — pure black & white, editorial, zero decoration.
 * White header, stark contrast, ultra-clean Swiss-style grid.
 */

:root {
    --sf-primary:         #000000;
    --sf-primary-hover:   #333333;
    --sf-accent:          #000000;
    --sf-bg:              #ffffff;
    --sf-surface:         #fafafa;
    --sf-text:            #111111;
    --sf-text-muted:      #999999;
    --sf-border:          #e8e8e8;
    --sf-header-bg:       #ffffff;
    --sf-font:            system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --sf-radius:          0;
    --sf-radius-sm:       0;
    --sf-radius-lg:       0;
    --sf-shadow:          none;
    --sf-shadow-md:       none;
    --sf-shadow-lg:       none;
    --sf-card-shadow:     none;
    --sf-btn-transform:   uppercase;
    --sf-btn-tracking:    0.06em;
    --sf-btn-weight:      700;
}

/* ── White header, black logo ── */
.sf-header {
    background: #ffffff;
    color: #111111;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: none;
}
.sf-header-logo { color: #111111; }
.sf-header-logo img { border-radius: 0; }
.sf-header-logo-initial {
    background: #111111;
    color: #ffffff;
    border-radius: 0;
}
.sf-header-name { display: none; }
.sf-header-logo img { height: 52px; width: auto; max-width: 200px; object-fit: contain; }
/* ── Desktop nav — dark on white header ── */
.sf-header-nav-link { color: rgba(0,0,0,0.65); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.sf-header-nav-link:hover { color: #000000; }
.sf-nav-dropdown { border-color: #e8e8e8; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.sf-nav-dropdown-item { color: #111111; }
.sf-nav-dropdown-item:hover { background: #f5f5f5; color: #000000; }
/* ── Lang switcher — dark on white header ── */
.sf-lang-btns {
    border-color: #d0d0d0;
}
.sf-lang-btn {
    color: rgba(0,0,0,0.45);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.sf-lang-btn:hover { background: #f5f5f5; color: #000000; }
.sf-lang-btn.active { background: #111111; color: #ffffff; }
.sf-lang-btn + .sf-lang-btn { border-left-color: #d0d0d0; }
/* ── Currency switcher — dark on white header ── */
.sf-currency-btn { color: rgba(0,0,0,0.35); }
.sf-currency-btn:hover { color: #000; }
.sf-currency-btn.active { color: #111; font-weight: 800; }
.sf-currency-btn + .sf-currency-btn { border-left-color: #d0d0d0; }

.sf-account-btn { color: rgba(0,0,0,0.5); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sf-account-btn:hover { color: #000000; }
.sf-cart-btn {
    background: #000000;
    color: #ffffff;
    border-radius: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.sf-cart-btn:hover { background: #333333; color: #ffffff; }
.sf-cart-count { background: #000000; border: 1px solid #ffffff; }

/* ── Category bar — thin underlines only ── */
.sf-category-bar { border-bottom: 1px solid #e8e8e8; }
.sf-category-tab {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    color: #999999;
    padding: 1rem 1.5rem;
}
.sf-category-tab:hover { color: #000000; }
.sf-category-tab.active {
    color: #000000;
    font-weight: 700;
    border-bottom: 2px solid #000000;
}

/* ── Search ── */
.sf-search {
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fafafa;
}
.sf-search:focus {
    border-color: #000000;
    box-shadow: none;
    outline: none;
}

/* ── Product cards — flat, no hover lift ── */
.sf-card {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    box-shadow: none;
}
.sf-card:hover {
    box-shadow: none;
    transform: none;
    border-color: #000000;
}
.sf-card-brand { color: #999999; font-size: 0.65rem; letter-spacing: 0.1em; }
.sf-card-name { font-weight: 500; font-size: 0.875rem; }
.sf-card-price { color: #000000; font-weight: 900; }

/* ── Buttons — black rectangle ── */
.sf-add-btn {
    background: #000000;
    border-radius: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    box-shadow: none;
}
.sf-add-btn:hover:not(:disabled) { opacity: 1; background: #333333; }

.sf-btn-primary {
    background: #000000;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.875rem;
}
.sf-btn-primary:hover { opacity: 1; background: #333333; }

/* ── Attr buttons ── */
.sf-attr-btn { border-radius: 0; border-color: #d0d0d0; }
.sf-attr-btn.selected { background: #000000; border-color: #000000; color: #ffffff; }
.sf-attr-btn:hover { border-color: #000000; }

/* ── Qty ── */
.sf-qty-ctrl { border-color: #d0d0d0; border-radius: 0; }
.sf-qty-btn:hover { background: #f0f0f0; }

/* ── Gallery ── */
.sf-gallery-main { border-color: #e8e8e8; border-radius: 0; }
.sf-gallery-thumb { border-color: #e8e8e8; border-radius: 0; }
.sf-gallery-thumb.active, .sf-gallery-thumb:hover { border-color: #000000; }

/* ── Auth form — minimal card ── */
.sf-auth-wrap { background: #f5f5f5; }
.sf-auth-card {
    border: 1px solid #e0e0e0;
    border-radius: 0;
    box-shadow: none;
}
.sf-auth-title { font-weight: 900; letter-spacing: -0.02em; }
.sf-input { border-radius: 0; border-color: #d0d0d0; background: #ffffff; }
.sf-input:focus { border-color: #000000; box-shadow: none; }

/* ── Footer ── */
.sf-footer { background: #111111; color: #888888; border-top: none; }
.sf-footer a { color: #888888 !important; }

/* ── Price display ── */
.sf-price-display { color: #000000; }

/* ── Tabs ── */
.sf-tab-btn.active { color: #000000; border-bottom-color: #000000; }

/* ── Breadcrumb — edge-to-edge bar ── */
.sf-detail--minimal .sf-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 0;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--sf-border);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
}
.sf-detail--minimal .sf-breadcrumb a {
    color: var(--sf-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.sf-detail--minimal .sf-breadcrumb a:hover { color: var(--sf-text); }
.sf-detail--minimal .sf-breadcrumb-sep {
    margin: 0 0.45rem;
    color: #d0d0d0;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.sf-detail--minimal .sf-breadcrumb-current {
    color: var(--sf-text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── USP block — minimal: no icons, all-caps headings, border separators ── */
.sf-block-usp { background: #ffffff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.sf-usp-item { border-right: 1px solid #e8e8e8; }
.sf-usp-item:last-child { border-right: none; }
.sf-usp-icon { color: #000000; font-size: 1.25rem; }
.sf-usp-heading { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.sf-usp-text { font-size: 0.72rem; color: #999999; letter-spacing: 0.03em; }

/* ── Policy strip — minimal: compact, no radius ── */
.sf-block-policy { background: #f5f5f5; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding: 1rem 0; }
.sf-policy-item { gap: 0.5rem; }
.sf-policy-icon { font-size: 1rem; color: #000000; }
.sf-policy-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.sf-policy-sub { font-size: 0.65rem; color: #999999; }

/* ── CTA banner — minimal: black bg, white text, no radius ── */
.sf-block-cta { background: #000000 !important; color: #ffffff !important; }
.sf-cta-heading { color: #ffffff; }
.sf-cta-sub { color: rgba(255,255,255,0.65); }
.sf-cta-btn { background: #ffffff !important; color: #000000 !important; border-radius: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.sf-cta-btn:hover { background: #f0f0f0 !important; }

/* ── Mobile overrides ── */
.sf-mobile-menu { background: #111111; border-top-color: rgba(255,255,255,0.08); }
.sf-burger span { background: #000000; }
.sf-burger:hover { background: rgba(0,0,0,0.06); }
.sf-mobile-nav-link { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.08); }
.sf-mobile-nav-link:hover { color: #ffffff; }
.sf-mobile-menu-footer .sf-lang-btn { color: rgba(255,255,255,0.6); }
.sf-mobile-menu-footer .sf-lang-btn.active { background: #ffffff; color: #000000; }
.sf-mobile-menu-footer .sf-account-btn { color: rgba(255,255,255,0.7); }
/* ── Footer currency dropdown ── */
.sf-footer-currency-wrap { display: flex; align-items: center; }
.sf-footer-currency-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
}
.sf-footer-currency-select option { background: #111; color: #fff; }
@media (max-width: 640px) {
    /* Shrink logo so cart + burger stay visible */
    .sf-header-logo img { height: 36px; max-width: 140px; }
    /* Tighter category tabs */
    .sf-category-tab { padding: 0.75rem 1rem; font-size: 0.78rem; }
}

@media (max-width: 480px) {
    .sf-category-tab { padding: 0.65rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.06em; }
    .sf-info-name { font-size: 1.35rem; }
}

/* ── Testimonials ── */
.sf-block-testimonials { background: #fafafa; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.sf-testimonial-card { background: #ffffff; border-radius: 0; border-color: #e8e8e8; }
.sf-testimonial-name { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; }
.sf-testimonial-quote { font-size: 0.9rem; }

/* ── Image gallery ── */
.sf-gallery-item { border-radius: 0; }