/* ============================================================
   LEMAR SunTech — "Liquid Glass" layer (iOS 26/27 style)
   Loaded last on every public page. Frosted, see-through surfaces
   with a bright rim and soft depth, floating pill navigation and
   glass buttons and icons. Colours and layout stay the same.
   ============================================================ */
:root {
  --lg-solid: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  --lg-fill: rgba(255, 255, 255, 0.52);
  --lg-fill-strong: rgba(255, 255, 255, 0.72);
  --lg-rim: rgba(255, 255, 255, 0.85);
  --lg-edge: rgba(255, 255, 255, 0.55);
  --lg-line: rgba(120, 70, 30, 0.10);
  --lg-blur: blur(16px) saturate(170%);
  --lg-shadow: 0 1px 1px rgba(255,255,255,.9) inset, 0 -1px 1px rgba(255,255,255,.35) inset,
               0 0 0 1px rgba(255,255,255,.45) inset, 0 10px 30px -12px rgba(60, 30, 10, .22), 0 2px 6px rgba(60, 30, 10, .06);
  --lg-shadow-sm: 0 1px 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(255,255,255,.5) inset, 0 4px 14px -6px rgba(60,30,10,.22);
  --lg-tint: linear-gradient(180deg, rgba(255,150,70,.96) 0%, rgba(232,85,0,.94) 55%, rgba(206,58,0,.96) 100%);
}
[data-theme="dark"] {
  --lg-solid: linear-gradient(180deg, rgba(58,30,24,.82), rgba(34,16,12,.74));
  --lg-fill: rgba(40, 20, 16, 0.46);
  --lg-fill-strong: rgba(40, 20, 16, 0.66);
  --lg-rim: rgba(255, 220, 190, 0.28);
  --lg-edge: rgba(255, 220, 190, 0.14);
  --lg-line: rgba(255, 200, 150, 0.10);
  --lg-shadow: 0 1px 1px rgba(255,230,210,.18) inset, 0 0 0 1px rgba(255,220,190,.10) inset, 0 14px 36px -14px rgba(0,0,0,.6);
  --lg-shadow-sm: 0 1px 1px rgba(255,230,210,.16) inset, 0 0 0 1px rgba(255,220,190,.10) inset, 0 6px 16px -8px rgba(0,0,0,.55);
}

/* ---- the light that glass refracts: a soft colour field behind the page ---- */
html body::before {
  background:
    radial-gradient(40vmax 34vmax at 8% 6%, rgba(255, 140, 60, .22), transparent 70%),
    radial-gradient(34vmax 30vmax at 92% 14%, rgba(120, 170, 255, .16), transparent 70%),
    radial-gradient(38vmax 32vmax at 82% 88%, rgba(255, 110, 40, .16), transparent 70%),
    radial-gradient(30vmax 28vmax at 6% 92%, rgba(190, 120, 255, .12), transparent 70%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(40vmax 34vmax at 8% 6%, rgba(255, 110, 20, .20), transparent 70%),
    radial-gradient(34vmax 30vmax at 92% 14%, rgba(90, 120, 255, .12), transparent 70%),
    radial-gradient(38vmax 32vmax at 82% 88%, rgba(220, 70, 20, .16), transparent 70%),
    radial-gradient(30vmax 28vmax at 6% 92%, rgba(170, 70, 200, .10), transparent 70%);
}

/* ---- floating glass navigation ---- */
.topbar {
  background: transparent !important; border-bottom: 0 !important;
}
nav:not(.sx-cats) {
  top: 10px !important;
  margin: 8px 14px 0;
  border-radius: 28px;
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow) !important;
}
nav.nav-scrolled { box-shadow: var(--lg-shadow), 0 16px 40px -18px rgba(60,30,10,.35) !important; }
@media (max-width: 760px) { nav:not(.sx-cats) { margin: 6px 10px 0; border-radius: 24px; top: 8px !important; } }

/* ---- glass buttons ---- */
.lang-btn, .tl-btn, .mm-lang-btn, .theme-btn, .hamburger, .filter-btn, .ftab, .map-btn-alt, .pm-link, .st-chip, .sx-ic:not(.sx-cart), .st-arrows button, .sh-x, .st-pv-x, .pm-close {
  background: var(--lg-solid) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
}
.lang-btn, .tl-btn { border-radius: 100px !important; }
.hamburger { border-radius: 50% !important; }
.ftab.active, .filter-btn.active, .tl-btn.active, .lang-btn.active, .st-chip.on, .sx-cats .st-chip.on {
  background: var(--lg-tint) !important; color: #fff !important; border-color: rgba(255,200,160,.6) !important;
  box-shadow: 0 1px 1px rgba(255,255,255,.55) inset, 0 -2px 6px rgba(140,30,0,.25) inset, 0 8px 18px -8px rgba(206,58,0,.55) !important;
}
/* tinted glass for the orange call-to-action buttons */
.wa-btn, .pc-btn, .hp-btn, .submit-btn, .product-btn, .map-btn:not(.map-btn-alt), .mm-wa-btn, .st-add, .st-addbig, .sh-place, .st-cta, .sx-cart, .hero-photo-btn {
  background: var(--lg-tint) !important;
  border: 1px solid rgba(255, 200, 160, .55) !important;
  box-shadow: 0 1px 1px rgba(255,255,255,.6) inset, 0 -3px 8px rgba(140,30,0,.22) inset, 0 10px 22px -10px rgba(206,58,0,.6) !important;
}
.wa-btn, .pc-btn, .hp-btn, .submit-btn, .map-btn, .mm-wa-btn, .st-cta { border-radius: 100px !important; }
.wa-btn:hover, .pc-btn:hover, .st-add:hover, .st-addbig:hover, .sh-place:hover { filter: brightness(1.06) saturate(1.1); }

/* ---- glass cards ---- */
.info-card, .contact-card, .value-card, .mission-card, .vision-card, .project-card, .why-strip-card, .ps-tile, .product-card,
.pm-sheet, .pm-facts, .st-card .st-img, .st-trust-wrap .st-trust, .st-big-in, .sh-sheet, .st-pv-in {
  background: var(--lg-solid) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow) !important;
}
.pm-sheet, .sh-sheet, .st-pv-in { background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hp-card, .info-card, .contact-card, .value-card, .mission-card, .vision-card, .project-card, .why-strip-card, .ps-tile, .product-card { border-radius: 24px !important; }
.project-card:hover, .info-card:hover, .contact-card:hover {
  box-shadow: var(--lg-shadow), 0 22px 48px -22px rgba(206,58,0,.35) !important;
}

/* home "Popular Products" cards keep their white face (an orange layer sits
   under them), and only take the glass rim and depth */
.hp-card, .pp-btn { border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow) !important; border-radius: 24px !important; }

/* ---- glass icons ---- */
.social-icons a, .why-icon, .fc-pill {
  background: var(--lg-solid) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
}
.social-icons a { border-radius: 50% !important; }
#aiChatBtn {
  box-shadow: var(--lg-shadow) !important; border: 1px solid var(--lg-rim) !important;
}

/* ---- sheets and menus ---- */
.mobile-menu {
  background: rgba(255, 250, 245, 0.62) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
[data-theme="dark"] .mobile-menu { background: rgba(20, 8, 6, 0.62) !important; }
.mm-link { border-radius: 16px; }
.sx-drawer-in { background: var(--lg-fill-strong) !important; border-inline-end: 1px solid var(--lg-edge); }

/* ---- shop: floating glass store bar and cart bar ---- */
.sx-head {
  top: 8px !important; margin: 8px 12px 0; border-radius: 26px;
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shadow) !important;
}
.sx-top { background: transparent !important; color: var(--t2) !important; }
.sx-langs button { color: var(--t2) !important; }
.sx-search { background: rgba(255,255,255,.45) !important; border: 1px solid var(--lg-edge); box-shadow: 0 1px 2px rgba(60,30,10,.06) inset; }
[data-theme="dark"] .sx-search { background: rgba(255,255,255,.06) !important; }
.sh-bar {
  background: rgba(23, 8, 2, 0.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 220, 190, .22); box-shadow: 0 1px 1px rgba(255,255,255,.18) inset, 0 18px 40px -14px rgba(0,0,0,.45) !important;
}
.st-sec-h { border-bottom-color: var(--lg-line) !important; }

/* ---- footer on glass ---- */
footer {
  background: var(--lg-solid) !important;
  border-top: 1px solid var(--lg-edge) !important;
  margin: 24px 12px 12px; border-radius: 30px; box-shadow: var(--lg-shadow);
}

/* Reduced transparency: plain solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  nav, .hp-card, .info-card, .contact-card, footer, .sx-head, .mobile-menu, .pm-sheet, .sh-sheet { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg) !important; }
}

/* ---- speed ----
   Live blur is costly: it stays only on the few large floating parts
   (top bar, store bar, cart bar, phone menu). The old full-screen film
   grain overlay is switched off, and the colour field behind the page
   gets its own layer so scrolling does not repaint it. */
html body::after { display: none !important; }
html body::before { transform: translateZ(0); will-change: transform; }
nav:not(.sx-cats), .sx-head, .sh-bar { transform: translateZ(0); }
nav:not(.sx-cats) { transition: box-shadow .25s ease, background .25s ease !important; }
@media (max-width: 760px) {
  :root { --lg-blur: blur(12px) saturate(160%); }
  .mobile-menu { -webkit-backdrop-filter: blur(18px) saturate(160%) !important; backdrop-filter: blur(18px) saturate(160%) !important; background: rgba(255, 250, 245, 0.86) !important; }
  [data-theme="dark"] .mobile-menu { background: rgba(20, 8, 6, 0.88) !important; }
}
@media (prefers-reduced-motion: reduce) { .hp-card, .pp-btn, .info-card, .contact-card { transition: none !important; } }
/* one switch for the older styles too: no live blur anywhere except the
   floating bars and the phone menu */
body *:not(nav):not(.sx-head):not(.sh-bar):not(.mobile-menu) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* product grids: no permanent layer per card (90+ layers on the products page) */
.pc, .product-card, .project-card, .glass-card { will-change: auto !important; }
/* while the page scrolls (smooth.js), cards passing under the mouse do not lift */
@media (hover: hover) { html.lg-scrolling body { pointer-events: none; } }