/* Filterstore v21 — a continuous water-inspired visual world.
   All effects are decorative. Product cards are never hidden by scrolling. */
:root{--ocean-ink:#102b45;--water-blue:#1574c9;--water-teal:#22aec8;--glass-border:rgba(171,214,233,.58);--ocean-shadow:0 16px 45px rgba(32,96,133,.095)}
html{scroll-padding-top:95px}
body{min-height:100vh;overflow-x:hidden;background:#eaf7fc!important;color:var(--ocean-ink)}
.water-world{position:fixed;inset:0;pointer-events:none;z-index:0;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,#f5fcff 0%,#eaf6fc 26%,#f1fbff 58%,#e4f5fd 100%)}
.water-world-glow{position:absolute;display:block;pointer-events:none;filter:blur(16px);transform:translate3d(0,0,0)}
.glow-a{width:80vw;height:76vw;max-width:1180px;max-height:1080px;right:-26%;top:-52%;background:radial-gradient(circle,rgba(100,188,240,.26),rgba(190,231,250,.11) 49%,transparent 72%);transform:translate3d(var(--glow-a-x,0px),var(--glow-a-y,0px),0)}
.glow-b{width:76vw;height:70vw;max-width:1050px;max-height:940px;left:-28%;top:16%;background:radial-gradient(circle,rgba(65,194,209,.20),rgba(149,224,235,.10) 45%,transparent 69%);transform:translate3d(var(--glow-b-x,0px),var(--glow-b-y,0px),0)}
.glow-c{width:64vw;height:50vw;max-width:930px;max-height:750px;right:-18%;bottom:-30%;background:radial-gradient(circle,rgba(89,151,239,.18),rgba(187,231,252,.08) 49%,transparent 73%);transform:translate3d(var(--glow-c-x,0px),var(--glow-c-y,0px),0)}
.water-world-caustics{position:absolute;inset:-35% -15%;opacity:.28;transform:translate3d(var(--caustics-x,0px),var(--caustics-y,0px),0) rotate(-15deg);background:repeating-radial-gradient(ellipse at 58% 40%,transparent 0px,transparent 66px,rgba(255,255,255,.6) 68px,transparent 72px,transparent 131px),radial-gradient(ellipse at 20% 60%,rgba(255,255,255,.38),transparent 70%);mask-image:linear-gradient(90deg,transparent 1%,#000 25%,#000 74%,transparent 99%)}
.water-world-ring{position:absolute;border:1px solid rgba(45,151,208,.15);border-radius:50%;box-shadow:inset 0 0 18px rgba(255,255,255,.32);will-change:transform}
.ring-a{height:620px;width:620px;right:-380px;top:12%;transform:translate3d(var(--ring-a-x,0px),var(--ring-a-y,0px),0) scale(var(--ring-a-s,1))}
.ring-b{height:390px;width:390px;left:-230px;top:55%;border-color:rgba(36,162,195,.14);transform:translate3d(var(--ring-b-x,0px),var(--ring-b-y,0px),0)}
.ring-c{height:280px;width:280px;right:8%;bottom:-220px;border-color:rgba(41,143,221,.12);transform:translate3d(var(--ring-c-x,0px),var(--ring-c-y,0px),0)}
.water-world-orb{position:absolute;display:block;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 25% 22%,#fff 0 20%,rgba(130,212,244,.57) 52%,rgba(78,164,211,.24) 100%);border:1px solid rgba(255,255,255,.82);box-shadow:0 5px 16px rgba(27,118,185,.10),inset 0 0 6px rgba(255,255,255,.6)}
.orb-a{left:7%;top:28%;transform:translate3d(var(--orb-a-x,0px),var(--orb-a-y,0px),0)}
.orb-b{right:8%;top:65%;width:24px;height:24px;transform:translate3d(var(--orb-b-x,0px),var(--orb-b-y,0px),0)}
.orb-c{left:48%;bottom:8%;width:10px;height:10px;transform:translate3d(var(--orb-c-x,0px),var(--orb-c-y,0px),0)}
.water-world-filter{position:absolute;object-fit:contain;opacity:.16;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 46% 49% at center,black 37%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 46% 49% at center,black 37%,transparent 96%);will-change:transform;filter:drop-shadow(0 22px 29px rgba(25,100,169,.15));user-select:none}
.filter-a{height:390px;width:390px;right:-165px;top:15%;transform:translate3d(var(--filter-a-x,0px),var(--filter-a-y,0px),0) rotate(var(--filter-a-r,17deg))}
.filter-b{height:310px;width:310px;left:-155px;top:63%;opacity:.13;transform:translate3d(var(--filter-b-x,0px),var(--filter-b-y,0px),0) rotate(var(--filter-b-r,-18deg))}
.filter-c{height:280px;width:280px;right:7%;bottom:-140px;opacity:.11;transform:translate3d(var(--filter-c-x,0px),var(--filter-c-y,0px),0) rotate(var(--filter-c-r,28deg))}
body>header,body>main,body>footer,body>.overlay,body>.drawer,body>.checkout-modal,body>.toast{position:relative;z-index:1}
body>.site-header{position:sticky;top:0;z-index:30;background:rgba(246,253,255,.84)!important;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);border-bottom:1px solid rgba(175,217,235,.65)!important;box-shadow:0 5px 32px rgba(27,102,154,.045)}
body>.overlay,body>.drawer,body>.checkout-modal,body>.toast{position:fixed}
/* A single continuous background from hero to company — no abrupt blue/white seams. */
main>.hero,main>.benefits-strip,main>.catalog-section,main>.help-section,main>.delivery-section,main>.about-section{background:transparent!important;background-image:none!important;isolation:isolate;position:relative}
main>.hero{min-height:0}
.hero::before{background:radial-gradient(circle,rgba(125,208,233,.2),transparent 72%)!important;filter:blur(9px)}
.hero-grid{padding-top:74px;padding-bottom:75px}
.hero h1{color:#0e2945;letter-spacing:-3.2px}
.hero h1 em{background:linear-gradient(112deg,#1767c0,#1aafc1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .hero-lede{color:#59758b}
.hero .product-spotlight{background:linear-gradient(148deg,rgba(255,255,255,.74),rgba(234,248,255,.55))!important;border:1px solid rgba(179,219,239,.8)!important;box-shadow:0 29px 82px rgba(21,86,135,.13),inset 0 1px rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)}
.hero .product-spotlight::after{border-color:rgba(49,149,206,.11)!important}
.hero .floating-benefits{background:rgba(248,253,255,.87)!important;border:1px solid rgba(177,219,239,.76)!important;box-shadow:0 19px 58px rgba(36,89,124,.12)!important;backdrop-filter:blur(18px)}
/* Benefits look like aquatic interface tiles, not a hard white horizontal strip. */
.benefits-strip{border-color:rgba(161,210,230,.29)!important;border-top:0!important;border-bottom:0!important;padding:0 0 4px}
.benefit-grid{gap:16px;padding-top:14px;padding-bottom:14px}
.benefit-grid>div{background:rgba(253,255,255,.71)!important;border:1px solid rgba(179,218,235,.69)!important;border-radius:19px!important;box-shadow:0 11px 33px rgba(30,112,157,.065)!important;backdrop-filter:blur(12px)}
/* The full-height isolated sticky block is replaced by this compact bridge. */
.ocean-bridge{margin-top:42px;margin-bottom:20px;display:flex;gap:18px;align-items:center;padding:22px 28px;border-radius:26px;border:1px solid rgba(176,217,232,.72);background:linear-gradient(115deg,rgba(255,255,255,.71),rgba(229,246,252,.76));backdrop-filter:blur(15px);box-shadow:0 18px 48px rgba(38,125,172,.07);position:relative;overflow:hidden}
.ocean-bridge:before{content:"";width:260px;height:260px;position:absolute;right:5%;top:-140px;border:1px solid rgba(31,155,196,.17);border-radius:50%;pointer-events:none}
.ocean-bridge-icon{flex:0 0 52px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#197dc2;background:linear-gradient(140deg,#fff,#def5fc);border:1px solid rgba(154,215,233,.66);box-shadow:0 9px 18px rgba(47,130,176,.08)}
.ocean-bridge>div:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1;position:relative}
.ocean-bridge strong{font-size:18px;letter-spacing:-.5px;color:#143954}
.ocean-bridge span{font-size:12px;color:#65869b}
.ocean-bridge>a{color:#1176b6;position:relative;font-size:12px;font-weight:800;white-space:nowrap;border-radius:13px;border:1px solid rgba(135,192,225,.55);padding:11px 15px;background:rgba(255,255,255,.7);transition:transform .25s ease,background .25s ease}
.ocean-bridge>a:hover{transform:translateY(-2px);background:#fff}
.ocean-bridge>a span{color:inherit;font-size:17px}
/* Softer section rhythm, same ocean atmosphere underneath. */
main>.section{padding-block:88px}
.section-heading h2,.about-grid h2{color:#14314b}
.section-heading .eyebrow,.about-grid .eyebrow{color:#1680bb}
main>.catalog-section{padding-top:62px;padding-bottom:110px}
.catalog-section .section-heading{margin-bottom:28px}
.catalog-section>.container{position:relative}
.catalog-section .catalog-meta{color:#7894a8}
.search-panel{background:rgba(252,255,255,.88)!important;border-color:rgba(162,210,234,.68)!important;backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(38,102,146,.06)!important}
.products-grid .product-card{border:1px solid rgba(170,211,229,.72)!important;background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(244,251,255,.94))!important;box-shadow:0 8px 22px rgba(16,79,122,.055),0 19px 42px rgba(16,79,122,.047)!important}
.products-grid .product-card:hover{box-shadow:0 20px 46px rgba(14,92,140,.12),0 7px 13px rgba(14,92,140,.045)!important;border-color:rgba(84,169,210,.8)!important}
.product-media{background:rgba(255,255,255,.45)!important}
.product-details{background:linear-gradient(180deg,rgba(250,255,255,0),rgba(231,247,253,.20))}
.category-pill.active{background:#1675c7!important;border-color:#1675c7!important;color:#fff!important}
.category-pill:not(.active){background:rgba(254,255,255,.8)!important;border-color:rgba(161,210,234,.75)!important}
/* Lower information panels: consistent translucency and same surface. */
.help-card,.delivery-main,.delivery-side,.about-panels>div{background:rgba(255,255,255,.79)!important;border:1px solid rgba(171,211,230,.68)!important;backdrop-filter:blur(14px);box-shadow:0 13px 42px rgba(31,103,149,.08)!important;border-radius:23px!important}
.help-icon{background:linear-gradient(130deg,#fff,#dff3fc)!important;border:1px solid rgba(159,214,238,.6)}
.contact-section{background:linear-gradient(128deg,rgba(13,66,116,.92),rgba(20,106,151,.93),rgba(16,73,126,.92))!important;box-shadow:inset 0 1px rgba(219,250,255,.25)}
.contact-inner{position:relative}
.footer{background:linear-gradient(180deg,#0e3049,#0b2339)!important}
.footer-shell{background:linear-gradient(135deg,rgba(18,62,89,.9),rgba(6,30,56,.95))!important;border-color:rgba(103,174,197,.29)!important}
/* Keep modal/drawer backgrounds opaque; never place underwater layers over forms. */
.drawer,.checkout-modal{background:#fff!important}
@media(max-width:980px){.water-world-filter{opacity:.1}.filter-a{right:-235px}.filter-b{left:-235px}.filter-c{right:-110px}.ocean-bridge{margin-top:25px}}
@media(max-width:720px){
  .water-world{background:linear-gradient(155deg,#f3fcff,#eaf8fd 52%,#f0faff)}
  .water-world-glow{filter:blur(18px)}
  .water-world-filter{opacity:.09}.filter-a{width:270px;height:270px;right:-130px;top:24%}.filter-b{width:200px;height:200px;left:-105px;top:59%}.filter-c{display:none}
  .water-world-ring.ring-a{width:280px;height:280px;right:-160px}.ring-b{width:230px;height:230px;left:-130px}
  .hero-grid{padding-top:35px;padding-bottom:55px}.hero h1{letter-spacing:-2px}
  main>.section{padding-block:63px}.catalog-section{padding-top:37px!important;padding-bottom:72px!important}
  .ocean-bridge{margin-top:18px;margin-bottom:8px;padding:17px 17px;gap:11px;border-radius:20px;align-items:flex-start}
  .ocean-bridge-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px}.ocean-bridge-icon svg{width:25px;height:25px}
  .ocean-bridge strong{font-size:13px;letter-spacing:-.2px}.ocean-bridge span{font-size:10px;line-height:1.55}
  .ocean-bridge>a{display:none}
}
@media(hover:none){.products-grid .product-card:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.water-world-glow,.water-world-ring,.water-world-filter,.water-world-orb,.water-world-caustics{transform:none!important;will-change:auto!important}.ocean-bridge>a{transition:none!important}}
/* Retain interactive overlay stacking above the sticky header. */
body>.overlay{position:fixed;z-index:40}
body>.drawer{position:fixed;z-index:41}
body>.overlay.modal-overlay{z-index:42}
body>.checkout-modal{position:fixed;z-index:43}
body>.toast{position:fixed;z-index:60}
/* Keep actual filters perceptible behind content without sacrificing contrast. */
@media(min-width:981px){
  .water-world-filter.filter-a{right:-95px;opacity:.25}
  .water-world-filter.filter-b{left:-100px;opacity:.19}
  .water-world-filter.filter-c{opacity:.16}
}


/* v25: a fuller, brighter and continuously moving underwater atmosphere.
   Background decoration only: no catalog, cart or product image styles are changed. */
.water-world-orb{
  z-index:2;
  opacity:.88;
  width:34px;height:34px;
  border-radius:50%;
  background:
    radial-gradient(circle at 29% 23%,rgba(255,255,255,.99) 0 8%,rgba(255,255,255,.78) 9% 13%,transparent 31%),
    radial-gradient(circle at 74% 79%,rgba(32,143,204,.30),transparent 50%),
    radial-gradient(circle at 51% 50%,rgba(245,255,255,.06) 28%,rgba(149,229,252,.47) 67%,rgba(44,159,223,.34) 91%,rgba(255,255,255,.98) 100%);
  border:1.5px solid rgba(247,255,255,.95);
  box-shadow:inset 2px 2px 10px rgba(255,255,255,.85),inset -4px -6px 10px rgba(34,145,207,.20),0 8px 22px rgba(38,119,185,.16),0 0 0 1px rgba(93,192,230,.10);
  will-change:transform;
}
.water-world-orb::after{
  content:"";position:absolute;left:22%;top:13%;width:39%;height:17%;
  border-top:2px solid rgba(255,255,255,.96);border-radius:50%;transform:rotate(-30deg);opacity:.95;
}
.orb-a{left:8%;top:27%;width:44px;height:44px;transform:translate3d(var(--orb-a-x,0px),var(--orb-a-y,0px),0)}
.orb-b{right:8%;top:66%;width:53px;height:53px;transform:translate3d(var(--orb-b-x,0px),var(--orb-b-y,0px),0)}
.orb-c{left:49%;bottom:9%;width:23px;height:23px;transform:translate3d(var(--orb-c-x,0px),var(--orb-c-y,0px),0)}
.orb-d{left:22%;top:9%;width:19px;height:19px;transform:translate3d(var(--orb-d-x,0px),var(--orb-d-y,0px),0)}
.orb-e{right:22%;top:13%;width:35px;height:35px;transform:translate3d(var(--orb-e-x,0px),var(--orb-e-y,0px),0)}
.orb-f{left:3%;top:68%;width:61px;height:61px;transform:translate3d(var(--orb-f-x,0px),var(--orb-f-y,0px),0)}
.orb-g{right:3%;top:35%;width:27px;height:27px;transform:translate3d(var(--orb-g-x,0px),var(--orb-g-y,0px),0)}
.orb-h{left:28%;bottom:16%;width:29px;height:29px;transform:translate3d(var(--orb-h-x,0px),var(--orb-h-y,0px),0)}
.orb-i{right:30%;bottom:25%;width:40px;height:40px;transform:translate3d(var(--orb-i-x,0px),var(--orb-i-y,0px),0)}
.orb-j{left:40%;top:50%;width:17px;height:17px;transform:translate3d(var(--orb-j-x,0px),var(--orb-j-y,0px),0)}
.orb-k{right:39%;top:30%;width:25px;height:25px;transform:translate3d(var(--orb-k-x,0px),var(--orb-k-y,0px),0)}
.orb-l{right:15%;bottom:7%;width:20px;height:20px;transform:translate3d(var(--orb-l-x,0px),var(--orb-l-y,0px),0)}
/* New translucent filter objects: visually recessed, never cover foreground controls. */
.water-world-filter.filter-d{
  width:320px;height:320px;left:1%;top:14%;opacity:.17;
  transform:translate3d(var(--filter-d-x,0px),var(--filter-d-y,0px),0) rotate(var(--filter-d-r,-24deg));
}
.water-world-filter.filter-e{
  width:350px;height:350px;right:13%;top:59%;opacity:.17;
  transform:translate3d(var(--filter-e-x,0px),var(--filter-e-y,0px),0) rotate(var(--filter-e-r,27deg));
}
.water-world-filter.filter-a{opacity:.27}
.water-world-filter.filter-b{opacity:.22}
.water-world-filter.filter-c{opacity:.19}
/* Subtle water glow is soft enough that text stays legible over any position. */
.water-world::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 58% 42%,rgba(255,255,255,.06),transparent 55%)}
@media(max-width:980px){
 .water-world-filter.filter-d{width:270px;height:270px;left:-130px;top:21%;opacity:.13}
 .water-world-filter.filter-e{width:250px;height:250px;right:-100px;top:65%;opacity:.14}
 .water-world-filter.filter-a{opacity:.16}.water-world-filter.filter-b{opacity:.15}.water-world-filter.filter-c{opacity:.13}
 .orb-f{width:45px;height:45px}
}
@media(max-width:720px){
 .water-world-orb{opacity:.78}
 .orb-a{left:5%;top:20%;width:28px;height:28px}
 .orb-b{right:9%;top:70%;width:34px;height:34px}
 .orb-c{left:55%;bottom:12%;width:15px;height:15px}
 .orb-d{left:39%;top:9%;width:13px;height:13px}
 .orb-e{right:11%;top:29%;width:22px;height:22px}
 .orb-f{left:1%;top:61%;width:37px;height:37px}
 .orb-g{right:2%;top:47%;width:19px;height:19px}
 .orb-h{left:23%;bottom:18%;width:20px;height:20px}
 .orb-i{right:25%;bottom:27%;width:27px;height:27px}
 .orb-j{left:50%;top:52%;width:12px;height:12px}
 .orb-k{right:34%;top:20%;width:17px;height:17px}
 .orb-l{right:10%;bottom:5%;width:16px;height:16px}
 .water-world-filter.filter-d{width:230px;height:230px;left:-97px;top:12%;opacity:.11}
 .water-world-filter.filter-e{width:250px;height:250px;right:-135px;top:61%;opacity:.12}
 .water-world-filter.filter-a{opacity:.13}.water-world-filter.filter-b{opacity:.12}
}
@media(prefers-reduced-motion:reduce){
 .water-world-orb,.water-world-filter.filter-d,.water-world-filter.filter-e{transform:none!important;will-change:auto!important}
}