.mobile-menu-overlay{display:none}
.pdp-media-dots{display:none}

@media (max-width:767px){
  /* Sticky header so cart/search stay reachable while scrolling */
  .site-header{position:sticky;top:0;z-index:100;background:#fff}
  body.mobile-menu-open{overflow:hidden;touch-action:none}
  .mobile-menu-overlay{position:fixed;z-index:9998;inset:0;display:block;visibility:hidden;opacity:0;background:rgba(0,0,0,.5);transition:opacity .25s ease,visibility .25s ease}
  .mobile-menu-overlay.visible{visibility:visible;opacity:1}
  .category-nav{z-index:9999!important;inset:0 auto 0 0!important;width:min(85vw,360px)!important;max-width:85vw!important;height:100dvh!important;visibility:visible!important;overflow:hidden!important;background:#fff!important;box-shadow:12px 0 34px rgba(0,0,0,.18);transform:translate3d(-105%,0,0)!important;transition:transform .28s cubic-bezier(.22,.61,.36,1)!important}
  .category-nav.open{transform:translate3d(0,0,0)!important}
  .category-nav-inner{width:100%!important;height:100%!important;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 32px!important;background:#fff!important;-webkit-overflow-scrolling:touch}
  .category-nav .mobile-close{position:sticky;z-index:2;top:-18px;display:block!important;margin:0 -4px 12px!important;padding:18px 4px 15px!important;border-bottom:1px solid #e9e9e9!important;background:#fff!important;color:#1c1c1c;font-size:12px!important;font-weight:700;text-align:right!important;letter-spacing:.04em}
  .category-nav button,.category-nav a{width:100%;white-space:normal!important;overflow-wrap:anywhere}

  /* Hero readability on narrow screens */
  .hero-copy{padding:42px 18px 50px}
  .hero-slide h1{font-size:clamp(34px,11vw,52px);line-height:0.98;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}
  .hero-copy > p:not(.kicker){font-size:14px;line-height:1.65;margin-bottom:28px}
  .hero-note{right:18px;bottom:18px;width:160px;padding:14px}

  /* Prevent iOS auto-zoom when focusing text inputs / textareas (font-size < 16px triggers zoom) */
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  textarea{font-size:16px}
  .search{height:44px;padding:0 12px}
  .search svg{width:18px;height:18px}

  /* Better touch feedback / no grey flash on tap */
  button,a,[role="button"],.add-btn,.round-category,.product-card,.category-nav button,.category-nav a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

  /* Footer links larger tap area */
  .footer-grid a{display:inline-block;padding:6px 0}
  .footer-grid h3{margin-bottom:14px}

  /* PDP */
  .pdp-breadcrumb{display:flex!important;width:calc(100% - 28px)!important;min-width:0;flex-wrap:wrap;align-items:flex-start;gap:5px 7px!important;margin:0 auto 8px!important;padding:15px 0 10px!important;overflow-wrap:anywhere;word-break:break-word;line-height:1.45}
  .pdp-breadcrumb>*{min-width:0;max-width:100%}
  .pdp-breadcrumb>span:last-child{flex:1 1 100%;margin-top:2px;color:#474747}
  .pdp-hero{width:100%!important;max-width:100%!important;margin:0 auto 50px!important;padding:0 14px;overflow:hidden}
  .pdp-gallery{position:static!important;display:flex!important;width:100%!important;max-width:100%!important;min-width:0;flex-direction:column;gap:10px!important;overflow:hidden}
  .pdp-main-media{order:1;width:100%!important;max-width:100%!important;min-width:0;aspect-ratio:1/1!important;height:auto!important;padding:clamp(12px,5vw,22px)!important;overflow:hidden;background:#f3efec;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .pdp-main-media img{display:block;width:100%!important;max-width:100%!important;height:100%!important;object-fit:contain!important;object-position:center}
  .pdp-thumbs{order:2;display:flex!important;width:100%;max-width:100%;gap:8px;overflow-x:auto;padding:0 0 4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pdp-thumbs::-webkit-scrollbar{display:none}
  .pdp-thumb{width:58px!important;min-width:58px;height:58px;scroll-snap-align:start}
  .pdp-thumb img{object-fit:contain!important}
  .pdp-media-dots{position:absolute;z-index:3;right:0;bottom:9px;left:0;display:flex;justify-content:center;gap:6px;pointer-events:auto}
  .pdp-media-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:rgba(23,21,21,.28);box-shadow:0 0 0 2px rgba(255,255,255,.72);transition:width .18s,background .18s}
  .pdp-media-dot.active{width:18px;border-radius:5px;background:#171515}
  .pdp-buybox{width:100%;min-width:0;padding-top:8px}
  .pdp-buybox h1{overflow-wrap:anywhere;word-break:break-word}

  /* Disable hover transforms on touch devices to avoid stuck zoom states */
  @media (hover:none){
    .product-card:hover .product-image img{transform:none}
    .round-category:hover > span,.round-category.active > span{transform:none;box-shadow:inset 0 0 0 3px #fff}
    .button:hover{transform:none}
    .add-btn:hover{color:inherit;background:transparent}
  }
}

@media (max-width:480px){
  /* Product grid tighter but still tappable */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:26px 6px}
  .product-info{padding:13px 2px 0}
  .product-info h3{font-size:11px;line-height:1.4;min-height:31px}
  .product-brand{font-size:8px}
  .product-rating{font-size:8px}
  .price{font-size:13px}
  .compare-price{font-size:10px}
  .saving{font-size:8px}
  .add-btn{width:38px;height:38px;min-width:38px;min-height:38px;font-size:18px}
  .favorite{top:8px;right:8px;width:28px;height:28px;font-size:14px}
  .badge{top:8px;left:8px;font-size:7px;padding:5px 7px}

  /* Footer single column for easiest scanning */
  .footer-grid{grid-template-columns:1fr;gap:32px 0;text-align:center}
  .footer-brand{grid-column:auto}
  .footer-bottom{display:block;text-align:center}

  /* Cart drawer more comfortable on very small screens */
  .cart-drawer{width:100%}
  .cart-drawer > header,.cart-items,.cart-summary,.checkout-form{padding-right:18px;padding-left:18px}
  .cart-item{grid-template-columns:70px 1fr;gap:12px}
  .cart-item img{width:70px;height:90px}
  .cart-item .qty{grid-column:2;width:max-content}
  .payment-methods label{padding:12px}
}

@media (max-width:360px){
  .hero-slide h1{font-size:clamp(30px,10.5vw,42px)}
  .hero-copy{padding:34px 14px 42px}
  .product-grid{gap:22px 5px}
}