/* BLUBUD responsive layer for the product pages. Loaded after each page's own styles so it can fix the shared layout once:
   phone -> iPad (portrait and landscape) -> laptop -> very large monitors, with no horizontal scrolling at any width. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas{max-width:100%}
body{overflow-x:hidden}

/* very large screens: the whole page scales up smoothly instead of floating as a small block (16px up to 1600px wide, 20px at 2560px) */
@media(min-width:1600px){html{font-size:clamp(16px,calc(16px + (100vw - 1600px)*.0045),22px)}}

/* the hero grid: its two columns may shrink, and the picture is sized by its column, never forced wider than it */
.product-hero{max-width:min(1280px,94vw);padding:clamp(1.25rem,3vw,3rem) clamp(1.25rem,4vw,2rem) 2rem;gap:clamp(1.5rem,4vw,4rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.product-hero>*{min-width:0}
.product-image-wrap{min-height:0;width:100%;aspect-ratio:1}
.product-content{max-width:min(1280px,94vw);padding-left:clamp(1.25rem,4vw,2rem);padding-right:clamp(1.25rem,4vw,2rem);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.product-content>*{min-width:0}
.product-name{overflow-wrap:anywhere}

/* tablets in portrait and anything narrower: one column, the picture centred above the details */
@media(max-width:900px){
  .product-hero{display:block;max-width:640px;padding:1.25rem clamp(1rem,4vw,1.75rem) 1.5rem}
  .product-image-wrap{position:relative;top:auto;max-width:560px;margin:0 auto 1.75rem}
  .product-content{grid-template-columns:minmax(0,1fr);max-width:640px;padding:0 clamp(1rem,4vw,1.75rem) 3rem;gap:1.25rem}
}
/* tablets in landscape and small laptops keep two columns but a tighter gap */
@media(min-width:901px) and (max-width:1100px){
  .product-hero{gap:2rem}
  .product-content{gap:1.5rem}
}

/* phones */
@media(max-width:520px){
  .topnav{padding:0 1rem}
  .breadcrumb{padding:.55rem 1rem;overflow-wrap:anywhere}
  .section-card,.cert-block{padding:1.15rem}
  .specs-table,.specs-table tbody,.specs-table tr,.specs-table td{display:block;width:100%}
  .specs-table td:first-child{width:auto;padding:.7rem 0 .1rem;white-space:normal}
  .specs-table td:last-child{padding:0 0 .7rem}
  .page-footer{padding:1.2rem 1rem}
}
.toast{max-width:calc(100vw - 2rem);white-space:normal;text-align:center}

/* touch screens: comfortably large targets */
@media(pointer:coarse){
  .size-pill{min-height:44px;min-width:48px}
  .qty-btn{width:44px;height:44px}
  .qty-val{height:44px;line-height:44px}
  .img-arr{width:44px;height:44px}
  .btn-back,.btn-continue,.btn-checkout{min-height:44px}
}

/* landscape phones: don't let the sticky bar eat the screen */
@media(max-height:480px) and (orientation:landscape){
  .topnav{position:static}
  .product-image-wrap{position:relative;top:auto}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}