/* Filterstore v19 — quiet depth / kinetic polish.
   The catalog is ALWAYS visible: no fade-out, no observer dependency on product cards. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-soft-blue: rgba(67,133,227,.14);
  --motion-deep: rgba(29,65,117,.12);
}

/* Depth and atmosphere — subtle, rather than glossy. */
.hero {
  isolation:isolate;
  background:
    radial-gradient(ellipse 54% 68% at 90% 30%, rgba(208,227,255,.52) 0%, rgba(231,241,255,.15) 66%, transparent 85%),
    radial-gradient(ellipse 46% 52% at 0% 81%, rgba(228,243,255,.55) 0%, transparent 83%),
    linear-gradient(125deg,#fcfdff 8%,#f4f8ff 61%,#fafcff 100%) !important;
}
.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:min(53vw,700px);
  height:min(53vw,700px);
  left:-15%;top:-37%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(159,204,255,.15), transparent 67%);
  animation: motion-drift 15s ease-in-out infinite alternate;
}
.hero-copy {position:relative;z-index:1}
.hero-copy .eyebrow {animation:motion-enter .65s var(--motion-ease) both}
.hero-copy h1 {animation:motion-enter .82s .10s var(--motion-ease) both}
.hero-copy .hero-lede {animation:motion-enter .82s .19s var(--motion-ease) both}
.hero-copy .hero-ctas {animation:motion-enter .82s .27s var(--motion-ease) both}
.hero-copy .hero-stats {animation:motion-enter .82s .36s var(--motion-ease) both}
.hero .hero-visual {isolation:isolate}
.hero .hero-visual-glow {
  z-index:-1;
  opacity:.85;
  transform-origin:center;
  animation:motion-aura 10s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero .product-spotlight {
  transition:transform .7s var(--motion-ease),box-shadow .7s var(--motion-ease),border-color .5s ease !important;
  box-shadow:0 35px 90px rgba(24,57,105,.16),0 9px 26px rgba(41,83,147,.065),inset 0 1px 0 rgba(255,255,255,.95) !important;
  border-color:rgba(176,200,231,.8) !important;
}
.hero .product-spotlight:hover {
  transform:translateY(-5px);
  box-shadow:0 43px 95px rgba(24,57,105,.19),0 12px 33px rgba(41,83,147,.085),inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.hero .floating-benefits {
  background:rgba(251,253,255,.83);
  border:1px solid rgba(203,219,239,.88);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 20px 48px rgba(36,70,113,.13),inset 0 1px 0 #fff !important;
  animation:motion-float 7s ease-in-out infinite;
}

/* Perceptible dimension on the horizontal advantages strip */
.benefits-strip {
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,#fff 0%,#f9fbff 100%) !important;
  box-shadow:0 14px 45px rgba(21,53,100,.042);
}
.benefit-grid > div {
  border-radius:18px;
  transition:transform .42s var(--motion-ease), box-shadow .42s var(--motion-ease), background-color .4s ease !important;
}
.benefit-grid > div:hover {
  transform:translateY(-4px) !important;
  background:rgba(255,255,255,.92);
  box-shadow:0 13px 31px rgba(31,67,115,.07);
}

/* Catalog: no opacity/visibility animations EVER. Keep JS filtering deterministic. */
.catalog-section {background:linear-gradient(180deg,#f7faff 0%,#fff 18%,#fbfdff 100%) !important}
.search-panel {
  background:rgba(255,255,255,.88);
  border:1px solid rgba(214,226,243,.9);
  border-radius:21px;
  box-shadow:0 14px 38px rgba(40,81,138,.055),inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .35s ease,border-color .35s ease;
}
.search-panel:focus-within {border-color:rgba(113,162,227,.73);box-shadow:0 18px 42px rgba(40,81,138,.10),0 0 0 4px rgba(60,123,220,.05)}
.products-grid .product-card,
.products-grid .product-card:not(.is-visible) {
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
  content-visibility:visible !important;
  transform:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(211,225,243,.85) !important;
  background:linear-gradient(162deg,rgba(255,255,255,.99),#f7fbff) !important;
  box-shadow:0 6px 13px rgba(26,68,119,.025),0 17px 45px rgba(36,75,128,.052),inset 0 1px 0 #fff !important;
  transition:transform .44s var(--motion-ease),box-shadow .44s var(--motion-ease),border-color .44s ease !important;
}
.products-grid .product-card::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(270px circle at var(--glow-x,50%) var(--glow-y,25%),rgba(106,158,235,.12),transparent 77%);
  transition:opacity .4s ease;
}
.products-grid .product-card > * {position:relative;z-index:1}
.products-grid .product-card:hover,
.products-grid .product-card:not(.is-visible):hover {
  transform:translateY(-6px) !important;
  border-color:rgba(152,187,231,.87) !important;
  box-shadow:0 12px 21px rgba(25,60,107,.055),0 26px 55px rgba(32,79,146,.13),inset 0 1px 0 #fff !important;
}
.products-grid .product-card:hover::after {opacity:1}
.products-grid .product-card .product-media img {
  transition:filter .55s var(--motion-ease), transform .55s var(--motion-ease);
  filter:drop-shadow(0 7px 12px rgba(12,40,73,.035));
}
.products-grid .product-card:hover .product-media img {
  filter:drop-shadow(0 13px 13px rgba(12,40,73,.13));
}
.products-grid .product-card .product-media img.product-photo {
  /* Preserve any item-specific zoom determined by existing application code. */
  transform:scale(var(--zoom,1.22));
}
.products-grid .product-card:hover .product-media img.product-photo {
  transform:scale(calc(var(--zoom,1.22) * 1.045));
}
.stock {box-shadow:0 4px 10px rgba(24,52,91,.055)}
.category-pill {transition:transform .25s var(--motion-ease),background-color .25s ease,border-color .25s ease,box-shadow .25s ease !important}
.category-pill:hover {transform:translateY(-2px)}
.category-pill.active {box-shadow:0 8px 16px rgba(23,102,220,.15) !important}

/* Rounded, tactile secondary blocks with a soft rim light. */
.help-card,
.delivery-main,.delivery-side,.about-panels > div {
  position:relative;
  isolation:isolate;
  border-color:rgba(211,225,244,.85) !important;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(247,251,255,.89)) !important;
  box-shadow:0 9px 31px rgba(35,72,122,.055),inset 0 1px 0 rgba(255,255,255,.94) !important;
  transition:transform .42s var(--motion-ease),box-shadow .42s var(--motion-ease),border-color .42s ease !important;
}
.help-card {border-radius:23px !important}
.help-card:hover,
.delivery-main:hover,.delivery-side:hover,.about-panels > div:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(162,193,229,.9) !important;
  box-shadow:0 18px 52px rgba(30,74,129,.12),inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.help-icon {
  transition:transform .4s var(--motion-ease), background-color .35s ease;
}
.help-card:hover .help-icon {transform:translateY(-3px) rotate(-3deg);background:rgba(229,240,255,.95)}
.help-link {transition:transform .32s var(--motion-ease),color .3s ease}
.help-card:hover .help-link {transform:translateX(4px)}
.delivery-section {background:linear-gradient(158deg,#f4f8ff,#f9fbff 60%,#f2f7ff) !important}
.about-section {background:radial-gradient(ellipse at 92% 5%,rgba(220,235,255,.32),transparent 42%),#fff !important}
.contact-section {background:linear-gradient(127deg,#12376c,#1b4c8d 61%,#2862ac) !important}
.contact-actions .button {box-shadow:0 7px 18px rgba(0,24,65,.11)}

/* A small scroll-on-entry lift, only for non-catalog content. Default state remains visible. */
.motion-entered {animation:motion-scroll-in .66s var(--motion-ease) both}
.motion-entered.motion-delay-1 {animation-delay:.07s}
.motion-entered.motion-delay-2 {animation-delay:.14s}
.motion-entered.motion-delay-3 {animation-delay:.21s}

@keyframes motion-enter {from {opacity:.35;transform:translateY(18px)}to {opacity:1;transform:translateY(0)}}
@keyframes motion-scroll-in {from {opacity:.68;transform:translateY(15px)}to {opacity:1;transform:translateY(0)}}
@keyframes motion-aura {0% {opacity:.56;transform:scale(.93) translate(-1%,0)}100% {opacity:.9;transform:scale(1.1) translate(1%,-2%)}}
@keyframes motion-drift {0% {transform:translate(-2%,-1%)}100% {transform:translate(7%,5%)}}
@keyframes motion-float {0%,100% {transform:translateY(0)}50% {transform:translateY(-5px)}}

@media (max-width:720px) {
  .products-grid .product-card:hover,
  .products-grid .product-card:not(.is-visible):hover,
  .benefit-grid > div:hover,
  .help-card:hover,.delivery-main:hover,.delivery-side:hover,.about-panels > div:hover {transform:none !important}
  .hero .floating-benefits {animation:none}
  .hero .product-spotlight:hover {transform:none}
  .search-panel {border-radius:16px}
}
@media (hover:none), (pointer:coarse) {
  .products-grid .product-card:hover,
  .products-grid .product-card:not(.is-visible):hover,
  .help-card:hover,.delivery-main:hover,.delivery-side:hover,.about-panels > div:hover {transform:none !important}
  .products-grid .product-card:hover .product-media img.product-photo {transform:scale(var(--zoom,1.22))}
}
@media (prefers-reduced-motion:reduce) {
  .hero::before,.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-lede,
  .hero-copy .hero-ctas,.hero-copy .hero-stats,.hero .hero-visual-glow,
  .hero .floating-benefits,.motion-entered {animation:none !important}
  .products-grid .product-card,.products-grid .product-card:hover,
  .benefit-grid > div,.help-card,.delivery-main,.delivery-side,.about-panels > div,
  .button,.category-pill,.help-icon {transition:none !important;transform:none !important}
  .products-grid .product-card .product-media img.product-photo,
  .products-grid .product-card:hover .product-media img.product-photo {transform:scale(var(--zoom,1.22)) !important}
}

/* Mobile header: keep menu fully inside viewport, not clipped by earlier layout rules. */
@media(max-width:440px){
  .header-inner {padding-inline:15px;gap:10px}
  .header-inner .brand {min-width:0;flex:1 1 auto}
  .header-inner .brand-text {min-width:0}
  .header-inner .brand-text strong {white-space:nowrap;font-size:13px}
  .header-inner .brand-text small {font-size:7px;letter-spacing:1.1px}
  .header-actions {flex:0 0 auto;gap:6px;margin-left:0}
  .header-actions .whatsapp-link {display:none !important}
  #cartOpen {padding:8px !important;min-height:43px}
  #mobileMenu {flex:0 0 41px;width:41px;height:42px;display:grid;place-items:center;padding:0;border-radius:12px;background:rgba(244,248,255,.87)}
}