/* =========================================================
   Storefront theme
   Self-contained styles for the public shop front-end.
   No external CSS framework required.
   ========================================================= */

:root{
    --sf-green: #5cb527;
    --sf-green-dark: #4a9420;
    --sf-green-darker: #3d7d1a;
    --sf-gold: #f7b924;
    --sf-gold-dark: #e2a613;
    --sf-text: #2b2b2b;
    --sf-text-muted: #767676;
    --sf-border: #e7e7e7;
    --sf-topbar-bg: #f5f5f5;
    --sf-body-bg: #f4f6f4;
    --sf-radius: 4px;
    --sf-shadow: 0 2px 10px rgba(0,0,0,.06);
    --sf-max-width: 1200px;
    /* Shared by the hero row and the category sidebar beside it so the two
       always line up. Change here to resize both together. */
    --sf-hero-h: 430px;
    /* Shared by the homepage sidebar column and the ALL CATEGORIES bar. */
    --sf-sidebar-w: 250px;
    /* Gap above the hero banners. The sidebar sits flush under the yellow
       ALL CATEGORIES bar instead, and is this much taller so both columns
       still end on the same line. */
    --sf-hero-gap: 24px;
    /* Single source of truth for the vertical rhythm between homepage
       blocks. Applied as margin-bottom only, never combined with padding,
       so gaps can't stack into different sizes. */
    --sf-section-gap: 34px;
}

*{ box-sizing: border-box; }

body.sf-body{
    margin: 0;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--sf-text);
    background: var(--sf-body-bg);
    font-size: 14px;
    line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--sf-green-dark); }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

.sf-container{
    max-width: var(--sf-max-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- Top bar ---------- */
.sf-topbar{
    background: var(--sf-topbar-bg);
    border-bottom: 1px solid var(--sf-border);
    font-size: 12.5px;
    color: var(--sf-text-muted);
}
.sf-topbar .sf-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
}
.sf-topbar-social{
    display: flex;
    gap: 6px;
}
.sf-topbar-social a{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
}
.sf-topbar-social a:hover{
    background: var(--sf-green);
    border-color: var(--sf-green);
    color: var(--sf-on-primary, #fff);
}
.sf-topbar-social svg{ width: 12px; height: 12px; }
/* Admin-managed links render a Font Awesome <i> rather than an inline svg. */
.sf-topbar-social i{ font-size: 12px; line-height: 1; }

.sf-topbar-right{
    display: flex;
    align-items: center;
    gap: 14px;
}
.sf-topbar-coupon{
    font-weight: 700;
    color: var(--sf-text);
    white-space: nowrap;
}
.sf-topbar-coupon b{ color: var(--sf-green-dark); }

.sf-topbar-divider{
    width: 1px;
    height: 16px;
    background: var(--sf-border);
}

.sf-dropdown{ position: relative; }
.sf-dropdown-toggle{
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--sf-text-muted);
    font-size: 12.5px;
    padding: 0;
}
.sf-dropdown-toggle svg{ width: 10px; height: 10px; }
.sf-dropdown-menu{
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    min-width: 160px;
    padding: 6px 0;
    display: none;
    z-index: 60;
}
.sf-dropdown.open .sf-dropdown-menu{ display: block; }
.sf-dropdown-menu a,
.sf-dropdown-menu button{
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 14px;
    background: none;
    border: none;
    color: var(--sf-text);
    font-size: 13px;
}
.sf-dropdown-menu a:hover,
.sf-dropdown-menu button:hover{ background: #f4f7f2; color: var(--sf-green-dark); }
.sf-dropdown-menu .sf-dropdown-divider{
    height: 1px;
    background: var(--sf-border);
    margin: 6px 0;
}

/* ---------- Header ---------- */
.sf-header{
    background: #fff;
    padding: 18px 0;
}
.sf-header .sf-container{
    display: flex;
    align-items: center;
    gap: 24px;
}

.sf-logo{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.sf-logo img{ height: 42px; width: auto; }
.sf-logo-icon{
    width: 42px;
    height: 42px;
    color: var(--sf-green);
    flex-shrink: 0;
}

.sf-search{
    flex: 1 1 auto;
    display: flex;
    max-width: 620px;
    min-width: 0;
}
.sf-search select{
    min-width: 0;
    border: 1px solid var(--sf-border);
    border-right: none;
    background: #f7f7f7;
    padding: 0 12px;
    font-size: 13px;
    color: var(--sf-text-muted);
    border-radius: var(--sf-radius) 0 0 var(--sf-radius);
    max-width: 150px;
}
.sf-search input[type="text"]{
    flex: 1;
    border: 1px solid var(--sf-border);
    border-left: none;
    border-right: none;
    padding: 0 14px;
    font-size: 14px;
    min-width: 0;
}
.sf-search input[type="text"]:focus,
.sf-search select:focus{ outline: none; }
.sf-search button{
    background: var(--sf-green);
    border: none;
    color: var(--sf-on-primary, #fff);
    width: 48px;
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-search button:hover{ background: var(--sf-green-dark); }
.sf-search button svg{ width: 18px; height: 18px; }
.sf-search select,
.sf-search input[type="text"]{ height: 42px; }

.sf-header-actions{
    display: flex;
    align-items: center;
    gap: 26px;
    flex-shrink: 0;
    margin-left: auto;
}
.sf-header-action{
    display: flex;
    align-items: center;
    gap: 10px;
}
.sf-header-action svg{
    width: 26px;
    height: 26px;
    color: #9a9a9a;
    flex-shrink: 0;
}
.sf-header-action .sf-action-label{
    font-size: 11.5px;
    color: var(--sf-text-muted);
    display: block;
}
.sf-header-action .sf-action-value{
    font-size: 14px;
    font-weight: 700;
    color: var(--sf-text);
    display: block;
}
.sf-cart-link{ position: relative; }
.sf-cart-badge{
    position: absolute;
    top: -8px;
    left: 15px;
    background: var(--sf-green);
    color: var(--sf-on-primary, #fff);
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Nav bar ---------- */
.sf-navbar{
    background: linear-gradient(180deg, var(--sf-green) 0%, var(--sf-green-dark) 100%);
}
.sf-navbar .sf-container{
    display: flex;
    align-items: stretch;
}
.sf-all-categories{
    background: var(--sf-gold);
    color: var(--sf-on-gold, #3a2a00);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: none;
    flex-shrink: 0;
    position: relative;
    /* Same width as the category sidebar it sits above, so the two read
       as one column (see --sf-sidebar-w). */
    width: var(--sf-sidebar-w);
}
/* Negative margin cancels the bar's padding so the button fills the whole
   bar: the entire block is tappable, not just the label. */
.sf-all-categories-toggle{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 22px;
    margin: -13px -22px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}
.sf-all-categories:hover{ background: var(--sf-gold-dark); }
.sf-all-categories svg{ width: 16px; height: 16px; }

.sf-categories-panel{
    position: absolute;
    top: 100%;
    left: 0;
    width: 270px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-top: none;
    box-shadow: var(--sf-shadow);
    z-index: 70;
    display: none;
}
.sf-all-categories.open .sf-categories-panel{ display: block; }
.sf-categories-panel a{
    display: block;
    padding: 10px 20px;
    font-size: 13.5px;
    color: var(--sf-text);
    border-bottom: 1px solid #f2f2f2;
}
.sf-categories-panel a:last-child{ border-bottom: none; }
.sf-categories-panel a:hover{ background: #f4f7f2; color: var(--sf-green-dark); padding-left: 24px; }

.sf-nav-links{
    display: flex;
    align-items: stretch;
}
/* The <li> must be a flex container too, otherwise the <a> inside is only
   as tall as its text and the hover/active background won't fill the bar. */
.sf-nav-links li{
    display: flex;
    align-items: stretch;
}
.sf-nav-links a{
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: var(--sf-on-primary, #fff);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .2px;
}
.sf-nav-links a:hover,
.sf-nav-links a.active{
    /* currentColor tint: works whether the text is light or dark, so the
       highlight stays visible on a light primary colour too. */
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: var(--sf-on-primary, #fff);
}

.sf-navbar-toggle{
    display: none;
    background: none;
    border: none;
    color: #fff;
    padding: 13px 18px;
}
.sf-navbar-toggle svg{ width: 22px; height: 22px; }

/* ---------- Breadcrumb ---------- */
.sf-breadcrumb{
    background: #fff;
    border-bottom: 1px solid var(--sf-border);
    padding: 12px 0;
    font-size: 13px;
    color: var(--sf-text-muted);
}
.sf-breadcrumb a:hover{ color: var(--sf-green-dark); }
.sf-breadcrumb .sf-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
/* The separator is an <svg>, which has no intrinsic size — without explicit
   width/height it renders at the 300x150 replaced-element default. */
.sf-breadcrumb .sf-crumb-sep{
    width: 13px;
    height: 13px;
    margin: 0 5px;
    color: #c8c8c8;
    flex-shrink: 0;
}
.sf-breadcrumb strong{
    color: var(--sf-text);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Sections / page layout ---------- */
/* Longhand: most page wrappers are `sf-container sf-section`, and the
   `padding: 34px 0` shorthand used to wipe .sf-container's 15px side
   padding, leaving page content misaligned with the header/nav. */
.sf-section{ padding-top: 34px; padding-bottom: 34px; }

/* Homepage blocks are CHILDREN of .sf-container (inner pages instead put
   both classes on one element, which this rule deliberately misses).
   Swap their padding for a single bottom margin so every block is
   separated by exactly --sf-section-gap instead of padding + margin
   stacking into 64px and 82px gaps. */
.sf-container > .sf-section{
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--sf-section-gap);
}
.sf-container > .sf-section:last-child{ margin-bottom: 0; }
.sf-section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sf-border);
}
.sf-section-title{
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #3a3a3a;
    /* Hold full width: the tab strip beside it scrolls, so the title must
       not be squeezed into wrapping onto a second line. */
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}
/* Small green square marker in place of the old left rule. */
.sf-section-title::before{
    content: "";
    width: 13px;
    height: 13px;
    background: var(--sf-green);
    flex-shrink: 0;
}
.sf-section-link{ font-size: 13px; font-weight: 600; color: var(--sf-green-dark); }

.sf-page-title-bar{
    background: #fff;
    border-bottom: 1px solid var(--sf-border);
    padding: 26px 0;
    text-align: center;
}
.sf-page-title-bar h1{
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

/* ---------- Grid ---------- */
.sf-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.sf-cat-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

/* ---------- Category tile ---------- */
.sf-cat-tile{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    text-align: center;
    padding: 18px 10px;
    transition: box-shadow .15s, transform .15s;
}
.sf-cat-tile:hover{ box-shadow: var(--sf-shadow); transform: translateY(-2px); color: inherit; }
.sf-cat-tile img{
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 10px;
}
.sf-cat-tile span{ font-size: 13px; font-weight: 600; display: block; }

/* ---------- Product card ---------- */
.sf-product-card{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s;
    position: relative;
    text-align: center;
}
.sf-product-card:hover{ box-shadow: var(--sf-shadow); }
.sf-product-thumb{
    aspect-ratio: 1 / 1;
    /* White, not grey: the product photos have white backgrounds baked in,
       so a grey panel showed them as mismatched white rectangles. */
    background: #fff;
    border-bottom: 1px solid var(--sf-border);
    display: block;
    position: relative;
    overflow: hidden;
}
/* Absolutely positioned so every panel stays exactly square and every image
   gets an identical box. As a flex child with height:100% the percentage
   resolved against an indefinite height, fell back to the photo's own ratio
   and stretched the panel (218x230, 218x232, ...) instead.
   contain, not cover, so packshots are never cropped. */
.sf-product-thumb img{
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
}
.sf-badge{
    position: absolute;
    top: 10px;
    right: 12px;
    /* Above the thumbnail: the image is absolutely positioned too, and comes
       later in the DOM, so without this it paints over the badge. */
    z-index: 2;
    color: var(--sf-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}
.sf-badge.sf-badge-new{ color: var(--sf-green-dark); }
.sf-product-body{
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    align-items: center;
}
.sf-product-name{
    font-size: 14px;
    font-weight: 500;
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.sf-product-name:hover{ color: var(--sf-green-dark); }
.sf-product-price{ display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sf-price-now{ font-size: 16px; font-weight: 700; color: var(--sf-green); }
.sf-price-old{ font-size: 13px; color: #b3b3b3; text-decoration: line-through; }

/* Qty stepper + cart button row */
.sf-product-actions{
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sf-qty-label{ font-size: 13px; color: var(--sf-text-muted); }
.sf-product-actions .sf-qty-input{
    width: 62px;
    height: 36px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 0 6px;
    font-size: 14px;
    text-align: left;
    font-family: inherit;
    color: var(--sf-text);
}
.sf-product-actions .sf-qty-input:focus{ outline: none; border-color: var(--sf-green); }
.sf-cart-btn{
    width: 52px;
    height: 36px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-cart-btn svg{ width: 19px; height: 19px; }
.sf-cart-btn:hover{ background: var(--sf-green); border-color: var(--sf-green); color: var(--sf-on-primary, #fff); }
.sf-cart-btn:disabled,
.sf-product-actions .sf-qty-input:disabled{ opacity: .45; cursor: not-allowed; }

/* ---------- Banner ---------- */
.sf-hero{
    background: linear-gradient(120deg, #eef7e8, #f7f6ee);
    border-radius: var(--sf-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 48px;
    margin: 24px 0;
    gap: 24px;
}
.sf-hero-text h2{ font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.sf-hero-text p{ color: var(--sf-text-muted); margin: 0 0 16px; max-width: 420px; }
.sf-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sf-green);
    color: var(--sf-on-primary, #fff);
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--sf-radius);
    border: none;
    font-size: 13.5px;
}
.sf-btn:hover{ background: var(--sf-green-dark); color: #fff; }
.sf-btn-outline{
    background: transparent;
    color: var(--sf-green-dark);
    border: 1.5px solid var(--sf-green);
}
.sf-btn-outline:hover{ background: var(--sf-green); color: var(--sf-on-primary, #fff); }
.sf-btn-gold{ background: var(--sf-gold); color: var(--sf-on-gold, #3a2a00); font-weight: 800; letter-spacing: .3px; }
.sf-btn-gold:hover{ background: var(--sf-gold-dark); color: var(--sf-on-gold, #3a2a00); }

/* ---------- Sidebar (category / filters) ---------- */
.sf-layout{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
/* Column-split variants. These are classes rather than inline styles so the
   responsive rules further down can collapse them — an inline
   grid-template-columns cannot be overridden by a media query, which left
   these pages two-column (and overflowing) on phones. */
.sf-layout--account{ grid-template-columns: 220px minmax(0, 1fr); }
.sf-layout--aside  { grid-template-columns: minmax(0, 1fr) 280px; }
.sf-layout--cart   { grid-template-columns: minmax(0, 1fr) 300px; }
.sf-layout--contact{ grid-template-columns: minmax(0, 1fr) 1.4fr; }
.sf-layout--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-sidebar{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 16px;
}
.sf-sidebar h4{ font-size: 14px; font-weight: 800; margin: 0 0 10px; }
.sf-sidebar ul li a{
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--sf-text);
    border-bottom: 1px solid #f4f4f4;
}
.sf-sidebar ul li a:hover, .sf-sidebar ul li a.active{ color: var(--sf-green-dark); }
.sf-sidebar ul li a span{ color: #b3b3b3; font-size: 12px; }

/* ---------- Pagination ---------- */
.sf-pagination{ display: flex; justify-content: center; margin-top: 24px; }
.sf-pagination .pagination{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sf-pagination .page-item .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
    color: var(--sf-text);
    font-size: 13.5px;
}
.sf-pagination .page-item .page-link:hover{ background: #f4f7f2; color: var(--sf-green-dark); }
.sf-pagination .page-item.active .page-link{ background: var(--sf-green); border-color: var(--sf-green); color: var(--sf-on-primary, #fff); }
.sf-pagination .page-item.disabled .page-link{ color: #ccc; }

/* ---------- Cards / forms (cart, auth, contact) ---------- */
.sf-card{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 24px;
}
.sf-form-group{ margin-bottom: 16px; }
.sf-form-group label{ display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.sf-form-group input,
.sf-form-group textarea{
    width: 100%;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}
.sf-form-group select{
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 10px 38px 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
}
.sf-form-group select:disabled{ background-color: #f3f4f6; cursor: not-allowed; opacity: .7; }
.sf-form-group input:focus,
.sf-form-group select:focus,
.sf-form-group textarea:focus{ outline: none; border-color: var(--sf-green); }
.sf-error{ color: #d9534f; font-size: 12.5px; margin-top: 4px; }
.sf-alert{ padding: 12px 16px; border-radius: var(--sf-radius); font-size: 13.5px; margin-bottom: 18px; }
.sf-alert-success{ background: #eaf7e6; color: var(--sf-green-darker); border: 1px solid #cdeac2; }
.sf-alert-error{ background: #fdecea; color: #b32a24; border: 1px solid #f6cac6; }

/* ---------- Cart table ---------- */
.sf-cart-table{ width: 100%; border-collapse: collapse; background: #fff; }
.sf-cart-table th{
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    border-bottom: 2px solid var(--sf-border);
    padding: 12px;
}
.sf-cart-table td{
    padding: 14px 12px;
    border-bottom: 1px solid var(--sf-border);
    vertical-align: middle;
}
.sf-cart-product{ display: flex; align-items: center; gap: 12px; }
.sf-cart-product img{ width: 56px; height: 56px; object-fit: cover; border-radius: var(--sf-radius); border: 1px solid var(--sf-border); }
.sf-qty-box{ display: inline-flex; align-items: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); }
.sf-qty-box button{ background: none; border: none; width: 30px; height: 32px; font-size: 15px; }
.sf-qty-box input{ width: 40px; border: none; text-align: center; font-size: 14px; }
.sf-remove-btn{ color: #d9534f; border: none; background: none; font-size: 13px; font-weight: 600; }
.sf-cart-summary{ background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 20px; }
.sf-summary-row{ display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; }
.sf-summary-row.sf-total{ font-weight: 800; font-size: 16px; border-top: 1px solid var(--sf-border); margin-top: 6px; padding-top: 14px; }

/* ---------- Checkout ---------- */
.sf-checkout-login-hint{
    background: #eaf7e6;
    border: 1px solid #cdeac2;
    color: var(--sf-green-darker);
    padding: 10px 16px;
    border-radius: var(--sf-radius);
    font-size: 13.5px;
    margin: 0 0 18px;
}
.sf-checkout-login-hint a{ font-weight: 700; color: var(--sf-green-dark); }
.sf-checkout-address-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.sf-checkout-shipping-note{ display: block; color: var(--sf-text-muted); font-size: 12px; margin-top: 6px; }
.sf-checkout-no-payment{ color: var(--sf-text-muted); font-size: 13.5px; margin: 0; }

.sf-pay-option{
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 12px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.sf-pay-option:last-child{ margin-bottom: 0; }
.sf-pay-option input[type="radio"]{ width: auto; accent-color: var(--sf-green); }
.sf-pay-option i{ width: 20px; text-align: center; color: var(--sf-text-muted); }
.sf-pay-option:hover{ border-color: var(--sf-green); }
.sf-pay-option--selected{
    border-color: var(--sf-green);
    background: #f3faf0;
}
.sf-pay-option--selected i{ color: var(--sf-green-dark); }

.sf-checkout-confirm{ text-align: center; padding: 40px 30px; }
.sf-checkout-confirm-icon{ width: 60px; height: 60px; color: var(--sf-green); }

@media (max-width: 640px){
    .sf-checkout-address-grid{ grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.sf-footer{
    background: #232b21;
    color: #c9d1c5;
    margin-top: 40px;
    font-size: 13.5px;
}
/* The feature strip sits directly above <footer> and shares its dark
   background (see .sf-feature-strip) - when it's there, the margin above
   would otherwise punch a light gap between the two dark blocks. */
.sf-feature-strip + .sf-footer{ margin-top: 0; }
.sf-footer-top{ padding: 40px 0; }
.sf-footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 30px; }
.sf-footer-grid h5{ color: #fff; font-size: 14.5px; margin: 0 0 14px; }
.sf-footer-grid ul li{ margin-bottom: 8px; }
.sf-footer-grid ul li a:hover{ color: #fff; }
.sf-footer-grid p{ color: #a7b0a3; line-height: 1.7; margin: 0 0 12px; }
.sf-footer-bottom{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: #8f978c;
    font-size: 12.5px;
}
.sf-powered-by a{
    color: #b9c2b4;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.sf-powered-by a:hover{ color: #fff; border-bottom-color: rgba(255,255,255,.5); }

/* ---------- Homepage layout: category sidebar + main content ---------- */
.sf-home-layout{
    display: grid;
    /* minmax(0,1fr) — a bare 1fr floors at the content's min-content width,
       which lets wide children push the column past the viewport. */
    grid-template-columns: var(--sf-sidebar-w) minmax(0, 1fr);
    gap: 20px;
    /* No top margin: the sidebar butts against the ALL CATEGORIES bar. */
    margin: 0 0 var(--sf-section-gap);
    /* Without this the sidebar stretches to the (very tall) content column. */
    align-items: start;
}
.sf-cat-sidebar{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: visible;
    /* Match the hero beside it: the sidebar starts flush under the yellow
       bar while the hero is pushed down by --sf-hero-gap, so the sidebar
       must be that much taller for both to end on the same line.
       min-height (not height) so an unusually long category name grows the
       box instead of clipping a row. */
    min-height: calc(var(--sf-hero-h) + var(--sf-hero-gap));
    display: flex;
    flex-direction: column;
}
.sf-cat-sidebar li{ position: relative; border-bottom: 1px solid #f2f2f2; }
.sf-cat-sidebar li:last-child{ border-bottom: none; }
.sf-cat-sidebar li > a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sf-text);
}
.sf-cat-sidebar li > a:hover{ color: var(--sf-green-dark); background: #f7faf5; }
/* Uniform icon box whether the category has an uploaded image or falls
   back to the inline SVG. */
.sf-cat-sidebar li > a img,
.sf-cat-sidebar li > a svg.sf-cat-icon{ width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.sf-cat-sidebar li > a svg.sf-cat-icon{ color: #9bb591; }
.sf-cat-sidebar li > a .sf-cat-chevron{ margin-left: auto; width: 12px; height: 12px; color: #bbb; }
.sf-cat-flyout{
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
    z-index: 55;
    padding: 8px 0;
}
.sf-cat-sidebar li:hover .sf-cat-flyout{ display: block; }
.sf-cat-flyout a{ display: block; padding: 8px 16px; font-size: 13px; }
.sf-cat-flyout a:hover{ background: #f7faf5; color: var(--sf-green-dark); }

/* Overflow categories, revealed by the "More Categories" toggle */
.sf-cat-sidebar li.sf-cat-extra{ display: none; }
.sf-cat-sidebar.sf-show-all li.sf-cat-extra{ display: block; }
.sf-cat-more button{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sf-text);
    font-family: inherit;
}
.sf-cat-more button:hover{ color: var(--sf-green-dark); background: #f7faf5; }
.sf-cat-more-sign{ font-size: 15px; line-height: 1; color: var(--sf-green); font-weight: 800; }

/* ---------- Hero banner row ----------
   Height is fixed so the banner images (which range from ultra-wide
   5.2:1 strips to 1.4:1 photos) can't blow the row out vertically.
   Flex/grid children get min-height:0 so they actually respect it. */
.sf-hero-row{
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
    margin-top: var(--sf-hero-gap);
    /* No bottom margin: it is the last thing in the grid column, and any
       margin here would push the row past the sidebar and break the
       bottom alignment between the two columns. */
    height: var(--sf-hero-h);
}

.sf-hero-main{
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    min-height: 0;
}
/* Wide promo strips put their artwork on the far left, leaving open
   space to the right for copy — so anchor the image left. */
.sf-hero-main > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.sf-hero-main-text{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 34px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 22%, rgba(255,255,255,.96) 48%);
}
.sf-hero-main-text h2{ font-size: 26px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.sf-hero-main-text p{ color: #5d5d5d; margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; }
.sf-hero-main-text .sf-btn{ align-self: flex-start; }

/* Hero slider (admin.slider) — same box as the static .sf-hero-main above,
   just with several .sf-hero-slide panels stacked on top of each other and
   crossfaded by toggling .active (app.js). Only one slide's .sf-hero-main-text
   is ever visible at a time, so it can reuse that class as-is. */
.sf-hero-slide{
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
    z-index: 1;
}
.sf-hero-slide.active{ opacity: 1; visibility: visible; z-index: 2; }
.sf-hero-slide > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.sf-hero-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: var(--sf-text);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sf-hero-arrow:hover{ background: #fff; color: var(--sf-green-dark); }
.sf-hero-prev{ left: 14px; }
.sf-hero-next{ right: 14px; }
.sf-hero-dots{
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
}
.sf-hero-dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.sf-hero-dot.active{ width: 20px; border-radius: 4px; background: #fff; }

.sf-hero-side{ display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.sf-hero-side-item{
    flex: 1 1 0;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sf-hero-side-img{ flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Anchor to the top so faces/products stay in frame when cropped. */
.sf-hero-side-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.sf-hero-side-text{ flex: 0 0 auto; padding: 8px 14px 12px; text-align: center; }
.sf-hero-side-text span{ display: block; font-size: 13.5px; font-weight: 700; color: var(--sf-green-dark); margin-bottom: 6px; }
.sf-hero-side-text .sf-btn{ display: flex; justify-content: center; padding: 6px 14px; font-size: 11px; }

/* ---------- Tabbed sections ---------- */
/* min-width:0 lets the tab strip shrink and scroll instead of shoving the
   arrows off the row when there are many categories. */
.sf-head-tools{ display: flex; align-items: center; gap: 18px; margin-left: auto; min-width: 0; }
.sf-tabs-nav{
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    /* room for the focus ring, which would otherwise be clipped by overflow */
    padding: 3px 1px;
}
.sf-tabs-nav::-webkit-scrollbar{ display: none; }
.sf-tabs-nav button{
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #6b6b6b;
    padding: 2px 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.sf-tabs-nav button:hover{ color: var(--sf-green); }
.sf-tabs-nav button.active{ color: var(--sf-green); font-weight: 600; }
/* Suppress the black ring a mouse click leaves on the tab, but keep a
   visible focus ring for keyboard users. */
.sf-tabs-nav button:focus{ outline: none; }
.sf-tabs-nav button:focus-visible{
    outline: 2px solid var(--sf-green);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Rail placeholder while a tab's products are being fetched */
.sf-carousel.sf-rail-loading{ min-height: 120px; position: relative; }
.sf-carousel.sf-rail-loading::after{
    content: "Loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-text-muted);
    font-size: 13px;
}
.sf-rail-empty{ color: var(--sf-text-muted); font-size: 13.5px; margin: 0; padding: 24px 0; }
.sf-tab-panel{ display: none; }
.sf-tab-panel.active{ display: block; }

/* Carousel arrows in the section head */
.sf-carousel-nav{ display: flex; gap: 6px; flex-shrink: 0; }
.sf-carousel-nav button{
    width: 30px;
    height: 28px;
    border: none;
    border-radius: 3px;
    background: #ececec;
    color: #8d8d8d;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-carousel-nav button:hover{ background: var(--sf-green); color: var(--sf-on-primary, #fff); }
.sf-carousel-nav svg{ width: 13px; height: 13px; }

/* Horizontal product rail: exactly 5 cards per view, arrows page through */
.sf-carousel{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sf-carousel::-webkit-scrollbar{ display: none; }
/* Paging is done in JS by whole cards, so no scroll-snap here — mandatory
   snapping fights the programmatic scroll and lands mid-card. */
.sf-carousel > *{ flex: 0 0 calc((100% - 4 * 18px) / 5); }

/* Two-row variant: cards fill top-to-bottom then wrap into a new column, so
   the rail still holds 5 columns per view but shows 10 cards at a time, and
   dragging/paging the one grid container scrolls both rows together. The
   carousel-nav JS pages by measuring the first card's own rendered width,
   which is unaffected by switching the container from flex to grid, so it
   needs no changes to page this variant correctly. */
.sf-carousel--2row{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 4 * 18px) / 5);
}

/* ---------- Promo banner rows ---------- */
.sf-promo-row-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 var(--sf-section-gap); }
.sf-promo-banner{
    position: relative;
    border-radius: var(--sf-radius);
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
}
.sf-promo-banner img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sf-promo-banner-text{ position: relative; z-index: 1; padding: 0 22px; }
.sf-promo-banner-text .sf-badge{ position: static; display: inline-block; margin-bottom: 8px; }
.sf-promo-banner-text h4{ font-size: 17px; font-weight: 800; margin: 0 0 6px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sf-promo-banner-text p{ font-size: 12.5px; margin: 0 0 10px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ---------- Deal of the day ---------- */
.sf-deal-card{ position: relative; }
.sf-deal-timer{ display: flex; gap: 4px; padding: 10px; background: #f7f8f6; border-top: 1px solid var(--sf-border); }
.sf-deal-timer div{ flex: 1; text-align: center; }
.sf-deal-timer strong{ display: block; font-size: 13px; font-weight: 800; color: var(--sf-text); }
.sf-deal-timer span{ font-size: 10px; color: var(--sf-text-muted); text-transform: uppercase; }

/* ---------- Blog cards ---------- */
/* No card container: the text sits on the page like the reference, rather
   than in a white box that stands out against the grey page background. */
.sf-blog-card{ background: transparent; display: flex; flex-direction: column; }
.sf-blog-thumb{
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
    border-radius: var(--sf-radius);
}
.sf-blog-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sf-blog-body{ padding: 13px 0 0; }
.sf-blog-body h4{
    margin: 0 0 7px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: var(--sf-text);
    /* Two lines, and always reserving both: titles vary in length, and a
       one-line title next to a two-line one would knock the excerpts and
       links out of alignment across the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
}
.sf-blog-body h4 a{ color: inherit; }
.sf-blog-body h4 a:hover{ color: var(--sf-green-dark); }
.sf-blog-body p{
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--sf-text-muted);
    margin: 0 0 10px;
    /* Ragged right, not justified: in a column this narrow, justifying
       Italian's long words tears rivers of white space through the text. */
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-blog-body a.sf-read-more{ font-size: 12.5px; color: var(--sf-green); }
.sf-blog-body a.sf-read-more:hover{ text-decoration: underline; }

/* Four across instead of the rail default of five */
.sf-carousel--four > *{ flex: 0 0 calc((100% - 3 * 18px) / 4); }

/* ---------- Feature strip (services) ---------- */
/* Sits directly above <footer> with no gap between them (see the
   .sf-feature-strip + .sf-footer rule above) - margin-top here only
   separates it from whatever section comes before it. */
.sf-feature-strip{ background: #505e29; margin-top: 60px; }
/* flex + wrap instead of a fixed 4-column grid: each item keeps its own
   natural width and the row reflows on its own as space shrinks, rather
   than stretching four equal, over-wide columns on a large screen with
   short content in each (the source of the huge trailing gaps before). */
.sf-feature-strip .sf-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px 24px;
    padding: 22px 15px;
}
.sf-feature-item{ display: flex; align-items: center; gap: 14px; flex: 1 1 220px; }
.sf-feature-item i{ font-size: 26px; line-height: 1; width: 30px; text-align: center; color: var(--sf-gold); flex-shrink: 0; }
.sf-feature-item svg{ width: 30px; height: 30px; color: var(--sf-gold); flex-shrink: 0; }
.sf-feature-item strong{ display: block; font-size: 13px; color: #fff; }
.sf-feature-item span{ font-size: 11.5px; color: #a7b0a3; }

/* ---------- Newsletter form (footer) ---------- */
.sf-newsletter-form{ display: flex; margin-top: 10px; }
.sf-newsletter-form input{
    flex: 1;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #fff;
    padding: 9px 12px;
    border-radius: var(--sf-radius) 0 0 var(--sf-radius);
    font-size: 13px;
}
.sf-newsletter-form input::placeholder{ color: #8f978c; }
.sf-newsletter-form button{
    background: var(--sf-green);
    color: var(--sf-on-primary, #fff);
    border: none;
    padding: 0 16px;
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    font-weight: 700;
    font-size: 12.5px;
}
.sf-newsletter-form button:hover{ background: var(--sf-green-dark); }
.sf-footer-payments{ margin-top: 16px; max-width: 260px; opacity: .9; }
/* Contatti footer: email e telefono sono link, servono gli stati */
.sf-footer-contact a{ color: #a7b0a3; text-decoration: none; }
.sf-footer-contact a:hover{ color: #fff; text-decoration: underline; }

/* Etichetta form solo per screen reader (il campo ha gia' il placeholder) */
.sf-visually-hidden{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Esito iscrizione newsletter */
.sf-newsletter-msg{
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sf-green, #7ac043);
}
.sf-newsletter-msg--error{ color: #ff8a80; }


/* ---------- Empty states ---------- */
.sf-empty{ text-align: center; padding: 60px 20px; color: var(--sf-text-muted); }
.sf-empty svg{ width: 70px; height: 70px; color: #d5dccf; margin-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
    .sf-grid{ grid-template-columns: repeat(3, 1fr); }
    .sf-cat-grid{ grid-template-columns: repeat(4, 1fr); }
    .sf-carousel > *{ flex-basis: calc((100% - 2 * 18px) / 3); }
    .sf-carousel--four > *{ flex-basis: calc((100% - 2 * 18px) / 3); }
    .sf-carousel--2row{ grid-auto-columns: calc((100% - 2 * 18px) / 3); }
    /* The homepage strip shows 14 brands, which fills two 7-column rows on
       desktop. Below that the grid is 4 then 3 columns, so drop the last
       two and let 12 fill 3 or 4 complete rows instead of leaving gaps.
       Scoped to the strip so the full brand listing page is unaffected. */
    .sf-brand-strip > :nth-child(n+13){ display: none; }
    .sf-layout{ grid-template-columns: minmax(0, 1fr); }
    .sf-layout--thirds{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-footer-grid{ grid-template-columns: 1fr 1fr; }
    .sf-hero{ flex-direction: column; text-align: center; }
    .sf-home-layout{ grid-template-columns: minmax(0, 1fr); }
    .sf-cat-sidebar{ display: none; }
    /* The 250px width exists only to line this bar up with the category
       sidebar, which is hidden here — keeping it pushed the menu toggle
       off the right edge on narrow screens. */
    .sf-all-categories{ width: auto; }
    .sf-hero-row{ grid-template-columns: 1fr; height: auto; }
    .sf-hero-main{ height: 240px; }
    .sf-hero-main-text{ width: 62%; padding: 0 20px; }
    .sf-hero-main-text h2{ font-size: 20px; }
    .sf-hero-side{ flex-direction: row; }
    .sf-hero-side-item{ height: 240px; min-width: 0; }
}
@media (max-width: 768px){
    .sf-topbar .sf-container{ height: auto; flex-direction: column; gap: 6px; padding: 8px 15px; }
    .sf-header .sf-container{ flex-wrap: wrap; }
    .sf-search{ order: 3; flex: 1 1 100%; max-width: none; }
    .sf-header-actions{ margin-left: 0; }
    .sf-nav-links{ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--sf-green-dark); display: none; }
    .sf-navbar.open .sf-nav-links{ display: flex; }
    /* Stacked menu: each link must fill its row so the whole row is tappable. */
    .sf-nav-links a{ flex: 1; padding: 13px 20px; }
    .sf-navbar{ position: relative; }
    .sf-navbar-toggle{ display: block; margin-left: auto; }
    .sf-grid{ grid-template-columns: repeat(2, 1fr); }
    .sf-cat-grid{ grid-template-columns: repeat(3, 1fr); }
    .sf-carousel > *{ flex-basis: calc((100% - 18px) / 2); }
    .sf-carousel--four > *{ flex-basis: calc((100% - 18px) / 2); }
    .sf-carousel--2row{ grid-auto-columns: calc((100% - 18px) / 2); }
    .sf-footer-grid{ grid-template-columns: 1fr; }
    /* Title on its own line, tab strip below it. */
    .sf-section-head{ flex-wrap: wrap; gap: 10px; }
    /* Must stay nowrap: with every category listed, wrapping turns the strip
       into a tall stacked list instead of a scrollable row. */
    .sf-tabs-nav{ flex-wrap: nowrap; gap: 16px; }
    .sf-head-tools{ width: 100%; }

    /* Tablet portrait: three-across grids are too tight, two reads better */
    .sf-layout--thirds{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ---- Touch targets ----
       From here down the device is almost certainly touch-operated, so the
       small text controls get enough padding to be tappable rather than
       relying on a cursor's precision. */
    .sf-topbar-right .sf-dropdown-toggle{ padding: 7px 2px; }
    .sf-topbar-social a{ width: 30px; height: 30px; }
    .sf-topbar-social i{ font-size: 14px; }
    .sf-tabs-nav button{ padding: 9px 0; }
    .sf-carousel-nav button{ width: 36px; height: 34px; }
    .sf-footer-top ul a{ display: inline-block; padding: 5px 0; }
    .sf-cat-list a{ padding: 13px 14px; }
    .sf-pagination .page-item .page-link{ min-width: 40px; height: 40px; }
    .sf-view-switch button{ width: 40px; height: 38px; }
    .sf-gallery-thumbs button{ width: 66px; height: 66px; }
    .sf-section-link{ display: inline-block; padding: 6px 0; }
    .sf-footer-contact a{ display: inline-block; padding: 5px 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 576px){
    /* Only now is the screen too narrow for banners to sit side by side. */
    .sf-promo-row-2,
    .sf-layout--thirds{ grid-template-columns: 1fr; }
    .sf-cat-grid{ grid-template-columns: repeat(2, 1fr); }

    /* The hero's two side banners share a row; give them a little less height
       so the stacked hero doesn't dominate a phone screen. */
    .sf-hero-main{ height: 190px; }
    .sf-hero-side-item{ height: 190px; }
    .sf-hero-main-text{ width: 68%; padding: 0 16px; }
    .sf-hero-main-text h2{ font-size: 17px; }
    .sf-hero-main-text p{ display: none; }

    .sf-section-title{ font-size: 16px; }
    .sf-detail-price .sf-price-now{ font-size: 22px; }

    /* Full-width primary actions are easier to hit than shrink-wrapped ones */
    .sf-buy-row .sf-btn{ flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   Category / listing page
   ========================================================= */

/* ---------- Sidebar filter boxes ---------- */
.sf-filter-box{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 20px;
    overflow: hidden;
}
.sf-cat-list > li + li{ border-top: 1px solid #f0f0f0; }
.sf-cat-list a{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--sf-text);
}
.sf-cat-list a span{ color: #aaa; flex-shrink: 0; }
.sf-cat-list a:hover{ background: #f7faf5; color: var(--sf-green-dark); }
.sf-cat-list a.active{ color: var(--sf-green); font-weight: 600; }
.sf-cat-list .sf-cat-child a{ padding-left: 26px; font-size: 13px; color: #6b6b6b; }

/* ---------- Refine Search panel ---------- */
.sf-refine{ padding: 0 0 14px; }
.sf-refine-title{
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sf-green);
    border-bottom: 1px solid var(--sf-border);
}
.sf-refine-group{ border-bottom: 1px solid #f0f0f0; padding: 12px 14px; }
.sf-refine-group h5{
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sf-green);
}
/* Long brand lists scroll instead of pushing the page down */
.sf-refine-options{ display: flex; flex-direction: column; gap: 9px; max-height: 260px; overflow-y: auto; }
.sf-refine-options label{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}
.sf-refine-options input[type="checkbox"]{ accent-color: var(--sf-green); width: 14px; height: 14px; flex-shrink: 0; }
.sf-price-range{ display: flex; align-items: center; gap: 8px; }
.sf-price-range input{
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-price-range input:focus{ outline: none; border-color: var(--sf-green); }
.sf-price-range span{ color: #aaa; }
.sf-refine-actions{ display: flex; align-items: center; gap: 12px; padding: 14px 14px 0; }
.sf-refine-clear{ font-size: 12.5px; color: var(--sf-text-muted); text-decoration: underline; }

/* ---------- Category heading block ---------- */
.sf-cat-head{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 18px 20px;
    margin-bottom: 22px;
}
.sf-cat-head h1{ margin: 0; font-size: 19px; font-weight: 700; color: var(--sf-green); }
.sf-cat-head p{ margin: 8px 0 0; font-size: 13px; color: var(--sf-text-muted); line-height: 1.6; }

/* ---------- Listing toolbar ---------- */
.sf-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 12px 14px;
    margin-bottom: 20px;
}
.sf-view-switch{ display: flex; gap: 6px; }
.sf-view-switch button{
    width: 34px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    color: #8d8d8d;
}
.sf-view-switch button svg{ width: 16px; height: 16px; }
.sf-view-switch button:hover{ color: var(--sf-green-dark); }
.sf-view-switch button.active{ border-color: var(--sf-green); color: var(--sf-green); }
.sf-toolbar-right{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sf-toolbar-right label{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sf-text-muted);
    white-space: nowrap;
}
.sf-toolbar-right select{
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
}
.sf-toolbar-right select:focus{ outline: none; border-color: var(--sf-green); }

.sf-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- List view ---------- */
.sf-grid[data-view="list"]{ grid-template-columns: 1fr; }
.sf-grid[data-view="list"] .sf-product-card{
    flex-direction: row;
    align-items: stretch;
    text-align: left;
}
.sf-grid[data-view="list"] .sf-product-thumb{ flex: 0 0 190px; aspect-ratio: auto; }
.sf-grid[data-view="list"] .sf-product-body{ align-items: flex-start; justify-content: center; padding: 18px 20px; }
.sf-grid[data-view="list"] .sf-product-name{ font-size: 15px; min-height: 0; }
.sf-grid[data-view="list"] .sf-product-actions{ margin-top: 14px; }

/* ---------- Pagination row ---------- */
.sf-pagination-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
.sf-pagination-row .sf-pagination{ margin-top: 0; justify-content: flex-start; }
.sf-pagination-summary{ margin: 0; font-size: 13px; color: var(--sf-text-muted); }

@media (max-width: 1100px){
    .sf-grid-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px){
    /* .sf-layout is collapsed by the main responsive block above; repeating it
       here would re-flatten the --thirds variant that the 768 tier widens. */
    .sf-grid-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf-grid[data-view="list"] .sf-product-thumb{ flex-basis: 140px; }
}
@media (max-width: 768px){
    .sf-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-toolbar{ justify-content: flex-start; }
    .sf-pagination-row{ justify-content: center; }
    .sf-grid[data-view="list"] .sf-product-card{ flex-direction: column; }
    .sf-grid[data-view="list"] .sf-product-thumb{ flex-basis: auto; aspect-ratio: 1 / 1; }
}

/* =========================================================
   Product detail page
   ========================================================= */
.sf-product-detail{
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    margin-bottom: 30px;
}

/* ---------- Gallery ---------- */
.sf-gallery-main{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    aspect-ratio: 1 / 1;
    padding: 22px;
    margin-bottom: 12px;
}
.sf-gallery-main img{ width: 100%; height: 100%; object-fit: contain; }
.sf-gallery-thumbs{ display: flex; gap: 10px; flex-wrap: wrap; }
.sf-gallery-thumbs button{
    width: 78px;
    height: 78px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-gallery-thumbs button.active,
.sf-gallery-thumbs button:hover{ border-color: var(--sf-green); }
.sf-gallery-thumbs img{ width: 100%; height: 100%; object-fit: contain; }

/* ---------- Summary ---------- */
.sf-product-summary h1{
    margin: 0 0 9px;
    font-size: 20px;
    font-weight: 600;
    color: #4a4a4a;
    text-transform: uppercase;
    letter-spacing: .3px;
}
/* Sits below the buy row, so the rule goes above it */
.sf-product-meta{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 26px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--sf-border);
    font-size: 13.5px;
}
.sf-product-meta dt{ color: var(--sf-text-muted); }
.sf-product-meta dd{ margin: 0; color: var(--sf-text); }
.sf-product-meta dd a{ color: var(--sf-green); }
.sf-in-stock{ color: var(--sf-green); font-weight: 600; }
.sf-out-stock{ color: #d9534f; font-weight: 600; }
.sf-tag-list{ display: flex; flex-wrap: wrap; gap: 6px; }
.sf-tag-pill{
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: #f7f7f7;
    color: var(--sf-text) !important;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sf-tag-pill:hover{
    background: var(--sf-green);
    border-color: var(--sf-green);
    color: #fff !important;
}

.sf-detail-price{
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--sf-border);
}
.sf-detail-price .sf-price-now{ font-size: 26px; font-weight: 700; color: var(--sf-text); }
.sf-detail-price .sf-price-old{ font-size: 16px; }
.sf-short-desc{ color: var(--sf-text-muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }

.sf-buy-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.sf-buy-row .sf-btn{ padding: 11px 24px; }

/* ---------- Rating line + share ---------- */
.sf-stars{ color: #dcdcdc; letter-spacing: 1px; font-size: 14px; line-height: 1; white-space: nowrap; }
.sf-stars .on{ color: var(--sf-gold); }
/* Sits directly under the product title. No divider: the title, rating and
   price read as one block, with the first rule coming after the price. */
.sf-rating-line{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #9a9a9a;
    /* Tight to the title above, with clear air before the price below. */
    margin-bottom: 22px;
}
.sf-rating-line a{ color: #9a9a9a; text-decoration: none; }
.sf-rating-line a:hover{ color: var(--sf-green-dark); text-decoration: underline; }
/* Hairline divider between the count and the review link, in place of
   spacing alone — reads tidier than three floating items. */
.sf-rating-line a::before{
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-right: 10px;
    background: #e0e0e0;
    vertical-align: -1px;
}
/* Only slightly larger than the inline stars on each review */
.sf-rating-line .sf-stars{ font-size: 16px; letter-spacing: 2px; }

/* ---------- Tabs ---------- */
.sf-detail-tabs{
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}
.sf-tabs-head{ display: flex; border-bottom: 1px solid var(--sf-border); flex-wrap: wrap; }
.sf-tabs-head button{
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 13px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sf-text-muted);
}
.sf-tabs-head button:hover{ color: var(--sf-green-dark); }
.sf-tabs-head button.active{ color: var(--sf-green); border-bottom-color: var(--sf-green); }
.sf-tab-body{ padding: 22px; font-size: 13.5px; line-height: 1.75; color: #555; }
.sf-tab-body img{ max-width: 100%; height: auto; }
.sf-muted{ color: var(--sf-text-muted); }

/* ---------- Reviews ---------- */
.sf-review{ padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.sf-review-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sf-review-head time{ color: #aaa; font-size: 12.5px; }
.sf-review p{ margin: 0; }

.sf-write-review-title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sf-text);
}
.sf-title-marker{ width: 12px; height: 12px; background: var(--sf-green); flex-shrink: 0; }

.sf-review-form{ max-width: 720px; }
.sf-field{ display: block; margin-bottom: 16px; font-size: 13px; color: var(--sf-text-muted); }
.sf-req{ color: #d9534f; }
.sf-field textarea,
.sf-field input[type="text"]{
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-field textarea:focus,
.sf-field input:focus{ outline: none; border-color: var(--sf-green); }
.sf-rating-field{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--sf-text-muted); }
.sf-rating-scale{ font-size: 12.5px; }
.sf-rating-radio{ display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sf-rating-radio input{ accent-color: var(--sf-green); }
.sf-review-actions{ display: flex; justify-content: flex-end; margin-top: 18px; }

.sf-spec-table{ width: 100%; border-collapse: collapse; }
.sf-spec-table th,
.sf-spec-table td{ padding: 9px 10px; border-bottom: 1px solid var(--sf-border); text-align: left; font-size: 13.5px; }
.sf-spec-table th{ width: 240px; font-weight: 600; color: var(--sf-text); }

/* ---------- Alerts ---------- */
.sf-alert{ padding: 12px 16px; border-radius: var(--sf-radius); margin-bottom: 18px; font-size: 13.5px; }
.sf-alert-success{ background: #eaf7e3; border: 1px solid #bfe4ab; color: #33691e; }
.sf-alert-error{ background: #fdecea; border: 1px solid #f5c2bd; color: #a33a30; }
.sf-alert-error div + div{ margin-top: 4px; }

@media (max-width: 992px){
    .sf-product-detail{ grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 768px){
    .sf-buy-row{ gap: 10px; }
    .sf-product-meta{ gap: 6px 18px; }
}

/* Visually hidden, still read by screen readers and search engines. */
.sf-sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Flash Sale ---------- */

/* Shared pieces: the gold "FLASH SALE" pill, the big offer number and the
   countdown boxes. Used on both the homepage teaser banner and the
   dedicated Flash Sale page's header banner. */
.sf-flash-eyebrow{
    display: inline-block;
    background: var(--sf-gold);
    color: var(--sf-on-gold, #3a2a00);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 30px;
    margin-bottom: 14px;
}
.sf-flash-banner-meta{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sf-flash-offer{ display: flex; align-items: baseline; gap: 6px; }
.sf-flash-offer strong{ font-size: 40px; font-weight: 800; color: var(--sf-gold); line-height: 1; }
.sf-flash-offer span{ font-size: 12px; font-weight: 700; letter-spacing: .5px; color: rgba(255,255,255,.85); text-transform: uppercase; }
.sf-flash-timer{ display: flex; gap: 8px; }
.sf-flash-timer div{
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--sf-radius);
    padding: 6px 10px;
    text-align: center;
    min-width: 52px;
}
.sf-flash-timer strong{ display: block; font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2; }
.sf-flash-timer span{ display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.75); margin-top: 2px; }

/* Homepage teaser: same rounded, contained-width treatment as the hero
   banner right above it, so it reads as part of that same row of promo
   cards rather than a jarring full-bleed interruption. */
.sf-flash-banner{
    position: relative;
    display: block;
    height: 280px;
    border-radius: var(--sf-radius);
    overflow: hidden;
    margin: 0 0 var(--sf-section-gap);
    background: #1a1a1a;
}
.sf-flash-banner > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-flash-banner-overlay{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 44px;
    background: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.15) 80%);
}
.sf-flash-banner-content{ max-width: 560px; color: #fff; }
.sf-flash-banner-content h2{ font-size: 28px; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.sf-flash-banner-content p{ font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 440px; }
.sf-flash-banner-content .sf-flash-banner-meta{ margin-bottom: 22px; }
.sf-flash-banner-content .sf-btn{ align-self: flex-start; }

/* Dedicated page: full-bleed, matching .sf-breadcrumb right above it, so
   the "Flash Sale Page Image" runs edge to edge like a proper landing
   header, with the copy kept inside the normal content column. */
.sf-flash-page-banner{
    position: relative;
    display: block;
    height: 320px;
    overflow: hidden;
    background: #1a1a1a;
}
.sf-flash-page-banner > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-flash-page-banner-overlay{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.45) 55%, rgba(10,10,10,.15) 100%);
}
.sf-flash-page-banner-overlay .sf-container{ color: #fff; }
.sf-flash-page-banner-overlay h1{ font-size: 32px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.sf-flash-page-banner-overlay p{ font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 20px; max-width: 560px; }

@media (max-width: 992px){
    .sf-flash-banner{ height: auto; padding: 26px 0; }
    .sf-flash-banner-overlay{ padding: 0 24px; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.8) 100%); }
    .sf-flash-banner-content{ max-width: none; }
    .sf-flash-page-banner{ height: 280px; }
}
@media (max-width: 768px){
    .sf-flash-banner-content h2,
    .sf-flash-page-banner-overlay h1{ font-size: 22px; }
    .sf-flash-offer strong{ font-size: 32px; }
    .sf-flash-timer div{ min-width: 44px; padding: 5px 7px; }
    .sf-flash-timer strong{ font-size: 15px; }
    .sf-flash-page-banner{ height: 260px; }
    .sf-flash-page-banner-overlay p{ display: none; }
}
@media (max-width: 576px){
    .sf-flash-banner-content p{ display: none; }
    .sf-flash-banner-meta{ gap: 14px; }
    .sf-flash-timer{ gap: 5px; }
    .sf-flash-page-banner{ height: 230px; }
    .sf-flash-page-banner-overlay h1{ font-size: 19px; }
}

/* Phone-only markup (app header, bottom nav, sheets). Hidden on desktop;
   mobile-app.css reveals it on small screens. */
.sf-app-only{ display: none; }

/* Table reservation button in the main menu bar */
.sf-nav-book{ margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 99px; background: var(--sf-gold); color: var(--sf-on-gold, #3a2a00) !important; font-weight: 800; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease; }
.sf-nav-book svg{ width: 18px; height: 18px; }
.sf-nav-book:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (max-width: 820px){ .sf-nav-book{ margin-left: 0; padding: 8px 14px; font-size: 13px; } }

/* ---------- Language switcher (topbar): flag + native name ---------- */
.sf-flag{
    display: inline-block;
    flex: 0 0 auto;
    width: 22px; height: 15px;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.14);
    line-height: 0;
}
.sf-flag svg{ width: 100%; height: 100%; display: block; }
.sf-lang-toggle{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.2; }
/* Button flag + code match the size/weight/colour of the neighbouring "My account" toggle */
.sf-lang-toggle .sf-flag{ width: 16px; height: 11px; border-radius: 2px; }
.sf-lang-code{ font-weight: inherit; letter-spacing: 0; color: inherit; }
.sf-lang-menu{ min-width: 168px; }
.sf-lang-menu a{ display: flex; align-items: center; gap: 10px; }
.sf-lang-menu a span:not(.sf-flag){ flex: 1 1 auto; }
.sf-lang-menu a.is-active{ font-weight: 700; color: var(--sf-green-dark); }
.sf-lang-check{ width: 14px; height: 14px; color: var(--sf-green-dark); }

/* ---------- Login / Register ---------- */
.sf-auth{ --au: var(--mf-accent, var(--sf-green-dark)); max-width: 480px; margin: 8px auto 24px; display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--sf-border); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.08); }
.sf-auth__aside{ position: relative; padding: 40px 34px; color: #fff; background: linear-gradient(155deg, var(--mf-ink, #1f2d22) 0%, var(--au) 140%); display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow: hidden; }
.sf-auth__aside::before, .sf-auth__aside::after{ content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.sf-auth__aside::before{ width: 240px; height: 240px; right: -90px; top: -90px; }
.sf-auth__aside::after{ width: 180px; height: 180px; left: -70px; bottom: -70px; }
.sf-auth__brand{ position: relative; color: #fff; font-size: 22px; font-weight: 800; text-decoration: none; }
.sf-auth__brand img{ max-height: 44px; max-width: 170px; width: auto; display: block; background: #fff; padding: 6px 10px; border-radius: 10px; }
.sf-auth__aside h2{ position: relative; margin: 0; font-size: 26px; line-height: 1.25; color: #fff; }
.sf-auth__perks{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sf-auth__perks li{ display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.sf-auth__perks svg{ flex: 0 0 auto; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sf-auth__main{ padding: 42px 40px; }
.sf-auth__main h1{ margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
.sf-auth__sub{ margin: 0 0 24px; color: var(--sf-text-muted); font-size: 14px; }
.sf-auth .sf-form-group input:not([type=checkbox]){ width: 100%; height: 46px; border-radius: 12px; padding: 0 14px; background: #fafafa; transition: border-color .15s, box-shadow .15s, background .15s; }
.sf-auth .sf-form-group input:not([type=checkbox]):focus{ outline: 0; background: #fff; border-color: var(--au); box-shadow: 0 0 0 4px color-mix(in srgb, var(--au) 16%, transparent); }
.sf-auth__pw{ position: relative; }
.sf-auth__pw input{ padding-right: 46px !important; }
.sf-auth__eye{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--sf-text-muted); cursor: pointer; border-radius: 10px; display: grid; place-items: center; }
.sf-auth__eye:hover, .sf-auth__eye.is-on{ color: var(--au); }
.sf-auth__eye svg{ width: 20px; height: 20px; }
.sf-auth__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sf-auth__check{ display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; font-size: 13.5px; cursor: pointer; }
.sf-auth__check input{ width: 17px; height: 17px; accent-color: var(--au); }
.sf-auth__submit{ width: 100%; justify-content: center; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; margin-top: 4px; }
.sf-auth__switch{ text-align: center; margin: 22px 0 0; font-size: 13.5px; color: var(--sf-text-muted); }
.sf-auth__switch a{ color: var(--au); font-weight: 700; text-decoration: none; margin-left: 4px; }
.sf-auth__switch a:hover{ text-decoration: underline; }
@media (max-width: 820px){
    .sf-auth{ grid-template-columns: 1fr; border-radius: 18px; margin-top: 0; }
    .sf-auth__aside{ display: none; }
    .sf-auth__main{ padding: 28px 20px; }
    .sf-auth__row{ grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.sf-ct__head{ max-width: 1000px; margin: 0 auto 26px; }
.sf-ct__head h1{ margin: 0 0 6px; font-size: 30px; line-height: 1.2; }
.sf-ct__head p{ margin: 0; color: var(--sf-text-muted); font-size: 15px; }
.sf-ct{ --ct: var(--mf-accent, var(--sf-green-dark)); max-width: 1000px; margin: 0 auto 24px; display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.sf-ct__info{ display: grid; gap: 14px; }
.sf-ct__item{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--sf-border); border-radius: 16px; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.sf-ct__item:hover{ transform: translateY(-2px); border-color: var(--ct); box-shadow: 0 10px 26px rgba(0,0,0,.07); }
.sf-ct__ic{ flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--ct); background: color-mix(in srgb, var(--ct) 12%, #fff); }
.sf-ct__ic svg{ width: 22px; height: 22px; }
.sf-ct__item small{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-text-muted); margin-bottom: 2px; }
.sf-ct__item b{ font-size: 15px; font-weight: 700; word-break: break-word; }
.sf-ct__note{ margin: 4px 4px 0; font-size: 13px; color: var(--sf-text-muted); }
.sf-ct__form{ background: #fff; border: 1px solid var(--sf-border); border-radius: 20px; padding: 32px; box-shadow: 0 18px 50px rgba(0,0,0,.07); }
.sf-ct__form h2{ margin: 0 0 20px; font-size: 22px; }
.sf-ct__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sf-ct__form .sf-form-group input, .sf-ct__form .sf-form-group textarea{ width: 100%; border-radius: 12px; background: #fafafa; padding: 0 14px; transition: border-color .15s, box-shadow .15s, background .15s; }
.sf-ct__form .sf-form-group input{ height: 46px; }
.sf-ct__form .sf-form-group textarea{ padding: 12px 14px; resize: vertical; min-height: 130px; }
.sf-ct__form .sf-form-group input:focus, .sf-ct__form .sf-form-group textarea:focus{ outline: 0; background: #fff; border-color: var(--ct); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct) 16%, transparent); }
.sf-ct__submit{ height: 48px; padding: 0 28px; border-radius: 12px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.sf-ct__submit svg{ width: 18px; height: 18px; }
@media (max-width: 820px){
    .sf-ct{ grid-template-columns: 1fr; }
    .sf-ct__head h1{ font-size: 24px; }
    .sf-ct__form{ padding: 22px 18px; border-radius: 18px; }
    .sf-ct__row{ grid-template-columns: 1fr; }
    .sf-ct__submit{ width: 100%; justify-content: center; }
}

.sf-ct__map{ position: relative; max-width: 1000px; margin: 0 auto 24px; border-radius: 20px; overflow: hidden; border: 1px solid var(--sf-border); box-shadow: 0 18px 50px rgba(0,0,0,.07); background: #fff; }
.sf-ct__map iframe{ display: block; width: 100%; height: 380px; border: 0; }
.sf-ct__map-open{ position: absolute; right: 14px; bottom: 14px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ct, var(--sf-green-dark)); font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media (max-width: 820px){ .sf-ct__map{ border-radius: 18px; } .sf-ct__map iframe{ height: 300px; } }

/* ---------- Frequently bought together ---------- */
.sf-bundle{ --bn: var(--mf-accent, var(--sf-green-dark)); }
.sf-bundle__sub{ margin: 4px 0 0; color: var(--sf-text-muted); font-size: 14px; }
.sf-bundle__wrap{ display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--sf-border); border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.sf-bundle__items{ display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.sf-bundle__plus{ align-self: center; font-size: 26px; font-weight: 300; color: var(--sf-text-muted); }
.sf-bundle__item{ position: relative; flex: 1 1 170px; max-width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--sf-border); border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .15s, opacity .15s, box-shadow .15s; }
.sf-bundle__item:hover{ border-color: var(--bn); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.sf-bundle__item.is-off{ opacity: .5; }
.sf-bundle__item input{ position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; accent-color: var(--bn); z-index: 1; }
.sf-bundle__img{ display: grid; place-items: center; aspect-ratio: 1 / 1; background: #fff; border-radius: 10px; overflow: hidden; }
.sf-bundle__img img{ width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.sf-bundle__name{ font-size: 13.5px; line-height: 1.35; min-height: 2.7em; color: var(--sf-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bundle__name a{ color: inherit; text-decoration: none; }
.sf-bundle__name a:hover{ color: var(--bn); }
.sf-bundle__name b{ display: block; font-size: 12px; color: var(--bn); }
.sf-bundle__price{ font-size: 16px; font-weight: 800; }
.sf-bundle__price s{ margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--sf-text-muted); }
.sf-bundle__buy{ text-align: center; display: grid; gap: 14px; }
.sf-bundle__total{ font-size: 14px; color: var(--sf-text-muted); }
.sf-bundle__total strong{ display: block; margin-top: 2px; font-size: 26px; color: var(--sf-text); }
.sf-bundle__btn{ width: 100%; justify-content: center; height: 46px; border-radius: 999px; font-weight: 700; }
.sf-bundle__btn:disabled{ opacity: .5; cursor: not-allowed; }
@media (max-width: 900px){
    .sf-bundle__wrap{ grid-template-columns: 1fr; padding: 16px; }
    .sf-bundle__item{ flex: 1 1 calc(50% - 20px); max-width: none; }
    .sf-bundle__plus{ display: none; }
}

/* ---------- Toast popups ---------- */
#toast-container{ --tt: var(--mf-accent, var(--sf-green-dark, #4a9420)); }
#toast-container > div{
    position: relative;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 16px 44px 16px 64px;
    border-radius: 14px;
    background-color: #fff !important;
    background-image: none !important;
    color: #1f2d27;
    border: 1px solid rgba(0,0,0,.06);
    border-left: 4px solid var(--tt);
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
    opacity: 1;
    overflow: hidden;
    font-family: inherit;
}
#toast-container > div:hover{ box-shadow: 0 22px 50px rgba(0,0,0,.24); }
#toast-container > div::before{
    content: "";
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: color-mix(in srgb, var(--tt) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a9420' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#toast-container > .toast-error{ border-left-color: #d64545; }
#toast-container > .toast-error::before{ background: #fdeaea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 16px no-repeat; }
#toast-container > .toast-warning{ border-left-color: #e0a100; }
#toast-container > .toast-warning::before{ background: #fff6dd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a100' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
#toast-container > .toast-info{ border-left-color: #2f7de1; }
#toast-container > .toast-info::before{ background: #e8f1fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7de1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7v.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
#toast-container .toast-title{ font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #1f2d27; }
#toast-container .toast-message{ margin-top: 2px; font-size: 13px; color: var(--tt); font-weight: 600; }
#toast-container > .toast-error .toast-message{ color: #d64545; }
#toast-container .toast-close-button{ position: absolute; right: 12px; top: 10px; color: #8a948f; font-size: 20px; font-weight: 400; text-shadow: none; opacity: 1; }
#toast-container .toast-close-button:hover{ color: #1f2d27; }
#toast-container .toast-progress{ height: 3px; background: var(--tt); opacity: .35; }
#toast-container > .sf-toast-link{ cursor: pointer; }

/* ---------- Checkout: delivery / pickup choice ---------- */
.sf-fulfil{ --fu: var(--mf-accent, var(--sf-green-dark)); margin: 0 0 18px; padding: 16px; background: #fff; border: 1px solid var(--sf-border); border-radius: 14px; }
.sf-fulfil__title{ margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--sf-text); }
.sf-fulfil__opt{ position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: 12px; background: #fafafa; cursor: pointer; font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s; }
.sf-fulfil__opt:hover{ border-color: var(--fu); }
.sf-fulfil__opt input{ position: absolute; opacity: 0; pointer-events: none; }
.sf-fulfil__dot{ flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b9c0bc; background: #fff; transition: border-color .15s, box-shadow .15s; }
.sf-fulfil__opt:has(input:checked){ border-color: var(--fu); background: color-mix(in srgb, var(--fu) 8%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fu) 14%, transparent); }
.sf-fulfil__opt input:checked + .sf-fulfil__dot{ border-color: var(--fu); box-shadow: inset 0 0 0 3px #fff; background: var(--fu); }
.sf-fulfil__opt input:focus-visible + .sf-fulfil__dot{ outline: 2px solid var(--fu); outline-offset: 2px; }
.sf-fulfil__note{ margin: 6px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--sf-text-muted); }