/*
 * SPACELAND STOREFRONT MINIMAL CLEAN V1 — 2026-09-03 V6
 * Final override layer for a cleaner header + highlights.
 * Removes decorative circles/cards behind logo and highlight icons.
 * No POS selectors.
 */

:root{
    --sl-clean-ink:#1d1d1f;
    --sl-clean-muted:#6e6e73;
    --sl-clean-line:#e9e6df;
    --sl-clean-soft:#f7f5f1;
    --sl-clean-accent:#ef6a3a;
}

/* ===== Header: clean surface, no decorative shell ===== */
body.sp-ios-storefront .sl-online-header,
body.sp-ios-home .sl-online-header{
    background:#fff !important;
    box-shadow:none !important;
    border-bottom:1px solid var(--sl-clean-line) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

body.sp-ios-storefront .sl-online-header-inner,
body.sp-ios-home .sl-online-header-inner{
    width:min(100%,1480px) !important;
    max-width:1480px !important;
    min-height:78px !important;
    margin-inline:auto !important;
    padding:14px 20px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:16px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Logo: image only, absolutely no halo/card/circle */
body.sp-ios-storefront .sl-header-logo-link,
body.sp-ios-home .sl-header-logo-link{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:0 !important;
    outline-offset:3px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
}

body.sp-ios-storefront .sl-header-logo-link::before,
body.sp-ios-storefront .sl-header-logo-link::after,
body.sp-ios-home .sl-header-logo-link::before,
body.sp-ios-home .sl-header-logo-link::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-storefront .sl-header-logo,
body.sp-ios-home .sl-header-logo{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
    object-fit:contain !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
}

/* Search: one restrained field, no nested visual decoration */
body.sp-ios-storefront .sl-header-search,
body.sp-ios-home .sl-header-search{
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    padding:5px 8px !important;
    border:1px solid var(--sl-clean-line) !important;
    border-radius:16px !important;
    background:var(--sl-clean-soft) !important;
    box-shadow:none !important;
}

body.sp-ios-storefront .sl-header-search::before,
body.sp-ios-storefront .sl-header-search::after,
body.sp-ios-home .sl-header-search::before,
body.sp-ios-home .sl-header-search::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-storefront .sl-header-search:focus-within,
body.sp-ios-home .sl-header-search:focus-within{
    background:#fff !important;
    border-color:#d4cfc5 !important;
    box-shadow:none !important;
}

body.sp-ios-storefront .sl-header-search-input,
body.sp-ios-home .sl-header-search-input{
    min-width:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color:var(--sl-clean-ink) !important;
    font-size:15px !important;
    font-weight:700 !important;
    padding-inline:10px !important;
}

body.sp-ios-storefront .sl-header-search-input::placeholder,
body.sp-ios-home .sl-header-search-input::placeholder{
    color:#8b8690 !important;
    opacity:1 !important;
    font-weight:700 !important;
}

/* Header action icons: raw icon only; no circles, cards, glow or gradient */
body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart),
body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart){
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:var(--sl-clean-ink) !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
}

body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart)::before,
body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart)::after,
body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart)::before,
body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart)::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart):hover,
body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart):hover{
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
}

body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart) svg,
body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart) svg{
    width:22px !important;
    height:22px !important;
    display:block !important;
    color:currentColor !important;
    filter:none !important;
}

body.sp-ios-storefront .sl-header-cart-count,
body.sp-ios-home .sl-header-cart-count{
    position:absolute !important;
    top:-3px !important;
    inset-inline-start:auto !important;
    inset-inline-end:-4px !important;
    min-width:20px !important;
    height:20px !important;
    padding-inline:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:999px !important;
    background:#ff4b3e !important;
    color:#fff !important;
    box-shadow:none !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
}

/* ===== Highlights: no ring, no colored halo, no circle behind icon ===== */
body.sp-ios-home .sp-ios-block--highlights,
body.sp-ios-storefront .sp-ios-block--highlights{
    margin:0 !important;
    padding:18px 0 8px !important;
    background:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

body.sp-ios-home .sp-ios-highlights,
body.sp-ios-storefront .sp-ios-highlights{
    width:min(100%,1180px) !important;
    margin-inline:auto !important;
    padding:0 18px 6px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:24px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

body.sp-ios-home .sp-ios-highlights::-webkit-scrollbar,
body.sp-ios-storefront .sp-ios-highlights::-webkit-scrollbar{
    display:none !important;
}

body.sp-ios-home .sp-ios-highlight,
body.sp-ios-storefront .sp-ios-highlight{
    flex:0 0 86px !important;
    width:86px !important;
    max-width:86px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:9px !important;
    text-align:center !important;
    text-decoration:none !important;
    color:var(--sl-clean-ink) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    scroll-snap-align:start !important;
}

body.sp-ios-home .sp-ios-highlight::before,
body.sp-ios-home .sp-ios-highlight::after,
body.sp-ios-storefront .sp-ios-highlight::before,
body.sp-ios-storefront .sp-ios-highlight::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-home .sp-ios-highlight-ring,
body.sp-ios-storefront .sp-ios-highlight-ring{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
}

body.sp-ios-home .sp-ios-highlight-ring::before,
body.sp-ios-home .sp-ios-highlight-ring::after,
body.sp-ios-storefront .sp-ios-highlight-ring::before,
body.sp-ios-storefront .sp-ios-highlight-ring::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-home .sp-ios-highlight-core,
body.sp-ios-storefront .sp-ios-highlight-core{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    font-size:27px !important;
    line-height:1 !important;
    color:var(--sl-clean-ink) !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
}

body.sp-ios-home .sp-ios-highlight-core::before,
body.sp-ios-home .sp-ios-highlight-core::after,
body.sp-ios-storefront .sp-ios-highlight-core::before,
body.sp-ios-storefront .sp-ios-highlight-core::after{
    content:none !important;
    display:none !important;
}

body.sp-ios-home .sp-ios-highlight-core svg,
body.sp-ios-storefront .sp-ios-highlight-core svg{
    width:27px !important;
    height:27px !important;
    max-width:27px !important;
    max-height:27px !important;
    display:block !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
}

body.sp-ios-home .sp-ios-highlight strong,
body.sp-ios-storefront .sp-ios-highlight strong{
    width:100% !important;
    max-width:86px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    color:var(--sl-clean-ink) !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

/* Prevent a large dead gap between highlights and hero. */
body.sp-ios-home .sp-ios-block--highlights + *,
body.sp-ios-storefront .sp-ios-block--highlights + *{
    margin-top:0 !important;
}

@media (max-width:991px){
    body.sp-ios-storefront .sl-online-header-inner,
    body.sp-ios-home .sl-online-header-inner{
        min-height:70px !important;
        padding:11px 16px !important;
        gap:12px !important;
    }

    body.sp-ios-storefront .sl-header-logo,
    body.sp-ios-home .sl-header-logo{
        width:50px !important;
        height:50px !important;
        max-width:50px !important;
        max-height:50px !important;
    }

    body.sp-ios-home .sp-ios-highlights,
    body.sp-ios-storefront .sp-ios-highlights{
        width:100% !important;
        justify-content:flex-start !important;
        gap:20px !important;
        padding-inline:16px !important;
    }
}

@media (max-width:767px){
    body.sp-ios-storefront .sl-online-header-inner,
    body.sp-ios-home .sl-online-header-inner{
        min-height:62px !important;
        padding:9px 12px !important;
        gap:8px !important;
    }

    body.sp-ios-storefront .sl-header-logo,
    body.sp-ios-home .sl-header-logo{
        width:42px !important;
        height:42px !important;
        max-width:42px !important;
        max-height:42px !important;
    }

    body.sp-ios-storefront .sl-header-search,
    body.sp-ios-home .sl-header-search{
        min-height:44px !important;
        padding:3px 6px !important;
        border-radius:13px !important;
    }

    body.sp-ios-storefront .sl-header-search-input,
    body.sp-ios-home .sl-header-search-input,
    body.sp-ios-storefront .sl-header-search-input::placeholder,
    body.sp-ios-home .sl-header-search-input::placeholder{
        font-size:13px !important;
    }

    body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart),
    body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart){
        width:38px !important;
        min-width:38px !important;
        height:38px !important;
        min-height:38px !important;
    }

    body.sp-ios-storefront :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart) svg,
    body.sp-ios-home :where(.sl-header-search-submit,.sl-header-scan,.sl-header-cart) svg{
        width:20px !important;
        height:20px !important;
    }

    body.sp-ios-home .sp-ios-block--highlights,
    body.sp-ios-storefront .sp-ios-block--highlights{
        padding:12px 0 4px !important;
    }

    body.sp-ios-home .sp-ios-highlights,
    body.sp-ios-storefront .sp-ios-highlights{
        gap:15px !important;
        padding:0 12px 4px !important;
    }

    body.sp-ios-home .sp-ios-highlight,
    body.sp-ios-storefront .sp-ios-highlight{
        flex-basis:70px !important;
        width:70px !important;
        max-width:70px !important;
        gap:7px !important;
    }

    body.sp-ios-home .sp-ios-highlight-ring,
    body.sp-ios-storefront .sp-ios-highlight-ring,
    body.sp-ios-home .sp-ios-highlight-core,
    body.sp-ios-storefront .sp-ios-highlight-core{
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        min-height:30px !important;
    }

    body.sp-ios-home .sp-ios-highlight-core,
    body.sp-ios-storefront .sp-ios-highlight-core{
        font-size:24px !important;
    }

    body.sp-ios-home .sp-ios-highlight-core svg,
    body.sp-ios-storefront .sp-ios-highlight-core svg{
        width:24px !important;
        height:24px !important;
        max-width:24px !important;
        max-height:24px !important;
    }

    body.sp-ios-home .sp-ios-highlight strong,
    body.sp-ios-storefront .sp-ios-highlight strong{
        max-width:70px !important;
        min-height:31px !important;
        font-size:10.5px !important;
        line-height:1.35 !important;
    }
}

@media (max-width:390px){
    body.sp-ios-storefront .sl-online-header-inner,
    body.sp-ios-home .sl-online-header-inner{
        grid-template-columns:auto minmax(0,1fr) auto !important;
        padding-inline:10px !important;
        gap:7px !important;
    }

    body.sp-ios-storefront .sl-header-logo,
    body.sp-ios-home .sl-header-logo{
        width:38px !important;
        height:38px !important;
        max-width:38px !important;
        max-height:38px !important;
    }

    body.sp-ios-home .sp-ios-highlights,
    body.sp-ios-storefront .sp-ios-highlights{
        gap:13px !important;
        padding-inline:10px !important;
    }

    body.sp-ios-home .sp-ios-highlight,
    body.sp-ios-storefront .sp-ios-highlight{
        flex-basis:66px !important;
        width:66px !important;
        max-width:66px !important;
    }

    body.sp-ios-home .sp-ios-highlight strong,
    body.sp-ios-storefront .sp-ios-highlight strong{
        max-width:66px !important;
        font-size:10px !important;
    }
}