.mobile-nav-drawer,
.mobile-bottom-nav{display:none}

@media (max-width:767.98px), (max-height:500px) and (pointer:coarse){
  :root{
    --mobile-blue:#004c97;
    --mobile-blue-dark:#002b5c;
    --mobile-green:#008f46;
    --mobile-surface:#f7fbfd;
    --mobile-line:#d6e4ed;
    --mobile-ease:cubic-bezier(.22,1,.36,1);
    --mobile-nav-height:64px;
    --mobile-header-height:68px;
  }

  html,body{max-width:100%;overflow-x:clip}
  html.mobile-nav-is-open,html.mobile-nav-is-open body{overflow:hidden}
  body[data-mobile-page]{--whatsapp-assist-mobile-bottom:calc(var(--mobile-nav-height,64px) + max(8px,env(safe-area-inset-bottom)) + 12px);background:#f3f7fa;-webkit-tap-highlight-color:transparent}
  body[data-mobile-page]>.whatsapp-assist:not(.whatsapp-assist--mobile),
  body[data-mobile-page]>.shop-whatsapp{display:none!important}
  body[data-mobile-page] section[id]{scroll-margin-top:78px}
  body[data-mobile-page] .topbar{display:none}

  body[data-mobile-page] #siteHeader{
    position:sticky;
    top:0;
    z-index:1200;
    padding:max(6px,env(safe-area-inset-top)) 0 4px;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  body[data-mobile-page] .header-shell{width:calc(100% - 16px);margin-inline:auto;padding:0;border-radius:999px;background:transparent}
  body[data-mobile-page] .header-main{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:48px;
    gap:6px;
    min-height:58px;
    padding:5px 6px 5px 8px;
    border:1px solid #a8dff3;
    border-radius:999px;
    background:radial-gradient(ellipse 58% 115% at 50% -58%,rgba(91,210,255,.2),transparent 68%),linear-gradient(100deg,#fbfdff,#f2f8fc 52%,#fbfdff);
    box-shadow:0 8px 24px rgba(0,43,92,.09),0 0 10px rgba(88,204,246,.3),0 0 24px rgba(88,204,246,.13),inset 0 0 24px rgba(91,207,247,.08),inset 0 1px 0 rgba(255,255,255,.95);
  }
  body[data-mobile-page] .header-main::before{
    content:'';
    display:block;
    position:absolute;
    z-index:3;
    inset:-1px;
    border:1px solid rgba(99,213,253,.78);
    border-radius:inherit;
    box-shadow:0 0 7px rgba(68,196,242,.58),0 0 18px rgba(68,196,242,.2),inset 0 0 7px rgba(68,196,242,.14);
    pointer-events:none;
  }
  body[data-mobile-page] #siteHeader.scrolled .header-main{
    border-color:#84d3ef;
    box-shadow:0 12px 30px rgba(0,43,92,.13),0 0 12px rgba(78,201,246,.36),0 0 28px rgba(78,201,246,.16),inset 0 0 24px rgba(91,207,247,.08);
  }
  body[data-mobile-page] .logo{grid-column:1;grid-row:1;width:44px;height:44px;min-width:0}
  body[data-mobile-page] .logo-picture{width:44px;height:44px;flex:0 0 44px}
  body[data-mobile-page] .brand-logo{object-position:center}
  body[data-mobile-page] .product-search{position:relative;grid-column:2;grid-row:1;width:100%;min-width:0}
  body[data-mobile-page] .search-field{
    height:46px;
    padding:2px 2px 2px 12px;
    border-color:#b9d2e4;
    border-radius:999px;
    background:linear-gradient(100deg,#f9fcfe,#edf6fb);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(0,76,151,.06);
  }
  body[data-mobile-page] .product-search input{height:44px;min-height:44px;font-size:16px;font-weight:600}
  body[data-mobile-page] .search-clear,
  body[data-mobile-page] .search-submit{width:44px;height:44px;border-radius:50%}
  body[data-mobile-page] .search-clear:not([hidden]) + .search-submit{display:none}
  body[data-mobile-page] .search-key{display:none}
  body[data-mobile-page] .search-suggestions{
    position:fixed;
    top:calc(max(6px,env(safe-area-inset-top)) + 64px);
    right:8px;
    left:8px;
    z-index:1280;
    width:auto;
    max-height:min(54dvh,420px);
    overflow-y:auto;
    border-radius:14px;
    overscroll-behavior:contain;
  }
  body[data-mobile-page] .search-option{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;min-height:58px;padding:6px 8px}
  body[data-mobile-page] .search-option>img{width:42px;height:42px}
  body[data-mobile-page] .search-option-copy{min-width:0}
  body[data-mobile-page] .search-option-name,
  body[data-mobile-page] .search-option-cat{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body[data-mobile-page] .search-option-price{font-size:.68rem;white-space:nowrap}
  body[data-mobile-page] .nav-actions{grid-column:3;grid-row:1;gap:6px}
  body[data-mobile-page] .header-order{display:none!important}
  body[data-mobile-page] .cart-btn,
  body[data-mobile-page] .burger{width:44px;height:44px;min-width:44px;min-height:44px}
  body[data-mobile-page] .cart-btn>img{width:20px;height:20px}
  body[data-mobile-page] .burger img{width:22px;height:22px}
  body[data-mobile-page] #navLinks{display:none!important}

  .mobile-nav-drawer[open]{
    position:fixed;
    inset:0 0 0 auto;
    display:block;
    width:min(88vw,360px);
    max-width:none;
    height:100dvh;
    max-height:none;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    background:transparent;
    color:#173b58;
  }
  .mobile-nav-drawer::backdrop{background:rgba(0,24,52,.52);opacity:0;transition:opacity .2s linear}
  .mobile-nav-drawer.is-open::backdrop{opacity:1}
  .mobile-nav-drawer.is-closing::backdrop{opacity:0}
  .mobile-nav-shell{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:18px 0 0 18px;
    background:#f8fbfd;
    box-shadow:-20px 0 55px rgba(0,32,70,.24);
    transform:translateX(104%);
    transition:transform .26s var(--mobile-ease);
  }
  .mobile-nav-drawer.is-open .mobile-nav-shell{transform:translateX(0)}
  .mobile-nav-drawer.is-closing .mobile-nav-shell{transform:translateX(104%)}
  .mobile-nav-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    gap:10px;
    min-height:84px;
    padding:max(14px,env(safe-area-inset-top)) 14px 12px;
    border-bottom:1px solid var(--mobile-line);
    background:#fff;
  }
  .mobile-nav-brand{display:grid;width:136px;height:44px;place-items:center;overflow:hidden;border-radius:10px}
  .mobile-nav-brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
  .mobile-nav-close{
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid #cfe0ea;
    border-radius:13px;
    background:#edf5f9;
    color:var(--mobile-blue-dark);
    cursor:pointer;
  }
  .mobile-nav-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .mobile-nav-list{display:grid;align-content:start;gap:6px;overflow-y:auto;padding:14px;overscroll-behavior:contain}
  .mobile-nav-item{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 22px;
    align-items:center;
    gap:11px;
    min-height:56px;
    padding:6px 10px 6px 6px;
    border-radius:14px;
    color:#34546d;
    font-size:.91rem;
    font-weight:750;
  }
  .mobile-nav-item.is-active{background:#e6f1f7;color:var(--mobile-blue);box-shadow:inset 0 0 0 1px #c9e0ec}
  .mobile-nav-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:12px;background:#eef5f9;color:#2e6e98}
  .mobile-nav-item.is-active .mobile-nav-icon{background:var(--mobile-blue);color:#fff}
  .mobile-nav-icon svg,.mobile-nav-chevron svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav-chevron{display:grid;place-items:center;color:#8297a7}
  .mobile-nav-chevron svg{width:17px;height:17px}
  .mobile-nav-support{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin:12px 14px max(14px,env(safe-area-inset-bottom));
    padding:12px;
    border-radius:15px;
    background:#003b72;
    color:#fff;
  }
  .mobile-nav-support>span{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:rgba(255,255,255,.1);color:#8be4b5}
  .mobile-nav-support svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav-support div{display:grid;min-width:0;gap:2px}
  .mobile-nav-support strong{font-size:.78rem;line-height:1.25}
  .mobile-nav-support small{color:#c7deeb;font-size:.63rem;line-height:1.35}
  .mobile-nav-support a{display:flex;min-height:44px;align-items:center;padding:0 10px;border-radius:11px;background:#fff;color:#00467f;font-size:.7rem;font-weight:850;white-space:nowrap}

  .mobile-bottom-nav{
    position:fixed;
    right:10px;
    bottom:max(8px,env(safe-area-inset-bottom));
    left:10px;
    z-index:1500;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:var(--mobile-nav-height);
    padding:5px;
    border:1px solid rgba(169,201,219,.72);
    border-radius:16px;
    background:rgba(250,253,255,.96);
    box-shadow:0 12px 34px rgba(0,34,72,.2);
  }
  .mobile-bottom-item{
    position:relative;
    display:grid;
    min-width:0;
    min-height:54px;
    place-items:center;
    align-content:center;
    gap:2px;
    padding:3px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#5c7487;
    font-family:inherit;
    cursor:pointer;
  }
  .mobile-bottom-item.is-active{background:#e5f1f7;color:var(--mobile-blue)}
  .mobile-bottom-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-item span{overflow:hidden;max-width:100%;font-size:.64rem;font-weight:800;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .mobile-bottom-item b{
    position:absolute;
    top:1px;
    left:calc(50% + 6px);
    display:grid;
    min-width:18px;
    height:18px;
    place-items:center;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:999px;
    background:#d73737;
    color:#fff;
    font-size:.55rem;
    line-height:1;
  }
  .mobile-bottom-item b[hidden]{display:none}

  body[data-mobile-page] .cart-drawer[open]{animation-duration:.28s}
  body[data-mobile-page] .cart-quantity{grid-template-columns:44px 36px 44px}
  body[data-mobile-page] .cart-quantity button{width:44px;height:44px}
  body[data-mobile-page] .cart-remove{min-height:44px;padding-inline:8px}
  body[data-mobile-page] .cart-item-name{display:block;min-height:44px}
  body[data-mobile-page] .cart-toast,
  body[data-mobile-page] .toast{bottom:calc(var(--mobile-nav-height) + max(22px,env(safe-area-inset-bottom)))}

  .mobile-nav-close:active,.mobile-nav-item:active,.mobile-nav-support a:active,.mobile-bottom-item:active{transform:scale(.97)}
}

@media (min-width:521px) and (max-width:767.98px),
       (min-width:521px) and (max-height:500px) and (pointer:coarse){
  body[data-mobile-page] .logo{width:138px}
  body[data-mobile-page] .logo-picture{width:138px;height:42px;flex-basis:138px}
}

@media (max-height:500px) and (pointer:coarse){
  body[data-mobile-page] .header-main{grid-template-rows:48px;padding-block:5px}
  .mobile-nav-support{margin-bottom:max(8px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .mobile-nav-shell,.mobile-nav-drawer::backdrop,.mobile-bottom-item{animation:none!important;transition:none!important}
}