
:root{
  --is-accent:#0071e3;
  --is-ink:#1d1d1f;
  --is-muted:#6e6e73;
  --is-surface:#f5f5f7;
  --is-glass-bg:rgba(255,255,255,.66);
  --is-glass-bg-strong:rgba(255,255,255,.80);
  --is-glass-border:rgba(255,255,255,.72);
  --is-glass-shadow:0 18px 56px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.82);
  --is-glass-blur:24px;
  --is-glass-sat:168%;
  --is-fast:150ms;
  --is-base:200ms;
  --is-emph:280ms;
  --is-ease:cubic-bezier(.22,1,.36,1);
  --is-spring:cubic-bezier(.2,1.32,.35,1);
  --is-dock-safe:calc(82px + env(safe-area-inset-bottom));
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark){
  :root{
    --is-ink:#f5f5f7;
    --is-muted:#a1a1a6;
    --is-surface:#000;
    --is-glass-bg:rgba(28,28,30,.62);
    --is-glass-bg-strong:rgba(34,34,38,.78);
    --is-glass-border:rgba(255,255,255,.13);
    --is-glass-shadow:0 20px 60px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.09);
  }
}
html[data-is-effects="low"]{
  --is-glass-blur:12px;
  --is-glass-sat:125%;
}
html[data-is-effects="off"]{
  --is-glass-blur:0px;
  --is-glass-sat:100%;
  --is-glass-bg:rgba(255,255,255,.96);
  --is-glass-bg-strong:rgba(255,255,255,.98);
}
@media(prefers-color-scheme:dark){
  html[data-is-effects="off"]{
    --is-glass-bg:rgba(28,28,30,.97);
    --is-glass-bg-strong:rgba(28,28,30,.99);
  }
}

.is-glass{
  position:relative;
  isolation:isolate;
  background:var(--is-glass-bg);
  border:1px solid var(--is-glass-border);
  box-shadow:var(--is-glass-shadow);
  -webkit-backdrop-filter:blur(var(--is-glass-blur)) saturate(var(--is-glass-sat));
  backdrop-filter:blur(var(--is-glass-blur)) saturate(var(--is-glass-sat));
}
.is-glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  opacity:.78;
  background:
    radial-gradient(180px 115px at var(--is-gx,50%) var(--is-gy,0%),
      rgba(255,255,255,.58),rgba(255,255,255,.12) 42%,transparent 74%);
  mix-blend-mode:screen;
}
.is-glass::after{
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .is-glass{background:var(--is-glass-bg-strong)}
  .is-glass::before{opacity:.28}
}

.is-icon{
  --is-icon-url:none;
  display:block;
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask-image:var(--is-icon-url);
  mask-image:var(--is-icon-url);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.is-mobile-dock{
  position:fixed;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(calc(100% - 24px),420px);
  z-index:900;
  transform:translateX(-50%) translateZ(0);
  border-radius:30px;
  padding:7px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  transition:
    width var(--is-base) var(--is-ease),
    padding var(--is-base) var(--is-ease),
    transform var(--is-base) var(--is-ease),
    opacity var(--is-fast) ease;
  will-change:transform;
}
.is-mobile-dock__item{
  position:relative;
  min-width:0;
  height:56px;
  padding:5px 2px 7px;
  border:0;
  border-radius:21px;
  color:var(--is-muted);
  background:transparent;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--is-fast) ease,background var(--is-fast) ease,transform var(--is-fast) var(--is-ease);
}
.is-mobile-dock__item:active{transform:scale(.94)}
.is-mobile-dock__item[aria-current="page"],
.is-mobile-dock__item.is-active{
  color:var(--is-ink);
  background:rgba(255,255,255,.24);
}
@media(prefers-color-scheme:dark){
  .is-mobile-dock__item[aria-current="page"],
  .is-mobile-dock__item.is-active{background:rgba(255,255,255,.07)}
}
.is-mobile-dock__item[aria-current="page"]::after,
.is-mobile-dock__item.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:12px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  transform:translateX(-50%);
}
.is-mobile-dock__label{
  max-height:16px;
  opacity:1;
  font-size:10.5px;
  font-weight:650;
  letter-spacing:-.01em;
  line-height:1;
  transition:max-height var(--is-base) var(--is-ease),opacity var(--is-fast) ease,transform var(--is-base) var(--is-ease);
}
.is-mobile-dock[data-condensed="true"]{
  width:min(calc(100% - 52px),360px);
  padding:5px;
}
.is-mobile-dock[data-condensed="true"] .is-mobile-dock__item{height:46px}
.is-mobile-dock[data-condensed="true"] .is-mobile-dock__label{
  max-height:0;opacity:0;transform:translateY(4px);overflow:hidden
}
.is-mobile-dock[data-hidden="true"]{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(calc(100% + 28px));
}
.is-cart-badge{
  position:absolute;
  top:4px;
  left:calc(50% + 5px);
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:99px;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:750;
  color:#fff;
  background:#000;
  border:1.5px solid rgba(255,255,255,.88);
  transform:scale(0);
  opacity:0;
  transition:transform var(--is-base) var(--is-spring),opacity var(--is-fast) ease;
}
.is-cart-badge[data-count]:not([data-count="0"]){transform:scale(1);opacity:1}

.is-whatsapp-fab{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
  width:54px;height:54px;
  z-index:45;
  border-radius:19px;
  display:grid;place-items:center;
  color:var(--is-ink);
  text-decoration:none;
  transition:transform var(--is-fast) var(--is-ease),opacity var(--is-fast) ease;
}
.is-whatsapp-fab:active{transform:scale(.93)}
.is-whatsapp-fab[data-hidden="true"]{opacity:0;pointer-events:none;transform:translateY(16px)}
body.menu-open .is-whatsapp-fab,
body.filters-open .is-whatsapp-fab,
body.sidecart-open .is-whatsapp-fab{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}

.is-search-sheet{
  position:fixed;
  inset:0;
  z-index:950;
  display:grid;
  align-items:start;
  padding:calc(14px + env(safe-area-inset-top)) 12px 12px;
  background:rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--is-base) ease;
}
.is-search-sheet[open]{opacity:1;pointer-events:auto}
.is-search-panel{
  width:min(100%,680px);
  margin:0 auto;
  border-radius:28px;
  padding:11px;
  transform:translateY(-10px) scale(.985);
  transition:transform var(--is-base) var(--is-ease);
}
.is-search-sheet[open] .is-search-panel{transform:none}
.is-search-input-wrap{
  min-height:52px;
  border-radius:19px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:rgba(255,255,255,.55);
}
.is-search-input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:17px;
}
.is-search-close{
  width:44px;height:44px;border:0;border-radius:15px;background:transparent;color:inherit;font:inherit;font-weight:700
}

.is-pressable{
  transition:transform var(--is-fast) var(--is-ease),box-shadow var(--is-base) ease
}
.is-pressable:active{transform:scale(.96)}
.is-add-to-cart.is-fx-run .is-icon{animation:is-cart-pop 320ms var(--is-spring)}
@keyframes is-cart-pop{35%{transform:scale(.78)}70%{transform:scale(1.12)}100%{transform:none}}
.is-success-pop.is-fx-run{animation:is-success-pop 360ms var(--is-spring)}
@keyframes is-success-pop{0%{transform:scale(.8);opacity:.45}68%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.is-toast{
  position:fixed;
  left:50%;
  top:calc(14px + env(safe-area-inset-top));
  z-index:1000;
  width:min(calc(100% - 24px),440px);
  min-height:52px;
  border-radius:18px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--is-ink);
  transform:translate(-50%,-18px);
  opacity:0;
  pointer-events:none;
  transition:transform var(--is-base) var(--is-ease),opacity var(--is-fast) ease;
}
.is-toast[open]{transform:translate(-50%,0);opacity:1}

@media(min-width:768px){
  .is-mobile-dock,.is-whatsapp-fab{display:none!important}
}
@media(max-width:767px){
  body.is-dock-aware{padding-bottom:calc(var(--is-dock-safe) + 24px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .is-mobile-dock,.is-mobile-dock__item,.is-mobile-dock__label,.is-cart-badge,.is-whatsapp-fab,.is-search-sheet,.is-search-panel,.is-toast,.is-pressable{
    transition:none!important;animation:none!important
  }
  .is-glass::before{display:none}
}
@media(forced-colors:active){
  .is-glass{background:Canvas;border:1px solid CanvasText;box-shadow:none}
  .is-mobile-dock__item{color:CanvasText}
}

/* The existing storefront has compact header icon slots. The canonical
   Workers icon system owns their artwork, so the legacy CSS-drawn glyphs are
   explicitly disabled here to prevent doubled or misaligned symbols. */
.header-search button::before,
.menu-toggle::before,
.menu-toggle::after{display:none!important}
.header-search button [data-is-icon],
.header-action [data-is-icon],
.menu-toggle [data-is-icon]{
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin:0;
  border:0;
  background-color:currentColor;
  -webkit-mask:var(--is-icon-url) center/contain no-repeat;
  mask:var(--is-icon-url) center/contain no-repeat;
}
.header-search button [data-is-icon="search"]{--is-icon-url:url("/ui/icons/core-ui/search.svg")}
.header-action [data-is-icon="whatsapp"]{--is-icon-url:url("/ui/icons/finance-trust/whatsapp.svg")}
.header-action [data-is-icon="cart"]{--is-icon-url:url("/ui/icons/core-ui/cart.svg")}
.menu-toggle [data-is-icon="menu"]{--is-icon-url:url("/ui/icons/core-ui/menu.svg")}
.header-action--help > [data-is-icon]::after,
.header-action--cart > [data-is-icon]::before{display:none!important}
.header-action--cart > [data-is-icon]{display:block!important}
.header-action--help > [data-is-icon]{color:#128c7e}
.header-action--cart > span[data-is-icon="cart"]{
  width:20px!important;
  height:20px!important;
  margin-top:0!important;
  border:0!important;
  border-radius:0!important;
}
.is-whatsapp-fab{color:#128c7e}
.menu-close-icon{font-size:25px;line-height:1;font-weight:500}

@media(max-width:767px){
  .header-search button [data-is-icon]{width:19px;height:19px;flex-basis:19px}
  .header-action--cart > [data-is-icon]{width:21px;height:21px;flex-basis:21px}
  .menu-toggle [data-is-icon]{width:21px;height:21px;flex-basis:21px}
}
