html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,button,label,summary,select{touch-action:manipulation}

.i-home::before{left:3.5px;top:8.5px;width:13px;height:9.5px;border:1.7px solid currentColor;border-top:0;border-radius:0 0 2px 2px}
.i-home::after{left:4.6px;top:3.6px;width:10.8px;height:10.8px;border:solid currentColor;border-width:1.7px 0 0 1.7px;border-radius:2px 0 0 0;transform:rotate(45deg)}
.i-grid::before{left:2.5px;top:2.5px;width:6.5px;height:6.5px;border-radius:2px;background:currentColor;box-shadow:8.5px 0 0 currentColor,0 8.5px 0 currentColor,8.5px 8.5px 0 currentColor}

.tabbar,.msearch,.view-dots,.sum-toggle{display:none}
.ftr-col summary{list-style:none}
.ftr-col summary::-webkit-details-marker{display:none}
@media (min-width:901px){.ftr-col summary{pointer-events:none}}

@media (hover:none){
  .card:hover .pack,.cat-tile:hover .pack,.promo:hover .pack{transform:none}
  .btn--card:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
  .btn--card:active{background:var(--brand);color:#fff;border-color:var(--brand)}
  .tool:hover,.icon-btn:hover{background:transparent}
}

@media (max-width:980px){
  .hdr-main{grid-template-columns:auto minmax(0,1fr) auto;height:56px;gap:4px}
  .logo{justify-self:start;font-size:18px}
  .tool--search,#hdrAccount{display:none}
  .msearch{display:block;padding-bottom:10px}
  .msearch-btn{width:100%;height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;background:var(--soft);color:#80868F;font-size:15px;text-align:left}
  .msearch-btn .i{color:var(--muted)}

  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:58;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .35s var(--ease)}
  .tabbar>a,.tabbar>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;font-size:11px;font-weight:500;color:var(--muted);transition:color .2s}
  .tabbar>a:active,.tabbar>button:active{color:var(--ink)}
  .tabbar .is-on{color:var(--brand)}
  .tabbar .i-heart{transform:scale(.9)}
  .tb-ic{position:relative;display:inline-flex}
  .tb-ic .badge{position:absolute;top:-7px;right:-11px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;box-shadow:0 0 0 2px #fff}

  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  body[data-route="checkout"]{padding-bottom:0}
  body[data-route="p"]{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  body[data-route="p"] .tabbar,body[data-route="checkout"] .tabbar{transform:translateY(110%)}
  .toasts{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  body[data-route="checkout"] .toasts{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body[data-route="p"] .toasts{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .mmenu{width:min(360px,88%)}
  body.is-locked .toasts{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
}

@media (max-width:760px){
  /* 16px inputs keep iOS from zooming on focus */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.input,.hsearch input,.search-field input,.promo-f .input{font-size:16px}
  .app,.wrap,.hdr-main,.toolbar,.buy,.sum-line{min-width:0}
  img,video,canvas{max-width:100%}
  .announce{height:32px;font-size:12px}
  .sec{margin-top:52px}
  .sec-hd{margin-bottom:16px}
  .h1{font-size:28px}
  .h2{font-size:23px}

  .rail,.cat-grid,.quick-cats{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  #revRail{grid-auto-columns:84%}
  .rail{grid-auto-columns:47%}

  .home-top{padding-top:12px;gap:12px}
  .slider{border-radius:14px}
  .slide{padding:18px 20px 54px}
  .slide h2{font-size:30px}
  .slide p{font-size:15px}
  .slide-art{height:210px}
  .slider-ui{left:20px;bottom:12px}
  .promos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .promos::-webkit-scrollbar{display:none}
  .promo{min-height:196px;scroll-snap-align:start;padding:22px}
  .usp{margin-top:12px}
  .usp div{padding:12px 14px;font-size:13px}
  .guide{padding:20px}

  .shop-top{padding-block:6px 14px}
  .shop-top p{font-size:14px}
  .quick-cats{padding-bottom:14px}
  .toolbar{margin-bottom:16px;flex-wrap:nowrap;align-items:flex-start}
  .toolbar>.toolbar-l{flex:1;min-width:0;flex-wrap:wrap;padding-top:10px}
  #resCount{white-space:nowrap}
  #activeChips{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #activeChips:empty{display:none}
  #activeChips::-webkit-scrollbar{display:none}
  .select>.muted{display:none}
  .badges{left:8px;top:8px;gap:4px}
  .badges .badge-s{height:21px;padding:0 7px;font-size:11px}
  .fav-btn{right:8px;top:8px;width:32px;height:32px}
  .btn.filter-open{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:57;height:44px;padding:0 22px;border-radius:22px;background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
  .btn.filter-open:active{transform:translateX(-50%) scale(.97)}

  .cart-page .line{grid-template-columns:84px minmax(0,1fr)}

  .drawer-hd{padding:12px 10px 12px 16px}
  .ship{padding:12px 16px 14px}
  .drawer-body{padding:0 16px}
  .drawer-ft{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));gap:10px}
  .drawer-ft .btn--ghost{height:44px}

  .ftr{margin-top:64px}
  .ftr-news-in{padding-block:24px}
  .inline-field{flex-direction:column}
  .inline-field .btn{width:100%}
  .ftr-grid{grid-template-columns:1fr;gap:0;padding-block:24px 20px}
  .ftr-brand{padding-bottom:18px}
  .ftr-col{display:block;border-top:1px solid var(--line)}
  .ftr-col:last-child{border-bottom:1px solid var(--line)}
  .ftr-col summary{display:flex;justify-content:space-between;align-items:center;padding:15px 0;cursor:pointer}
  .ftr-col summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.7px 1.7px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
  .ftr-col[open] summary::after{transform:rotate(-135deg)}
  .ftr-col h4{margin:0;font-size:15px}
  .ftr-col a{display:block;padding:9px 0}
  .ftr-col[open]{padding-bottom:10px}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:900px){
  .pdp{gap:18px;padding-top:4px}
  .gallery{margin-inline:calc(-1 * var(--gutter))}
  .view .stage{border-radius:0;animation:fadeIn .3s ease}
  .thumbs{display:none}
  .view-dots{display:flex;justify-content:center;gap:6px;padding-top:12px}
  .view-dots button{width:22px;height:22px;display:grid;place-items:center}
  .view-dots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .3s var(--ease),background .3s}
  .view-dots button[aria-current="true"] i{width:18px;background:var(--ink)}
  .buy{gap:18px}
  .buy h1{font-size:28px}
  .buy-price strong{font-size:26px}
  .notes-row{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .note{flex:none}
  .optb{flex:1 1 0;min-width:0}
  .qty--lg{grid-template-columns:38px 34px 38px;height:52px}
  .buy-row .btn{height:52px;padding:0 14px}
  .fav-sq{width:52px;height:52px}
  .hide-sm{display:none}
  .sticky-buy{gap:10px;padding-top:10px}
  .sticky-buy .btn{height:44px;padding:0 18px}
}

@media (max-width:960px){
  .co-wrap .two{gap:20px}
  #coSummary{order:-1}
  .summary{position:static;padding:16px 18px;border-radius:12px}
  .sum-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:14px;font-weight:500;color:var(--brand);margin-top:-4px}
  .summary:not(.is-open) .sum-lines{display:none}
  .co-sec-hd h2{font-size:18px}
  .radio-card{padding:14px}
  .co-aside{margin-left:0;flex-basis:100%}
}
