/* Storefront rhythm and navigation. Keep overrides after the legacy stylesheet. */
@media(max-width:380px){
    html body .header>.wrap.row{grid-template-columns:28px minmax(0,1fr) auto!important;padding-left:12px!important;padding-right:12px!important;gap:6px!important}
    html body .header .mobile-menu-btn{width:28px!important;min-width:28px!important}
    html body .header .image-logo{min-width:96px!important}
    html body .header .image-logo .brand-lockup{width:96px!important}
    html body .header .image-logo .brand-logo-swap-container{width:24px!important;height:28px!important;flex-basis:24px!important}
    html body .header .image-logo :is(.logo-base,.logo-hover){width:24px!important;height:28px!important}
    html body .header .image-logo .brand-wordmark{width:68px!important}
    html body .header .head-actions{gap:3px!important}
    html body .header .head-actions :is(.theme-toggle-pill,.user-menu-btn,.notification-btn,.cart-icon-link){width:28px!important;min-width:28px!important;padding:4px!important}
    html body .seasonal-card{padding:16px}
    html body .seasonal-card h3{font-size:18px!important}
}
.home-hero-shell .hero-glass{max-height:calc(100% - 88px);overflow:auto;border-top:3px solid var(--hero-accent,#eadcc3)}
@media(max-width:980px){.header .catalog-nav:not(.open){visibility:hidden!important;pointer-events:none!important}.header .catalog-nav.open{visibility:visible!important;pointer-events:auto!important}}
/* Allow prices and shopping actions to wrap instead of covering each other. */
html body .product-card{height:auto!important;min-width:0!important}
html body .product-card .body{flex:1;min-width:0!important;padding-bottom:16px!important}
html body .product-card .price-row{display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;gap:10px!important;width:100%!important;box-sizing:border-box!important;margin-top:auto!important;padding-top:12px!important}
html body .product-card .price-row>div:first-child{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;flex:1 1 105px!important;min-width:0!important;white-space:normal!important}
html body .product-card .price-tag{font-size:17px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere}
html body .product-card .price-old{font-size:11px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere}
html body .product-card .card-action-pair{margin-left:auto;gap:7px!important}
html body .product-card .card-action-pair :is(.compare-btn,.add-btn){width:36px!important;height:36px!important;min-width:36px!important}
@media(max-width:640px){html body .product-card .price-tag{font-size:15px!important}html body .product-card .price-old{font-size:10px!important}}
.header .catalog-nav .mobile-nav-close::before,.header .catalog-nav .mobile-nav-close::after{content:none!important}.header .catalog-nav .mobile-nav-close{font-size:26px!important;font-weight:400!important;line-height:1!important;color:var(--text)!important;background:var(--surface-muted)!important}.header .catalog-dropdown .catalog-all-link{font-weight:600!important}
.seasonal-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
@media(max-width:640px){.seasonal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.seasonal-card h3{overflow-wrap:anywhere}}
main .section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px!important}
main .section-head :is(h2,h3,p){margin-top:0}main .section-head p{margin-bottom:0!important}
.seller-panel-container .tab-panel>div:first-child:has(>a.btn){display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px!important}
.seller-search-toolbar{margin-bottom:26px!important;gap:14px!important}.seller-directory-grid{margin-top:0!important;gap:24px!important}
.seller-card-footer{padding-top:18px!important;margin-top:18px!important;gap:16px!important}.seller-card-footer>div:last-child{display:flex!important;align-items:center!important;gap:8px!important}
.seller-directory-card-v3 .seller-card-footer :is(button.btn,a.btn){box-sizing:border-box;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;min-height:42px!important;padding:0 18px!important;line-height:1!important;font-size:14px!important;font-weight:600!important;border:1px solid var(--line)!important;margin:0!important;box-shadow:none!important;white-space:nowrap}
.seller-directory-card-v3 .seller-card-footer a.btn-accent{border-color:transparent!important}.seller-card-footer .seller-rating{white-space:nowrap;font-size:13px}
.seller-store-search-form{width:min(100%,480px)!important;margin:22px 0 0!important}.seller-store-search-form .input-group{display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;gap:0!important;border-radius:12px!important;overflow:hidden;box-shadow:none!important;background:#fff;border:1px solid #dce1e6}
.seller-store-search-form .input-group input{width:0!important;min-width:0!important;flex:1 1 auto!important;height:46px!important;margin:0!important;padding:0 16px!important;border-radius:0!important;font-size:14px!important}
.seller-store-search-form .input-group button{flex:0 0 48px!important;width:48px!important;min-width:48px!important;height:46px!important;min-height:46px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;display:grid!important;place-items:center!important;background:#17212b!important;color:#fff!important}.seller-store-search-form button svg{stroke:currentColor!important;width:18px;height:18px}
/* Text inputs use a quiet border cue, with no coloured focus halo. */
html body :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus,html body :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus-visible{outline:none!important;box-shadow:none!important;border-color:#8b959f!important}
.searchbar:focus-within,.search-input-wrap:focus-within,.seller-store-search-form .input-group:focus-within{outline:none!important;box-shadow:none!important}
.shop-page-head{padding-top:32px!important;padding-bottom:24px!important;margin-bottom:8px!important;align-items:center!important;gap:20px!important}.shop-page-head h1{font-size:clamp(27px,3vw,38px)!important;line-height:1.18!important;font-weight:700!important;margin:8px 0 12px!important}.shop-page-head .eyebrow{font-size:11px!important}.shop-count-line small{font-size:14px!important;font-weight:400!important;line-height:1.5!important}.shop-products-layout{padding-bottom:40px}
.temu-cat-card,.temu-cat-card:hover,.temu-cat-card:focus-visible{background:transparent!important;box-shadow:none!important;border-color:transparent!important;transform:none!important}.temu-cat-card img{transition:transform .2s ease!important}.temu-cat-card:hover img{transform:translateY(-3px) scale(1.025)!important}.temu-cat-card b{font-size:14px!important;font-weight:600!important}
.header>.wrap.row{display:grid!important;grid-template-columns:auto minmax(260px,1fr) auto!important;align-items:center!important;gap:24px!important;position:relative;max-width:1440px!important}.header .image-logo{grid-column:auto!important}.header .searchbar.premium-search{display:flex!important;align-items:center!important;position:relative!important;width:100%!important;max-width:none!important;min-width:0!important;height:46px!important;border:1px solid var(--line)!important;border-radius:24px!important;background:var(--surface-muted)!important;padding:4px!important;box-shadow:none!important;margin:0!important}.header .searchbar input{display:block!important;flex:1!important;width:0!important;min-width:0!important;height:36px!important;background:transparent!important;border:0!important;padding:0 14px!important;font-size:14px!important;box-shadow:none!important}.header .searchbar>button{flex-shrink:0;height:36px!important;min-height:36px!important;padding:0 22px!important;border:0!important;border-radius:22px!important;background:#17212b!important;color:#fff!important;font-size:13px!important}.header .search-ic{display:none!important}.header .head-actions{display:flex!important;gap:8px!important}.header .mobile-search-btn{display:none!important}.search-panel{top:calc(100% + 10px)!important;width:100%!important}
.store-nav-strip{background:var(--surface,#fff);border-bottom:1px solid var(--line,#e2e8f0);position:relative;z-index:90;height:38px;min-height:38px}
.store-nav-strip>.wrap{display:flex;align-items:center;height:100%;position:relative;max-width:1440px;margin:0 auto;padding:0 24px}
.store-nav-strip .catalog-nav{display:flex!important;align-items:center;justify-content:flex-start;gap:4px 18px;width:100%;height:100%;margin:0!important;padding:0!important;list-style:none;overflow-x:auto;scrollbar-width:none}
.store-nav-strip .catalog-nav::-webkit-scrollbar{display:none}
.store-nav-strip .catalog-menu{position:static;flex-shrink:0;display:flex;align-items:center;height:100%}
.store-nav-strip .catalog-trigger{display:inline-flex;align-items:center;gap:4px;height:38px;line-height:38px;padding:0 6px;border:0;background:transparent;color:var(--text,#17212b);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .15s ease}
.store-nav-strip .catalog-trigger:hover,.store-nav-strip .catalog-trigger[aria-expanded=true]{color:var(--orange,#ff5a1f)}
.store-nav-strip .catalog-trigger svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s ease}
.store-nav-strip .catalog-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
@media(min-width:981px){
    .store-nav-strip .catalog-dropdown{
        display: none !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        z-index: 8000 !important;
        max-width: 1400px !important;
        margin-inline: auto !important;
        background: var(--surface, #ffffff) !important;
        color: var(--text, #0f172a) !important;
        border: 1px solid var(--line, #e2e8f0) !important;
        border-top: 3px solid var(--orange, #ff5a1f) !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
        padding: 26px 30px !important;
        grid-template-columns: 220px minmax(0, 1fr) 240px !important;
        gap: 28px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }
    .store-nav-strip .catalog-dropdown:not(:has(.catalog-menu-feature)){
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }
    .store-nav-strip .catalog-dropdown::before{
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }
    .store-nav-strip .catalog-menu:hover > .catalog-dropdown,
    .store-nav-strip .catalog-menu.is-active > .catalog-dropdown,
    .store-nav-strip .catalog-dropdown:hover,
    .store-nav-strip .catalog-trigger[aria-expanded="true"] + .catalog-dropdown{
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: megaDropdownFadeIn .22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

@keyframes megaDropdownFadeIn{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
}

/* 1. Left Intro Panel */
.catalog-menu-intro{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-right: 22px !important;
    border-right: 1px solid var(--line, #e2e8f0) !important;
}
.catalog-menu-intro .eyebrow{
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--orange, #ff5a1f) !important;
    margin-bottom: 6px !important;
}
.catalog-menu-intro h2{
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--text, #0f172a) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.02em !important;
}
.catalog-menu-intro p{
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--text-muted, #64748b) !important;
    margin: 0 0 16px !important;
}
.catalog-menu-intro .catalog-all-link{
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--orange, #ff5a1f) !important;
    padding: 8px 16px !important;
    background: rgba(255, 90, 31, 0.08) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    width: fit-content !important;
    margin-top: auto !important;
    transition: all .18s ease !important;
}
.catalog-menu-intro .catalog-all-link:hover{
    background: var(--orange, #ff5a1f) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* 2. Middle Multi-Column Category Grid */
.catalog-menu-group-grid{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
    gap: 22px 26px !important;
    align-content: start !important;
    max-height: 440px !important;
    overflow-y: auto !important;
    padding-right: 12px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--line, #cbd5e1) transparent !important;
}
.catalog-menu-group-grid::-webkit-scrollbar{
    width: 4px;
}
.catalog-menu-group-grid::-webkit-scrollbar-thumb{
    background: var(--line, #cbd5e1);
    border-radius: 4px;
}

/* Category Columns */
.catalog-menu-column{
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.catalog-menu-column h3{
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text, #0f172a) !important;
    margin: 0 0 9px !important;
    padding-bottom: 6px !important;
    border-bottom: 1.5px solid var(--line, #e2e8f0) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.catalog-menu-column h3 a{
    color: inherit !important;
    text-decoration: none !important;
    transition: color .15s ease !important;
}
.catalog-menu-column h3 a:hover{
    color: var(--orange, #ff5a1f) !important;
}

/* Column Links */
.catalog-column-links{
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}
.catalog-menu-column a.menu-item-link{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    padding: 3.5px 0 !important;
    text-decoration: none !important;
    transition: all .16s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.catalog-menu-column a.menu-item-link:hover{
    color: var(--orange, #ff5a1f) !important;
    transform: translateX(4px) !important;
    font-weight: 500 !important;
}
.catalog-menu-column a.menu-view-all{
    color: var(--orange, #ff5a1f) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
    padding-top: 3px !important;
    white-space: nowrap !important;
}
.catalog-menu-column a.menu-view-all:hover{
    text-decoration: underline !important;
    transform: translateX(3px) !important;
}

/* 3. Right Feature Card */
.catalog-menu-feature{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    min-height: 280px !important;
    max-height: 440px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
    isolation: isolate !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.catalog-menu-feature .feature-bg-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.catalog-menu-feature:hover .feature-bg-img{
    transform: scale(1.06) !important;
}
.catalog-menu-feature .feature-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    z-index: 2 !important;
}
.catalog-menu-feature .feature-badge{
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
.catalog-menu-feature .feature-title{
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}
.catalog-menu-feature .feature-cta{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20) !important;
    transition: background .2s, color .2s !important;
}
.catalog-menu-feature:hover .feature-cta{
    background: var(--orange, #ff5a1f) !important;
    color: #ffffff !important;
}

/* Dark Mode Optimization for Mega Menu */
html[data-theme=dark] .store-nav-strip .catalog-dropdown{
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    border-top-color: var(--orange, #ff5a1f) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
}
html[data-theme=dark] .catalog-menu-intro{
    border-right-color: #334155 !important;
}
html[data-theme=dark] .catalog-menu-intro h2{
    color: #f8fafc !important;
}
html[data-theme=dark] .catalog-menu-intro p{
    color: #94a3b8 !important;
}
html[data-theme=dark] .catalog-menu-column h3{
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
html[data-theme=dark] .catalog-menu-column a.menu-item-link{
    color: #cbd5e1 !important;
}
html[data-theme=dark] .catalog-menu-column a.menu-item-link:hover{
    color: #fdba74 !important;
}
html[data-theme=dark] .catalog-menu-group-grid{
    scrollbar-color: #334155 transparent !important;
}
html[data-theme=dark] .catalog-menu-group-grid::-webkit-scrollbar-thumb{
    background: #334155 !important;
}

@media(max-width:980px){.store-nav-strip{height:0!important;min-height:0!important;border:none!important;padding:0!important;margin:0!important;overflow:visible!important}.store-nav-strip>.wrap{height:0!important;padding:0!important}}

/* Categories - Perfect Circles & Spanning Full Page Container */
.temu-cat-rail{
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
    gap: 16px !important;
    padding: 8px 0 16px !important;
    margin: 0 !important;
}
.temu-cat-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 100% !important;
    max-width: 140px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform .25s ease !important;
}
.temu-cat-card:hover{
    transform: translateY(-4px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.temu-cat-circle-wrap{
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    padding: 0 !important;
    margin: 0 auto 12px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.temu-cat-card:hover .temu-cat-circle-wrap{
    transform: scale(1.05) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.15) !important;
    border-color: var(--orange, #ff5a1f) !important;
}
.studio-category-image,
.temu-cat-circle-wrap img{
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform .3s ease !important;
}
.temu-cat-card:hover .studio-category-image{
    transform: scale(1.1) !important;
}
.temu-cat-name{
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--text, #17212b) !important;
    text-align: center !important;
    line-height: 1.25 !important;
    max-width: 130px !important;
    margin: 0 auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    transition: color .15s ease !important;
}
.temu-cat-card:hover .temu-cat-name{
    color: var(--orange, #ff5a1f) !important;
}

/* Mobile & Tablet: Smooth horizontal scrub with hidden scrollbars */
@media(max-width: 900px){
    .temu-cat-rail{
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 6px 16px 18px !important;
        margin: 0 -16px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .temu-cat-rail::-webkit-scrollbar{
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .temu-cat-card{
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        scroll-snap-align: start !important;
    }
    .temu-cat-circle-wrap{
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        margin-bottom: 8px !important;
        border-width: 2.5px !important;
    }
    .temu-cat-name{
        font-size: 11.5px !important;
        max-width: 90px !important;
        line-height: 1.2 !important;
    }
}

/* Full Width Promotional Gif Banner: Contained Aspect Ratio + Blurred Ambient Background */
/* Full Width Promotional Gif Banner: Contained Aspect Ratio + Blurred Ambient Background (Flush Square) */
.studio-promo-full-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 380px !important;
    max-height: 480px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #e05307 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    line-height: 0 !important;
    isolation: isolate !important;
    text-decoration: none !important;
}
.studio-promo-full-banner:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 42px rgba(224, 83, 7, 0.28) !important;
}
.promo-blur-bg {
    position: absolute !important;
    inset: -40px !important;
    width: calc(100% + 80px) !important;
    height: calc(100% + 80px) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(34px) saturate(1.45) brightness(0.70) !important;
    transform: scale(1.15) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 0 !important;
}
.promo-fg-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
}
.studio-promo-full-gif {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 440px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28)) !important;
    transition: transform .3s ease !important;
}
.studio-promo-full-banner:hover .studio-promo-full-gif {
    transform: scale(1.02) !important;
}
@media (max-width: 768px) {
    .studio-promo-full-banner {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    .studio-promo-full-gif {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
}
@media (max-width: 480px) {
    .studio-promo-full-banner {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }
    .studio-promo-full-gif {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
}

/* Product Card Thumbnails: Universal Zero Empty Space + Ambient Saturated Blur Canvas */
html body :is(.product-card, .shop-product-grid .product-card, .grid-4 .product-card, .grid-3 .product-card, .wishlist-grid .product-card, [data-lazy-items*="product-card"]) .thumb {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b0f19 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    isolation: isolate !important;
}
html body :is(.product-card, .shop-product-grid .product-card, .grid-4 .product-card, .grid-3 .product-card, .wishlist-grid .product-card, [data-lazy-items*="product-card"]) .thumb-blur-bg {
    position: absolute !important;
    inset: -35px !important;
    width: calc(100% + 70px) !important;
    height: calc(100% + 70px) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(24px) saturate(1.85) brightness(0.82) !important;
    opacity: 1 !important;
    transform: scale(1.3) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
html body :is(.product-card, .shop-product-grid .product-card, .grid-4 .product-card, .grid-3 .product-card, .wishlist-grid .product-card, [data-lazy-items*="product-card"]) .thumb-fg-img,
html body :is(.product-card, .shop-product-grid .product-card, .grid-4 .product-card, .grid-3 .product-card, .wishlist-grid .product-card, [data-lazy-items*="product-card"]) .thumb img {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28)) !important;
    transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body :is(.product-card, .shop-product-grid .product-card, .grid-4 .product-card, .grid-3 .product-card, .wishlist-grid .product-card, [data-lazy-items*="product-card"]):hover .thumb-fg-img {
    transform: scale(1.045) !important;
}
.verified-dot{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:#0284c7;color:#fff;margin-left:4px;vertical-align:middle;font-style:normal}
.verified-dot::after{content:'✓';font-size:9px;font-weight:900;line-height:1}

/* Hero Banner: Contained Aspect Ratio + Still/Blurred Ambient Background */
.home-hero-shell {
    padding: 22px 0 0 !important;
}
.home-hero-shell .hero-slider.image-hero {
    position: relative !important;
    height: 500px !important;
    min-height: 480px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b0f19 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.home-hero-shell .image-hero .hero-slide {
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.home-hero-shell .image-hero .hero-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.home-hero-shell .image-hero .hero-blur-bg {
    position: absolute !important;
    inset: -40px !important;
    width: calc(100% + 80px) !important;
    height: calc(100% + 80px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(34px) brightness(0.60) saturate(1.35) !important;
    transform: scale(1.15) !important;
    border-radius: 0 !important;
}
.home-hero-shell .image-hero .hero-blur-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: blur(34px) brightness(0.60) saturate(1.35) !important;
    transform: scale(1.15) !important;
    pointer-events: none !important;
    border-radius: 0 !important;
}
.home-hero-shell .image-hero .hero-fg-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    border-radius: 0 !important;
}
.home-hero-shell .image-hero .hero-fg-media {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: auto !important;
    filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.40)) !important;
    border-radius: 0 !important;
}
.home-hero-shell .image-hero .hero-cover {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    border-radius: 0 !important;
}
.hero-glass {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    width: min(440px, 46%);
    padding: 28px 30px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #17212b;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    z-index: 10;
}
html[data-theme=dark] .hero-glass {
    background: rgba(15, 23, 42, 0.84);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
html[data-theme=dark] .home-hero-shell .image-hero .hero-glass h1 {
    color: #ffffff !important;
}
html[data-theme=dark] .home-hero-shell .image-hero .hero-glass p {
    color: #cbd5e1 !important;
}
html[data-theme=dark] .hero-glass .eyebrow {
    color: #fdba74 !important;
}
.home-hero-shell .image-hero .hero-glass h1 {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.12 !important;
    color: #17212b !important;
    margin: 12px 0 16px !important;
    letter-spacing: -.025em;
}
.home-hero-shell .image-hero .hero-glass p {
    font-size: 15px !important;
    line-height: 1.6;
    color: #394654 !important;
    margin: 0 0 22px;
    max-width: none;
}
.hero-glass .eyebrow {
    font-size: 10px !important;
    color: #79552b !important;
}
.hero-glass .hero-actions {
    display: flex;
    gap: 10px;
    margin: 0 !important;
    flex-wrap: wrap;
}
.hero-glass .btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-hero-shell .image-hero .slide-nav {
    top: auto !important;
    bottom: 20px !important;
    width: 36px !important;
    height: 36px !important;
    transform: none !important;
    box-shadow: none !important;
    background: #ffffffdd !important;
    color: #17212b !important;
    z-index: 5;
}
.home-hero-shell .image-hero .slide-nav.prev {
    left: auto !important;
    right: 66px !important;
}
.home-hero-shell .image-hero .slide-nav.next {
    right: 20px !important;
}
.seasonal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.seasonal-card{position:relative;display:flex;min-height:190px;overflow:hidden;border-radius:14px;padding:24px;text-decoration:none;background:var(--seasonal-bg,#e8ddcb);color:#17212b!important;isolation:isolate;transition:transform .2s ease}.seasonal-card:hover{transform:translateY(-3px)}.seasonal-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.seasonal-card.has-photo:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#ffffffed,#ffffff33)}.seasonal-card>div{display:flex;flex-direction:column;align-items:flex-start;max-width:80%;gap:10px}.seasonal-card small{font-size:10px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}.seasonal-card h3{font-size:23px!important;line-height:1.15!important;margin:0!important;font-weight:600!important}.seasonal-card span{font-size:12px;font-weight:600;margin-top:auto;padding-top:14px}.seasonal-card:before{content:'';position:absolute;right:-35px;bottom:-45px;width:160px;height:160px;border:28px solid #ffffff40;border-radius:50%;z-index:-1}
@media(max-width:1100px){.header>.wrap.row{gap:12px!important}.header .catalog-trigger{padding:14px 6px}.seasonal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Universal flush square hero & promo banners across desktop and mobile - zero curves */
html body :is(
    .home-hero-shell,
    .home-hero-shell .wrap,
    .home-hero-shell .hero-slider,
    .hero-slider.image-hero,
    .hero-slider.premium-hero,
    .hero-slider,
    .hero-slide,
    .hero-blur-bg,
    .hero-blur-media,
    .hero-fg-wrap,
    .hero-fg-media,
    .hero-cover,
    .hero-glass,
    .hero-art,
    .studio-promo-full-banner,
    .promo-blur-bg,
    .promo-fg-wrap,
    .studio-promo-full-gif,
    .studio-promotion,
    .studio-promotion img,
    .asos-billboard-banner,
    .asos-billboard-card,
    .asos-billboard-bg,
    .asos-half-banner,
    .asos-half-banner img
) {
    border-radius: 0 !important;
}

@media (min-width: 981px) {
    .mobile-menu-drawer,
    .mobile-nav-overlay {
        display: none !important;
    }
    .home-hero-shell {
        padding: 0 !important;
        margin: 0 !important;
    }
    .home-hero-shell > .wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .home-hero-shell .hero-slider.image-hero {
        border-radius: 0 !important;
    }
}

@media (max-width: 980px) {
    .header > .wrap.row {
        display: grid !important;
        grid-template-columns: 36px 1fr auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .header .mobile-menu-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        background: transparent !important;
        border: 0 !important;
        padding: 6px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        color: var(--text, #0f172a) !important;
        z-index: 10 !important;
    }
    .header .mobile-menu-btn span {
        display: block !important;
        width: 22px !important;
        height: 2.2px !important;
        background: currentColor !important;
        border-radius: 2px !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }
    .header .image-logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .header .head-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        gap: 6px !important;
    }
    .header .searchbar.premium-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        height: 44px !important;
    }

    /* Hide the desktop category bar on mobile to avoid double nav */
    .store-nav-strip {
        display: none !important;
    }

    body.menu-open .header {
        z-index: 2000 !important;
    }

    /* Mobile Backdrop Overlay - "Curtain" */
    .mobile-nav-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483640 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }
    .mobile-nav-overlay.open,
    body.menu-open .mobile-nav-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Off-Canvas Mobile Drawer - HIGHEST Z-INDEX (2147483647) - above curtain and header */
    .mobile-menu-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(350px, 86vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background: #ffffff !important;
        color: #0f172a !important;
        z-index: 2147483647 !important;
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        transform: translateX(-105%) !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease !important;
        border-right: 1px solid #e2e8f0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .mobile-menu-drawer.open,
    body.menu-open .mobile-menu-drawer {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Drawer Top Header */
    .mobile-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }
    .mobile-drawer-logo {
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    .mobile-drawer-logo img,
    .mobile-drawer-logo svg {
        max-height: 26px !important;
        width: auto !important;
    }
    .mobile-drawer-close {
        display: inline-grid !important;
        place-items: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .mobile-drawer-close:hover {
        background: #f1f5f9 !important;
        color: var(--orange, #ff5a1f) !important;
    }

    /* Drawer Search Shortcut */
    .mobile-drawer-search {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }
    .mobile-drawer-search-form {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 40px !important;
    }
    .mobile-drawer-search-form input {
        width: 100% !important;
        height: 100% !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0 38px 0 12px !important;
        font-size: 13.5px !important;
        color: #0f172a !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .mobile-drawer-search-form input:focus {
        border-color: var(--orange, #ff5a1f) !important;
        background: #ffffff !important;
    }
    .mobile-drawer-search-form button {
        position: absolute !important;
        right: 4px !important;
        top: 4px !important;
        bottom: 4px !important;
        width: 32px !important;
        display: grid !important;
        place-items: center !important;
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    /* Drawer Scrollable Body */
    .mobile-drawer-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px 20px !important;
    }
    .mobile-drawer-section-title {
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: #94a3b8 !important;
        padding: 4px 10px 8px !important;
    }
    .mobile-drawer-menus {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    .mobile-menu-item {
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    .mobile-menu-trigger {
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;
        padding: 10px 12px !important;
        border: none !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #0f172a !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .mobile-menu-trigger:hover,
    .mobile-menu-trigger:active {
        background: #f1f5f9 !important;
    }
    .mobile-menu-item.is-open > .mobile-menu-trigger {
        background: rgba(255, 90, 31, 0.08) !important;
        color: var(--orange, #ff5a1f) !important;
    }
    .mobile-chevron-ic {
        width: 14px !important;
        height: 14px !important;
        stroke: currentColor !important;
        fill: none !important;
        stroke-width: 2 !important;
        transition: transform 0.22s ease !important;
        flex-shrink: 0 !important;
    }
    .mobile-menu-item.is-open .mobile-chevron-ic {
        transform: rotate(180deg) !important;
    }
    .mobile-menu-trigger.direct-link {
        color: var(--orange, #ff5a1f) !important;
        font-weight: 700 !important;
    }

    /* Accordion Content */
    .mobile-accordion-content {
        padding: 4px 6px 10px 14px !important;
        border-left: 2px solid var(--orange, #ff5a1f) !important;
        margin: 4px 4px 8px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .mobile-accordion-content[hidden] {
        display: none !important;
    }
    .mobile-sublink-all {
        font-weight: 700 !important;
        color: var(--orange, #ff5a1f) !important;
        font-size: 13px !important;
        padding: 6px 8px !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        display: block !important;
    }
    .mobile-sublink-all:hover {
        background: rgba(255, 90, 31, 0.08) !important;
    }
    .mobile-group-block {
        margin-top: 6px !important;
    }
    .mobile-group-header {
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: #64748b !important;
        padding: 3px 8px !important;
    }
    .mobile-group-header a {
        color: inherit !important;
        text-decoration: none !important;
    }
    .mobile-group-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        margin-top: 2px !important;
    }
    .mobile-sublink {
        font-size: 13px !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-decoration: none !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .mobile-sublink:hover {
        background: #f1f5f9 !important;
        color: var(--orange, #ff5a1f) !important;
    }
    .mobile-sublink.is-view-all {
        font-weight: 700 !important;
        color: var(--orange, #ff5a1f) !important;
        font-size: 12.5px !important;
    }
    .mobile-badge {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        padding: 1px 6px !important;
        border-radius: 999px !important;
        background: rgba(255, 90, 31, 0.12) !important;
        color: var(--orange, #ff5a1f) !important;
    }

    /* Drawer Bottom Footer */
    .mobile-drawer-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        flex-shrink: 0 !important;
    }
    .mobile-footer-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .mobile-footer-link:hover {
        background: #e2e8f0 !important;
        color: var(--orange, #ff5a1f) !important;
    }
    .mobile-sell-link {
        color: var(--orange, #ff5a1f) !important;
        font-weight: 700 !important;
    }

    /* Dark Mode Drawer Styles */
    html[data-theme=dark] .mobile-menu-drawer {
        background: #0f172a !important;
        color: #f8fafc !important;
        border-color: #1e293b !important;
    }
    html[data-theme=dark] .mobile-drawer-header {
        background: #0f172a !important;
        border-color: #1e293b !important;
    }
    html[data-theme=dark] .mobile-drawer-close {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }
    html[data-theme=dark] .mobile-drawer-search {
        background: #0f172a !important;
        border-color: #1e293b !important;
    }
    html[data-theme=dark] .mobile-drawer-search-form input {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }
    html[data-theme=dark] .mobile-drawer-section-title {
        color: #64748b !important;
    }
    html[data-theme=dark] .mobile-menu-trigger {
        color: #f1f5f9 !important;
    }
    html[data-theme=dark] .mobile-menu-trigger:hover,
    html[data-theme=dark] .mobile-menu-trigger:active {
        background: #1e293b !important;
    }
    html[data-theme=dark] .mobile-menu-item.is-open > .mobile-menu-trigger {
        background: rgba(255, 90, 31, 0.18) !important;
        color: var(--orange, #ff5a1f) !important;
    }
    html[data-theme=dark] .mobile-group-header {
        color: #94a3b8 !important;
    }
    html[data-theme=dark] .mobile-sublink {
        color: #cbd5e1 !important;
    }
    html[data-theme=dark] .mobile-sublink:hover {
        background: #1e293b !important;
        color: var(--orange, #ff5a1f) !important;
    }
    html[data-theme=dark] .mobile-drawer-footer {
        background: #0b1120 !important;
        border-color: #1e293b !important;
    }
    html[data-theme=dark] .mobile-footer-link {
        color: #94a3b8 !important;
    }
    html[data-theme=dark] .mobile-footer-link:hover {
        background: #1e293b !important;
        color: var(--orange, #ff5a1f) !important;
    }

    .header .searchbar.mobile-open {
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
    .header .search-panel {
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    /* Hero Banner: Flush Square, Zero Curves, Close Up Height on Mobile */
    .home-hero-shell {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .home-hero-shell > .wrap {
        padding: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .home-hero-shell .hero-slider.image-hero,
    .home-hero-shell .image-hero .hero-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
    }
    .home-hero-shell .image-hero .hero-blur-bg,
    .home-hero-shell .image-hero .hero-blur-media {
        border-radius: 0 !important;
    }
    .home-hero-shell .image-hero .hero-fg-wrap,
    .home-hero-shell .image-hero .hero-fg-media {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
    .home-hero-shell .image-hero .hero-glass {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        padding: 6px 12px !important;
        border-radius: 0 !important;
        background: rgba(15, 23, 42, 0.78) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    .home-hero-shell .image-hero .hero-glass h1 {
        font-size: 14px !important;
        margin: 0 !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }
    .home-hero-shell .image-hero .hero-glass p {
        font-size: 10.5px !important;
        margin: 0 0 4px !important;
        color: #cbd5e1 !important;
        line-height: 1.25 !important;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-glass .eyebrow {
        font-size: 8px !important;
        color: #fdba74 !important;
        margin: 0 !important;
        letter-spacing: 0.06em;
    }
    .hero-glass .hero-actions {
        display: flex !important;
        gap: 6px !important;
    }
    .hero-glass .btn {
        height: 26px !important;
        min-height: 26px !important;
        font-size: 10.5px !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
    }
    .home-hero-shell .image-hero .slide-nav {
        display: none !important;
    }

    /* Mid-Homepage Banner: Close Up Height on Mobile - 100% Flush Square */
    .studio-promo-full-banner {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    .promo-blur-bg,
    .promo-fg-wrap,
    .studio-promo-full-gif {
        border-radius: 0 !important;
    }
    .studio-promo-full-gif {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .seller-card-footer { flex-wrap: wrap !important; }
    .seller-directory-card-v3 .seller-card-footer :is(button.btn, a.btn) { padding: 0 15px !important; height: 40px !important; min-height: 40px !important; }
    .seller-panel-container { padding-top: 24px !important; }
    .seller-search-toolbar { padding: 16px !important; margin-bottom: 22px !important; }
    .seller-directory-grid { gap: 20px !important; }
    .shop-page-head h1 { font-size: 28px !important; }
    .shop-page-head { padding-top: 24px !important; }
    .seasonal-grid { gap: 12px; }
    .seasonal-card { padding: 18px; min-height: 180px; }
    .seasonal-card h3 { font-size: 21px !important; }
    .seasonal-card > div { max-width: 100%; }
    .studio-home-section { margin-block: 24px !important; }
    main .section-head { margin-bottom: 16px !important; }
    .header .head-actions :is(.icon-link, .notification-btn, .cart-icon-link, .user-menu-btn) { width: 30px !important; min-width: 30px !important; }
}

/* ==========================================================================
   SLEEK & INTUITIVE SHOP CATEGORY NAVIGATOR, STICKY SIDEBAR & SORT SELECT
   Light mode default, mobile-compact, dark-mode optimized.
   ========================================================================== */

/* Page Header: Meta on left, Sort Dropdown & Filters on extreme right */
html body .shop-page-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
    margin-bottom: 8px !important;
}

.shop-head-meta {
    flex: 1 1 auto !important;
    min-width: 240px !important;
}

.shop-head-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Hide mobile-specific buttons on desktop */
.shop-filter-btn {
    display: none !important;
}

.shop-sort-mobile-icon {
    display: none !important;
}

.filter-sheet-drag-handle {
    display: none !important;
}

.filter-fab,
.filter-icon-mini {
    display: none !important;
}

/* Sort By Select Box */
.shop-sort-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.shop-sort-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--slate, #667085) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.shop-sort-select-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.shop-sort-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 185px !important;
    padding: 0 36px 0 14px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #ffffff !important;
    color: var(--ink, #15171f) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06) !important;
    transition: box-shadow 0.15s ease, background 0.15s ease !important;
}

.shop-sort-select:hover {
    border: none !important;
    box-shadow: 0 3px 12px rgba(16, 24, 40, 0.1) !important;
}

.shop-sort-select:focus,
.shop-sort-select:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 2px var(--orange, #ff5a1f), 0 3px 12px rgba(16, 24, 40, 0.1) !important;
}

.shop-sort-arrow {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: var(--slate, #667085) !important;
    transition: transform 0.15s ease !important;
}

.shop-sort-select-wrap:focus-within .shop-sort-arrow {
    color: var(--orange, #ff5a1f) !important;
}

/* Left Hand Panel: Generous Container Padding & Smooth Elevation (No Border Lines) */
html body .panel.shop-filter,
html body .shop-filter.filter-sheet {
    padding: 24px 20px 24px 20px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 270px !important;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.02) !important;
}

html body .panel.shop-filter .filter-sheet-head {
    margin-bottom: 12px;
}

html body .panel.shop-filter .filter-form {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Sticky Left Panel with Scroll Stop */
@media (min-width: 761px) {
    html body .shop-products-layout {
        display: grid !important;
        grid-template-columns: 270px minmax(0, 1fr) !important;
        gap: 32px !important;
        align-items: start !important;
    }

    html body .shop-filter.filter-sheet {
        position: sticky !important;
        top: 86px !important;
        max-height: calc(100vh - 104px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important; /* Scroll Stop */
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
        z-index: 30 !important;
        box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.02) !important;
    }

    html body .shop-filter.filter-sheet::-webkit-scrollbar {
        width: 4px !important;
    }

    html body .shop-filter.filter-sheet::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15) !important;
        border-radius: 4px !important;
    }
}

/* Category Filter Box - Clean Internal Spacing, No Borders */
.shop-cat-box {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
}

.shop-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px !important;
    padding: 0 2px !important;
}

.shop-cat-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink, #15171f);
    margin: 0 !important;
    line-height: 1.2;
}

.shop-cat-reset {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--orange, #ff5a1f);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 90, 31, 0.08);
    transition: all 0.15s ease;
}

.shop-cat-reset:hover {
    background: var(--orange, #ff5a1f);
    color: #fff !important;
}

/* Realtime Category Search Input - Borderless with Soft Tint */
.shop-cat-search {
    position: relative;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.shop-cat-search-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--slate, #667085);
    pointer-events: none;
}

.shop-cat-search-input {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 32px 0 34px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #f1f3f6 !important;
    font-size: 13px !important;
    color: var(--ink, #15171f) !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.shop-cat-search-input:focus {
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px var(--orange, #ff5a1f) !important;
}

.shop-cat-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--slate, #667085);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.12s ease, color 0.12s ease;
}

.shop-cat-search-clear:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--ink, #15171f);
}

/* Category List & Search Results Scroll Container (Fits to Page) */
.shop-cat-list,
.shop-cat-search-list {
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.shop-cat-list::-webkit-scrollbar,
.shop-cat-search-list::-webkit-scrollbar {
    width: 4px;
}

.shop-cat-list::-webkit-scrollbar-thumb,
.shop-cat-search-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}

/* Category Tree Nodes & Rows */
.shop-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-radius: 6px;
    transition: background 0.12s ease;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.shop-cat-row:hover {
    background: rgba(0, 0, 0, 0.035);
}

.shop-cat-row.active {
    background: rgba(255, 90, 31, 0.08);
}

.shop-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--ink, #15171f);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.12s ease;
    box-sizing: border-box;
}

.shop-cat-item:hover {
    color: var(--orange, #ff5a1f);
}

.shop-cat-item.active {
    color: var(--orange-dark, #ff5a1f) !important;
    font-weight: 700 !important;
}

.shop-cat-item.root-all {
    font-weight: 600;
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 8px;
    margin-bottom: 6px;
}

.shop-cat-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-cat-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--slate, #667085);
    margin-left: 6px;
}

.shop-cat-check {
    font-size: 12px;
    color: var(--orange, #ff5a1f);
    font-weight: 700;
}

/* Expand / Collapse Chevron Button */
.shop-cat-chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate, #667085);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-cat-chevron:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--ink, #15171f);
}

.shop-cat-chevron.open {
    transform: rotate(90deg);
    color: var(--orange, #ff5a1f);
}

.shop-cat-chevron.mini {
    width: 24px;
    height: 24px;
}

/* Child & Grandchild indentations - Clean indent without border lines */
.shop-cat-children {
    margin-left: 10px;
    padding-left: 10px;
    border-left: none !important;
    margin-top: 1px;
    margin-bottom: 4px;
}

.shop-cat-grandchildren {
    margin-left: 8px;
    padding-left: 10px;
    border-left: none !important;
    margin-top: 1px;
    margin-bottom: 2px;
}

.shop-cat-item.sub-item {
    font-size: 12.5px;
    padding: 5px 6px;
    min-height: 30px;
    color: #334155;
}

.shop-cat-item.leaf-item {
    font-size: 12px;
    padding: 4px 6px;
    min-height: 28px;
    color: #475569;
    display: block;
    border-radius: 4px;
}

.shop-cat-item.leaf-item:hover {
    background: rgba(0, 0, 0, 0.035);
    color: var(--orange, #ff5a1f);
}

.shop-cat-item.leaf-item.active {
    background: rgba(255, 90, 31, 0.1);
    color: var(--orange-dark, #ff5a1f);
    font-weight: 700;
}

/* Breadcrumb Bar when category is drilled down */
.shop-cat-crumb-bar {
    background: #f1f3f6 !important;
    border: none !important;
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.shop-cat-crumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--orange, #ff5a1f);
    text-decoration: none;
    margin-bottom: 5px;
    transition: opacity 0.12s ease;
}

.shop-cat-crumb-btn:hover {
    opacity: 0.82;
    text-decoration: underline;
}

.shop-cat-active-node {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.shop-cat-active-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink, #15171f);
}

.shop-cat-active-trail {
    font-size: 11px;
    color: var(--slate, #667085);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-cat-sub-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate, #667085);
    margin: 10px 0 6px 4px;
}

.shop-cat-sub-list {
    margin-bottom: 10px;
}

.shop-cat-tree-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--slate, #667085);
    cursor: pointer;
    transition: all 0.15s ease;
}

.shop-cat-tree-toggle:hover {
    border: none !important;
    color: var(--orange, #ff5a1f);
    background: rgba(255, 90, 31, 0.08) !important;
}

/* Real-time Search Result Items */
.shop-cat-search-item {
    display: block;
    padding: 7px 9px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.12s ease;
    margin-bottom: 2px;
}

.shop-cat-search-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.shop-cat-search-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #15171f);
}

.shop-cat-search-path {
    display: block;
    font-size: 11px;
    color: var(--slate, #667085);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-cat-no-results {
    padding: 18px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--slate, #667085);
}

.cat-highlight {
    background: rgba(255, 90, 31, 0.2);
    color: var(--orange-dark, #ff5a1f);
    font-weight: 700;
    border-radius: 2px;
    padding: 0 2px;
}

/* Filter Boxes (Color, Size) - Completely borderless */
html body .filter-sheet .filter-box,
html body .shop-filter .filter-box,
html body .filter-box {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 16px 0 0 0 !important;
    margin: 16px 0 0 0 !important;
    box-sizing: border-box !important;
}

html body .filter-sheet .filter-box:first-of-type,
html body .shop-filter .filter-box:first-of-type,
html body .shop-filter .shop-cat-box,
html body .shop-cat-box {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.shop-filter .filter-box h3 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink, #15171f);
    margin: 0 0 12px 0 !important;
}

.shop-filter .filter-box label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    font-size: 13px !important;
    color: var(--ink, #15171f) !important;
    cursor: pointer !important;
}

/* Realtime AJAX Loading Transition */
#shop-products-region.is-filtering {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.shop-cat-box.is-loading .shop-cat-header::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 90, 31, 0.2);
    border-top-color: var(--orange, #ff5a1f);
    border-radius: 50%;
    animation: shop-cat-spin 0.6s linear infinite;
    margin-left: 8px;
}

@keyframes shop-cat-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   DARK MODE OPTIMIZATION (html[data-theme=dark])
   ========================================================================== */
html[data-theme=dark] .shop-sort-label {
    color: #94a3b8 !important;
}

html[data-theme=dark] .shop-sort-select {
    background: #1e2130 !important;
    border: none !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme=dark] .shop-sort-select:hover,
html[data-theme=dark] .shop-sort-select:focus {
    border: none !important;
    box-shadow: 0 0 0 2px rgba(255, 140, 90, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme=dark] .shop-sort-arrow {
    color: #94a3b8 !important;
}

html[data-theme=dark] .panel.shop-filter,
html[data-theme=dark] .shop-filter.filter-sheet {
    background: #14161f !important;
    border: none !important;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme=dark] .shop-cat-box {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
}

html[data-theme=dark] .filter-sheet .filter-box,
html[data-theme=dark] .shop-filter .filter-box,
html[data-theme=dark] .filter-box {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme=dark] .shop-filter .filter-box h3 {
    color: #f1f5f9 !important;
}

html[data-theme=dark] .shop-filter .filter-box label {
    color: #cbd5e1 !important;
}

html[data-theme=dark] .shop-cat-title {
    color: #f1f5f9 !important;
}

html[data-theme=dark] .shop-cat-reset {
    background: rgba(255, 90, 31, 0.18);
    color: #ff8c5a;
}

html[data-theme=dark] .shop-cat-search-input {
    background: #1e2130 !important;
    border: none !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

html[data-theme=dark] .shop-cat-search-input:focus {
    border: none !important;
    background: #232738 !important;
    box-shadow: 0 0 0 2px rgba(255, 140, 90, 0.4) !important;
}

html[data-theme=dark] .shop-cat-search-clear {
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

html[data-theme=dark] .shop-cat-list,
html[data-theme=dark] .shop-cat-search-list {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html[data-theme=dark] .shop-cat-list::-webkit-scrollbar-thumb,
html[data-theme=dark] .shop-cat-search-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

html[data-theme=dark] .shop-cat-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme=dark] .shop-cat-row.active {
    background: rgba(255, 90, 31, 0.16);
}

html[data-theme=dark] .shop-cat-item {
    color: #e2e8f0;
}

html[data-theme=dark] .shop-cat-item:hover {
    color: #ff8c5a;
}

html[data-theme=dark] .shop-cat-item.active {
    color: #ff9d73 !important;
}

html[data-theme=dark] .shop-cat-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-item.root-all {
    border: none !important;
    border-bottom: none !important;
}

html[data-theme=dark] .shop-cat-chevron {
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-chevron:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

html[data-theme=dark] .shop-cat-chevron.open {
    color: #ff8c5a;
}

html[data-theme=dark] .shop-cat-children {
    border-left: none !important;
}

html[data-theme=dark] .shop-cat-grandchildren {
    border-left: none !important;
}

html[data-theme=dark] .shop-cat-item.sub-item {
    color: #cbd5e1;
}

html[data-theme=dark] .shop-cat-item.leaf-item {
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-item.leaf-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ff8c5a;
}

html[data-theme=dark] .shop-cat-item.leaf-item.active {
    background: rgba(255, 90, 31, 0.2);
    color: #ff9d73;
}

html[data-theme=dark] .shop-cat-crumb-bar {
    background: #1e2130 !important;
    border: none !important;
}

html[data-theme=dark] .shop-cat-crumb-btn {
    color: #ff8c5a;
}

html[data-theme=dark] .shop-cat-active-title {
    color: #f1f5f9;
}

html[data-theme=dark] .shop-cat-active-trail {
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-sub-title {
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-tree-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: #94a3b8;
}

html[data-theme=dark] .shop-cat-tree-toggle:hover {
    border: none !important;
    color: #ff8c5a;
    background: rgba(255, 90, 31, 0.12) !important;
}

html[data-theme=dark] .shop-cat-search-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme=dark] .shop-cat-search-name {
    color: #f1f5f9;
}

html[data-theme=dark] .shop-cat-search-path {
    color: #94a3b8;
}

html[data-theme=dark] .cat-highlight {
    background: rgba(255, 90, 31, 0.35);
    color: #ffb191;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================================================== */
@media (max-width: 760px) {
    /* 2-Row Layout on Mobile:
       Row 1: Category/Department Title (with left padding, full width)
       Row 2: Count in brackets on left, Filter & Sort icons on right */
    html body .shop-page-head {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "title title"
            "count actions" !important;
        align-items: center !important;
        row-gap: 6px !important;
        padding-top: 12px !important;
        padding-bottom: 8px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove the big text on mobile */
    html body .shop-page-head h1 {
        display: none !important;
    }

    /* Pass through grid items */
    html body .shop-head-meta {
        display: contents !important;
    }

    /* Row 1: Category/Department Title with left padding & bold styling */
    html body .shop-head-meta .eyebrow {
        grid-area: title !important;
        font-size: 14.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--ink, #15171f) !important;
        margin: 0 !important;
        padding: 0 0 0 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        line-height: 1.25 !important;
    }

    /* Row 2 (Left): Bracketed count on the exact same line as elements on the right */
    html body .shop-count-line {
        grid-area: count !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 0 0 2px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    html body .shop-count-line small {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: var(--slate, #667085) !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /* Right Hand Side Actions: Fit cleanly on the same line as the All Products writing */
    html body .shop-head-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
    }

    /* Filter Button: Remove word "Filters", use JUST ICON on mobile */
    .shop-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: #f1f3f6 !important;
        color: var(--ink, #15171f) !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        cursor: pointer !important;
        transition: background 0.15s ease, transform 0.1s ease !important;
    }

    .shop-filter-btn span {
        display: none !important; /* Hide word "Filters" on mobile */
    }

    .shop-filter-btn svg {
        width: 17px !important;
        height: 17px !important;
        stroke: currentColor !important;
        stroke-width: 2.2 !important;
        flex-shrink: 0 !important;
    }

    .shop-filter-btn:hover {
        background: #e5e8ed !important;
    }

    .shop-filter-btn:active {
        transform: scale(0.96);
    }

    /* Sort Control: JUST ICON on the right of the filter */
    .shop-sort-box {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .shop-sort-label {
        display: none !important; /* Hide "Sort by" text on mobile */
    }

    .shop-sort-arrow {
        display: none !important; /* Hide desktop dropdown arrow on mobile */
    }

    .shop-sort-select-wrap {
        position: relative !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        background: #f1f3f6 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        border: none !important;
        cursor: pointer !important;
        transition: background 0.15s ease, transform 0.1s ease !important;
    }

    .shop-sort-select-wrap:hover {
        background: #e5e8ed !important;
    }

    .shop-sort-select-wrap:active {
        transform: scale(0.96);
    }

    .shop-sort-mobile-icon {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        color: var(--ink, #15171f) !important;
        pointer-events: none !important;
    }

    .shop-sort-select {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 5 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Dark Mode Mobile Header Actions */
    html[data-theme=dark] .shop-filter-btn {
        background: #1e2130 !important;
        color: #f1f5f9 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    }

    html[data-theme=dark] .shop-filter-btn:hover {
        background: #282d42 !important;
    }

    html[data-theme=dark] .shop-sort-select-wrap {
        background: #1e2130 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    }

    html[data-theme=dark] .shop-sort-select-wrap:hover {
        background: #282d42 !important;
    }

    html[data-theme=dark] .shop-sort-mobile-icon {
        color: #f1f5f9 !important;
    }

    /* Dimmed Blur Backdrop */
    html body .filter-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1040 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    }

    html body .filter-backdrop.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Grow From The Ground Filling Width and Half Page */
    html body .panel.shop-filter.filter-sheet,
    html body .shop-filter.filter-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 50vh !important;
        max-height: 50vh !important;
        min-height: 50vh !important;
        margin: 0 !important;
        padding: 12px 20px 28px 20px !important;
        background: #ffffff !important;
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.22) !important;
        z-index: 1050 !important;
        box-sizing: border-box !important;
        transform: translateY(105%) !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body .panel.shop-filter.filter-sheet.open,
    html body .shop-filter.filter-sheet.open {
        transform: translateY(0) !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Grab Handle at the top of bottom sheet */
    .filter-sheet-drag-handle {
        display: block !important;
        width: 40px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.18) !important;
        margin: 0 auto 12px !important;
        flex-shrink: 0 !important;
    }

    /* Bottom Sheet Header */
    html body .filter-sheet-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        position: sticky !important;
        top: -12px !important;
        background: #ffffff !important;
        z-index: 10 !important;
    }

    html body .filter-sheet-head h3 {
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
        margin: 0 !important;
        color: var(--ink, #15171f) !important;
    }

    html body .filter-sheet-head .eyebrow {
        font-size: 10.5px !important;
        text-transform: uppercase;
        color: var(--slate, #667085);
        display: block;
        margin-bottom: 2px;
    }

    html body .filter-sheet-head button {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #f1f3f6 !important;
        color: var(--ink, #15171f) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.15s ease !important;
    }

    html body .filter-sheet-head button:hover {
        background: rgba(0, 0, 0, 0.08) !important;
    }

    /* Dark Mode Bottom Sheet */
    html[data-theme=dark] body .panel.shop-filter.filter-sheet,
    html[data-theme=dark] body .shop-filter.filter-sheet {
        background: #14161f !important;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.6) !important;
    }

    html[data-theme=dark] .filter-sheet-drag-handle {
        background: rgba(255, 255, 255, 0.22) !important;
    }

    html[data-theme=dark] body .filter-sheet-head {
        background: #14161f !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme=dark] body .filter-sheet-head h3 {
        color: #f1f5f9 !important;
    }

    html[data-theme=dark] body .filter-sheet-head button {
        background: #1e2130 !important;
        color: #f1f5f9 !important;
    }
}

@media (max-width: 980px) {
    .shop-cat-box {
        padding: 0 0 16px 0 !important;
    }
    .shop-cat-list,
    .shop-cat-search-list {
        max-height: 280px;
    }
    .shop-cat-item {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 14px;
    }
    .shop-cat-item.sub-item {
        min-height: 34px;
        font-size: 13.5px;
    }
    .shop-cat-item.leaf-item {
        min-height: 32px;
        font-size: 13px;
        padding: 6px 8px;
    }
    .shop-cat-chevron {
        width: 34px;
        height: 34px;
    }
}