
/* V263 — one scroll-to-top implementation per context.
   Public catalog/cart button is available from the start of <body>, and a real rail is reserved so it cannot cover content. */
.scroll-top-fab{position:fixed;z-index:9990;width:48px;height:48px;border:1px solid rgba(36,91,50,.22);border-radius:50%;background:#245B32;color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 9px 26px rgba(24,55,30,.24);display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;line-height:1;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,22px,0) scale(.72) rotate(-7deg);filter:blur(3px);transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.16,1,.3,1),filter .48s ease,visibility .42s step-end,background .18s ease,box-shadow .28s ease}
.scroll-top-fab.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0);transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.16,1,.3,1),filter .48s ease,visibility 0s step-start,background .18s ease,box-shadow .28s ease;box-shadow:0 12px 32px rgba(24,55,30,.28)}.scroll-top-fab:hover{background:#1d4d2a;transform:translate3d(0,-2px,0) scale(1.04)}.scroll-top-fab:active{transform:translate3d(0,0,0) scale(.94)}
.scroll-top-fab.staff-scroll-fab{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
html body.public-ios-ui.public-scroll-ui{--public-scroll-rail:62px}
html body.public-ios-ui.public-scroll-ui main,
html body.public-ios-ui.public-scroll-ui main.container,
html body.public-ios-ui.public-scroll-ui footer,
html body.public-ios-ui.public-scroll-ui footer.container{box-sizing:border-box!important;padding-right:var(--public-scroll-rail)!important}
.scroll-top-fab.public-scroll-fab{right:max(9px,env(safe-area-inset-right));bottom:max(20px,calc(env(safe-area-inset-bottom) + 20px));top:auto;width:44px;height:44px;font-size:23px}
@media(max-width:899px){
 html body.public-ios-ui.public-scroll-ui{--public-scroll-rail:50px}
 .scroll-top-fab.public-scroll-fab{right:calc(env(safe-area-inset-right) + 18px);bottom:calc(env(safe-area-inset-bottom) + 58px);width:42px;height:42px;min-width:42px;min-height:42px;max-width:42px;max-height:42px;padding:0;border-radius:50%;font-size:21px}
 .scroll-top-fab.staff-scroll-fab{right:max(13px,env(safe-area-inset-right));bottom:max(13px,env(safe-area-inset-bottom));width:44px;height:44px;font-size:23px}
}
@media(max-width:380px){
 html body.public-ios-ui.public-scroll-ui{--public-scroll-rail:44px}
 .scroll-top-fab.public-scroll-fab{right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 52px);width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;padding:0;border-radius:50%;font-size:20px}
}
@keyframes delivraReceiver3d{0%,82%,100%{transform:perspective(120px) rotateY(0) rotateZ(0) translateY(0)}86%{transform:perspective(120px) rotateY(-18deg) rotateZ(-7deg) translateY(-1px)}90%{transform:perspective(120px) rotateY(14deg) rotateZ(6deg) translateY(1px)}94%{transform:perspective(120px) rotateY(-8deg) rotateZ(-3deg) translateY(0)}}
@media(max-width:760px){.public-contact-fab{position:fixed;z-index:899;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 104px);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#245b32;color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(24,55,30,.24);opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);transform-origin:center;will-change:transform,opacity,border-radius;transition:opacity .48s ease,transform .56s cubic-bezier(.22,1,.36,1),border-radius .56s cubic-bezier(.22,1,.36,1),visibility .48s step-start}.public-contact-fab svg,.public-header .mobile-contact-link .contact-phone-svg svg{width:24px;height:24px;display:block;transform-origin:50% 50%;animation:delivraReceiver3d 4s ease-in-out infinite;will-change:transform}.mobile-header-condensed .public-contact-fab{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-20px,0) scale(.58);border-radius:12px;transition:opacity .42s ease,transform .56s cubic-bezier(.22,1,.36,1),border-radius .56s cubic-bezier(.22,1,.36,1),visibility .42s step-end}body.product-detail-open .public-contact-fab,body.product-detail-closing .public-contact-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important}}
@media(prefers-reduced-motion:reduce){.public-contact-fab svg,.public-header .mobile-contact-link .contact-phone-svg svg{animation:none!important}}
body.product-detail-open .scroll-top-fab.public-scroll-fab,body.product-detail-closing .scroll-top-fab.public-scroll-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,22px,0) scale(.72) rotate(-7deg)!important;filter:blur(3px)!important}
@media(prefers-reduced-motion:reduce){.scroll-top-fab{transition:none!important;transform:none!important}}

\n/* V1.6.3 — measured mobile header geometry; 3px physical gap while scrolled. */
/* V1.6.2 — final mobile header geometry: tighter open/compact states and a real 3px rail gap. */
@media(max-width:760px){
  body.public-ios-ui.catalog-scroll-ui{--public-header-h:145px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header{padding:6px 12px 4px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header .brand{max-height:44px!important;margin:0!important}
  body.public-ios-ui.catalog-scroll-ui .public-header nav{grid-template-rows:43px 43px!important;row-gap:3px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header .my-order-link,
  body.public-ios-ui.catalog-scroll-ui .public-header .cart,
  body.public-ios-ui.catalog-scroll-ui .public-header .langswitch,
  body.public-ios-ui.catalog-scroll-ui .public-header .mobile-full-toggle-form,
  body.public-ios-ui.catalog-scroll-ui .public-header .mobile-full-toggle,
  body.public-ios-ui.catalog-scroll-ui .public-header .mobile-full-toggle-form>button.mobile-full-toggle{height:43px!important;min-height:43px!important;max-height:43px!important}

  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed{--public-header-h:80px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed{padding:4px 12px 3px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .brand{max-height:32px!important;margin:0!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .brand .mark{width:29px!important;height:29px!important;min-width:29px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .brand>span:last-child{font-size:16px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .brand small{font-size:8.5px!important;margin-top:0!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed nav{grid-template-rows:38px 0!important;row-gap:0!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .my-order-link,
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed .cart{height:38px!important;min-height:38px!important;max-height:38px!important}

  body.public-ios-ui.catalog-scroll-ui main:has(.shopbar){padding-top:1px!important}
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed main:has(.shopbar){padding-top:3px!important}
  body.public-ios-ui.catalog-scroll-ui .catalog-menu{top:calc(var(--public-header-h) + 3px)!important}
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu.is-floating{top:calc(var(--public-header-real-h, var(--public-header-h)) + 3px)!important;margin-top:3px!important;margin-bottom:3px!important}

  /* V1.6.4: hard mobile geometry override. The rail is clipped to exactly the same
     12px left/right content edges as the order/cart buttons. */
  body.public-ios-ui.catalog-scroll-ui .public-header nav{margin-top:-7px!important}
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed nav{margin-top:-5px!important}
  body.public-ios-ui.catalog-scroll-ui .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui .catalog-menu.is-floating{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;
    box-sizing:border-box!important;overflow-x:auto!important;overflow-y:hidden!important;
    contain:paint!important;
  }
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu.is-floating{
    margin-top:3px!important;
  }
}

/* V1.6.5 — iOS mobile rail: always 3px below the LIVE fixed header. */
@media(max-width:760px){
  body.public-ios-ui.catalog-scroll-ui .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui .catalog-menu.is-floating,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu.is-floating{
    top:calc(var(--public-header-real-h, var(--public-header-h)) + 3px)!important;
    margin-top:0!important;
    left:auto!important;right:auto!important;
    width:100%!important;max-width:100%!important;
  }
}

/* V1.6.6 — adaptive mobile header/rail geometry.
   The category rail is intentionally a little wider than the order/cart row,
   but remains inside the viewport on narrow phones. */
@media(max-width:760px){
  body.public-ios-ui.catalog-scroll-ui{
    --mobile-rail-gap:clamp(3px,.8vw,4px);
    --mobile-rail-overhang:clamp(2px,1vw,4px);
  }
  /* Keep the brand-to-actions spacing compact, but scale safely on small screens. */
  body.public-ios-ui.catalog-scroll-ui .public-header nav{
    margin-top:clamp(-7px,-1.5vw,-4px)!important;
  }
  body.public-ios-ui.catalog-scroll-ui .public-header.mobile-condensed nav{
    margin-top:clamp(-5px,-1vw,-3px)!important;
  }
  /* Rail follows the live measured header bottom and never overlaps it. */
  body.public-ios-ui.catalog-scroll-ui .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui .catalog-menu.is-floating,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu.is-floating{
    top:calc(var(--public-header-real-h, var(--public-header-h)) + var(--mobile-rail-gap))!important;
    width:calc(100% + var(--mobile-rail-overhang) + var(--mobile-rail-overhang))!important;
    max-width:calc(100vw - 16px)!important;
    margin-left:calc(0px - var(--mobile-rail-overhang))!important;
    margin-right:calc(0px - var(--mobile-rail-overhang))!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    contain:layout paint!important;
  }
}
@media(max-width:360px){
  body.public-ios-ui.catalog-scroll-ui{
    --mobile-rail-overhang:2px;
    --mobile-rail-gap:3px;
  }
}


/* V1.6.8 — mobile category rail final geometry.
   Expanded: same width as the content/buttons.
   Condensed on scroll: smoothly stretches to 1px from each viewport edge.
   The live header measurement keeps a real 1px vertical gap and prevents overlap. */
@media(max-width:760px){
  body.public-ios-ui.catalog-scroll-ui{
    --mobile-rail-gap:1px;
  }

  /* Expanded header: no side overhang. */
  body.public-ios-ui.catalog-scroll-ui:not(.mobile-header-condensed) .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui:not(.mobile-header-condensed) .catalog-menu.is-floating{
    top:calc(var(--public-header-real-h, var(--public-header-h)) + var(--mobile-rail-gap))!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Smoothly animate only the geometry that changes during collapse. */
  body.public-ios-ui.catalog-scroll-ui .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui .catalog-menu.is-floating{
    transition:
      top .28s cubic-bezier(.16,.78,.22,1),
      width .28s cubic-bezier(.16,.78,.22,1),
      max-width .28s cubic-bezier(.16,.78,.22,1),
      margin-left .28s cubic-bezier(.16,.78,.22,1),
      padding .28s ease,
      border-radius .28s ease,
      box-shadow .28s ease!important;
  }

  /* Scrolled/condensed: 1px from both physical viewport edges.
     main has 12px horizontal padding, therefore -11px reaches the 1px edge. */
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu,
  body.public-ios-ui.catalog-scroll-ui.mobile-header-condensed .catalog-menu.is-floating{
    top:calc(var(--public-header-real-h, var(--public-header-h)) + var(--mobile-rail-gap))!important;
    width:calc(100vw - 2px)!important;
    max-width:calc(100vw - 2px)!important;
    margin-left:-11px!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
}


/* V1.6.8 — resilient mobile mode + product focus effect. */
/* V1.6.8 — clickable product cards. */
body:not(.staff-ui) .retail-card{cursor:pointer}
body:not(.staff-ui) .retail-card a,body:not(.staff-ui) .retail-card button,body:not(.staff-ui) .retail-card input,body:not(.staff-ui) .retail-card form{cursor:auto}
body.product-detail-open .catalog-main .linella-grid{transform:scale(.965)!important;filter:blur(3px) saturate(.78)!important;opacity:.48!important;transition:transform .28s cubic-bezier(.22,.61,.36,1),filter .28s ease,opacity .24s ease!important}
body.product-detail-open .catalog-menu,body.product-detail-open .shopbar{filter:blur(1.5px);opacity:.72;transition:filter .24s ease,opacity .24s ease}
body.product-detail-closing .catalog-main .linella-grid{transform:scale(1)!important;filter:blur(0) saturate(1)!important;opacity:1!important;transition:transform .68s cubic-bezier(.20,.74,.18,1),filter .68s cubic-bezier(.20,.74,.18,1),opacity .68s cubic-bezier(.20,.74,.18,1)!important}
body.product-detail-closing .catalog-menu,body.product-detail-closing .shopbar{filter:blur(0)!important;opacity:1!important;transition:filter .68s cubic-bezier(.20,.74,.18,1),opacity .68s cubic-bezier(.20,.74,.18,1)!important}
@media(min-width:761px){body.client-mobile-device.desktop-mode .mobile-full-toggle-form{display:block!important;visibility:visible!important;opacity:1!important}}
body.client-mobile-device .mobile-full-toggle{touch-action:manipulation!important}
