/* =========================================================================
   SFS Wicker Furniture — Theme Stylesheet
   Recreates the React/Tailwind design system in vanilla CSS using custom
   properties so brand colors stay editable via the Customizer.
   ========================================================================= */

:root {
    --sfs-primary: #0F8B99;
    --sfs-secondary: #046C7C;
    --sfs-accent: #C9A66B;
    --sfs-dark: #0B2027;
    --sfs-text: #1a1a1a;
    --sfs-muted: #6b7280;
    --sfs-border: #e5e7eb;
    --sfs-bg-soft: #F6F8F9;
    --sfs-radius: 16px;
    --sfs-radius-full: 999px;
    --sfs-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { color: var(--sfs-text); line-height: 1.5; }
.sfs-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sfs-center { text-align: center; }
.sfs-eyebrow { display:block; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--sfs-accent); margin-bottom:8px; }
.sfs-section { padding: 64px 0; }
.sfs-section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 40px; flex-wrap: wrap; gap:16px; }
.sfs-section-header h2 { font-size: 34px; font-weight: 800; margin: 4px 0 0; font-family: 'Poppins', sans-serif; }
.sfs-section-header.sfs-center { flex-direction: column; align-items: center; text-align: center; max-width: 640px; margin-left:auto; margin-right:auto; }
.sfs-link-arrow { font-weight: 600; color: var(--sfs-primary); white-space: nowrap; }

/* Buttons */
.sfs-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius: var(--sfs-radius-full); font-weight:600; font-size:14px; border:none; cursor:pointer; transition: all .2s ease; }
.sfs-btn-primary { background: var(--sfs-primary); color:#fff; box-shadow: 0 8px 20px rgba(15,139,153,.35); }
.sfs-btn-primary:hover { transform: translateY(-1px); }
.sfs-btn-secondary { background: var(--sfs-secondary); color:#fff; }
.sfs-btn-accent { background: var(--sfs-accent); color:#1a1a1a; }
.sfs-btn-ghost { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); }
.sfs-btn-whatsapp { background:#25D366; color:#fff; }
.sfs-btn-outline { background:transparent; color: var(--sfs-primary); border:1px solid var(--sfs-primary); }
.sfs-btn-call-header { background: var(--sfs-primary); color:#fff; padding:10px 18px; }

/* Top bar + header */
.sfs-top-bar { background: var(--sfs-secondary); color:#fff; font-size:12px; }
.sfs-top-bar-inner { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.sfs-top-bar-left, .sfs-top-bar-right { display:flex; align-items:center; gap:24px; }
.sfs-top-bar a { color:#fff; display:inline-flex; align-items:center; gap:6px; }
.sfs-top-bar a:hover { color: rgba(255,255,255,.8); }
.sfs-top-bar-left span, .sfs-top-bar-right span { display:inline-flex; align-items:center; gap:6px; }
.sfs-icon-inline { font-size:12px; line-height:1; }
.sfs-currency-badge { font-weight:600; }
.sfs-header-sticky { position: sticky; top:0; z-index:100; }
.sfs-main-header { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom:1px solid var(--sfs-border); position:relative; z-index:100; }
.sfs-main-header-inner { display:flex; align-items:center; justify-content:space-between; height:76px; gap: 24px; }
.sfs-logo-fallback { display:flex; align-items:center; gap:10px; text-decoration:none; }
.sfs-logo-badge { width:40px; height:40px; border-radius:12px; background:var(--sfs-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; }
.sfs-logo-fallback strong { display:block; font-size:19px; font-weight:800; line-height:1.1; color:#111827; }
.sfs-logo-fallback small { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--sfs-accent); font-weight:700; margin-top:2px; }
.custom-logo-link { display:flex; align-items:center; }

/* Primary nav */
.sfs-primary-nav { display:flex; }
.sfs-nav-list { list-style:none; display:flex; align-items:center; gap:32px; margin:0; padding:0; font-weight:500; font-size:14px; color:#374151; }
.sfs-nav-list > li { position:relative; display:flex; align-items:center; }
.sfs-nav-list a { color:inherit; white-space:nowrap; }
.sfs-nav-list a:hover, .sfs-nav-mega-trigger:hover { color: var(--sfs-primary); }

/* Shop mega menu */
.sfs-nav-has-mega { position:relative; }
.sfs-nav-mega-trigger { display:flex; align-items:center; gap:5px; background:none; border:none; font:inherit; color:inherit; cursor:pointer; padding:8px 0; white-space:nowrap; }
.sfs-chevron { font-size:11px; transition: transform .2s ease; }
.sfs-nav-has-mega:hover .sfs-chevron { transform: rotate(180deg); }
.sfs-mega-menu {
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    width:720px; max-width:90vw; background:#fff; border-radius:16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); border:1px solid var(--sfs-border);
    padding:24px; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:200;
}
.sfs-nav-has-mega:hover .sfs-mega-menu,
.sfs-nav-has-mega:focus-within .sfs-mega-menu,
.sfs-nav-has-mega.is-open .sfs-mega-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sfs-mega-menu-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.sfs-mega-col-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-weight:600; font-size:13px; color:#111827; }
.sfs-mega-col-icon { width:32px; height:32px; border-radius:8px; background: rgba(15,139,153,.08); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.sfs-mega-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sfs-mega-col a { font-size:13px; color:#6b7280; }
.sfs-mega-col a:hover { color: var(--sfs-primary); }
.sfs-mega-menu-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--sfs-border); font-size:12px; color:#9ca3af; }
.sfs-mega-menu-footer a { font-size:13px; font-weight:600; color: var(--sfs-primary); }

/* Header action icons */
.sfs-header-actions { display:flex; align-items:center; gap:4px; }
.sfs-icon-btn { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; font-size:18px; position:relative; color:#4b5563; text-decoration:none; }
.sfs-icon-btn:hover { background:#f3f4f6; }
.sfs-badge-count { position:absolute; top:1px; right:1px; width:16px; height:16px; border-radius:50%; color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.sfs-badge-count-accent { background: var(--sfs-accent); }
.sfs-badge-count-primary { background: var(--sfs-primary); }
.sfs-mobile-menu-toggle { display:none; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:none; border:none; font-size:18px; cursor:pointer; color:#4b5563; }
.sfs-mobile-menu-toggle:hover { background:#f3f4f6; }
.sfs-mobile-menu { display:none; }
.sfs-mobile-menu.is-open { display:block; }

/* Search bar (toggled under header) */
.sfs-search-bar { display:none; border-top:1px solid var(--sfs-border); background:#fff; padding:14px 0; }
.sfs-search-bar.is-open { display:block; }
.sfs-search-form { display:flex; gap:10px; }
.sfs-search-form input { flex:1; height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--sfs-border); font-size:14px; }
.sfs-search-form button { height:44px; padding:0 22px; border-radius:999px; border:none; background: var(--sfs-primary); color:#fff; font-weight:600; cursor:pointer; }

/* Mobile menu list */
.sfs-mobile-nav-list { list-style:none; margin:0; padding:16px 20px 20px; display:flex; flex-direction:column; gap:4px; background:#fff; border-top:1px solid var(--sfs-border); }
.sfs-mobile-nav-list a { display:flex; align-items:center; gap:8px; padding:10px 4px; font-size:14px; font-weight:500; color:#374151; }
.sfs-mobile-nav-sub a { padding-left:24px; color:#6b7280; font-weight:400; }

/* Breadcrumbs */
.sfs-breadcrumbs { font-size:12px; color: var(--sfs-muted); padding:12px 0; border-bottom:1px solid var(--sfs-border); }
.sfs-breadcrumbs a { color: var(--sfs-muted); }
.sfs-breadcrumbs .sep { margin: 0 8px; }
.sfs-breadcrumbs .current { color: var(--sfs-text); font-weight: 600; }

/* Trust badges */
.sfs-trust-badges { padding: 24px 0; border-bottom:1px solid var(--sfs-border); }
.sfs-trust-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.sfs-trust-item { display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; font-weight:600; }
.sfs-trust-icon { color: var(--sfs-primary); }

/* Hero */
.sfs-hero { position:relative; overflow:hidden; height: 620px; }
.sfs-hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity .8s ease; }
.sfs-hero-slide.is-active { opacity:1; }
.sfs-hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.25), transparent); }
.sfs-hero-inner { position:relative; height:100%; display:flex; align-items:center; }
.sfs-hero-content { max-width:560px; color:#fff; }
.sfs-hero-tag { display:inline-block; padding:6px 16px; border-radius:999px; font-size:12px; font-weight:600; background: rgba(201,166,107,.25); border:1px solid rgba(201,166,107,.5); margin-bottom:20px; }
.sfs-hero-title { font-size:52px; font-weight:800; line-height:1.1; margin:0 0 16px; font-family:'Poppins',sans-serif; }
.sfs-hero-subtitle { font-size:17px; color:#e5e7eb; margin-bottom:28px; max-width:440px; }
.sfs-hero-cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.sfs-hero-rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#e5e7eb; }
.sfs-hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; border:none; font-size:22px; cursor:pointer; }
.sfs-hero-arrow-left { left:20px; } .sfs-hero-arrow-right { right:20px; }
.sfs-hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.sfs-hero-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer; }
.sfs-hero-dot.is-active { width:28px; border-radius:4px; background:#fff; }

/* Stars */
.sfs-stars { display:inline-flex; gap:2px; color: var(--sfs-accent); }

/* Categories */
.sfs-category-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:20px; }
.sfs-category-card { position:relative; border-radius: var(--sfs-radius); overflow:hidden; aspect-ratio: 3/4; display:block; box-shadow: var(--sfs-shadow); }
.sfs-category-card img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.sfs-category-card:hover img { transform: scale(1.08); }
.sfs-category-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; color:#fff; }
.sfs-category-overlay h3 { margin:0; font-size:14px; }
.sfs-category-overlay span { font-size:11px; opacity:.8; }
.sfs-category-card-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--sfs-primary), var(--sfs-secondary)); }
.sfs-category-card-fallback span { font-size:48px; font-weight:800; color: rgba(255,255,255,.85); font-family:'Poppins',sans-serif; }
.sfs-admin-hint { margin-top:20px; padding:14px 18px; border-radius:12px; background:#FFF7E6; border:1px solid #F3D9A4; color:#7a5c1e; font-size:13px; }
.sfs-hero-admin-hint { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); z-index:5; max-width:560px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.sfs-hero-admin-hint code { background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; }

/* Products
   ------------------------------------------------------------------------
   Markup (see woocommerce/content-product.php):
     .sfs-product-card
       .sfs-product-card-image-wrap   (position:relative — the positioning context)
         a.sfs-product-card-image     (plain block link, image ONLY, fills the wrap)
         span.sfs-badge               (absolute, sale/new)
         div.sfs-product-actions      (absolute, wishlist/quick-view — plain <button>s)
         div.sfs-product-add-to-cart-overlay (absolute, WooCommerce [add_to_cart] <a>)
       a.sfs-product-card-body-link   (plain block link, wraps the text content)
         div.sfs-product-card-body
   All three children of `.sfs-product-card-image-wrap` are SIBLINGS, never
   nested inside one another or inside another <a> — this is what fixes the
   image/Add-to-Cart gap, which was caused by an invalid nested <a><a> tag
   silently corrupting the DOM in the previous version of this template. */
.sfs-product-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.sfs-product-card { border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); overflow:hidden; background:#fff; transition: box-shadow .2s ease; display:block; }
.sfs-product-card:hover { box-shadow: var(--sfs-shadow); }

.sfs-product-card-image-wrap { position:relative; aspect-ratio:1/1; overflow:hidden; background:#f9fafb; }
.sfs-product-card-image { position:absolute; inset:0; display:block; }
/* !important guards below defeat WooCommerce core's higher-specificity
   `.woocommerce ul.products li.product img { width:100%; height:auto; margin:0 0 1em; }`
   rule, which otherwise shrinks the image to its natural aspect ratio and
   leaves a large blank gap inside the square card image area. */
.sfs-product-card-image img {
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; object-fit:cover !important;
    margin:0 !important; padding:0 !important; border:none !important;
    transition: transform .5s ease; display:block;
}
.sfs-product-card:hover .sfs-product-card-image img { transform: scale(1.1); }

.sfs-badge { position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:999px; font-size:10px; font-weight:700; color:#fff; z-index:3; }
.sfs-badge-sale { background: var(--sfs-accent); }
.sfs-badge-new { background: var(--sfs-primary); }

.sfs-product-actions { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; opacity:0; transition:opacity .2s ease; z-index:3; }
.sfs-product-card-image-wrap:hover .sfs-product-actions { opacity:1; }

/* "Add to Cart" bar — pinned to the bottom of the image, hidden until hover
   on desktop, always visible on touch devices (no hover) via the media query
   below, so it never depends purely on a working :hover interaction. */
.sfs-product-add-to-cart-overlay {
    position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    z-index:3; margin:0 !important; padding:0 !important;
    transform: translateY(100%); transition: transform .25s ease;
}
.sfs-product-card-image-wrap:hover .sfs-product-add-to-cart-overlay { transform: translateY(0); }
@media (hover: none) {
    .sfs-product-add-to-cart-overlay { transform: translateY(0); }
}
/* !important guards defeat WooCommerce core's `.woocommerce a.button` rule
   (background/margin/border-radius) which otherwise renders a plain grey
   default-styled button instead of our teal Add to Cart bar. */
.sfs-product-add-to-cart-overlay a.button,
.sfs-product-add-to-cart-overlay a.added_to_cart {
    display:flex !important; align-items:center; justify-content:center; gap:6px;
    width:100% !important; padding:12px 0 !important; background: var(--sfs-primary) !important; color:#fff !important;
    font-size:13px !important; font-weight:600 !important; text-decoration:none !important; border:none !important;
    border-radius:0 !important; margin:0 !important; box-shadow:none !important;
}
.sfs-product-add-to-cart-overlay a.button:hover { background: var(--sfs-secondary) !important; }
.sfs-product-add-to-cart-overlay a.added_to_cart { margin-top:4px !important; background: var(--sfs-secondary) !important; }

.sfs-product-card-body-link { display:block; color:inherit; text-decoration:none; }
.sfs-product-card-body { padding:16px; }
.sfs-product-category { font-size:11px; color:var(--sfs-muted); text-transform:uppercase; letter-spacing:.03em; }
.sfs-product-card-title { font-size:14px; font-weight:600; margin:6px 0; line-height:1.35; color:#111827; }
.sfs-product-price { font-weight:700; color: var(--sfs-primary); margin-top:6px; font-size:15px; }
.sfs-product-price del { color:#9ca3af; font-weight:400; font-size:13px; margin-right:6px; }
.sfs-product-price ins { text-decoration:none; }

/* Shop page layout */
.sfs-shop-header { max-width:1280px; margin:0 auto; padding:32px 24px 0; }
.sfs-shop-title { font-size:32px; font-weight:800; font-family:'Poppins',sans-serif; margin:0; }
.sfs-shop-description { color: var(--sfs-muted); margin-top:8px; font-size:14px; max-width:720px; }
.sfs-shop-layout { display:grid; grid-template-columns: 260px 1fr; gap:32px; padding: 24px; max-width:1280px; margin:0 auto; align-items:start; }
.sfs-shop-sidebar { display:flex; flex-direction:column; gap:20px; position:sticky; top:96px; }

.sfs-filter-widget { background:#fff; border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); padding:20px; }
.sfs-filter-widget h4 { margin:0 0 14px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#111827; }
.sfs-filter-category-list, .sfs-filter-checkbox-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.sfs-filter-category-list a {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 10px; border-radius:8px; font-size:13px; color:#4b5563; text-decoration:none;
}
.sfs-filter-category-list a:hover { background:#f3f4f6; color: var(--sfs-primary); }
.sfs-filter-category-list li.is-active a { background: rgba(15,139,153,.08); color: var(--sfs-primary); font-weight:600; }
.sfs-filter-count { font-size:11px; color:#9ca3af; background:#f3f4f6; padding:1px 8px; border-radius:999px; }
.sfs-filter-category-list li.is-active .sfs-filter-count { background:#fff; color: var(--sfs-primary); }
.sfs-filter-checkbox-list li { padding:6px 4px; }
.sfs-filter-checkbox-list label { display:flex; align-items:center; gap:8px; font-size:13px; color:#4b5563; cursor:pointer; }
.sfs-filter-checkbox-list label span:first-of-type { flex:1; }
.sfs-filter-checkbox-list input[type="checkbox"] { accent-color: var(--sfs-primary); width:15px; height:15px; }

/* WooCommerce default price filter widget — restyle to match */
.sfs-filter-widget .price_slider { margin-bottom:14px; }
.sfs-filter-widget .price_slider_amount { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#6b7280; }
.sfs-filter-widget .price_slider_amount .button { background: var(--sfs-primary); color:#fff; border-radius:999px; padding:6px 14px; font-size:12px; border:none; cursor:pointer; }
.sfs-filter-widget .ui-slider { position:relative; height:4px; background:#e5e7eb; border-radius:999px; margin:16px 4px; }
.sfs-filter-widget .ui-slider .ui-slider-range { position:absolute; height:100%; background: var(--sfs-primary); border-radius:999px; }
.sfs-filter-widget .ui-slider .ui-slider-handle { position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; background:#fff; border:2px solid var(--sfs-primary); border-radius:50%; cursor:pointer; }

/* Shop toolbar (result count + ordering) */
.sfs-shop-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.sfs-shop-toolbar .woocommerce-result-count { font-size:13px; color:#6b7280; margin:0; }
.sfs-shop-toolbar .woocommerce-ordering { margin:0; }
.sfs-shop-toolbar .woocommerce-ordering select {
    height:40px; padding:0 36px 0 14px; border-radius:999px; border:1px solid var(--sfs-border);
    font-size:13px; background:#fff; cursor:pointer; appearance:none;
    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='%236b7280'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 14px center;
}

/* Pagination */
.sfs-shop-pagination { margin-top:32px; }
.sfs-shop-pagination nav.woocommerce-pagination { display:flex; justify-content:center; }
.sfs-shop-pagination .page-numbers { list-style:none; display:flex; gap:6px; padding:0; margin:0; }
.sfs-shop-pagination .page-numbers li { display:inline-flex; }
.sfs-shop-pagination .page-numbers a, .sfs-shop-pagination .page-numbers span {
    display:flex; align-items:center; justify-content:center; min-width:38px; height:38px;
    border-radius:8px; border:1px solid var(--sfs-border); font-size:13px; color:#4b5563; text-decoration:none;
}
.sfs-shop-pagination .page-numbers .current { background: var(--sfs-primary); border-color: var(--sfs-primary); color:#fff; font-weight:600; }
.sfs-shop-pagination .page-numbers a:hover { border-color: var(--sfs-primary); color: var(--sfs-primary); }

.sfs-shop-empty { text-align:center; padding:60px 20px; color: var(--sfs-muted); }

/* Safety-net reset in case any default WooCommerce `<ul class="products">`
   markup ever renders (e.g. via a shortcode/block elsewhere on the site) —
   ensures it never shows bullet points or default WC spacing. */
.woocommerce ul.products,
ul.products { list-style:none !important; margin:0 !important; padding:0 !important; display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.woocommerce ul.products li.product { list-style:none; }

/* Stats */
.sfs-business-stats { background: var(--sfs-dark); color:#fff; }
.sfs-stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; text-align:center; }
.sfs-stat-value { font-size:38px; font-weight:800; color: var(--sfs-accent); }
.sfs-stat-label { font-size:13px; color:#cbd5e1; margin-top:4px; }

/* About */
.sfs-about-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
.sfs-about-image { position:relative; }
.sfs-about-image img { border-radius:24px; width:100%; height:420px; object-fit:cover; }
.sfs-about-image-fallback { border-radius:24px; width:100%; height:420px; background: linear-gradient(135deg, var(--sfs-secondary), var(--sfs-primary)); }
.sfs-about-badge { position:absolute; bottom:-24px; right:-24px; background:#fff; border-radius:16px; box-shadow: var(--sfs-shadow); padding:18px 20px; }
.sfs-about-badge-value { font-size:26px; font-weight:800; color: var(--sfs-primary); }
.sfs-check-list { list-style:none; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin: 24px 0; }

/* Custom furniture steps */
.sfs-custom-furniture { background: var(--sfs-secondary); color:#fff; }
.sfs-steps-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin: 40px 0; }
.sfs-step-card { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius: var(--sfs-radius); padding:28px; }
.sfs-step-icon { font-size:28px; margin-bottom:16px; }
.sfs-step-number { font-size:11px; font-weight:700; opacity:.5; margin-bottom:8px; }

/* Testimonials / Reviews */
.sfs-testimonial-grid, .sfs-review-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.sfs-testimonial-card, .sfs-review-card { background:#fff; border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); padding:28px; }
.sfs-review-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.sfs-google-g { font-weight:800; color:#4285F4; }
.sfs-testimonial-author { display:flex; align-items:center; gap:12px; margin-top:20px; }
.sfs-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.sfs-avatar-fallback { display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--sfs-primary), var(--sfs-secondary)); color:#fff; font-weight:700; font-size:16px; font-family:'Poppins',sans-serif; flex-shrink:0; }
.sfs-rating-summary { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:12px; }

/* Delivery areas */
.sfs-province-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.sfs-province-card { background:#fff; border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); padding:20px; display:block; transition: box-shadow .2s ease; }
.sfs-province-card:hover { box-shadow: var(--sfs-shadow); }
.sfs-province-card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sfs-province-arrow { margin-left:auto; color:var(--sfs-muted); }

/* Gallery */
.sfs-gallery-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.sfs-gallery-item { aspect-ratio:1/1; border-radius: var(--sfs-radius); overflow:hidden; }
.sfs-gallery-item img { width:100%; height:100%; object-fit:cover; }

/* Blog */
.sfs-blog-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.sfs-blog-card { background:#fff; border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); overflow:hidden; display:block; }
.sfs-blog-card-image { aspect-ratio: 16/10; overflow:hidden; }
.sfs-blog-card-image img { width:100%; height:100%; object-fit:cover; }
.sfs-blog-card-body { padding:20px; }
.sfs-blog-meta { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--sfs-muted); margin-bottom:8px; }
.sfs-badge-category { background: rgba(15,139,153,.1); color: var(--sfs-primary); padding:3px 10px; border-radius:999px; font-weight:700; }

/* FAQ */
.sfs-faq-container { max-width: 720px; }
.sfs-faq-item { border:1px solid var(--sfs-border); border-radius: var(--sfs-radius); margin-bottom:12px; overflow:hidden; background:#fafafa; }
.sfs-faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:none; border:none; font-weight:600; cursor:pointer; font-size:14px; }
.sfs-faq-answer { padding:0 22px 18px; color: var(--sfs-muted); font-size:14px; }

/* Newsletter */
.sfs-newsletter { background: var(--sfs-primary); color:#fff; }
.sfs-newsletter-form { display:flex; gap:12px; max-width:420px; margin:24px auto 0; }
.sfs-newsletter-form input { flex:1; height:48px; border-radius:999px; border:none; padding:0 20px; }
.sfs-newsletter-form button { height:48px; padding:0 24px; border-radius:999px; border:none; background: var(--sfs-accent); font-weight:700; cursor:pointer; }

/* Map */
.sfs-map-section, .sfs-map-placeholder { height:320px; background:#e5e7eb; display:flex; align-items:center; justify-content:center; }
.sfs-map-pin-card { background:#fff; border-radius:16px; box-shadow: var(--sfs-shadow); padding:18px 24px; display:flex; gap:14px; align-items:center; }

/* Footer */
.sfs-footer { background: var(--sfs-dark); color:#cbd5e1; padding: 64px 0 24px; }
.sfs-footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap:40px; margin-bottom:40px; }
.sfs-footer-col h4 { color:#fff; margin-bottom:16px; }
.sfs-footer-menu { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:13px; }
.sfs-footer-empty-note { font-size:12px; color:#8ba3a8; margin:0; }
.sfs-footer-social { display:flex; gap:8px; margin-top:16px; }
.sfs-social-icon { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.sfs-footer-trust { font-size:12px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); margin-bottom:20px; }
.sfs-footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; flex-wrap:wrap; gap:10px; }
.sfs-payment-icons { display:flex; gap:10px; flex-wrap:wrap; }
.sfs-payment-icons span { background:rgba(255,255,255,.05); padding:4px 10px; border-radius:6px; }

/* WhatsApp float + mobile nav */
.sfs-whatsapp-fab { position:fixed; bottom:96px; right:20px; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow: var(--sfs-shadow); z-index:60; }
.sfs-mobile-bottom-nav { display:none; }

/* Responsive — breakpoints mirror the React header's Tailwind classes
   (sm:640px, lg:1024px, xl:1280px) so show/hide behavior matches exactly. */

/* Below xl (1280px): hide the "Call Now" pill button in the header (React: hidden xl:flex) */
@media (max-width: 1279px) {
    .sfs-btn-call-header { display:none; }
}

/* Below lg (1024px): collapse primary nav + top bar, show mobile menu toggle
   (React: hidden lg:flex on nav, lg:hidden on the toggle button) */
@media (max-width: 1023px) {
    .sfs-primary-nav { display:none; }
    .sfs-mobile-menu-toggle { display:flex; }
}
@media (min-width: 1024px) {
    .sfs-mobile-menu-toggle { display:none !important; }
    .sfs-mobile-menu { display:none !important; }
}

/* Below sm (640px): hide search/wishlist/account icons, keep cart + mobile toggle
   (React: hidden sm:flex on those buttons) */
@media (max-width: 639px) {
    .sfs-icon-btn-desktop { display:none; }
    .sfs-top-bar { display:none; }
}

@media (max-width: 1024px) {
    .sfs-category-grid { grid-template-columns: repeat(3, 1fr); }
    .sfs-product-grid { grid-template-columns: repeat(2, 1fr); }
    .sfs-about-grid, .sfs-steps-grid, .sfs-testimonial-grid, .sfs-review-grid, .sfs-province-grid, .sfs-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .sfs-shop-layout { grid-template-columns: 1fr; }
    .sfs-shop-sidebar { position:static; }
    .sfs-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .sfs-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .sfs-hero-title { font-size:34px; }
    .sfs-trust-grid, .sfs-category-grid, .sfs-product-grid, .sfs-about-grid, .sfs-steps-grid,
    .sfs-testimonial-grid, .sfs-review-grid, .sfs-province-grid, .sfs-gallery-grid, .sfs-blog-grid,
    .sfs-stats-grid, .sfs-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .sfs-mobile-bottom-nav { display:grid; grid-template-columns: repeat(5, 1fr); position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--sfs-border); padding:8px 0; z-index:60; }
    .sfs-mobile-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--sfs-muted); }
    .sfs-mobile-nav-item.active { color: var(--sfs-primary); }
    body { padding-bottom: 64px; }
}
@media (min-width: 769px) {
    .sfs-mobile-bottom-nav { display:none !important; }
}