/* Shop / Shop All hero banner slideshow (shop.html #shop-hero, shop-all.html
   #shop-all-hero). Only these two pages load this file. The hero section's own
   padding (the banner starts below the fixed header) lives in each page's
   style block. Arrow look matches .color-swatch-arrow in product-gallery.css.
   See PROJECT_NOTES.md, "Shop hero slideshow". */
.shop-hero-inner{width:100%;}
.shop-hero-heading-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.shop-slideshow{
  position:relative; width:100%; max-width:1600px; margin:0 auto;
  aspect-ratio:3/1; overflow:hidden; touch-action:pan-y;
}
.shop-slideshow:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
.shop-slide{
  position:absolute; inset:0; visibility:hidden;
  transform:translateX(100%); transition:none;
}
.shop-slide.is-current{visibility:visible; transform:none;}
.shop-slide img{display:block; width:100%; height:100%; max-width:none; object-fit:contain; user-select:none; -webkit-user-drag:none;}
.shop-slides-animating .shop-slide{transition:transform .5s ease;}

.shop-slideshow-controls{
  display:flex; align-items:center; justify-content:center; gap:4px;
  min-height:44px; margin-top:14px; padding:0 8px;
}
.shop-slideshow-controls[hidden]{display:none;}
.shop-slide-arrow{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; padding:0;
  border:0; border-radius:0; background:transparent; color:#fff; cursor:pointer; opacity:.82;
  transition:opacity .18s ease;
}
.shop-slide-arrow svg{
  width:15px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease;
}
.shop-slide-arrow:hover{opacity:1;}
.shop-slide-arrow:hover svg{transform:scale(1.12);}
/* Same look as .color-swatch-arrow in product-gallery.css: the white arrow alone, a slight grow on hover and a white
   ring on keyboard focus. The button stays a 44px tap area; the ring hugs the visible arrow, like the swatch arrows'. */
.shop-slide-arrow:focus-visible{opacity:1; outline:0;}
.shop-slide-arrow:focus-visible svg{outline:2px solid #fff; outline-offset:3px;}
.shop-slide-dots{display:flex; align-items:center; justify-content:center;}
.shop-slide-dot{
  position:relative; width:22px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
}
.shop-slide-dot::before{
  content:''; position:absolute; top:50%; left:50%; width:10px; height:10px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid var(--gold); background:transparent; transition:background .2s ease, transform .2s ease;
}
.shop-slide-dot:hover::before{background:rgba(201,162,39,0.45);}
.shop-slide-dot[aria-current="true"]::before{background:var(--gold); transform:translate(-50%,-50%) scale(1.2);}
.shop-slide-dot:focus-visible{outline:2px solid var(--gold); outline-offset:-3px; border-radius:6px;}

@media (max-width:380px){
  .shop-slideshow-controls{gap:2px; padding:0 4px;}
  .shop-slide-dot{width:18px;}
}
@media (prefers-reduced-motion:reduce){
  .shop-slides-animating .shop-slide{transition:none;}
}