:root{--primary:#17233B;--secondary:#B89A67;--ink:#172033;--muted:#697386;--line:#e7e9ee;--bg:#f7f7f5}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input{font:inherit}.hidden{display:none!important}.sf-header{height:74px;padding:0 max(5vw,22px);display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.sf-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.sf-brand small{display:block;color:var(--muted)}.sf-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:900;overflow:hidden}.sf-logo img{width:100%;height:100%;object-fit:contain;background:#fff}.sf-header nav{display:flex;gap:5px}.sf-header nav button{border:0;background:transparent;padding:10px 12px;cursor:pointer}.sf-header nav button:last-child{background:var(--primary);color:#fff;border-radius:9px}.sf-hero{min-height:390px;padding:70px max(7vw,28px);display:flex;align-items:center;background:linear-gradient(120deg,var(--primary),#fff);color:#fff}.sf-hero div{max-width:580px}.sf-hero span,.sf-section-head small{font-size:11px;letter-spacing:1.7px;color:var(--secondary);font-weight:800}.sf-hero h1{font-size:clamp(38px,6vw,70px);line-height:.98;margin:12px 0}.sf-hero p{max-width:450px;opacity:.85}.sf-hero button,.sf-card button,.sf-dialog form button,.sf-enquire{border:0;background:var(--secondary);color:#fff;border-radius:9px;padding:12px 16px;font-weight:800;cursor:pointer}.sf-wrap{max-width:1220px;margin:auto;padding:35px 22px 70px}.sf-tools{display:flex;max-width:520px;margin-bottom:20px}.sf-tools input{flex:1;border:1px solid var(--line);padding:12px;border-radius:9px 0 0 9px}.sf-tools button{border:0;background:var(--primary);color:#fff;padding:0 18px;border-radius:0 9px 9px 0}.sf-categories{display:flex;align-items:center;gap:10px;overflow:auto;padding-bottom:14px}.sf-categories button{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:999px;cursor:pointer}.sf-categories button.active{background:var(--primary);color:#fff}.sf-cat-group{display:flex;gap:6px;align-items:center}.sf-cat-group strong{font-size:11px;margin-left:8px}.sf-section-head{display:flex;justify-content:space-between;align-items:end;margin:25px 0 16px}.sf-section-head h2{margin:4px 0 0;font-size:30px}.sf-section-head span{color:var(--muted);font-size:12px}.sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.sf-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;cursor:pointer;transition:.2s}.sf-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #18223814}.sf-card-img{height:300px;background:#f4f3f0;position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden;padding:10px}.sf-card-img img{width:100%;height:100%;object-fit:contain;display:block}.sf-card-img b{position:absolute;top:10px;left:10px;background:var(--secondary);color:#fff;padding:6px 8px;border-radius:6px;font-size:9px}.sf-card-body{padding:14px;display:flex;flex-direction:column;min-height:170px}.sf-card-body small{color:var(--muted)}.sf-card-body h3{margin:5px 0 10px;line-height:1.3;min-height:34px}.sf-price{display:flex;gap:8px;align-items:center}.sf-price strong{font-size:17px}.sf-price del{color:var(--muted);font-size:12px}.sf-card button{width:100%;margin-top:auto;background:var(--primary)}.sf-card{display:flex;flex-direction:column;height:100%}.sf-card-body .sf-price{margin-bottom:12px}.sf-card-body>small{min-height:16px}footer{padding:30px max(5vw,22px);display:grid;grid-template-columns:1fr 1fr auto;gap:20px;background:var(--primary);color:#fff}footer p,footer small{opacity:.75}.sf-empty,.sf-fatal{padding:60px;text-align:center}.sf-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}.sf-backdrop{position:absolute;inset:0;background:#08111dcc}.sf-dialog{position:relative;width:min(1000px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:24px}.sf-account-dialog{width:min(480px,100%)}.sf-x{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:30px;cursor:pointer}.sf-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.sf-main-img{height:500px;background:#eee;display:grid;place-items:center}.sf-main-img img{width:100%;height:100%;object-fit:contain}.sf-thumbs{display:flex;gap:7px;margin-top:8px}.sf-thumbs button{width:58px;height:58px;padding:0;border:1px solid var(--line);background:#fff}.sf-thumbs img{width:100%;height:100%;object-fit:cover}.sf-detail-info{padding:30px 10px}.sf-detail-info h2{font-size:34px;margin:7px 0}.sf-price.big strong{font-size:26px}.sf-sizes{margin:18px 0}.sf-sizes label{display:block;font-weight:700;margin-bottom:8px}.sf-sizes span{display:inline-block;border:1px solid var(--line);padding:8px 10px;margin:0 5px 5px 0;border-radius:8px}.sf-sizes small{color:var(--muted)}.sf-specs div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0}.sf-enquire{width:100%;margin-top:18px;background:var(--primary)}.sf-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px}.sf-tabs button{border:0;background:transparent;padding:10px;cursor:pointer}.sf-tabs button.active{color:var(--primary);font-weight:800;border-bottom:2px solid var(--secondary)}.sf-dialog form label{display:block;margin:12px 0;font-size:12px;font-weight:700}.sf-dialog form input{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid var(--line);border-radius:8px}.sf-dialog form .check{display:flex;gap:8px;align-items:center}.sf-dialog form .check input{width:auto;margin:0}.sf-dialog form button{width:100%;background:var(--primary)}.sf-message{font-size:12px;color:#b42318}.sf-message.ok{color:#237450}.sf-my-enquiry{display:grid;grid-template-columns:55px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.sf-my-enquiry img{width:55px;height:55px;object-fit:cover}.sf-my-enquiry small{display:block;color:var(--muted)}.sf-my-enquiry p{font-size:11px}.sf-my-enquiry>b{font-size:10px}.st-converted{color:#237450}.st-new{color:#8a5b00}@media(max-width:900px){.sf-grid{grid-template-columns:repeat(2,1fr)}.sf-detail-grid{grid-template-columns:1fr}.sf-main-img{height:360px}.sf-header nav button:not(:last-child){display:none}}@media(max-width:520px){.sf-grid{grid-template-columns:1fr 1fr;gap:9px}.sf-card-img{height:210px;padding:6px}.sf-card-body{padding:10px;min-height:155px}.sf-card-body h3{font-size:13px;min-height:34px}.sf-hero{min-height:330px}.sf-dialog{padding:18px}.sf-detail-info h2{font-size:26px}footer{grid-template-columns:1fr}}

/* Customer colour + size selection */
.sf-card-colours{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
.sf-card-colours>span{font-size:12px;color:var(--muted)}
.sf-card-colours>b{font-size:11px;font-weight:700;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:#fff}

.sf-option-block{margin:18px 0}
.sf-option-block>label{display:block;font-weight:800;margin-bottom:8px}
.sf-option-list{display:flex;gap:8px;flex-wrap:wrap}
.sf-option-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 12px;cursor:pointer;font-weight:700}
.sf-option-button:hover:not(:disabled){border-color:var(--primary)}
.sf-option-button.selected{background:var(--primary);border-color:var(--primary);color:#fff}
.sf-option-button.out{opacity:.58;cursor:not-allowed;text-decoration:none}
.sf-option-button small{display:block;font-size:9px;font-weight:600;margin-top:2px;color:#9a3b32}
.sf-option-button.selected small{color:#fff}
.sf-variant-status{margin:10px 0 16px;padding:10px 12px;border-radius:9px;background:#f5f6f8;color:var(--muted);font-size:12px}
.sf-variant-status.available{background:#edf8f1;color:#237450;font-weight:700}
.sf-enquire:disabled{opacity:.45;cursor:not-allowed}


/* Multi-size enquiry quantity controls */
.sf-size-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:8px;background:#fff}
.sf-size-qty-row.out{opacity:.6;background:#f7f7f7}
.sf-size-name{font-weight:800;min-width:70px}
.sf-size-out{font-size:11px;color:#9a3b32;font-weight:700}
.sf-qty-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.sf-qty-control button{width:34px;height:34px;border:0;background:#f5f6f8;color:var(--ink);font-size:18px;cursor:pointer}
.sf-qty-control input{width:52px;height:34px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);outline:none;font-weight:800}
.sf-qty-control input::-webkit-outer-spin-button,.sf-qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}


/* ============================================================
   CART + MULTI-PRODUCT ENQUIRY V2
   ============================================================ */

.sf-cart-button{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:999px;
    padding:9px 13px;
    font-weight:800;
    cursor:pointer;
}
.sf-cart-button span{
    display:inline-grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    margin-left:5px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:11px;
}
.sf-cart-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:flex-end;
}
.sf-cart-panel{
    width:min(620px,96vw);
    height:100%;
    background:#fff;
    display:flex;
    flex-direction:column;
    box-shadow:-20px 0 50px rgba(0,0,0,.16);
}
.sf-cart-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding:20px;
    border-bottom:1px solid var(--line);
}
.sf-cart-head small{color:var(--muted)}
.sf-cart-head h2{margin:3px 0 0}
.sf-cart-head>button{
    border:0;background:none;font-size:28px;cursor:pointer;
}
.sf-cart-items{
    flex:1;
    overflow:auto;
    padding:16px;
}
.sf-cart-empty{
    text-align:center;
    color:var(--muted);
    padding:50px 10px;
}
.sf-cart-product{
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:14px;
    overflow:hidden;
}
.sf-cart-product-head{
    display:grid;
    grid-template-columns:54px 1fr auto;
    gap:10px;
    align-items:center;
    padding:11px;
    background:#f8f9fb;
}
.sf-cart-product-head>div:nth-child(2){
    display:flex;flex-direction:column;
}
.sf-cart-product-head small{color:var(--muted);font-size:10px}
.sf-cart-thumb{
    width:54px;height:54px;border-radius:8px;overflow:hidden;background:#eee;
}
.sf-cart-thumb img{width:100%;height:100%;object-fit:cover}
.sf-cart-remove-product,.sf-cart-remove-line{
    border:0;background:none;color:#a33;cursor:pointer;font-weight:700;
}
.sf-cart-variants{padding:4px 11px 11px}
.sf-cart-variant{
    display:grid;
    grid-template-columns:minmax(130px,1fr) auto auto auto;
    gap:10px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eef0f3;
}
.sf-cart-variant:last-child{border-bottom:0}
.sf-cart-variant>div:first-child{display:flex;flex-direction:column}
.sf-cart-variant small{color:var(--muted);font-size:10px}
.sf-cart-qty{
    display:flex;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
}
.sf-cart-qty button{
    width:30px;border:0;background:#f5f6f8;cursor:pointer;
}
.sf-cart-qty input{
    width:42px;border:0;text-align:center;font-weight:700;
}
.sf-cart-footer{
    border-top:1px solid var(--line);
    padding:16px;
    display:grid;
    gap:10px;
}
.sf-cart-total{
    display:flex;justify-content:space-between;align-items:center;
}
.sf-cart-total span{color:var(--muted)}
.sf-cart-total strong{font-size:20px}
.sf-cart-footer textarea{
    width:100%;box-sizing:border-box;border:1px solid var(--line);
    border-radius:9px;padding:10px;font:inherit;resize:vertical;
}
.sf-cart-submit{
    border:0;border-radius:9px;padding:12px 16px;
    background:var(--primary);color:#fff;font-weight:800;cursor:pointer;
}
.sf-cart-submit:disabled{opacity:.45;cursor:not-allowed}
body.sf-cart-open{overflow:hidden}
@media(max-width:600px){
    .sf-cart-variant{grid-template-columns:1fr auto}
    .sf-cart-variant>strong{grid-column:1/2}
}


/* ============================================================
   CUSTOMER ORDER TRACKING V1
   ============================================================ */

.sf-customer-orders{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
}
.sf-orders-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
}
.sf-orders-head small{
    color:var(--muted);
}
.sf-orders-head h3{
    margin:2px 0 0;
}
.sf-orders-head button,
.sf-order-view{
    border:1px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:8px 10px;
    font-weight:700;
    cursor:pointer;
}
.sf-orders-summary{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.sf-orders-summary span{
    background:#f6f7f9;
    border-radius:999px;
    padding:6px 9px;
    font-size:11px;
}
.sf-orders-list{
    display:grid;
    gap:10px;
}
.sf-orders-empty{
    color:var(--muted);
    text-align:center;
    padding:18px;
}
.sf-order-card{
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
}
.sf-order-card-head,
.sf-order-detail-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}
.sf-order-card-head>div{
    display:flex;
    flex-direction:column;
}
.sf-order-card-head small{
    color:var(--muted);
    font-size:10px;
}
.sf-order-status{
    display:inline-flex;
    border-radius:999px;
    padding:5px 8px;
    font-size:10px;
    font-weight:800;
    background:#eef2f7;
}
.sf-order-status.delivered{
    background:#eaf8ef;
    color:#217a49;
}
.sf-order-status.cancelled{
    background:#fff0f0;
    color:#b33a3a;
}
.sf-order-progress{
    margin:14px 0;
}
.sf-order-progress-track{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:relative;
}
.sf-order-progress-track:before{
    content:"";
    position:absolute;
    top:7px;
    left:8%;
    right:8%;
    height:2px;
    background:#e4e7ec;
}
.sf-order-progress-track span{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-align:center;
}
.sf-order-progress-track i{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#d9dde4;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #d9dde4;
}
.sf-order-progress-track span.done i{
    background:var(--primary);
    box-shadow:0 0 0 1px var(--primary);
}
.sf-order-progress-track small{
    font-size:9px;
    color:var(--muted);
}
.sf-order-progress-track span.done small{
    color:var(--ink);
    font-weight:700;
}
.sf-order-cancelled{
    background:#fff0f0;
    color:#b33a3a;
    border-radius:8px;
    padding:9px;
    text-align:center;
    font-weight:800;
}
.sf-order-lines{
    display:grid;
    gap:6px;
}
.sf-order-lines>div{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:8px;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid #eef0f3;
}
.sf-order-lines>div:last-child{
    border-bottom:0;
}
.sf-order-lines>div>span:first-child{
    display:flex;
    flex-direction:column;
}
.sf-order-lines small{
    color:var(--muted);
    font-size:10px;
}
.sf-order-money{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:12px 0;
    padding-top:10px;
    border-top:1px solid #eef0f3;
}
.sf-order-money span{
    font-size:11px;
}
.sf-payment-status{
    margin-left:auto;
    border-radius:999px;
    padding:4px 8px;
    font-weight:800;
}
.sf-payment-status.paid{
    background:#eaf8ef;
    color:#217a49;
}
.sf-payment-status.partial{
    background:#fff6df;
    color:#8c6400;
}
.sf-payment-status.unpaid{
    background:#f2f4f7;
    color:#475467;
}
.sf-customer-order-modal{
    position:fixed;
    inset:0;
    z-index:12000;
    display:grid;
    place-items:center;
    background:rgba(0,0,0,.48);
    padding:18px;
}
.sf-customer-order-modal-card{
    position:relative;
    width:min(760px,96vw);
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:14px;
    padding:20px;
}
.sf-customer-order-modal-card>button{
    position:absolute;
    right:12px;
    top:8px;
    border:0;
    background:none;
    font-size:28px;
    cursor:pointer;
}
.sf-order-detail-head{
    padding-right:30px;
}
.sf-order-detail-head h2{
    margin:3px 0;
}
.sf-order-detail-meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:14px 0 18px;
}
.sf-order-detail-meta span{
    display:flex;
    flex-direction:column;
    gap:3px;
    background:#f7f8fa;
    border-radius:8px;
    padding:9px;
    color:var(--muted);
    font-size:10px;
}
.sf-order-detail-meta b{
    color:var(--ink);
    font-size:12px;
}
.sf-customer-payments{
    display:grid;
    gap:6px;
}
.sf-customer-payments>div{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:8px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:11px;
}
.sf-customer-payments>div>span:first-child{
    display:flex;
    flex-direction:column;
}
.sf-customer-payments small{
    color:var(--muted);
}
@media(max-width:600px){
    .sf-order-lines>div,
    .sf-customer-payments>div{
        grid-template-columns:1fr;
    }
    .sf-order-detail-meta{
        grid-template-columns:repeat(2,1fr);
    }
    .sf-payment-status{
        margin-left:0;
    }
}


/* ============================================================
   GUEST BROWSING + CUSTOMER LOGOUT V1
   ============================================================ */

.sf-customer-logout{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:999px;
    padding:9px 13px;
    font-weight:800;
    cursor:pointer;
}

.sf-customer-logout:hover{
    background:#f7f8fa;
}

.sf-guest-choice{
    margin-top:18px;
    text-align:center;
}

.sf-guest-divider{
    position:relative;
    margin:14px 0;
    color:var(--muted);
    font-size:11px;
}

.sf-guest-divider:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:var(--line);
}

.sf-guest-divider span{
    position:relative;
    z-index:1;
    padding:0 10px;
    background:#fff;
}

.sf-continue-guest{
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:9px;
    padding:11px 14px;
    font-weight:800;
    cursor:pointer;
}

.sf-continue-guest:hover{
    background:#f7f8fa;
}

.sf-guest-choice>small{
    display:block;
    margin-top:8px;
    color:var(--muted);
    line-height:1.45;
}

@media(max-width:600px){
    .sf-customer-logout{
        padding:8px 10px;
        font-size:11px;
    }
}


/* ============================================================
   STOREFRONT MOBILE RESPONSIVENESS V3
   Keeps desktop layout unchanged. Mobile gets a compact menu
   and a viewport-safe shopping cart/enquiry drawer.
   ============================================================ */
.sf-menu-toggle{
    display:none;
    flex:0 0 auto;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

@media(max-width:900px){
    .sf-header{
        height:auto;
        min-height:72px;
        padding:10px 16px;
        gap:10px;
    }
    .sf-brand{
        min-width:0;
        max-width:calc(100% - 54px);
    }
    .sf-brand>div:last-child{
        min-width:0;
    }
    .sf-brand strong,
    .sf-brand small{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .sf-logo{
        width:42px;
        height:42px;
        flex:0 0 42px;
    }
    .sf-menu-toggle{
        display:grid;
        place-items:center;
        margin-left:auto;
        position:relative;
        z-index:3;
    }
    .sf-header nav{
        display:none;
        position:absolute;
        top:100%;
        left:12px;
        right:12px;
        z-index:30;
        padding:10px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:12px;
        box-shadow:0 16px 38px rgba(23,32,51,.16);
        flex-direction:column;
        gap:4px;
    }
    .sf-header.nav-open nav{
        display:flex;
    }
    .sf-header nav button,
    .sf-header nav button:not(:last-child),
    .sf-header nav .sf-cart-button,
    .sf-header nav .sf-customer-logout{
        display:flex !important;
        width:100%;
        min-height:44px;
        align-items:center;
        justify-content:space-between;
        padding:10px 12px;
        border-radius:8px;
        text-align:left;
        white-space:normal;
    }
    .sf-header nav button:last-child{
        border-radius:8px;
    }
    .sf-header nav .sf-cart-button,
    .sf-header nav .sf-customer-logout{
        border:0;
        background:transparent;
        color:var(--ink);
    }
    .sf-header nav .sf-cart-button span{
        margin-left:auto;
    }
    .sf-header nav .sf-customer-logout:not(.hidden){
        background:var(--primary);
        color:#fff;
    }
    .sf-hero{
        min-height:320px;
        padding:54px 22px;
    }
    .sf-hero h1{
        font-size:clamp(38px,12vw,56px);
        line-height:1.02;
    }
}

@media(max-width:600px){
    .sf-wrap{
        padding:26px 14px 54px;
    }
    .sf-tools{
        width:100%;
        max-width:none;
    }
    .sf-tools input{
        min-width:0;
    }
    .sf-section-head{
        align-items:flex-end;
        gap:10px;
    }
    .sf-section-head h2{
        font-size:28px;
    }
    .sf-categories{
        margin-left:-14px;
        margin-right:-14px;
        padding-left:14px;
        padding-right:14px;
    }

    .sf-cart-overlay{
        align-items:stretch;
        justify-content:stretch;
        overflow:hidden;
    }
    .sf-cart-panel{
        width:100vw;
        max-width:100%;
        height:100dvh;
        min-width:0;
        box-shadow:none;
    }
    .sf-cart-head{
        flex:0 0 auto;
        padding:16px 16px 13px;
        gap:10px;
    }
    .sf-cart-head h2{
        font-size:25px;
    }
    .sf-cart-items{
        min-height:0;
        padding:12px;
        overscroll-behavior:contain;
    }
    .sf-cart-product{
        width:100%;
        min-width:0;
        margin-bottom:12px;
    }
    .sf-cart-product-head{
        grid-template-columns:48px minmax(0,1fr) auto;
        gap:9px;
        padding:10px;
    }
    .sf-cart-thumb{
        width:48px;
        height:48px;
    }
    .sf-cart-product-head>div:nth-child(2){
        min-width:0;
    }
    .sf-cart-product-head strong,
    .sf-cart-product-head small{
        overflow-wrap:anywhere;
    }
    .sf-cart-remove-product{
        padding:6px 2px;
        font-size:13px;
    }
    .sf-cart-variants{
        padding:4px 10px 10px;
    }
    .sf-cart-variant{
        grid-template-columns:minmax(0,1fr) auto auto;
        gap:8px;
        padding:11px 0;
    }
    .sf-cart-variant>div:first-child{
        grid-column:1 / -1;
        min-width:0;
    }
    .sf-cart-variant>.sf-cart-qty{
        grid-column:1;
        justify-self:start;
    }
    .sf-cart-variant>strong{
        grid-column:2;
        justify-self:end;
        white-space:nowrap;
    }
    .sf-cart-variant>.sf-cart-remove-line{
        grid-column:3;
        justify-self:end;
        width:34px;
        height:34px;
        padding:0;
        font-size:20px;
    }
    .sf-cart-qty button{
        width:36px;
        height:36px;
        font-size:18px;
    }
    .sf-cart-qty input{
        width:46px;
        height:36px;
    }
    .sf-cart-footer{
        flex:0 0 auto;
        padding:13px 14px calc(13px + env(safe-area-inset-bottom));
        gap:9px;
        background:#fff;
    }
    .sf-cart-total strong{
        font-size:22px;
    }
    .sf-cart-footer textarea{
        min-height:78px;
        max-height:120px;
    }
    .sf-cart-submit{
        min-height:48px;
        font-size:16px;
    }

    .sf-modal{
        padding:8px;
    }
    .sf-dialog{
        width:100%;
        max-height:calc(100dvh - 16px);
        padding:16px;
        border-radius:12px;
    }
    .sf-product-dialog{
        padding-top:46px;
    }
    .sf-main-img{
        height:min(360px,52vh);
    }
    .sf-detail-info{
        padding:18px 2px 4px;
    }
    .sf-detail-info h2{
        font-size:25px;
    }
}

@media(max-width:380px){
    .sf-header{
        padding-left:10px;
        padding-right:10px;
    }
    .sf-logo{
        width:38px;
        height:38px;
        flex-basis:38px;
    }
    .sf-brand strong{
        font-size:14px;
    }
    .sf-brand small{
        font-size:11px;
    }
    .sf-menu-toggle{
        width:40px;
        height:40px;
    }
    .sf-cart-product-head{
        grid-template-columns:44px minmax(0,1fr);
    }
    .sf-cart-thumb{
        width:44px;
        height:44px;
    }
    .sf-cart-remove-product{
        grid-column:2;
        justify-self:start;
    }
}


/* =========================================================
   Mobile product detail modal hardening (v3)
   Prevents product image/details and size controls from
   overlapping or collapsing on phone/tablet viewports.
   ========================================================= */
@media (max-width: 900px) {
    .sf-product-dialog .sf-detail-grid {
        display: block !important;
        width: 100%;
    }

    .sf-product-dialog .sf-detail-grid > div {
        width: 100%;
        min-width: 0;
    }

    .sf-product-dialog .sf-main-img {
        position: relative !important;
        width: 100%;
        height: auto !important;
        aspect-ratio: 4 / 3;
        max-height: 360px;
        overflow: hidden;
        margin: 0;
        background: #f4f3f0;
    }

    .sf-product-dialog .sf-main-img img {
        position: static !important;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .sf-product-dialog .sf-detail-info {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        width: 100%;
        margin: 0;
        padding: 18px 0 4px;
        background: #fff;
        clear: both;
    }

    .sf-product-dialog .sf-thumbs {
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
    }

    .sf-product-dialog #sizeOptions.sf-option-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .sf-product-dialog .sf-size-qty-row {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .sf-product-dialog {
        padding: 42px 14px 16px !important;
    }

    .sf-product-dialog .sf-main-img {
        aspect-ratio: 1 / 1;
        max-height: 330px;
    }

    .sf-product-dialog .sf-detail-info h2 {
        font-size: 24px;
        line-height: 1.15;
    }

    .sf-product-dialog .sf-option-block {
        width: 100%;
    }

    .sf-product-dialog #colourOptions.sf-option-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .sf-product-dialog .sf-size-qty-row {
        display: grid;
        grid-template-columns: minmax(55px, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }

    .sf-product-dialog .sf-size-name {
        min-width: 0;
    }

    .sf-product-dialog .sf-qty-control {
        justify-self: end;
    }

    .sf-product-dialog .sf-variant-status {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .sf-product-dialog .sf-size-qty-row {
        grid-template-columns: 1fr;
    }

    .sf-product-dialog .sf-qty-control {
        justify-self: stretch;
        width: 100%;
    }

    .sf-product-dialog .sf-qty-control input {
        flex: 1;
        min-width: 0;
    }
}


/* =========================================================
   v4 - Product modal: always show the FULL product image
   Mobile/tablet only. Preserve the source image aspect ratio.
   ========================================================= */
@media (max-width: 900px) {
    .sf-product-dialog .sf-main-img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #f4f3f0;
    }

    .sf-product-dialog .sf-main-img img {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 65vh !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 640px) {
    .sf-product-dialog .sf-main-img {
        aspect-ratio: auto !important;
        max-height: none !important;
    }

    .sf-product-dialog .sf-main-img img {
        max-height: 58vh !important;
    }
}


/* =========================================================
   v5 - Final phone layout hardening
   Fixes iPhone/mobile product cards, modal width and footer.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 640px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .sf-wrap {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        overflow: visible;
    }

    /* Force one full-width product per row on phones.
       This deliberately overrides the older max-width:520px
       two-column rule earlier in the stylesheet. */
    .sf-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .sf-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: hidden;
    }

    .sf-card-img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
        padding: 8px;
    }

    .sf-card-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    .sf-card-body {
        width: 100%;
        min-width: 0;
        min-height: 0 !important;
        padding: 14px;
    }

    .sf-card-body h3,
    .sf-card-body small,
    .sf-card-colours,
    .sf-price {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sf-card button {
        display: block;
        width: 100% !important;
        min-height: 46px;
        margin-top: 12px;
    }

    /* Product details modal */
    .sf-modal {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }

    .sf-product-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 auto !important;
        padding: 42px 14px 18px !important;
        border-radius: 14px;
    }

    .sf-product-dialog .sf-detail-grid {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sf-product-dialog .sf-detail-grid > div,
    .sf-product-dialog .sf-detail-info,
    .sf-product-dialog .sf-option-block,
    .sf-product-dialog .sf-option-list {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sf-product-dialog .sf-main-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        background: #f4f3f0;
    }

    .sf-product-dialog .sf-main-img img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 56dvh !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 auto !important;
    }

    .sf-product-dialog .sf-thumbs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .sf-product-dialog .sf-enquire {
        width: 100% !important;
        min-height: 48px;
    }

    /* Footer must stay in normal document flow and remain reachable. */
    footer {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        padding: 24px 16px calc(24px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }
}

@media (max-width: 440px) {
    .sf-card-img {
        aspect-ratio: 1 / 1;
    }

    .sf-product-dialog .sf-main-img img {
        max-height: 50dvh !important;
    }

    .sf-section-head {
        align-items: flex-start;
        gap: 8px;
    }

    .sf-section-head h2 {
        font-size: 26px;
    }
}

/* =========================================================
   Fashion Storefront V2A - Professional dynamic header
   Desktop mega navigation + responsive mobile drawer
   ========================================================= */
.sf-announcement{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px 18px;
    background:var(--primary);
    color:#fff;
    text-align:center;
    font-size:11px;
    font-weight:600;
    letter-spacing:.35px;
}
.sf-announcement span{font-weight:800}

.sf-header{
    height:auto;
    padding:0;
    display:block;
    background:#fff;
    position:sticky;
    top:0;
    z-index:200;
    border-bottom:1px solid var(--line);
    box-shadow:0 3px 16px rgba(23,32,51,.04);
}
.sf-header-main{
    min-height:82px;
    max-width:1440px;
    margin:0 auto;
    padding:12px clamp(18px,4vw,58px);
    display:grid;
    grid-template-columns:minmax(220px,auto) minmax(280px,620px) auto;
    align-items:center;
    gap:28px;
}
.sf-brand{
    min-width:0;
    gap:12px;
}
.sf-logo{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:8px;
    border:1px solid #eceef2;
    background:#fff;
    color:var(--primary);
}
.sf-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    padding:2px;
}
.sf-brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.sf-brand-copy strong{
    display:block;
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(17px,1.55vw,23px);
    line-height:1.1;
    font-weight:800;
    letter-spacing:.2px;
}
.sf-brand-copy small{
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}
.sf-header-search{
    width:100%;
    display:flex;
    align-items:stretch;
    border:1px solid #dfe3e9;
    border-radius:999px;
    overflow:hidden;
    background:#fafafa;
    transition:border-color .2s,box-shadow .2s;
}
.sf-header-search:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(23,35,59,.08);
    background:#fff;
}
.sf-header-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    padding:12px 16px;
    color:var(--ink);
}
.sf-header-search button{
    border:0;
    padding:0 19px;
    background:transparent;
    color:var(--primary);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.sf-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    white-space:nowrap;
}
.sf-account-button,
.sf-header-actions .sf-cart-button{
    min-height:40px;
    border:0;
    border-radius:999px;
    padding:9px 13px;
    background:transparent;
    color:var(--ink);
    font-weight:700;
    cursor:pointer;
}
.sf-account-button:hover,
.sf-header-actions .sf-cart-button:hover{background:#f5f6f8}
.sf-header-actions .sf-cart-button{
    display:inline-flex;
    align-items:center;
}
.sf-header-actions .sf-cart-button span{
    margin-left:6px;
    background:var(--primary);
}

.sf-desktop-nav-wrap{
    border-top:1px solid #f0f1f4;
    background:#fff;
}
.sf-desktop-nav{
    max-width:1440px;
    min-height:47px;
    margin:0 auto;
    padding:0 clamp(18px,4vw,58px);
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:1px;
}
.sf-desktop-nav button{
    font:inherit;
}
.sf-nav-link,
.sf-main-category-button{
    position:relative;
    border:0;
    background:transparent;
    color:#242b36;
    padding:13px 16px 12px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}
.sf-nav-link:after,
.sf-main-category-button:after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:7px;
    height:2px;
    background:var(--primary);
    transform:scaleX(0);
    transition:transform .18s ease;
}
.sf-nav-link:hover:after,
.sf-nav-link.active:after,
.sf-main-category:hover>.sf-main-category-button:after,
.sf-main-category-button.active:after{transform:scaleX(1)}
.sf-main-category-nav{
    display:flex;
    align-items:stretch;
}
.sf-main-category{
    position:relative;
    display:flex;
    align-items:stretch;
}
.sf-main-category-button{padding-right:28px}
.sf-main-category-button:before{
    content:"⌄";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-53%);
    font-size:12px;
    color:#7b8492;
}
.sf-mega-menu{
    position:absolute;
    top:calc(100% - 1px);
    left:50%;
    width:min(620px,80vw);
    min-width:360px;
    transform:translate(-50%,10px);
    padding:22px;
    display:grid;
    grid-template-columns:160px 1fr;
    gap:24px;
    background:#fff;
    border:1px solid #e5e7ec;
    box-shadow:0 22px 55px rgba(21,29,45,.15);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.sf-main-category:hover .sf-mega-menu,
.sf-main-category:focus-within .sf-mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}
.sf-mega-heading{
    padding-right:18px;
    border-right:1px solid #eceef2;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.sf-mega-heading small{
    color:var(--secondary);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
}
.sf-mega-heading strong{
    font-size:20px;
    line-height:1.15;
}
.sf-mega-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(120px,1fr));
    align-content:start;
    gap:2px 12px;
}
.sf-mega-link{
    border:0;
    background:transparent;
    color:#333b48;
    padding:9px 8px;
    text-align:left;
    font-size:12px;
    cursor:pointer;
}
.sf-mega-link:hover,
.sf-mega-link.active{
    color:var(--primary);
    background:#f6f7f9;
}
.sf-mobile-menu-btn{display:none}

.sf-mobile-nav-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(9,15,26,.48);
}
.sf-mobile-nav-panel{
    width:min(390px,88vw);
    height:100%;
    max-height:100dvh;
    overflow-y:auto;
    background:#fff;
    box-shadow:20px 0 55px rgba(0,0,0,.18);
}
.sf-mobile-nav-head{
    min-height:76px;
    padding:17px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid var(--line);
}
.sf-mobile-nav-head>div{display:flex;flex-direction:column;gap:3px}
.sf-mobile-nav-head small{font-size:9px;color:var(--secondary);letter-spacing:1.5px;font-weight:900}
.sf-mobile-nav-head strong{font-size:18px}
.sf-mobile-nav-head>button{
    width:40px;
    height:40px;
    border:0;
    background:#f5f6f8;
    border-radius:50%;
    font-size:25px;
    cursor:pointer;
}
.sf-mobile-nav-links{padding:8px 0 18px}
.sf-mobile-nav-links>button,
.sf-mobile-category-row>button:first-child,
.sf-mobile-subcategories>button{
    width:100%;
    min-height:48px;
    border:0;
    background:#fff;
    color:var(--ink);
    padding:12px 20px;
    text-align:left;
    font-weight:750;
    cursor:pointer;
}
.sf-mobile-nav-links>button:hover,
.sf-mobile-category-row>button:first-child:hover,
.sf-mobile-subcategories>button:hover,
.sf-mobile-nav-links button.active{background:#f6f7f9;color:var(--primary)}
.sf-mobile-category{border-top:1px solid #f0f1f3}
.sf-mobile-category-row{display:grid;grid-template-columns:1fr 48px;align-items:stretch}
.sf-mobile-category-toggle{
    border:0;
    background:#fff;
    color:var(--ink);
    font-size:21px;
    cursor:pointer;
}
.sf-mobile-subcategories{
    padding:2px 0 8px 16px;
    background:#fafafa;
}
.sf-mobile-subcategories>button{
    min-height:42px;
    background:#fafafa;
    padding-left:24px;
    font-size:12px;
    font-weight:650;
}
.sf-mobile-nav-footer{
    border-top:1px solid var(--line);
    padding:16px 20px 24px;
    color:var(--muted);
    font-size:10px;
}
body.sf-mobile-nav-open{overflow:hidden}

/* V2A keeps the existing hero/products functionality intact. */
.sf-hero{margin-top:0}
.sf-wrap{scroll-margin-top:150px}

@media (max-width:1100px){
    .sf-header-main{
        grid-template-columns:minmax(190px,auto) minmax(230px,1fr) auto;
        gap:16px;
        padding-left:22px;
        padding-right:22px;
    }
    .sf-desktop-nav{padding-left:18px;padding-right:18px}
    .sf-nav-link,.sf-main-category-button{padding-left:11px;padding-right:21px;font-size:12px}
    .sf-main-category-button:before{right:8px}
}

@media (max-width:900px){
    .sf-announcement{
        min-height:28px;
        padding:5px 12px;
        font-size:9.5px;
    }
    .sf-header-main{
        min-height:auto;
        padding:9px 12px 10px;
        display:grid;
        grid-template-columns:42px minmax(0,1fr) auto;
        grid-template-areas:
            "menu brand actions"
            "search search search";
        gap:9px 8px;
    }
    .sf-mobile-menu-btn{
        grid-area:menu;
        width:40px;
        height:40px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border:0;
        border-radius:50%;
        background:#f5f6f8;
        cursor:pointer;
    }
    .sf-mobile-menu-btn span{
        display:block;
        width:17px;
        height:1.5px;
        background:var(--ink);
    }
    .sf-brand{grid-area:brand;justify-self:start;min-width:0}
    .sf-logo{width:42px;height:42px;flex-basis:42px;border-radius:7px}
    .sf-brand-copy strong{max-width:38vw;font-size:16px}
    .sf-brand-copy small{max-width:35vw;font-size:9px}
    .sf-header-search{grid-area:search}
    .sf-header-search input{padding:10px 14px;font-size:13px}
    .sf-header-search button{padding:0 15px;font-size:11px}
    .sf-header-actions{grid-area:actions;gap:2px}
    .sf-account-button,
    .sf-header-actions .sf-cart-button{
        min-height:38px;
        padding:7px 9px;
        font-size:11px;
    }
    .sf-header-actions .sf-cart-button span{
        min-width:20px;
        height:20px;
        padding:0 5px;
        font-size:10px;
    }
    .sf-desktop-nav-wrap{display:none!important}
    .sf-header nav button:not(:last-child){display:initial}
    .sf-wrap{scroll-margin-top:118px}
}

@media (max-width:520px){
    .sf-header-main{grid-template-columns:40px minmax(0,1fr) auto;padding-left:9px;padding-right:9px}
    .sf-brand{gap:7px}
    .sf-logo{width:38px;height:38px;flex-basis:38px}
    .sf-brand-copy strong{max-width:32vw;font-size:14px}
    .sf-brand-copy small{display:none}
    .sf-account-button{font-size:0;padding:7px 6px}
    .sf-account-button:after{content:"Account";font-size:10px}
    .sf-header-actions .sf-cart-button{font-size:10px;padding-left:6px;padding-right:6px}
    .sf-mobile-nav-panel{width:90vw}
}

/* =========================================================
   Fashion Storefront V2A.1 - Header/search/modal corrections
   ========================================================= */
/* The sticky storefront header must never sit above dialogs. */
.sf-modal{
    z-index:12000 !important;
}

/* A clicked mega-menu item can retain browser focus. The menu is driven by
   hover on desktop; removing focus-within prevents the previous category
   panel from remaining open underneath the next hovered category. */
.sf-main-category:focus-within .sf-mega-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,10px);
}
.sf-main-category:hover .sf-mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

/* Keep account/sign-in content fully inside the viewport on desktop too. */
.sf-account-dialog{
    max-height:calc(100dvh - 36px);
    overflow-y:auto;
    overscroll-behavior:contain;
}


/* =========================================================
   Fashion Storefront V2A.2 - Navigation consistency fixes
   Prevent the legacy header "last button" rule from styling
   Featured and the final sub-category as dark filled buttons.
   ========================================================= */
.sf-header .sf-desktop-nav .sf-nav-link,
.sf-header .sf-desktop-nav .sf-main-category-button,
.sf-header .sf-desktop-nav .sf-mega-link {
    background: transparent;
    color: #242b36;
    border-radius: 0;
}

/* Main navigation: same visual weight for Home / New Arrivals /
   dynamic main categories / Featured. Selection is underline only. */
.sf-header .sf-desktop-nav > .sf-nav-link,
.sf-header .sf-desktop-nav > .sf-main-category-nav .sf-main-category-button {
    font-size: 13px;
    font-weight: 600;
}

/* Mega menu parent category remains the stronger heading. */
.sf-header .sf-mega-heading small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}
.sf-header .sf-mega-heading strong {
    font-size: 20px;
    font-weight: 800;
}

/* Sub-categories intentionally use normal font weight. */
.sf-header .sf-desktop-nav .sf-mega-link,
.sf-header .sf-desktop-nav .sf-mega-link:last-child {
    background: transparent;
    color: #333b48;
    font-size: 13px;
    font-weight: 400;
    border-radius: 6px;
    padding: 9px 8px;
}
.sf-header .sf-desktop-nav .sf-mega-link:hover,
.sf-header .sf-desktop-nav .sf-mega-link.active {
    background: #f6f7f9;
    color: var(--primary);
    font-weight: 500;
}

/* Featured is not a special CTA; it behaves like every other nav item. */
.sf-header .sf-desktop-nav #featuredBtn,
.sf-header .sf-desktop-nav #featuredBtn:last-child {
    background: transparent;
    color: #242b36;
    border-radius: 0;
    padding: 13px 16px 12px;
    font-weight: 600;
}


/* =========================================================
   Fashion Storefront V2A.4 - Main category accent palette
   Dynamic categories receive a restrained fashion accent.
   Text remains neutral; colour is used for underline/hover only.
   ========================================================= */
.sf-main-category[data-accent="1"] { --category-accent:#c95f82; }
.sf-main-category[data-accent="2"] { --category-accent:#3f73b8; }
.sf-main-category[data-accent="3"] { --category-accent:#4b956d; }
.sf-main-category[data-accent="4"] { --category-accent:#8a62ad; }
.sf-main-category[data-accent="5"] { --category-accent:#d47a3f; }
.sf-main-category[data-accent="6"] { --category-accent:#2b8f91; }

.sf-header .sf-main-category .sf-main-category-button:after {
    background:var(--category-accent, var(--primary));
    height:3px;
    border-radius:999px;
}
.sf-header .sf-main-category:hover > .sf-main-category-button,
.sf-header .sf-main-category .sf-main-category-button.active {
    color:var(--category-accent, #242b36);
}
.sf-header .sf-main-category:hover > .sf-main-category-button:before,
.sf-header .sf-main-category .sf-main-category-button.active:before {
    color:var(--category-accent, #7b8492);
}

/* Fixed navigation items stay elegant and consistent. */
.sf-header .sf-desktop-nav > .sf-nav-link:after {
    height:3px;
    border-radius:999px;
}

/* Mobile: same category identity, with a slim accent rail. */
.sf-mobile-category[data-accent="1"] { --category-accent:#c95f82; }
.sf-mobile-category[data-accent="2"] { --category-accent:#3f73b8; }
.sf-mobile-category[data-accent="3"] { --category-accent:#4b956d; }
.sf-mobile-category[data-accent="4"] { --category-accent:#8a62ad; }
.sf-mobile-category[data-accent="5"] { --category-accent:#d47a3f; }
.sf-mobile-category[data-accent="6"] { --category-accent:#2b8f91; }
.sf-mobile-category {
    border-left:3px solid var(--category-accent, transparent);
}
.sf-mobile-category-row > button:first-child:hover,
.sf-mobile-category-row > button:first-child.active {
    color:var(--category-accent, inherit);
}


/* V2C.1 Public Store Hero */
.sf-hero{position:relative;overflow:hidden;isolation:isolate}
.sf-hero-content{position:relative;z-index:3;max-width:650px}
.sf-hero-media{position:absolute;inset:0;z-index:0;max-width:none!important}
.sf-hero-media img,.sf-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-hero-slide{opacity:0;transition:opacity .55s ease}
.sf-hero-slide.active{opacity:1}
.sf-hero-overlay{position:absolute;inset:0;z-index:1;max-width:none!important;background:linear-gradient(90deg,rgba(9,18,34,.82) 0%,rgba(9,18,34,.58) 42%,rgba(9,18,34,.14) 100%);pointer-events:none}
.sf-hero-text .sf-hero-media,.sf-hero-text .sf-hero-overlay{display:none}
.sf-hero-images,.sf-hero-video{background:var(--primary);color:#fff}
.sf-hero-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(7,15,28,.38);color:#fff;font-size:31px;line-height:1;cursor:pointer;backdrop-filter:blur(5px)}
.sf-hero-prev{left:18px}.sf-hero-next{right:18px}
.sf-hero-dots{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;max-width:none!important}
.sf-hero-dot{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.5);cursor:pointer}
.sf-hero-dot.active{width:25px;border-radius:99px;background:#fff}
@media(max-width:700px){.sf-hero{padding:54px 24px;min-height:360px}.sf-hero-content{max-width:88%}.sf-hero-overlay{background:linear-gradient(90deg,rgba(9,18,34,.78),rgba(9,18,34,.38))}.sf-hero-arrow{width:38px;height:38px}.sf-hero-prev{left:9px}.sf-hero-next{right:9px}.sf-hero-dots{bottom:12px}}


/* V2C.1 Hero text polish: wider balanced heading and clean optional fields */
.sf-hero-content{max-width:min(1000px,82vw)}
.sf-hero h1{max-width:1000px;font-size:clamp(42px,4.4vw,64px);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.sf-hero #heroLabel.hidden,.sf-hero #heroText.hidden,.sf-hero #browseBtn.hidden{display:none!important}
@media(max-width:900px){
  .sf-hero-content{max-width:92vw}
  .sf-hero h1{font-size:clamp(38px,7vw,54px);line-height:1.04}
}
@media(max-width:600px){
  .sf-hero-content{max-width:100%}
  .sf-hero h1{font-size:clamp(34px,10.5vw,46px);line-height:1.06;letter-spacing:-.02em}
}


/* V2C.1 Hero long-heading readability */
.sf-hero-content{max-width:min(1180px,90vw)}
.sf-hero h1{max-width:1180px;text-wrap:pretty;overflow-wrap:normal;word-break:normal}
.sf-hero h1.sf-hero-title-long{font-size:clamp(28px,3vw,42px);line-height:1.22;letter-spacing:-.015em;font-weight:750;max-width:1180px}
.sf-hero h1.sf-hero-title-very-long{font-size:clamp(24px,2.35vw,34px);line-height:1.3;letter-spacing:-.01em;font-weight:700;max-width:1180px}
@media(max-width:700px){
  .sf-hero-content{max-width:100%}
  .sf-hero h1.sf-hero-title-long{font-size:clamp(27px,7vw,36px);line-height:1.2}
  .sf-hero h1.sf-hero-title-very-long{font-size:clamp(22px,6vw,30px);line-height:1.28}
}

/* V2C.1 Hero main heading: paragraph-style continuous flow */
.sf-hero .sf-hero-content{
    width:100%;
    max-width:none;
}
.sf-hero .sf-hero-content h1,
.sf-hero .sf-hero-content h1.sf-hero-title-long,
.sf-hero .sf-hero-content h1.sf-hero-title-very-long{
    display:block;
    width:100%;
    max-width:none;
    margin:14px 0 12px;
    font-size:clamp(22px,2vw,30px);
    line-height:1.45;
    letter-spacing:0;
    font-weight:700;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    text-wrap:wrap;
}
.sf-hero .sf-hero-content p{
    max-width:none;
}
@media(max-width:700px){
    .sf-hero .sf-hero-content{width:100%;max-width:none}
    .sf-hero .sf-hero-content h1,
    .sf-hero .sf-hero-content h1.sf-hero-title-long,
    .sf-hero .sf-hero-content h1.sf-hero-title-very-long{
        font-size:clamp(20px,5.6vw,26px);
        line-height:1.4;
    }
}

/* V2C.1 Image/Video Hero media-only presentation */
.sf-hero-images,
.sf-hero-video{
    padding:0;
    min-height:390px;
    background:#111827;
}

/* Image/Video mode must show only the selected media, not Text/Quote content. */
.sf-hero-images .sf-hero-content,
.sf-hero-video .sf-hero-content,
.sf-hero-images .sf-hero-overlay,
.sf-hero-video .sf-hero-overlay{
    display:none!important;
}

/* Show the complete uploaded image without cropping. */
.sf-hero-images .sf-hero-media img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:#111827;
}

/* Video keeps its full frame visible as well. */
.sf-hero-video .sf-hero-media video{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:#111827;
}

@media(max-width:700px){
    .sf-hero-images,
    .sf-hero-video{
        min-height:300px;
        padding:0;
    }
}

/* =========================================================
   V2C.2 - Responsive Hero media ratio
   Hero image/video uploads are validated around 3.2:1.
   Keep the storefront media frame at the same ratio so a
   1920x600 banner fills the Hero without artificial side bars.
   Text Hero behaviour is intentionally unchanged.
   ========================================================= */
.sf-hero-images,
.sf-hero-video{
    width:100%;
    aspect-ratio:16 / 5;
    min-height:0;
    height:auto;
    padding:0;
    background:#111827;
}

.sf-hero-images .sf-hero-media,
.sf-hero-video .sf-hero-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sf-hero-images .sf-hero-media img,
.sf-hero-video .sf-hero-media video{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:#111827;
}

/* Keep slider controls proportional on tablets and phones. */
@media(max-width:700px){
    .sf-hero-images,
    .sf-hero-video{
        aspect-ratio:16 / 5;
        min-height:0;
        height:auto;
        padding:0;
    }
    .sf-hero-images .sf-hero-arrow{
        width:34px;
        height:34px;
        font-size:25px;
    }
    .sf-hero-images .sf-hero-prev{left:8px}
    .sf-hero-images .sf-hero-next{right:8px}
    .sf-hero-images .sf-hero-dots{bottom:8px;gap:6px}
    .sf-hero-images .sf-hero-dot{width:7px;height:7px}
    .sf-hero-images .sf-hero-dot.active{width:20px}
}

@media(max-width:440px){
    .sf-hero-images .sf-hero-arrow{
        width:30px;
        height:30px;
        font-size:22px;
    }
    .sf-hero-images .sf-hero-prev{left:6px}
    .sf-hero-images .sf-hero-next{right:6px}
    .sf-hero-images .sf-hero-dots{bottom:6px}
}


/* ============================================================
   V2D.1 - STOREFRONT CATEGORY SHOWCASE
   ============================================================ */
.sf-category-showcase{max-width:1320px;margin:0 auto;padding:34px 22px 10px}
.sf-category-showcase-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.sf-category-showcase-head small{font-size:11px;letter-spacing:1.7px;color:var(--secondary);font-weight:800}
.sf-category-showcase-head h2{margin:5px 0 0;font-size:clamp(26px,3vw,36px)}
.sf-category-showcase-controls{display:flex;gap:8px}
.sf-category-showcase-controls button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--primary);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(23,32,51,.08)}
.sf-category-card-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.sf-category-card-viewport::-webkit-scrollbar{display:none}
.sf-category-card-track{display:flex;gap:16px}
.sf-category-showcase-card{flex:0 0 calc((100% - 64px)/5);min-width:0;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;color:var(--ink);text-align:left;cursor:pointer;scroll-snap-align:start;box-shadow:0 8px 24px rgba(23,32,51,.06);transition:transform .2s ease,box-shadow .2s ease}
.sf-category-showcase-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,32,51,.12)}
.sf-category-showcase-image{display:block;aspect-ratio:1/1;overflow:hidden;background:#f5f3ef}
.sf-category-showcase-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sf-category-showcase-card:hover img{transform:scale(1.025)}
.sf-category-showcase-copy{display:block;padding:13px 14px 15px}
.sf-category-showcase-copy small{display:block;color:var(--secondary);font-size:9px;letter-spacing:1.4px;font-weight:900}
.sf-category-showcase-copy strong{display:block;margin-top:3px;font-size:18px;line-height:1.2}
.sf-category-showcase-copy i{display:block;margin-top:8px;color:var(--muted);font-size:11px;font-style:normal;font-weight:700}
.sf-category-card-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.sf-category-card-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#cfd4dc;cursor:pointer;transition:.2s}
.sf-category-card-dot.active{width:22px;background:var(--primary)}
@media(max-width:1179px){.sf-category-showcase-card{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:899px){.sf-category-showcase-card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:599px){
 .sf-category-showcase{padding:24px 14px 4px}
 .sf-category-showcase-head{margin-bottom:12px}
 .sf-category-showcase-head h2{font-size:25px}
 .sf-category-showcase-controls{display:none!important}
 .sf-category-card-track{gap:12px}
 .sf-category-showcase-card{flex-basis:86%;border-radius:16px}
 .sf-category-showcase-copy{padding:11px 12px 13px}
 .sf-category-showcase-copy strong{font-size:17px}
}


/* =========================================================
   V2D.1 - FINAL Category Card Count Distribution
   IMPORTANT: actual track class is .sf-category-card-track.
   Desktop: 2-5 cards share the whole row equally.
   One card stays a sensible centered card instead of becoming
   a full-width banner. Mobile keeps the existing swipe layout.
   ========================================================= */
@media (min-width:600px){
    .sf-category-card-track{
        display:flex !important;
        width:100% !important;
        gap:20px !important;
        justify-content:center !important;
        align-items:stretch !important;
    }

    .sf-category-card-track > .sf-category-showcase-card{
        flex:1 1 0 !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .sf-category-card-track > .sf-category-showcase-card:only-child{
        flex:0 1 360px !important;
        width:min(360px,100%) !important;
        max-width:360px !important;
    }

    .sf-category-showcase-image{
        width:100% !important;
        aspect-ratio:1 / 1 !important;
    }

    .sf-category-showcase-image img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }
}

@media (max-width:599px){
    .sf-category-card-track{
        display:flex !important;
        justify-content:flex-start !important;
        gap:12px !important;
        width:auto !important;
    }

    .sf-category-card-track > .sf-category-showcase-card,
    .sf-category-card-track > .sf-category-showcase-card:only-child{
        flex:0 0 86% !important;
        width:auto !important;
        max-width:none !important;
    }
}


/* =========================================================
   V2D.1 - Mobile Category Card Full-Card View
   Show exactly one complete card in the viewport.
   Other cards remain available by swipe/arrows.
   ========================================================= */
@media (max-width:599px){
    .sf-category-card-viewport{
        width:100% !important;
        overflow-x:auto !important;
        scroll-snap-type:x mandatory !important;
        scroll-padding:0 !important;
    }

    .sf-category-card-track{
        gap:0 !important;
        width:auto !important;
    }

    .sf-category-card-track > .sf-category-showcase-card,
    .sf-category-card-track > .sf-category-showcase-card:only-child{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
        scroll-snap-align:start !important;
        scroll-snap-stop:always;
    }
}


/* ============================================================
   V2E STEP 2 - PRODUCT COLLECTION FILTERS
   ============================================================ */
.sf-filter-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px}
.sf-filter-open{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.sf-filter-open:hover{border-color:var(--primary)}
.sf-filter-open b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:10px}
.sf-filter-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.sf-filter-chips button{border:0;background:#f1f3f6;color:var(--ink);border-radius:999px;padding:7px 10px;font-size:11px;cursor:pointer}
.sf-filter-chips button span{margin-left:4px;font-weight:900}
.sf-sort-inline{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:800;margin-left:auto}
.sf-sort-inline select{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 32px 9px 10px;outline:none}
.sf-filter-overlay{position:fixed;inset:0;z-index:13000;background:rgba(8,17,29,.48);display:flex;justify-content:flex-start}
.sf-filter-panel{width:min(420px,94vw);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:20px 0 50px rgba(0,0,0,.16)}
.sf-filter-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:20px;border-bottom:1px solid var(--line)}
.sf-filter-head small{font-size:9px;letter-spacing:1.4px;color:var(--secondary);font-weight:900}.sf-filter-head h3{margin:4px 0 0;font-size:24px}
.sf-filter-head>button{border:0;background:none;font-size:28px;line-height:1;cursor:pointer}
.sf-filter-body{flex:1;overflow:auto;padding:18px 20px}
.sf-filter-field{display:block;margin-bottom:16px;font-size:11px;font-weight:800;color:var(--muted)}
.sf-filter-field select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px;color:var(--ink)}
.sf-filter-field select:disabled{background:#f6f7f8;color:#98a0ad}
.sf-filter-group{padding:16px 0;border-top:1px solid #eef0f3}.sf-filter-group>span{display:block;margin-bottom:10px;font-size:12px;font-weight:900}
.sf-price-filter{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sf-price-filter label{font-size:10px;color:var(--muted);font-weight:700}.sf-price-filter input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:10px}
.sf-filter-options{display:flex;gap:7px;flex-wrap:wrap}.sf-filter-choice{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 11px;font-size:11px;font-weight:700;cursor:pointer}.sf-filter-choice.selected{background:var(--primary);border-color:var(--primary);color:#fff}
.sf-filter-none{color:var(--muted)}
.sf-stock-filter{display:flex;align-items:center;gap:9px;padding:16px 0;border-top:1px solid #eef0f3;font-size:12px;font-weight:800;cursor:pointer}.sf-stock-filter input{width:18px;height:18px;accent-color:var(--primary)}
.sf-filter-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;padding:16px 20px;border-top:1px solid var(--line);background:#fff}.sf-filter-actions button{border-radius:10px;padding:12px;font-weight:900;cursor:pointer}.sf-filter-clear{border:1px solid var(--line);background:#fff;color:var(--ink)}.sf-filter-apply{border:1px solid var(--primary);background:var(--primary);color:#fff}
body.sf-filter-opened{overflow:hidden}
@media(max-width:600px){
 .sf-filter-toolbar{padding:9px;gap:8px;position:relative}
 .sf-filter-open{flex:1;justify-content:center}
 .sf-sort-inline{flex:1;margin-left:0;font-size:0}.sf-sort-inline select{width:100%;font-size:11px}
 .sf-filter-chips{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.sf-filter-chips button{white-space:nowrap}
 .sf-filter-overlay{align-items:flex-end}
 .sf-filter-panel{width:100%;height:min(86vh,760px);border-radius:20px 20px 0 0}
 .sf-filter-head{padding:16px 18px}.sf-filter-body{padding:14px 18px}.sf-filter-actions{padding:12px 18px}
}


/* V2E Step 2.1 - Desktop non-blocking filter drawer */
@media(min-width:601px){
 .sf-filter-overlay{
   width:420px;
   right:auto;
   background:transparent;
   pointer-events:none;
 }
 .sf-filter-panel{
   width:420px;
   max-width:calc(100vw - 24px);
   pointer-events:auto;
   border-right:1px solid var(--line);
 }
 body.sf-filter-opened{overflow:auto}
}


/* ============================================================
   V2E STEP 2.2 - DESKTOP PERSISTENT RIGHT FILTER
   ============================================================ */
.sf-filter-toolbar{
 background:linear-gradient(110deg,#fff 0%,#fff 42%,#f4eee5 100%);
 border-color:#e6ddd0;
 box-shadow:0 5px 18px rgba(23,35,59,.035);
}
@media(min-width:901px){
 .sf-filter-overlay{
   left:auto!important;
   right:0!important;
   width:380px!important;
   justify-content:flex-end!important;
   background:transparent!important;
   pointer-events:none!important;
 }
 .sf-filter-panel{
   width:380px!important;
   max-width:380px!important;
   border-right:0!important;
   border-left:1px solid var(--line)!important;
   box-shadow:-12px 0 32px rgba(23,35,59,.10)!important;
   pointer-events:auto!important;
 }
 body.sf-filter-visible .sf-wrap{
   margin-left:max(0px,calc((100vw - 1220px)/2))!important;
   margin-right:380px!important;
   max-width:none!important;
   transition:margin-right .22s ease;
 }
 body.sf-filter-visible .sf-grid{
   grid-template-columns:repeat(3,minmax(0,1fr));
 }
 body.sf-filter-visible .sf-filter-open{
   display:none;
 }
 body.sf-filter-visible .sf-filter-toolbar{
   justify-content:flex-end;
 }
 body.sf-filter-visible .sf-filter-chips{
   flex:1;
 }
}
@media(min-width:901px) and (max-width:1180px){
 body.sf-filter-visible .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   V2E STEP 2.3 - FILTER BUILT INTO PRODUCT COLLECTION
   Desktop: appears only with Collection and never covers Hero/
   Category Cards. Right sidebar is part of the collection layout.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-wrap{
   margin-left:auto!important;
   margin-right:auto!important;
   max-width:1220px!important;
 }
 .sf-collection-layout{display:block}
 body.sf-filter-visible .sf-collection-layout{
   display:grid;
   grid-template-columns:minmax(0,1fr) 330px;
   gap:22px;
   align-items:start;
 }
 .sf-collection-products{min-width:0}
 body.sf-filter-visible .sf-filter-overlay{
   display:block!important;
   position:static!important;
   inset:auto!important;
   width:auto!important;
   height:auto!important;
   background:transparent!important;
   pointer-events:auto!important;
   grid-column:2;
   grid-row:1;
 }
 body.sf-filter-visible .sf-filter-panel{
   position:sticky!important;
   top:92px!important;
   width:330px!important;
   max-width:100%!important;
   height:auto!important;
   max-height:calc(100vh - 110px)!important;
   border:1px solid #e6ddd0!important;
   border-radius:16px!important;
   box-shadow:0 8px 26px rgba(23,35,59,.07)!important;
   overflow:hidden;
 }
 body.sf-filter-visible .sf-filter-head{padding:16px 17px}
 body.sf-filter-visible .sf-filter-head h3{font-size:20px}
 body.sf-filter-visible .sf-filter-body{max-height:calc(100vh - 245px);padding:14px 17px}
 body.sf-filter-visible .sf-filter-actions{padding:12px 17px}
 body.sf-filter-visible .sf-filter-open{display:none}
 body.sf-filter-visible .sf-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.sf-filter-visible .sf-filter-toolbar{
   background:linear-gradient(110deg,#fff 0%,#fff 38%,#f3e8d9 100%)!important;
   border-color:#e3d4c1!important;
 }
}
@media(min-width:901px) and (max-width:1180px){
 body.sf-filter-visible .sf-collection-layout{grid-template-columns:minmax(0,1fr) 300px}
 body.sf-filter-visible .sf-filter-panel{width:300px!important}
 body.sf-filter-visible .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ============================================================
   V2E STEP 2.4 - FILTER UX POLISH
   First Collection view opens automatically once. After close,
   customer controls reopening with Filters button.
   ============================================================ */
.sf-filter-toolbar{
 background:linear-gradient(110deg,#fffaf3 0%,#ead4b5 48%,#caa46b 100%)!important;
 border-color:#c6a06b!important;
 box-shadow:0 6px 20px rgba(115,82,40,.12)!important;
}
.sf-filter-open{
 background:#fff!important;
 border-color:#b88b4e!important;
 color:var(--primary)!important;
 box-shadow:0 2px 8px rgba(115,82,40,.08);
}
.sf-filter-open:hover{
 background:#fff9f0!important;
 border-color:#9f743d!important;
}
.sf-sort-inline{color:#59452e!important}
.sf-sort-inline select{border-color:#c6a879!important;background:#fffdf9!important}
@media(min-width:901px){
 body.sf-filter-visible .sf-filter-toolbar{
   background:linear-gradient(110deg,#fffaf3 0%,#ead4b5 48%,#caa46b 100%)!important;
   border-color:#c6a06b!important;
 }
}


/* V2E STEP 2.5 - Correct collection sidebar placement */
@media(min-width:901px){
 .sf-collection-layout{
   display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   gap:22px!important;
   align-items:start!important;
 }
 .sf-collection-layout>.sf-collection-products{
   grid-column:1!important;
   grid-row:1!important;
   min-width:0!important;
 }
 .sf-collection-layout>.sf-filter-overlay{
   display:none!important;
 }
 body.sf-filter-visible .sf-collection-layout{
   grid-template-columns:minmax(0,1fr) 330px!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay{
   display:block!important;
   position:static!important;
   grid-column:2!important;
   grid-row:1!important;
   width:330px!important;
   height:auto!important;
   inset:auto!important;
   background:transparent!important;
   pointer-events:auto!important;
   align-self:start!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:sticky!important;
   top:92px!important;
   width:330px!important;
   height:auto!important;
   max-height:calc(100vh - 110px)!important;
 }
}
@media(min-width:901px) and (max-width:1180px){
 body.sf-filter-visible .sf-collection-layout{
   grid-template-columns:minmax(0,1fr) 300px!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay,
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   width:300px!important;
 }
}


/* V2E STEP 2.6 - Always-visible filter toolbar control */
@media(min-width:901px){
 body.sf-filter-visible .sf-filter-open{
   display:inline-flex!important;
   background:var(--primary)!important;
   border-color:var(--primary)!important;
   color:#fff!important;
 }
 body.sf-filter-visible .sf-filter-open b{
   background:#fff!important;
   color:var(--primary)!important;
 }
 body.sf-filter-visible .sf-filter-toolbar{
   justify-content:flex-start!important;
 }
 .sf-filter-toolbar .sf-sort-inline{
   margin-left:auto!important;
 }
}


/* V2E STEP 2.7 - Toolbar Clear All */
.sf-clear-all-toolbar{
 border:0;
 background:transparent;
 color:#6f4b20;
 padding:7px 9px;
 font-size:11px;
 font-weight:900;
 text-decoration:underline;
 text-underline-offset:3px;
 cursor:pointer;
 white-space:nowrap;
}
.sf-clear-all-toolbar:hover{color:var(--primary)}
@media(max-width:600px){
 .sf-clear-all-toolbar{order:3;margin-left:auto}
}


/* ============================================================
   V2E STEP 2.8 - STICKY FILTER FOLLOWS LONG PRODUCT COLLECTION
   The right filter column now stretches to the same height as
   the product grid. The panel remains sticky while the customer
   scrolls through products, then stops naturally at collection end.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout{
   align-items:stretch!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay{
   align-self:stretch!important;
   height:100%!important;
   min-height:100%!important;
   overflow:visible!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:sticky!important;
   top:16px!important;
   align-self:start!important;
   max-height:calc(100vh - 32px)!important;
 }
}


/* ============================================================
   V2E STEP 2.9 - STABLE DESKTOP FILTER
   Keep the filter at a fixed, safe viewport position below the
   storefront header while products scroll independently.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay{
   position:static!important;
   height:auto!important;
   min-height:0!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:fixed!important;
   top:175px!important;
   right:max(20px,calc((100vw - 1220px)/2))!important;
   bottom:auto!important;
   width:330px!important;
   max-height:calc(100vh - 195px)!important;
   z-index:1050!important;
 }
}
@media(min-width:901px) and (max-width:1180px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   right:20px!important;
   width:300px!important;
 }
}


/* ============================================================
   V2E STEP 3.0 - COLLECTION-BOUNDED FIXED FILTER
   Desktop filter is fixed/stable ONLY while Product Collection
   is the active page section. It is hidden over Hero, Category
   Cards and Footer.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   visibility:hidden!important;
   opacity:0!important;
   pointer-events:none!important;
 }
 body.sf-filter-visible.sf-filter-in-collection .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   visibility:visible!important;
   opacity:1!important;
   pointer-events:auto!important;
 }
}


/* ============================================================
   V2E STEP 3.1 - REFERENCE-STYLE IN-FLOW FILTER SIDEBAR
   Desktop: filter is a real left column of Product Collection.
   It cannot overlap Hero, category showcase or footer.
   ============================================================ */
.sf-filter-accordion{
 border:0;
 border-bottom:1px solid #e6e6e6;
 margin:0;
}
.sf-filter-accordion>summary{
 list-style:none;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:18px 2px;
 cursor:pointer;
 text-transform:uppercase;
 letter-spacing:1.2px;
 font-size:11px;
 font-weight:800;
 color:#30343a;
}
.sf-filter-accordion>summary::-webkit-details-marker{display:none}
.sf-filter-accordion>summary::after{content:"⌄";font-size:15px;line-height:1}
.sf-filter-accordion[open]>summary::after{content:"⌃"}
.sf-filter-accordion-content{padding:0 2px 18px}
.sf-filter-accordion .sf-filter-field{margin-bottom:10px}
.sf-filter-accordion .sf-filter-field:last-child{margin-bottom:0}
.sf-filter-accordion .sf-filter-options{gap:7px}
.sf-filter-accordion .sf-filter-choice{
 border-radius:2px;
 padding:7px 9px;
 font-weight:500;
}
.sf-filter-accordion .sf-stock-filter{padding:2px 0}
.sf-filter-accordion .sf-price-filter{gap:8px}

@media(min-width:901px){
 .sf-wrap{overflow:visible!important}
 .sf-collection-layout,
 body.sf-filter-visible .sf-collection-layout{
   display:grid!important;
   grid-template-columns:250px minmax(0,1fr)!important;
   gap:28px!important;
   align-items:stretch!important;
 }
 .sf-collection-layout>.sf-collection-products,
 body.sf-filter-visible .sf-collection-layout>.sf-collection-products{
   grid-column:2!important;
   grid-row:1!important;
   min-width:0!important;
 }
 .sf-collection-layout>.sf-filter-overlay{
   display:none!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay{
   display:block!important;
   position:static!important;
   inset:auto!important;
   grid-column:1!important;
   grid-row:1!important;
   width:250px!important;
   height:auto!important;
   min-height:0!important;
   align-self:stretch!important;
   background:#fff!important;
   pointer-events:auto!important;
   visibility:visible!important;
   opacity:1!important;
   overflow:visible!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:sticky!important;
   top:42px!important;
   right:auto!important;
   bottom:auto!important;
   width:250px!important;
   max-width:250px!important;
   height:auto!important;
   max-height:calc(100vh - 52px)!important;
   display:flex!important;
   flex-direction:column!important;
   background:#fff!important;
   border:0!important;
   border-radius:0!important;
   box-shadow:none!important;
   overflow:hidden!important;
   visibility:visible!important;
   opacity:1!important;
   pointer-events:auto!important;
   z-index:10!important;
 }
 body.sf-filter-visible .sf-filter-head{
   padding:14px 4px 10px!important;
   border-bottom:1px solid #e6e6e6!important;
 }
 body.sf-filter-visible .sf-filter-head small{display:none!important}
 body.sf-filter-visible .sf-filter-head h3{
   margin:0!important;
   font-size:14px!important;
   text-transform:uppercase;
   letter-spacing:1.2px;
 }
 body.sf-filter-visible .sf-filter-head>button{font-size:20px!important}
 body.sf-filter-visible .sf-filter-body{
   flex:1!important;
   max-height:none!important;
   overflow-y:auto!important;
   padding:0 10px 0 4px!important;
 }
 body.sf-filter-visible .sf-filter-actions{
   padding:10px 4px!important;
   border-top:1px solid #e6e6e6!important;
   background:#fff!important;
 }
 body.sf-filter-visible .sf-grid{
   grid-template-columns:repeat(3,minmax(0,1fr))!important;
 }
 body.sf-filter-visible .sf-filter-open{
   display:inline-flex!important;
 }
 .sf-filter-toolbar .sf-sort-inline{margin-left:auto!important}
}
@media(min-width:901px) and (max-width:1120px){
 .sf-collection-layout,
 body.sf-filter-visible .sf-collection-layout{
   grid-template-columns:220px minmax(0,1fr)!important;
   gap:20px!important;
 }
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay,
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   width:220px!important;
   max-width:220px!important;
 }
 body.sf-filter-visible .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
 .sf-filter-accordion>summary{padding:15px 2px}
}


/* ============================================================
   V2E STEP 3.2 - HEADER-SAFE COLLECTION SIDEBAR
   The storefront has two header rows. Keep the sticky filter
   below both rows so it can never cover logo/store/search/nav.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   top:132px!important;
   max-height:calc(100vh - 148px)!important;
 }
}


/* ============================================================
   V2E STEP 3.3 - STABLE COLLECTION CONTROLS + HEADER-SAFE FILTER
   Desktop:
   - store header always owns the top of the viewport
   - collection heading/toolbar stay below the header while browsing
   - filter becomes fixed only during the product-list scroll
   - filter never gets pushed upward by the collection/footer boundary
   ============================================================ */
@media(min-width:901px){
 .sf-section-head{
   position:sticky!important;
   top:129px!important;
   z-index:80!important;
   background:var(--bg)!important;
   padding-top:10px!important;
   padding-bottom:8px!important;
   margin-bottom:0!important;
 }
 .sf-filter-toolbar{
   position:sticky!important;
   top:202px!important;
   z-index:81!important;
   margin-bottom:18px!important;
 }

 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay{
   background:transparent!important;
 }

 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:relative!important;
   top:auto!important;
   left:auto!important;
   max-height:calc(100vh - 270px)!important;
   min-height:0!important;
 }

 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:fixed!important;
   top:var(--sf-filter-safe-top,142px)!important;
   left:var(--sf-filter-fixed-left,40px)!important;
   right:auto!important;
   bottom:auto!important;
   width:250px!important;
   max-width:250px!important;
   max-height:calc(100vh - var(--sf-filter-safe-top,142px) - 16px)!important;
   z-index:90!important;
 }

 body.sf-filter-visible .sf-filter-actions{
   display:grid!important;
   grid-template-columns:1fr 1fr!important;
   gap:7px!important;
   padding:8px 4px!important;
 }
 body.sf-filter-visible .sf-filter-actions button{
   min-height:38px!important;
   padding:8px 7px!important;
   font-size:12px!important;
   line-height:1.1!important;
   border-radius:8px!important;
 }
}
@media(min-width:901px) and (max-width:1120px){
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   width:220px!important;
   max-width:220px!important;
 }
}


/* ============================================================
   V2E STEP 3.4 - HARD HEADER GUARD
   Never allow the desktop filter above the storefront navigation.
   This prevents JS geometry from moving it to the top of the page
   after the original header element scrolls out of viewport.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   top:max(132px,var(--sf-filter-safe-top,132px))!important;
   max-height:calc(100vh - 148px)!important;
 }
}


/* ============================================================
   V2E STEP 3.5 - REMOVE FIXED FILTER COMPLETELY
   IMPORTANT: This deliberately overrides ALL previous fixed-filter
   experiments. Desktop filter remains inside its collection column
   and uses native sticky positioning only.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay,
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay{
   position:static!important;
   inset:auto!important;
   height:auto!important;
   min-height:0!important;
   align-self:stretch!important;
   overflow:visible!important;
 }

 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel,
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:sticky!important;
   top:260px!important;
   left:auto!important;
   right:auto!important;
   bottom:auto!important;
   width:250px!important;
   max-width:250px!important;
   max-height:calc(100vh - 276px)!important;
   margin:0!important;
   z-index:20!important;
 }

 body.sf-filter-visible .sf-filter-body{
   min-height:0!important;
   overflow-y:auto!important;
 }

 body.sf-filter-visible .sf-filter-actions{
   flex:0 0 auto!important;
 }
}

@media(min-width:901px) and (max-width:1120px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel,
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   width:220px!important;
   max-width:220px!important;
 }
}


/* ============================================================
   V2E STEP 3.6 - COLLECTION END BREATHING ROOM
   Give the sticky left filter enough collection-owned space at
   the end of a short product list. This prevents the sticky panel
   from being pushed upward before the footer begins.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout{
   min-height:calc(100vh + 360px)!important;
   padding-bottom:360px!important;
   box-sizing:border-box!important;
 }
 body.sf-filter-visible .sf-collection-products{
   align-self:start!important;
 }
}


/* ============================================================
   V2E STEP 3.7 - FINAL DESKTOP FILTER BEHAVIOUR
   Do NOT allow sticky parent-boundary push-up.
   While browsing products the filter is fixed at one safe Y.
   When footer enters viewport the filter is hidden cleanly.
   ============================================================ */
@media(min-width:901px){
 body.sf-filter-visible .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel,
 body.sf-filter-visible.sf-filter-fixed-active .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:relative!important;
   top:auto!important;
   left:auto!important;
   right:auto!important;
   bottom:auto!important;
 }

 body.sf-filter-visible.sf-filter-final-fixed .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   position:fixed!important;
   top:285px!important;
   left:var(--sf-final-filter-left,82px)!important;
   right:auto!important;
   bottom:auto!important;
   width:250px!important;
   max-width:250px!important;
   max-height:calc(100vh - 300px)!important;
   margin:0!important;
   z-index:85!important;
 }

 body.sf-filter-visible:not(.sf-filter-final-fixed) .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   transform:none!important;
 }

 body.sf-filter-visible.sf-filter-final-fixed .sf-filter-body{
   overflow-y:auto!important;
   min-height:0!important;
 }
}
@media(min-width:901px) and (max-width:1120px){
 body.sf-filter-visible.sf-filter-final-fixed .sf-collection-layout>.sf-filter-overlay>.sf-filter-panel{
   width:220px!important;
   max-width:220px!important;
 }
}


/* ============================================================
   V2E STEP 3.8 - CLOSED FILTER LAYOUT + PRODUCT MODAL SAFETY
   ============================================================ */
@media(min-width:901px){
 body:not(.sf-filter-visible) .sf-collection-layout{
   display:block!important;
   grid-template-columns:none!important;
 }
 body:not(.sf-filter-visible) .sf-collection-layout>.sf-collection-products{
   width:100%!important;
   grid-column:auto!important;
   grid-row:auto!important;
 }
 body:not(.sf-filter-visible) .sf-collection-layout>.sf-filter-overlay{
   display:none!important;
 }
 body:not(.sf-filter-visible) .sf-grid{
   grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }

 /* A product detail modal must never share the screen with the collection filter. */
 body.sf-product-modal-open .sf-filter-overlay,
 body.sf-product-modal-open .sf-filter-panel{
   display:none!important;
   visibility:hidden!important;
   opacity:0!important;
   pointer-events:none!important;
 }
}


/* ============================================================
   V2E STEP 3.9 - PRODUCT MODAL MUST EXCLUDE FILTER
   Use a dedicated authoritative body state and also guarantee
   modal stacking wins even if an older filter class remains.
   ============================================================ */
body.sf-product-modal-active .sf-filter-overlay,
body.sf-product-modal-active .sf-filter-panel,
body.sf-product-modal-active.sf-filter-final-fixed .sf-filter-overlay,
body.sf-product-modal-active.sf-filter-final-fixed .sf-filter-panel{
 display:none!important;
 visibility:hidden!important;
 opacity:0!important;
 pointer-events:none!important;
 z-index:-1!important;
}

/* Defensive stacking: product detail is always above collection UI. */
#productModal{
 z-index:10000!important;
}
#productModal .modal-card,
#productModal .sf-modal-card,
#productModal .product-modal-card{
 position:relative!important;
 z-index:10001!important;
}


/* ============================================================
   V2E STEP 3.10 - CART DRAWER MUST EXCLUDE COLLECTION FILTER
   Cart is a focused overlay. Background page remains locked by
   existing cart behavior; filter is hidden until cart closes.
   ============================================================ */
body.sf-cart-active .sf-filter-overlay,
body.sf-cart-active .sf-filter-panel,
body.sf-cart-active.sf-filter-final-fixed .sf-filter-overlay,
body.sf-cart-active.sf-filter-final-fixed .sf-filter-panel{
 display:none!important;
 visibility:hidden!important;
 opacity:0!important;
 pointer-events:none!important;
 z-index:-1!important;
}


/* ============================================================
   V2E STEP 3.11 - DEFINITIVE CART OVERLAY FILTER EXCLUSION
   ============================================================ */
body.sf-cart-overlay-active .sf-filter-overlay,
body.sf-cart-overlay-active .sf-filter-panel,
body.sf-cart-overlay-active.sf-filter-final-fixed .sf-filter-overlay,
body.sf-cart-overlay-active.sf-filter-final-fixed .sf-filter-panel{
 display:none!important;
 visibility:hidden!important;
 opacity:0!important;
 pointer-events:none!important;
}

/* Cart/drawer overlays must always render above collection controls. */
body.sf-cart-overlay-active .sf-filter-overlay{
 z-index:-1!important;
}

/* V2E STEP 3.12 - PRODUCT COUNT INSIDE FILTER/SORT TOOLBAR */
.sf-toolbar-product-count{
 flex:1 1 auto!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-width:90px;
}
.sf-toolbar-product-count #productCount{
 position:static!important;
 margin:0!important;
 font-size:12px!important;
 font-weight:700!important;
 color:#6d5637!important;
 white-space:nowrap;
}
@media(max-width:700px){
 .sf-toolbar-product-count{justify-content:center!important;min-width:auto}
}

/* =========================================================
   V2F.1C - Compact customer product detail / variant picker
   ========================================================= */
.sf-product-brand{margin-top:7px;font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sf-product-description{margin:12px 0;color:var(--muted);line-height:1.5}
.sf-discount-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#edf8f1;color:#237450;font-size:11px;font-weight:900;white-space:nowrap}
.sf-compact-option-block{margin:14px 0}
.sf-option-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sf-option-label-row label{font-weight:800}
.sf-size-chart-link{border:0;background:transparent;color:var(--primary);font-weight:850;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:3px 0}
.sf-size-buttons{gap:7px}
.sf-size-button{min-width:46px;text-align:center;padding:9px 13px}
.sf-single-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.sf-single-qty button{width:38px;height:38px;border:0;background:#f5f6f8;color:var(--ink);font-size:20px;cursor:pointer}
.sf-single-qty input{width:54px;height:38px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:900;outline:0}
.sf-single-qty input::-webkit-outer-spin-button,.sf-single-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sf-product-dialog .sf-enquire{margin-top:8px}
.sf-product-dialog .sf-specs{margin-top:16px}
.sf-size-chart-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px}
.sf-size-chart-backdrop{position:absolute;inset:0;background:#08111dcc}
.sf-size-chart-dialog{position:relative;width:min(650px,100%);max-height:86vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 24px 80px #0003}
.sf-size-chart-dialog>small{color:var(--secondary);font-weight:900;letter-spacing:.12em}
.sf-size-chart-dialog h3{margin:5px 34px 18px 0;font-size:22px}
.sf-size-chart-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;cursor:pointer}
.sf-size-chart-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
.sf-size-chart-table{width:100%;border-collapse:collapse;min-width:460px}
.sf-size-chart-table th,.sf-size-chart-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:12px;white-space:nowrap}
.sf-size-chart-table th{background:#f6f7f9;font-weight:900}
.sf-size-chart-table tr:last-child td{border-bottom:0}
.sf-size-chart-image{display:block;max-width:100%;max-height:60vh;margin:auto;object-fit:contain}
.sf-size-chart-unit,.sf-size-chart-note{font-size:12px;color:var(--muted);line-height:1.5}
.sf-size-chart-empty{color:var(--muted)}

@media(max-width:900px){
 .sf-product-dialog .sf-detail-info{padding-top:14px}
 .sf-product-dialog .sf-option-block{margin:12px 0}
 .sf-product-dialog .sf-option-list{gap:7px}
 .sf-size-chart-dialog{width:min(620px,100%)}
}
@media(max-width:520px){
 .sf-product-dialog .sf-detail-info h2{margin-bottom:8px}
 .sf-product-dialog .sf-price.big{flex-wrap:wrap}
 .sf-product-dialog .sf-option-button{padding:9px 11px}
 .sf-size-button{min-width:43px}
 .sf-single-qty{width:132px}
 .sf-single-qty input{flex:1;min-width:0}
 .sf-size-chart-modal{padding:10px}
 .sf-size-chart-dialog{padding:20px 14px;border-radius:14px;max-height:92vh}
 .sf-size-chart-table th,.sf-size-chart-table td{padding:9px 10px}
}

/* V2F.1C refinement - lighter compact product options */
.sf-product-dialog .sf-compact-option-block{margin:9px 0}
.sf-product-dialog .sf-compact-option-block>label{display:block;margin-bottom:5px;font-size:12px;font-weight:750}
.sf-product-dialog .sf-option-list{gap:6px}
.sf-product-dialog .sf-option-button{padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.25}
.sf-product-dialog .sf-option-button.selected{font-weight:700}
.sf-product-dialog .sf-size-button{min-width:38px;padding:6px 10px}
.sf-product-dialog .sf-option-label-row{margin-bottom:5px}
.sf-product-dialog .sf-option-label-row label{font-size:12px;font-weight:750}
.sf-product-dialog .sf-size-chart-link{font-size:12px}
.sf-product-dialog .sf-single-qty button{width:32px;height:32px;font-size:17px}
.sf-product-dialog .sf-single-qty input{width:44px;height:32px;font-size:12px}
@media(max-width:520px){
 .sf-product-dialog .sf-option-button{padding:6px 9px}
 .sf-product-dialog .sf-size-button{min-width:36px;padding:6px 9px}
}


/* ============================================================
   V2F.2 - COMPACT CART UX
   Presentation-only polish: compact rows + savings summary.
   ============================================================ */
.sf-cart-head{padding:14px 16px 11px}
.sf-cart-head small{font-size:11px}
.sf-cart-head h2{font-size:20px;line-height:1.15;margin-top:2px}
.sf-cart-head>button{font-size:23px;line-height:1}
.sf-cart-items{padding:10px 12px}
.sf-cart-product.sf-cart-product-compact{border-radius:10px;margin-bottom:8px}
.sf-cart-product-compact .sf-cart-product-head{
    grid-template-columns:42px minmax(0,1fr) 28px;
    gap:8px;padding:7px 9px 4px;background:#fff;
}
.sf-cart-product-compact .sf-cart-thumb{width:42px;height:42px;border-radius:6px}
.sf-cart-product-compact .sf-cart-product-head strong{
    font-size:13px;line-height:1.25;font-weight:700;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sf-cart-product-compact .sf-cart-remove-product{
    width:28px;height:28px;padding:0;border-radius:7px;font-size:17px;
    font-weight:500;color:#a33;align-self:center;
}
.sf-cart-product-compact .sf-cart-variants{padding:0 9px 6px 59px}
.sf-cart-product-compact .sf-cart-variant{
    grid-template-columns:minmax(0,1fr) auto auto 24px;
    gap:7px;padding:4px 0;border-bottom:1px solid #f0f1f3;min-height:30px;
}
.sf-cart-product-compact .sf-cart-variant:last-child{border-bottom:0}
.sf-cart-product-compact .sf-cart-variant-name{min-width:0}
.sf-cart-product-compact .sf-cart-variant-name b{
    font-size:12px;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sf-cart-product-compact .sf-cart-variant-name span{color:var(--muted);font-weight:400}
.sf-cart-product-compact .sf-cart-qty{border-radius:6px;height:27px}
.sf-cart-product-compact .sf-cart-qty button{width:25px;height:27px;font-size:14px}
.sf-cart-product-compact .sf-cart-qty input{width:30px;height:27px;font-size:12px}
.sf-cart-product-compact .sf-cart-variant>strong{font-size:12px;white-space:nowrap}
.sf-cart-product-compact .sf-cart-remove-line{
    width:24px;height:24px;padding:0;font-size:15px;font-weight:500;
}
.sf-cart-footer{padding:11px 12px calc(11px + env(safe-area-inset-bottom));gap:8px}
.sf-cart-total{gap:8px;min-width:0}
.sf-cart-total>span:first-child{font-size:12px;white-space:nowrap}
.sf-cart-total .sf-cart-savings{
    margin-left:auto;font-size:11px;font-weight:700;color:#167a45;white-space:nowrap;
}
.sf-cart-total strong{font-size:17px;white-space:nowrap}
.sf-cart-footer textarea{min-height:58px;max-height:90px;padding:8px;font-size:12px}
.sf-cart-submit{padding:10px 14px;font-size:13px}

@media(max-width:600px){
    .sf-cart-head{padding:12px 13px 9px}
    .sf-cart-head h2{font-size:19px}
    .sf-cart-items{padding:8px}
    .sf-cart-product.sf-cart-product-compact{margin-bottom:7px}
    .sf-cart-product-compact .sf-cart-product-head{
        grid-template-columns:38px minmax(0,1fr) 26px;gap:7px;padding:6px 7px 3px;
    }
    .sf-cart-product-compact .sf-cart-thumb{width:38px;height:38px}
    .sf-cart-product-compact .sf-cart-product-head strong{font-size:12px}
    .sf-cart-product-compact .sf-cart-remove-product{width:26px;height:26px;font-size:16px}
    .sf-cart-product-compact .sf-cart-variants{padding:0 7px 5px 52px}
    .sf-cart-product-compact .sf-cart-variant{
        grid-template-columns:minmax(0,1fr) auto auto 22px;gap:5px;padding:3px 0;min-height:28px;
    }
    .sf-cart-product-compact .sf-cart-variant>div:first-child{grid-column:auto}
    .sf-cart-product-compact .sf-cart-variant>.sf-cart-qty{grid-column:auto;justify-self:auto}
    .sf-cart-product-compact .sf-cart-variant>strong{grid-column:auto;justify-self:auto;font-size:11px}
    .sf-cart-product-compact .sf-cart-variant>.sf-cart-remove-line{
        grid-column:auto;justify-self:auto;width:22px;height:22px;font-size:14px;
    }
    .sf-cart-product-compact .sf-cart-qty{height:25px}
    .sf-cart-product-compact .sf-cart-qty button{width:23px;height:25px;font-size:13px}
    .sf-cart-product-compact .sf-cart-qty input{width:27px;height:25px;font-size:11px}
    .sf-cart-footer{padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:7px}
    .sf-cart-total{gap:5px}
    .sf-cart-total>span:first-child{font-size:11px}
    .sf-cart-total .sf-cart-savings{font-size:10px}
    .sf-cart-total strong{font-size:15px}
    .sf-cart-footer textarea{min-height:52px;max-height:75px}
    .sf-cart-submit{min-height:40px;font-size:13px;padding:9px 12px}
}

@media(max-width:390px){
    .sf-cart-product-compact .sf-cart-variants{padding-left:7px}
    .sf-cart-product-compact .sf-cart-variant{grid-template-columns:minmax(72px,1fr) auto auto 20px}
    .sf-cart-total .sf-cart-savings{font-size:9px}
}


/* ============================================================
   V2F.3 STEP 1.4 - MOBILE SIZE TEXT ROW
   ============================================================ */
@media (max-width: 600px) {
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px 0 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons::-webkit-scrollbar { display: none; }
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons > button.sf-option-button.sf-size-button {
    display: inline !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons > button.sf-size-button.selected {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons > button.sf-size-button.out,
  .sf-product-dialog #sizeOptions.sf-option-list.sf-size-buttons > button.sf-size-button:disabled {
    opacity: .38 !important;
    color: var(--muted) !important;
    text-decoration: line-through !important;
  }
}

/* ============================================================
   V2F.3 STEP 2 - MOBILE COLLECTION WIDTH / RHYTHM POLISH
   Mobile only. Desktop/tablet >= 600px remains unchanged.
   Align Product Collection to the same 14px page gutter used by
   Category Cards, while preserving V2E filter/product behavior.
   ============================================================ */
@media (max-width: 599px) {
  .sf-wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 24px 14px 54px !important;
  }

  .sf-wrap .sf-section-head {
    margin: 18px 0 14px !important;
  }

  .sf-wrap .sf-section-head h2 {
    font-size: 27px !important;
    line-height: 1.12 !important;
  }

  .sf-wrap .sf-filter-toolbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
  }

  .sf-wrap .sf-collection-layout,
  .sf-wrap .sf-collection-products,
  .sf-wrap .sf-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .sf-wrap .sf-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .sf-wrap .sf-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .sf-wrap .sf-card-img {
    width: 100% !important;
  }
}


/* V2F.4B Wishlist — corrected approved placement */
.sf-card-img .sf-wishlist-heart,
.sf-detail-wishlist-heart{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
  margin:0;
  color:#fff;
  cursor:pointer;
  line-height:1;
  display:grid;
  place-items:center;
  z-index:4;
}
.sf-card-img .sf-wishlist-heart{
  position:absolute;
  top:10px;
  right:11px;
  width:30px;
  height:30px;
}
.sf-card-img .sf-wishlist-heart span{
  font-size:29px;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:700;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.sf-card-img .sf-wishlist-heart.is-saved{color:#ef2f62}
.sf-card-img .sf-wishlist-heart.is-saved span{
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.75)) drop-shadow(0 1px 3px rgba(0,0,0,.28));
}
.sf-card-img .sf-wishlist-heart:hover{transform:scale(1.08)}
.sf-card-img .sf-wishlist-heart:disabled{opacity:.65;cursor:wait}
.sf-detail-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.sf-detail-title-row h2{flex:1}
.sf-detail-wishlist-heart{
  flex:0 0 34px;
  width:34px;
  height:34px;
  color:#7b8493;
  margin-top:4px;
}
.sf-detail-wishlist-heart span{
  font-size:31px;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:700;
}
.sf-detail-wishlist-heart.is-saved{color:#ef2f62}
.sf-detail-wishlist-heart:hover{transform:scale(1.08)}
@media(max-width:520px){
  .sf-card-img .sf-wishlist-heart{top:8px;right:8px;width:27px;height:27px}
  .sf-card-img .sf-wishlist-heart span{font-size:26px}
  .sf-detail-wishlist-heart{width:31px;height:31px;flex-basis:31px}
  .sf-detail-wishlist-heart span{font-size:28px}
}


/* V2F.4B — Header Wishlist live counter */
.sf-header-wishlist{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 5px;
  cursor:pointer;
  white-space:nowrap;
}
.sf-header-wishlist-icon{
  font-family:Arial,sans-serif;
  font-size:23px;
  line-height:1;
  color:#17243d;
}
.sf-header-wishlist.has-items .sf-header-wishlist-icon{color:#ef2f62}
.sf-header-wishlist-count{
  min-width:21px;
  height:21px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#17243d;
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:800;
}
.sf-header-wishlist-count.is-zero{background:#8b94a3}
.sf-header-wishlist:hover .sf-header-wishlist-icon{transform:scale(1.06)}
@media(max-width:760px){
  .sf-header-wishlist{gap:3px;padding:7px 3px}
  .sf-header-wishlist-label{display:none}
  .sf-header-wishlist-icon{font-size:22px}
  .sf-header-wishlist-count{
    min-width:18px;height:18px;padding:0 5px;font-size:11px;
  }
}
@media(max-width:420px){
  .sf-header-wishlist{padding-left:2px;padding-right:2px}
  .sf-header-wishlist-icon{font-size:20px}
}


/* V2F.4C — Customer Wishlist view */
body.sf-wishlist-open{overflow:hidden}
.sf-wishlist-modal{
  position:fixed;inset:0;z-index:1200;display:flex;justify-content:flex-end;
}
.sf-wishlist-modal.hidden{display:none}
.sf-wishlist-backdrop{
  position:absolute;inset:0;background:rgba(15,25,44,.38);backdrop-filter:blur(2px);
}
.sf-wishlist-panel{
  position:relative;z-index:1;width:min(760px,94vw);height:100%;
  background:#fff;box-shadow:-14px 0 40px rgba(15,25,44,.18);
  display:flex;flex-direction:column;
}
.sf-wishlist-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px 18px;border-bottom:1px solid #e8ebf0;
}
.sf-wishlist-panel-head small{display:block;color:#7a8493;margin-bottom:3px}
.sf-wishlist-panel-head h2{margin:0;color:#17243d;font-size:25px}
.sf-wishlist-close{
  border:1px solid #e1e5eb;background:#fff;color:#17243d;border-radius:50%;
  width:38px;height:38px;font-size:26px;line-height:1;cursor:pointer;
}
.sf-wishlist-view-body{padding:20px 24px 28px;overflow:auto;flex:1}
.sf-wishlist-summary{font-size:13px;color:#687386;font-weight:700;margin-bottom:14px}
.sf-wishlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-wishlist-card{
  border:1px solid #e5e8ee;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 4px 14px rgba(20,32,54,.06);
}
.sf-wishlist-card-img{height:210px;position:relative;background:#f5f5f3;display:grid;place-items:center;overflow:hidden}
.sf-wishlist-card-img img{width:100%;height:100%;object-fit:cover}
.sf-wishlist-remove{
  position:absolute;top:10px;right:11px;border:0;background:transparent;color:#ef2f62;
  font:700 29px/1 Arial,sans-serif;cursor:pointer;padding:0;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.sf-wishlist-remove:disabled{opacity:.55;cursor:wait}
.sf-wishlist-card-body{padding:14px}
.sf-wishlist-card-body small{color:#7a8493}
.sf-wishlist-card-body h3{margin:4px 0 9px;color:#17243d;font-size:16px}
.sf-wishlist-card-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sf-wishlist-card-price strong{font-size:17px;color:#17243d}
.sf-wishlist-card-price del{font-size:13px;color:#8992a1}
.sf-wishlist-stock{font-size:12px;font-weight:800;margin-bottom:12px}
.sf-wishlist-stock.in-stock{color:#178449}.sf-wishlist-stock.out-stock{color:#b44545}
.sf-wishlist-view-product,.sf-wishlist-continue{
  width:100%;border:0;border-radius:9px;background:#17243d;color:#fff;
  min-height:40px;padding:9px 14px;font-weight:800;cursor:pointer;
}
.sf-wishlist-empty,.sf-wishlist-loading{
  min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#687386;padding:30px;
}
.sf-wishlist-empty-heart{font:400 54px/1 Arial,sans-serif;color:#ef2f62;margin-bottom:12px}
.sf-wishlist-empty h3{color:#17243d;margin:0 0 7px}.sf-wishlist-empty p{max-width:340px;margin:0 0 18px}
.sf-wishlist-empty .sf-wishlist-continue{width:auto;min-width:170px}
@media(max-width:640px){
 .sf-wishlist-panel{width:100vw}
 .sf-wishlist-panel-head{padding:16px 16px 13px}
 .sf-wishlist-panel-head h2{font-size:21px}
 .sf-wishlist-view-body{padding:14px 14px 22px}
 .sf-wishlist-grid{grid-template-columns:1fr;gap:12px}
 .sf-wishlist-card{display:grid;grid-template-columns:112px 1fr}
 .sf-wishlist-card-img{height:100%;min-height:156px}
 .sf-wishlist-card-body{padding:12px}
 .sf-wishlist-card-body h3{font-size:15px}
 .sf-wishlist-remove{top:8px;right:8px;font-size:25px}
}


/* V2F.4C polish */
.sf-wishlist-card-img{height:180px}
.sf-wishlist-card-price{flex-wrap:wrap}
.sf-wishlist-discount{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 7px;border-radius:999px;
  background:#e3f6e9;color:#168044;
  font-size:11px;font-weight:800;line-height:1;
  white-space:nowrap;
}
.sf-wishlist-empty-heart{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff0f4;color:#ef2f62;
  font-size:31px;
  margin-bottom:14px;
}
@media(max-width:640px){
 .sf-wishlist-card-img{height:auto;min-height:145px}
 .sf-wishlist-discount{font-size:10px;padding:3px 6px}
}


/* =========================================================
   V2F.5A.2 - Mobile header + compact account/menu refinement
   Mobile only. Desktop storefront remains unchanged.
   ========================================================= */
.sf-mobile-account-section{display:none}

@media (max-width:900px){
  .sf-header-main{
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:"menu brand actions" "search search search";
    gap:9px 7px;
  }
  .sf-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:max-content}
  .sf-header-actions .sf-account-button,
  .sf-header-actions .sf-customer-logout{display:none !important}
  .sf-brand{width:100%;min-width:0;overflow:hidden;gap:8px}
  .sf-brand-copy{flex:1 1 auto;min-width:0;overflow:hidden}
  .sf-brand-copy strong{max-width:none;width:100%;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sf-brand-copy small{max-width:none}

  .sf-mobile-nav-panel{display:flex;flex-direction:column}
  .sf-mobile-nav-head{min-height:70px;padding:13px 18px}
  .sf-mobile-nav-head small{font-size:8px}
  .sf-mobile-nav-head strong{font-size:18px}

  .sf-mobile-account-section{display:block;order:2;padding:10px 14px 8px;border-bottom:1px solid #eef0f3}
  .sf-mobile-account-section>small{display:none}
  .sf-mobile-account-btn{width:100%;min-height:54px;border:1px solid #f3d8df;border-radius:12px;padding:9px 13px;background:#fff3f6;color:var(--ink);text-align:left;cursor:pointer}
  .sf-mobile-account-btn::before{content:"♡";display:inline-grid;place-items:center;width:31px;height:31px;margin-right:10px;border-radius:50%;background:#ffe4eb;color:#d92759;font-size:20px;vertical-align:middle}
  .sf-mobile-account-btn::after{content:"›";float:right;margin-top:5px;color:#c91f4f;font-size:22px;line-height:1}
  .sf-mobile-logout-btn{width:100%;min-height:38px;margin-top:6px;border:0;border-radius:9px;padding:8px 12px;background:#f5f6f8;color:var(--ink);text-align:left;font-size:12px;font-weight:700;cursor:pointer}

  .sf-mobile-nav-links{order:3;padding:5px 0 8px}
  .sf-mobile-nav-links>button,
  .sf-mobile-category-row>button:first-child{min-height:40px;padding:8px 18px;font-size:13px;font-weight:700}
  .sf-mobile-category-row{grid-template-columns:1fr 42px}
  .sf-mobile-category-toggle{font-size:18px}
  .sf-mobile-subcategories{padding:0 0 5px 12px}
  .sf-mobile-subcategories>button{min-height:35px;padding:7px 18px;font-size:11px}
  .sf-mobile-nav-footer{order:4;padding:10px 18px 15px;font-size:9px}

  .sf-card-img{position:relative !important}
  .sf-card-img .sf-wishlist-heart{position:absolute !important;top:9px !important;right:9px !important;left:auto !important;bottom:auto !important;margin:0 !important;transform:none !important;z-index:4}
}

@media (max-width:520px){
  .sf-header-main{grid-template-columns:40px minmax(0,1fr) auto;padding-left:9px;padding-right:9px;gap:8px 5px}
  .sf-logo{width:36px;height:36px;flex-basis:36px}
  .sf-brand{gap:6px}
  .sf-brand-copy strong{max-width:none;font-size:14px;text-overflow:clip}
  .sf-brand-copy small{display:none}
  .sf-header-actions{gap:2px}
  .sf-header-wishlist{padding:5px 1px}
  .sf-header-wishlist-icon{font-size:20px}
  .sf-header-actions .sf-cart-button{padding-left:4px;padding-right:4px;font-size:10px}
  .sf-card-img .sf-wishlist-heart{top:8px !important;right:8px !important}
}


/* V2F.5B.1.1 - tenant-specific initial storefront loading state */
.sf-storefront-loader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#f8f8f6;opacity:1;transition:opacity .2s ease;}
.sf-storefront-loader-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 24px;max-width:360px;color:#17233b;}
.sf-storefront-loader-spinner{width:42px;height:42px;margin-bottom:18px;border:4px solid rgba(23,35,59,.12);border-top-color:var(--secondary,#b89a67);border-radius:50%;animation:sfStoreLoadingSpin .8s linear infinite;}
.sf-storefront-loader-card strong{font-size:20px;line-height:1.3;margin-bottom:7px;}
.sf-storefront-loader-card span{font-size:14px;line-height:1.5;color:#687386;}
.sf-storefront-loader-done{opacity:0;pointer-events:none;}
body.sf-store-loading{overflow:hidden;}
body.sf-store-loading .sf-storefront-app{visibility:hidden;}
@keyframes sfStoreLoadingSpin{to{transform:rotate(360deg)}}
@media (max-width:600px){.sf-storefront-loader{align-items:flex-start;padding-top:34vh}.sf-storefront-loader-card{padding:20px}.sf-storefront-loader-spinner{width:38px;height:38px;margin-bottom:15px}.sf-storefront-loader-card strong{font-size:18px}.sf-storefront-loader-card span{font-size:13px}}
@media (prefers-reduced-motion:reduce){.sf-storefront-loader-spinner{animation-duration:1.6s}.sf-storefront-loader{transition:none}}

/* ============================================================
   V2F.5C.1.2 - Mobile Hero Natural Aspect Ratio & Slider Controls
   Mobile only. Desktop/tablet Hero presentation is unchanged.
   ============================================================ */
@media (max-width: 600px){
    /* Give wide campaign artwork more presence on a phone while keeping
       the complete banner visible from left to right. */
    /* Keep the validated 3.2:1 campaign ratio on phones. This makes the
       Hero height follow its width naturally, so the complete banner fills
       the frame with no side cropping and no top/bottom letterboxing. */
    .sf-hero-images,
    .sf-hero-video{
        width:100%;
        aspect-ratio:16 / 5;
        height:auto;
        min-height:0;
        overflow:hidden;
        background:#111827;
    }

    .sf-hero-images .sf-hero-media img,
    .sf-hero-video .sf-hero-media video{
        width:100%;
        height:100%;
        object-fit:contain;
        object-position:center center;
    }

    /* Override the generic Hero button styling.  Slider controls should be
       compact navigation affordances, not promotional CTA buttons. */
    .sf-hero.sf-hero-images .sf-hero-arrow{
        width:28px;
        height:28px;
        min-width:28px;
        padding:0;
        display:grid;
        place-items:center;
        border:1px solid rgba(255,255,255,.72);
        border-radius:50%;
        background:rgba(15,23,42,.58);
        color:#fff;
        font-size:20px;
        font-weight:500;
        line-height:1;
        box-shadow:0 2px 8px rgba(0,0,0,.18);
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
    }
    .sf-hero.sf-hero-images .sf-hero-prev{left:8px}
    .sf-hero.sf-hero-images .sf-hero-next{right:8px}

    .sf-hero.sf-hero-images .sf-hero-dots{
        bottom:7px;
        gap:5px;
        align-items:center;
    }
    .sf-hero.sf-hero-images .sf-hero-dot{
        width:6px;
        height:6px;
        min-width:6px;
        padding:0;
        border:0;
        border-radius:50%;
        background:rgba(255,255,255,.68);
        box-shadow:0 1px 4px rgba(0,0,0,.18);
    }
    .sf-hero.sf-hero-images .sf-hero-dot.active{
        width:18px;
        height:6px;
        border-radius:999px;
        background:#fff;
    }
}

/* V2F.5C.3 - Product card discount percentage */
.sf-card-discount{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#edf8f1;color:#237450;font-size:10px;font-weight:900;white-space:nowrap}
.sf-card-body .sf-price{flex-wrap:wrap}
@media(max-width:600px){.sf-card-discount{font-size:10px;padding:3px 6px}}


/* V2F.5C.4 - Product card wishlist placement refinement */
.sf-card-price-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0}
.sf-card-price-row .sf-price{flex:1;min-width:0;margin-bottom:0;flex-wrap:wrap}
.sf-card-price-row .sf-wishlist-heart{position:static!important;inset:auto!important;flex:0 0 34px;width:34px!important;height:34px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#53657b!important;display:inline-grid!important;place-items:center!important;border-radius:50%!important;box-shadow:none!important;transform:none!important;z-index:auto!important}
.sf-card-price-row .sf-wishlist-heart span{font-size:30px!important;line-height:1!important;font-weight:400!important}
.sf-card-price-row .sf-wishlist-heart:hover{background:#f4f6f8!important;transform:none!important}
.sf-card-price-row .sf-wishlist-heart.is-saved{color:#ef2f62!important}
.sf-card-price-row .sf-wishlist-heart:disabled{opacity:.65;cursor:wait}
@media(max-width:600px){
 .sf-card-price-row{gap:6px}
 .sf-card-price-row .sf-wishlist-heart{flex-basis:32px;width:32px!important;height:32px!important}
 .sf-card-price-row .sf-wishlist-heart span{font-size:28px!important}
}

/* ============================================================
   V2G.3 - Store-specific customer storefront footer
   ============================================================ */
.sf-store-footer{display:block;padding:0;background:var(--primary);color:#fff}
.sf-footer-shell{max-width:1280px;margin:0 auto;padding:42px max(5vw,22px) 34px;display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.15fr;gap:34px}
.sf-footer-section{min-width:0}.sf-footer-heading{width:100%;padding:0 0 14px;border:0;background:transparent;color:#fff;text-align:left;font:inherit;font-size:14px;font-weight:800;cursor:default}.sf-footer-heading i{display:none;font-style:normal;font-size:20px}.sf-footer-content{color:rgba(255,255,255,.76);font-size:13px;line-height:1.65}.sf-footer-content p{margin:0 0 10px;opacity:1}.sf-footer-logo{width:54px;height:54px;border-radius:12px;overflow:hidden;background:#fff;margin:0 0 13px}.sf-footer-logo img{width:100%;height:100%;object-fit:contain}.sf-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.sf-footer-links a,.sf-footer-text-link{padding:0;border:0;background:transparent;color:rgba(255,255,255,.76);font:inherit;text-align:left;text-decoration:none;cursor:pointer}.sf-footer-links a:hover,.sf-footer-text-link:hover{color:#fff;text-decoration:underline}.sf-footer-social{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px}.sf-footer-social a{font-weight:700}.sf-footer-base{border-top:1px solid rgba(255,255,255,.14);padding:16px max(5vw,22px);text-align:center}.sf-footer-base small{opacity:.68}.sf-footer-info-dialog{width:min(720px,100%)}.sf-footer-info-dialog h2{margin:0 38px 18px 0}.sf-footer-info-body{color:var(--ink);font-size:14px;line-height:1.75}.sf-footer-info-body>p{white-space:normal}.sf-footer-faq{border-top:1px solid var(--line);padding:13px 0}.sf-footer-faq:last-child{border-bottom:1px solid var(--line)}.sf-footer-faq summary{font-weight:800;cursor:pointer}.sf-footer-faq p{margin:9px 0 0;color:var(--muted)}
@media(max-width:1000px){.sf-footer-shell{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
 .sf-store-footer{padding:0!important;display:block!important}
 .sf-footer-shell{display:block;padding:12px 16px 8px}
 .sf-footer-section{border-bottom:1px solid rgba(255,255,255,.14)}
 .sf-footer-heading{display:flex;align-items:center;justify-content:space-between;padding:15px 0;cursor:pointer;font-size:14px}
 .sf-footer-heading i{display:block;transition:transform .18s ease}.sf-footer-section.open .sf-footer-heading i{transform:rotate(45deg)}
 .sf-footer-content{display:none;padding:0 0 16px}.sf-footer-section.open .sf-footer-content{display:flex}.sf-footer-section.open #footerAbout.sf-footer-content{display:block}
 .sf-footer-section:first-child{border-top:1px solid rgba(255,255,255,.14)}
 .sf-footer-base{padding:15px 16px calc(15px + env(safe-area-inset-bottom))}
 .sf-footer-info-dialog{max-height:86dvh;border-radius:16px;padding:20px}
}

/* V2G.3.2 footer social icon controls */
.sf-footer-social{display:flex;align-items:center;gap:14px;margin-top:14px}
.sf-footer-social-link{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;border-radius:50%;transition:opacity .15s ease,transform .15s ease}
.sf-footer-social-link:hover{opacity:.78;transform:translateY(-1px)}
.sf-footer-social-link svg{width:21px;height:21px;display:block}


/* V2G.3.3 - Keep long About Us content compact in the footer */
.sf-footer-about-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sf-footer-about-more{display:inline-block;margin-top:7px;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sf-footer-about-more:hover{opacity:.86}
.sf-footer-about-full{white-space:pre-line;max-height:62vh;overflow-y:auto;padding-right:6px;line-height:1.75}
@media(max-width:700px){.sf-footer-about-preview{-webkit-line-clamp:4}.sf-footer-about-full{max-height:64dvh}}

/* V2G.4C - Separate Vylaa Group platform footer */
.sf-platform-footer{color:#fff;background:#17233A;border-top:1px solid rgba(255,255,255,.12)}
.sf-platform-footer-inner{max-width:1280px;margin:0 auto;padding:18px max(5vw,22px);display:grid;grid-template-columns:minmax(180px,1.1fr) auto auto minmax(260px,1.5fr);align-items:center;gap:22px}
.sf-platform-footer-brand{display:inline-flex;align-items:center;width:max-content;max-width:260px}.sf-platform-footer-brand img{display:block;max-width:240px;max-height:68px;width:auto;height:auto;object-fit:contain}
.sf-platform-footer-legal{display:flex;align-items:center;justify-content:center;gap:0}.sf-platform-footer-legal a{color:#fff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.sf-platform-footer-legal a+a:before{content:"";display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.35);margin:0 14px;vertical-align:middle}.sf-platform-footer-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.sf-platform-footer-social{display:flex;align-items:center;justify-content:center;gap:10px}.sf-platform-social-icon{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;text-decoration:none;transition:transform .15s ease,opacity .15s ease}.sf-platform-social-icon:hover{transform:translateY(-2px);opacity:.9}.sf-platform-social-icon svg{width:20px;height:20px}.sf-platform-social-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.sf-platform-social-facebook{background:#1877f2}.sf-platform-social-youtube{background:#ff0000}
.sf-platform-footer-copyright{font-size:12px;line-height:1.5;text-align:right;color:rgba(255,255,255,.88)}
@media(max-width:1000px){.sf-platform-footer-inner{grid-template-columns:1fr 1fr;justify-items:center}.sf-platform-footer-copyright{text-align:center}.sf-platform-footer-brand{max-width:100%}}
@media(max-width:700px){.sf-platform-footer-inner{display:flex;flex-direction:column;padding:24px 18px calc(24px + env(safe-area-inset-bottom));gap:17px;text-align:center}.sf-platform-footer-brand img{max-width:220px;max-height:70px}.sf-platform-footer-legal{flex-wrap:wrap;row-gap:8px}.sf-platform-footer-copyright{text-align:center;max-width:330px}.sf-platform-social-icon{width:38px;height:38px}.sf-platform-social-icon svg{width:21px;height:21px}}

/* V2G.3.4C - Store Admin managed multi-location footer */
.sf-footer-location-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 10px}.sf-footer-location-item:last-child{margin-bottom:0}.sf-footer-location-name{color:#fff;font-size:13px;line-height:1.4}.sf-footer-location-address{color:rgba(255,255,255,.76);line-height:1.55}.sf-footer-location-map{margin-top:2px;color:rgba(255,255,255,.86)!important;text-decoration:underline!important}