/* Shopnoi Glass — palette B · Ocean */
:root{--g-bg:#EEF5FB;--g-o1:#B3DCFF;--g-o2:#B2EEE9;--g-o3:#D3DEFF;--g-ink:#0B1B33;--g-muted:#4D5B72;--g-glass:rgba(255,255,255,.62);--g-glass-strong:rgba(255,255,255,.84);--g-field:rgba(255,255,255,.78);--g-line:rgba(255,255,255,.85);--g-line-soft:rgba(10,91,217,.13);--g-solid:#F5F9FD;--g-brand:#0A5BD9;--g-brand-hover:#0849B3;--g-brand-2:#2D78EC;--g-brand-rgb:10,91,217;--g-brand-text:#0A52C4;--g-chip:rgba(10,91,217,.10);--g-shadow:0 8px 26px rgba(10,40,90,.09);--g-btn-shadow:0 6px 16px rgba(10,91,217,.25);--g-deep:#0A2647}
html[data-theme="dark"],html[data-theme-mode="dark"]{--g-bg:#07121F;--g-o1:#0A3F8C;--g-o2:#005F69;--g-o3:#1B2A63;--g-ink:#E6F0FA;--g-muted:#9DB0C6;--g-glass:rgba(255,255,255,.06);--g-glass-strong:rgba(12,26,44,.88);--g-field:rgba(255,255,255,.07);--g-line:rgba(255,255,255,.13);--g-line-soft:rgba(255,255,255,.09);--g-solid:#0E1D30;--g-brand:#1767E8;--g-brand-hover:#2C78F0;--g-brand-2:#4F92F5;--g-brand-rgb:23,103,232;--g-brand-text:#7FB6FF;--g-chip:rgba(127,182,255,.14);--g-shadow:0 8px 26px rgba(0,0,0,.35);--g-btn-shadow:0 6px 16px rgba(23,103,232,.32);--g-deep:#040D18}
/* Shopnoi Glass V2 — client layer. Every rule is prefixed with html[data-theme] (always set by the site)
   so it outranks the old theme's own [data-theme="dark"] … !important rules and the in-page <style> blocks. */
:root,html[data-theme]{--primary:var(--g-brand);--primary-light:var(--g-brand-2);--primary-dark:var(--g-brand-hover);--primary1:var(--g-brand-hover);--secondary:var(--g-brand);--secondary-light:var(--g-brand-2);--secondary-dark:var(--g-brand-hover);--bs-primary:var(--g-brand);--bs-primary-rgb:var(--g-brand-rgb);--bs-link-color:var(--g-brand-text);--bs-link-hover-color:var(--g-brand-hover)}

/* ---------- ground ---------- */
html[data-theme]{background-color:var(--g-bg)!important}
html[data-theme] body{background:transparent!important;color:var(--g-ink);-webkit-font-smoothing:antialiased}
html[data-theme] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vw 48vw at 4% 0%,var(--g-o1) 0%,transparent 66%),radial-gradient(52vw 44vw at 100% 8%,var(--g-o2) 0%,transparent 66%),radial-gradient(68vw 52vw at 62% 100%,var(--g-o3) 0%,transparent 66%)}

html[data-theme] .section,html[data-theme] .feature-part{background:transparent!important}

/* ---------- top strip / header ---------- */
html[data-theme] .header-top{background:var(--g-deep)!important}
html[data-theme] .header-part{background:var(--g-glass-strong)!important;border-bottom:1px solid var(--g-line-soft)!important;box-shadow:0 4px 24px rgba(var(--g-brand-rgb),.06)!important}
html[data-theme] .header-part .header-form{background:var(--g-field)!important;border:1px solid var(--g-line-soft)!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
html[data-theme] .header-part .header-form,html[data-theme] .header-part .header-form:focus-within,html[data-theme] .header-part.active .header-form{border-color:var(--g-line-soft)!important;box-shadow:none!important;outline:none!important}
html[data-theme] .header-part .header-form :is(input,button):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important;border-color:transparent!important}
html[data-theme] .header-part .header-form input{background:transparent!important;color:var(--g-ink)!important}
html[data-theme] .header-part .header-form button{color:var(--g-brand-text)!important;background:transparent!important}
html[data-theme] .header-widget-group{background:var(--g-glass)!important;border:1px solid var(--g-line-soft)!important;border-radius:18px!important;box-shadow:var(--g-shadow)!important}
html[data-theme] .header-widget-group .header-widget i,html[data-theme] .header-widget-group .theme-toggle{background:var(--g-chip)!important;color:var(--g-brand-text)!important;border-color:transparent!important}
html[data-theme] .header-widget-group .header-widget:hover i,html[data-theme] .header-widget-group .theme-toggle:hover{background:var(--g-brand)!important;color:#fff!important}
html[data-theme] .header-widget sup{background:var(--g-brand)!important;color:#fff!important;border-color:var(--g-solid)!important}
html[data-theme] .header-widget span p:last-child{color:var(--g-brand-text)!important}

/* ---------- menu row ---------- */
html[data-theme] .navbar-part{background:var(--g-glass)!important;border-bottom:1px solid var(--g-line-soft)!important}
html[data-theme] .navbar-part .navbar-link{color:var(--g-ink)!important;border-radius:10px}
html[data-theme] .navbar-part .navbar-link:hover,html[data-theme] .navbar-part .navbar-item.active .navbar-link{color:var(--g-brand-text)!important;background:var(--g-chip)!important}
html[data-theme] .navbar-part .navbar-info{background:var(--g-glass)!important;border:1px solid var(--g-line-soft)!important;border-radius:14px!important;box-shadow:none!important}
html[data-theme] .navbar-part .navbar-info i{color:var(--g-brand-text)!important}
html[data-theme] .dropdown-position-list,html[data-theme] .header-part .dropdown-menu{background:var(--g-glass-strong)!important;border:1px solid var(--g-line)!important;border-radius:14px!important;box-shadow:var(--g-shadow)!important;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}

/* ---------- off-canvas sidebars + mobile bar ---------- */
html[data-theme] :is(.category-sidebar,.cart-sidebar,.nav-sidebar){background:var(--g-solid)!important;border-color:var(--g-line-soft)!important}
html[data-theme] :is(.category-sidebar,.nav-sidebar) .category-link:hover,html[data-theme] .nav-sidebar .nav-link:hover{background:var(--g-chip)!important;color:var(--g-brand-text)!important}
html[data-theme] .mobile-menu{background:var(--g-glass-strong)!important;border-top:1px solid var(--g-line-soft)!important;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
html[data-theme] .mobile-menu a,html[data-theme] .mobile-menu button{color:var(--g-ink)!important}

/* ---------- big content panel + "read before buying" ---------- */
html[data-theme] .account-card{background:var(--g-glass)!important;border:1px solid var(--g-line)!important;border-radius:24px!important;box-shadow:var(--g-shadow)!important}
html[data-theme] .terms-box{background:var(--g-glass-strong)!important;border:1px solid var(--g-line)!important;border-radius:20px!important;box-shadow:var(--g-shadow)!important}
html[data-theme] .terms-header{background:linear-gradient(135deg,#C0392B 0%,#D9534F 100%)!important;letter-spacing:.2px}
html[data-theme] .notice-item{border-radius:14px!important;background:var(--g-field)!important;box-shadow:none!important}
html[data-theme] .notice-item.warning{background:rgba(230,126,34,.08)!important}
html[data-theme] .notice-item.danger{background:rgba(192,57,43,.07)!important}
html[data-theme] .notice-item.info{background:rgba(var(--g-brand-rgb),.07)!important;border-left-color:var(--g-brand)!important}
html[data-theme] .notice-item.success{background:rgba(39,174,96,.08)!important}
html[data-theme] .notice-title{color:var(--g-ink)!important;border-bottom-color:var(--g-line-soft)!important}
html[data-theme] :is(.notice-text,.compact-text,.notice-list li){color:var(--g-muted)!important}
html[data-theme] .notice-text strong{color:var(--g-ink)!important}
html[data-theme] .terms-link{color:var(--g-brand-text)!important}
html[data-theme] .terms-footer{background:rgba(39,174,96,.08)!important;border-color:var(--g-line-soft)!important}
html[data-theme] .ad-promo,html[data-theme] .ad-card{border-radius:20px!important}

/* ---------- category headings ---------- */
html[data-theme] .home-heading h3:not(.no-bg){background:linear-gradient(135deg,var(--g-brand) 0%,var(--g-brand-2) 100%)!important;color:#fff!important;border-radius:16px!important;box-shadow:var(--g-btn-shadow)!important;padding:12px 18px!important}
html[data-theme] .home-heading h3 img{border-radius:8px}

/* ---------- product cards ---------- */
html[data-theme] .feature-card{border-radius:20px!important;box-shadow:var(--g-shadow)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
html[data-theme] .feature-card::before{background:linear-gradient(90deg,var(--g-brand) 0%,var(--g-brand-2) 100%)!important}
@media (hover:hover){html[data-theme] .feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(var(--g-brand-rgb),.16)!important}}
html[data-theme] .feature-name,html[data-theme] .feature-name a{color:var(--g-ink)!important}
html[data-theme] .feature-name a:hover{color:var(--g-brand-text)!important}
html[data-theme] .feature-desc{color:var(--g-muted)!important}
html[data-theme] .feature-desc i{color:var(--g-brand-text)!important}
html[data-theme] .feature-price{color:var(--g-brand-text)!important;background:var(--g-chip)!important;border-color:transparent!important;border-radius:12px!important;font-weight:700!important}
html[data-theme] .feature-card .btn-buy{background:var(--g-brand)!important;border-color:var(--g-brand)!important;color:#fff!important;border-radius:12px!important;box-shadow:var(--g-btn-shadow)!important}
html[data-theme] .feature-card .btn-buy:hover{background:var(--g-brand-hover)!important}
html[data-theme] .feature-card .btn-more{border-radius:12px!important}

/* ---------- generic bits used on other pages ---------- */
html[data-theme] .card{background:var(--g-glass)!important;border:1px solid var(--g-line)!important;border-radius:18px!important;box-shadow:var(--g-shadow)!important}
html[data-theme] :is(.btn-primary,.btn-inline){background:var(--g-brand)!important;border-color:var(--g-brand)!important;color:#fff!important;border-radius:12px!important}
html[data-theme] :is(.btn-primary,.btn-inline):hover{background:var(--g-brand-hover)!important;border-color:var(--g-brand-hover)!important}
html[data-theme] :is(.form-control,.form-select){background-color:var(--g-field)!important;border:1px solid var(--g-line-soft)!important;border-radius:12px!important;color:var(--g-ink)!important}
html[data-theme] :is(.form-control,.form-select):focus{border-color:var(--g-brand)!important;box-shadow:0 0 0 3px rgba(var(--g-brand-rgb),.16)!important}
html[data-theme] .table{--bs-table-bg:transparent;--bs-table-color:var(--g-ink);--bs-table-striped-bg:rgba(var(--g-brand-rgb),.04);--bs-table-hover-bg:rgba(var(--g-brand-rgb),.06)}
html[data-theme] .table>:not(caption)>*>*{border-bottom-color:var(--g-line-soft)!important}
html[data-theme] .modal-content{background:var(--g-glass-strong)!important;border:1px solid var(--g-line)!important;border-radius:20px!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
html[data-theme] :is(.modal-header,.modal-footer){border-color:var(--g-line-soft)!important}
html[data-theme] .pagination .page-item.active .page-link{background:var(--g-brand)!important;border-color:var(--g-brand)!important;color:#fff!important}
html[data-theme] :is(a,button,input,select,textarea,.btn):focus-visible{outline:2px solid var(--g-brand)!important;outline-offset:2px}

/* ---------- footer (keeps light text: deep brand colour instead of the old grey) ---------- */
html[data-theme] .footer-part{background:var(--g-deep)!important}

/* ---------- speed: render off-screen category blocks lazily (HTML stays complete for Google) ---------- */
html[data-theme] .col-lg-12.mb-5[id^="category"]{content-visibility:auto;contain-intrinsic-size:auto 900px}

@media (prefers-reduced-motion:reduce){html[data-theme] .feature-card{transition:none!important}html[data-theme] .feature-card:hover{transform:none}}

/* GLASS_V3_OLDFONT: price/stock colours beat the old dark-mode rules */
html[data-theme] .feature-card .feature-price{color:var(--g-brand-text)!important;background:var(--g-chip)!important;border-color:transparent!important}
/* GLASS_V4_OLDCARD: product card + "details" button use the old theme colours; no ring on the search box */
/* GLASS_V5_OLDSTOCK: stock label uses the old theme colours */