/* "Liquid Glass" look (Tema Albital → Tema sezonale → Liquid Glass), loaded after app.css only while that look is on.
   Soft colour field behind the page; header, menus, drawers and bottom bar are frosted glass (backdrop blur);
   cards and boxes are translucent panels with a light edge (no blur on them: hundreds of blurred cards would make phones slow).
   Product pictures keep a white tile so the products look the same as before. */
body.tema-xhami{
  --glass:rgba(255,255,255,.58);--glass-2:rgba(255,255,255,.72);--glass-edge:rgba(255,255,255,.75);
  --glass-line:rgba(255,255,255,.55);--glass-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
  --glass-sh:0 8px 28px -12px rgba(30,40,80,.22),0 2px 6px -2px rgba(30,40,80,.08);
  --line:rgba(120,130,160,.18);--line-2:rgba(255,255,255,.55);
  --r:20px;--r-sm:14px;
  background:#eef1f8;
}
/* the colour field: fixed layer, so it does not repaint while scrolling */
body.tema-xhami::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 8% 6%,rgba(255,120,120,.38),transparent 70%),
    radial-gradient(40vmax 40vmax at 92% 12%,rgba(120,170,255,.42),transparent 70%),
    radial-gradient(46vmax 46vmax at 78% 92%,rgba(190,140,255,.34),transparent 70%),
    radial-gradient(38vmax 38vmax at 12% 88%,rgba(100,220,200,.30),transparent 70%),
    linear-gradient(160deg,#f6f7fb,#eaeef7)}

/* ---- frosted glass: the few surfaces that float over the page */
body.tema-xhami .hdr,
body.tema-xhami .mega,
body.tema-xhami .drawer,
body.tema-xhami .sugg,
body.tema-xhami .cb-drop,
body.tema-xhami .bnav,
body.tema-xhami .sticky-buy,
body.tema-xhami .pdp-tabs{
  background:rgba(255,255,255,.92);
  border-color:var(--glass-line);box-shadow:var(--glass-hi),var(--glass-sh)}
/* phones: lighter blur on the bars; glass.js adds html.glass-zoom during a pinch-zoom and the blur goes away
   (iPhone Safari crashed on pinch-zoom with blurred fixed layers, 10/10/2026) */
@media (hover:none),(pointer:coarse){
  html:not(.glass-zoom) body.tema-xhami .hdr,html:not(.glass-zoom) body.tema-xhami .bnav,html:not(.glass-zoom) body.tema-xhami .sticky-buy,
  html:not(.glass-zoom) body.tema-xhami .drawer{
    background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}
  html:not(.glass-zoom) body.tema-xhami .drawer{background:rgba(255,255,255,.78)}
}
/* with a mouse: stronger blur everywhere */
@media (hover:hover) and (pointer:fine){
  body.tema-xhami .hdr,body.tema-xhami .mega,body.tema-xhami .sugg,body.tema-xhami .cb-drop,body.tema-xhami .drawer,body.tema-xhami .sticky-buy,body.tema-xhami .pdp-tabs{
    background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  body.tema-xhami .hdr.is-stuck{background:rgba(255,255,255,.5)}
  body.tema-xhami .drawer,body.tema-xhami .mega,body.tema-xhami .sugg,body.tema-xhami .cb-drop{background:rgba(255,255,255,.72)}
  body.tema-xhami .ftr{background:rgba(15,21,34,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
body.tema-xhami .hdr{border-bottom:1px solid var(--glass-line)}
body.tema-xhami .hdr.is-stuck{box-shadow:var(--glass-hi),0 10px 30px -14px rgba(30,40,80,.35)}
body.tema-xhami .catbar{border-top-color:rgba(255,255,255,.5)}
body.tema-xhami .drawer-foot{background:transparent}
body.tema-xhami .drawer,body.tema-xhami .mega,body.tema-xhami .sugg,body.tema-xhami .cb-drop{background:rgba(255,255,255,.94)}
body.tema-xhami .sugg,body.tema-xhami .cb-drop{border-radius:22px}
body.tema-xhami .scrim{background:rgba(20,26,45,.28)}

/* top bar: dark tinted glass */
body.tema-xhami .topbar{background:rgba(15,21,34,.78);color:#dfe4ee}

/* floating bottom bar on phones (like iOS 26 tab bars) */
@media (max-width:899px){
  body.tema-xhami .bnav{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding-bottom:0;border:1px solid var(--glass-line);border-radius:26px;
    box-shadow:var(--glass-hi),0 12px 32px -10px rgba(30,40,80,.35)}
  body.tema-xhami .bnav a,body.tema-xhami .bnav button{height:calc(var(--bnav-h) - 4px);border-radius:22px}
  body.tema-xhami .sticky-buy{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding:10px 12px;border:1px solid var(--glass-line);border-radius:24px}
}

/* filters: a drawer on phones (glass above), a plain sidebar from 1024px: there it becomes one glass panel with room inside */
@media (min-width:1024px){
  body.tema-xhami .filters.drawer{background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--glass-line);border-radius:22px;
    box-shadow:var(--glass-hi),var(--glass-sh);padding:4px 10px 12px 16px;scrollbar-width:thin;scrollbar-color:rgba(60,70,100,.35) transparent;scrollbar-gutter:stable}
  body.tema-xhami .filters .drawer-body{padding:0}
  body.tema-xhami .filters .f-group:last-child{border-bottom:0}
}
body.tema-xhami .f-quick,body.tema-xhami .f-group{border-bottom-color:rgba(120,130,160,.16)}
body.tema-xhami .f-price input{background:rgba(255,255,255,.75);border-color:var(--glass-line);border-radius:12px}

/* ---- translucent panels (no blur) */
body.tema-xhami .card,
body.tema-xhami .cat,
body.tema-xhami .brands a,
body.tema-xhami .shop-card,
body.tema-xhami .promo,
body.tema-xhami .subcat,
body.tema-xhami .pager a,body.tema-xhami .pager span,
body.tema-xhami .empty,
body.tema-xhami .pdp-trust,
body.tema-xhami .pdp-sec,
body.tema-xhami .page .prose,
body.tema-xhami .post-card,
body.tema-xhami .rich-card,body.tema-xhami .rich-stats div,body.tema-xhami .rich-hours,
body.tema-xhami .about-hero,body.tema-xhami .tl-body,body.tema-xhami .cert,body.tema-xhami .logo-tile,
body.tema-xhami .faq details,
body.tema-xhami .woocommerce-cart-form,body.tema-xhami .cart-collaterals .cart_totals,
body.tema-xhami #customer_details,body.tema-xhami #order_review,body.tema-xhami #order_review_heading,
body.tema-xhami form.checkout_coupon,
body.tema-xhami .woocommerce-order,
body.tema-xhami .woocommerce-MyAccount-navigation ul,body.tema-xhami .woocommerce-MyAccount-content,
body.tema-xhami #customer_login>div,
body.tema-xhami .list-logo{
  background:var(--glass);border-color:var(--glass-line);box-shadow:var(--glass-hi),var(--glass-sh)}
/* rails: room for the card shadow (a rail paints only inside its own box, content-visibility) */
body.tema-xhami .rail{margin-bottom:14px}body.tema-xhami .rail-track{padding-bottom:24px}
body.tema-xhami .rail .card{box-shadow:var(--glass-hi),0 8px 16px -12px rgba(30,40,80,.3)}
body.tema-xhami .trust-band{background:rgba(255,255,255,.45);border-top-color:var(--glass-line)}
body.tema-xhami .card:hover,body.tema-xhami .cat:hover,body.tema-xhami .brands a:hover{background:var(--glass-2);border-color:var(--glass-edge);
  box-shadow:var(--glass-hi),0 18px 38px -16px rgba(30,40,80,.32)}

/* product pictures: white tile inside the glass card */
body.tema-xhami .card-img{background:#fff;margin:8px 8px 0;border-radius:14px;box-shadow:0 1px 2px rgba(30,40,80,.06)}
body.tema-xhami .g-main{border-radius:22px}

/* ---- controls */
body.tema-xhami .btn,body.tema-xhami .woocommerce .button,body.tema-xhami .woocommerce button.button,body.tema-xhami .woocommerce a.button{border-radius:999px}
body.tema-xhami .btn-primary,body.tema-xhami .woocommerce .button.alt,body.tema-xhami .woocommerce #place_order,body.tema-xhami .woocommerce .checkout-button,body.tema-xhami .search-go{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -6px rgba(226,35,26,.55)}
body.tema-xhami .btn-primary:hover,body.tema-xhami .woocommerce .button.alt:hover,body.tema-xhami .search-go:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--brand-d)}
/* red slide: its main button is white with red text (app.css), keep it white glass */
body.tema-xhami .hs-red .btn-primary{background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));color:var(--brand)!important;border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(0,0,0,.3)}
body.tema-xhami .hs-red .btn-primary:hover{background:#ffeceb}
body.tema-xhami .btn-wa{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--wa);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(31,184,85,.5)}
body.tema-xhami .btn-dark,body.tema-xhami .cat-btn{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),rgba(15,21,34,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
body.tema-xhami .btn-ghost,body.tema-xhami .btn-light,body.tema-xhami .rail-btn,body.tema-xhami .g-nav,body.tema-xhami .qty,
body.tema-xhami .woocommerce button.button:not(.alt),body.tema-xhami .woocommerce a.button:not(.alt):not(.checkout-button){
  background:rgba(255,255,255,.62);border-color:var(--glass-line);box-shadow:var(--glass-hi),0 2px 8px -3px rgba(30,40,80,.18)}
body.tema-xhami .cat-btn{border-radius:999px}
body.tema-xhami .search-go{border-radius:999px}
body.tema-xhami form.search{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7);border-radius:999px;box-shadow:inset 0 1px 3px rgba(30,40,80,.08)}
body.tema-xhami form.search:focus-within{background:rgba(255,255,255,.9);border-color:rgba(30,40,80,.35)}
body.tema-xhami .hdr-act:hover,body.tema-xhami .icon-btn:hover,body.tema-xhami .catbar a:hover{background:rgba(255,255,255,.6)}
body.tema-xhami .catbar a,body.tema-xhami .pdp-tabs a{border-radius:999px}
body.tema-xhami .pdp-tabs a.on,body.tema-xhami .pdp-tabs a:hover{background:rgba(255,255,255,.8);box-shadow:var(--glass-hi)}
body.tema-xhami .vchip span,body.tema-xhami .sort select{background:rgba(255,255,255,.62);border-color:var(--glass-line)}
body.tema-xhami .cart-count{box-shadow:0 0 0 2px rgba(255,255,255,.8)}

/* footer: dark glass over the colour field */
body.tema-xhami .ftr{background:rgba(15,21,34,.9)}
body.tema-xhami .ftr-social a{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}

/* newsletter window */
body.tema-xhami .nl{background:rgba(255,255,255,.94);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),0 30px 70px -20px rgba(15,21,34,.45)}
@media (hover:hover) and (pointer:fine){
  body.tema-xhami .nl{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border-radius:28px}
}

/* whoever asks the system for less transparency gets solid panels */
@media (prefers-reduced-transparency:reduce){
  body.tema-xhami .hdr,body.tema-xhami .mega,body.tema-xhami .drawer,body.tema-xhami .sugg,body.tema-xhami .cb-drop,body.tema-xhami .bnav,body.tema-xhami .sticky-buy,body.tema-xhami .pdp-tabs,body.tema-xhami .ftr{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.tema-xhami .ftr{background:var(--dark)}
}

/* search suggestions, mega menu and catbar dropdowns sit inside the blurred header: a blurred parent is a "backdrop root",
   so their own blur cannot see the page behind them and the page text shows through. They stay almost solid white. */
body.tema-xhami .sugg,body.tema-xhami .mega,body.tema-xhami .cb-drop,
html:not(.glass-zoom) body.tema-xhami .sugg{background:rgba(255,255,255,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}