/* ==========================================================================
   GEMHUB & CO. - homepage product carousels
   Loads AFTER theme.css. The theme already ships a `.gh-carousel` (used for
   related products on the PDP); these rules are scoped to
   `.gh-carousel-featured` so they only touch the homepage rows and never
   change the shared `.gh-card` component.
   ========================================================================== */

.gh-carousel-featured{
  --gh-car-gap:22px;
  --gh-car-visible:4.5;          /* ~4.5 cards on desktop: the half card is the scroll cue */
  --gh-car-fade:48px;
  --gh-car-nav:46px;
  position:relative;
  padding:0;                     /* the theme's .gh-carousel has 0 32px; the wrap already pads */
  margin:0 calc(var(--gh-car-fade) * -1);
}

/* the scroller */
.gh-carousel-featured .woocommerce{position:relative}
.gh-carousel-featured ul.products.gh-carousel-track{
  display:flex; flex-wrap:nowrap; grid-template-columns:none;
  gap:var(--gh-car-gap);
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-left:var(--gh-car-fade);
  padding:8px var(--gh-car-fade) 14px;   /* side padding = fade width so the first/last card clears it */
  margin:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gh-carousel-featured ul.products.gh-carousel-track::-webkit-scrollbar{display:none}

/* card width: (track content width - gaps) / visible cards.
   100% here is the ul's content box, which already excludes the side padding. */
.gh-carousel-featured ul.products.gh-carousel-track > li.product{
  flex:0 0 auto;
  width:calc((100% - (var(--gh-car-gap) * (var(--gh-car-visible) - 1))) / var(--gh-car-visible)) !important;
  max-width:none;
  margin:0 !important;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
/* the theme's hover lift needs room, otherwise the shadow is clipped by overflow */
.gh-carousel-featured ul.products.gh-carousel-track > li.product.gh-card{
  transform:none;
}
.gh-carousel-featured ul.products.gh-carousel-track > li.product.gh-card:hover{
  transform:translateY(-3px);
}

/* square media regardless of source image size */
.gh-carousel-featured .gh-card-img{display:block; aspect-ratio:1/1; overflow:hidden}
.gh-carousel-featured .gh-card-img img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover}

/* edge fades: tell the eye the row continues. They sit over the padding
   band, above the cards but below the arrows, and never catch the pointer. */
.gh-carousel-featured::before,
.gh-carousel-featured::after{
  content:''; position:absolute; top:0; bottom:0; width:var(--gh-car-fade);
  z-index:4; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.gh-carousel-featured::before{left:0;  background:linear-gradient(90deg,#fff 20%,rgba(255,255,255,0))}
.gh-carousel-featured::after {right:0; background:linear-gradient(270deg,#fff 20%,rgba(255,255,255,0))}
.gh-featured-alt .gh-carousel-featured::before{background:linear-gradient(90deg,var(--cream) 20%,rgba(250,248,245,0))}
.gh-featured-alt .gh-carousel-featured::after {background:linear-gradient(270deg,var(--cream) 20%,rgba(250,248,245,0))}
/* fade only where there is more to see */
.gh-carousel-featured.is-at-start::before{opacity:0}
.gh-carousel-featured.is-at-end::after{opacity:0}

/* arrows - theme variables, sitting on the fade band, vertically centred on the image */
.gh-carousel-featured .gh-carousel-nav{
  position:absolute; z-index:6;
  top:calc(var(--gh-car-fade) * 0 + 8px);     /* aligned to the track's top padding ... */
  transform:none;
  /* ... then pushed down by half the image height; the image is square and
     as wide as the card, so this is half the card width. */
  margin-top:calc((100% - (var(--gh-car-fade) * 2) - (var(--gh-car-gap) * (var(--gh-car-visible) - 1))) / var(--gh-car-visible) / 2 - (var(--gh-car-nav) / 2));
  width:var(--gh-car-nav); height:var(--gh-car-nav);
  border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer;
  display:grid; place-items:center; padding:0;
  box-shadow:0 8px 24px rgba(28,28,28,.12);
  transition:border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.gh-carousel-featured .gh-carousel-nav svg{display:block}
.gh-carousel-featured .gh-carousel-nav:hover{border-color:var(--gold); color:var(--gold-d)}
.gh-carousel-featured .gh-carousel-nav:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.gh-carousel-featured .gh-carousel-nav[disabled]{opacity:0; pointer-events:none}
.gh-carousel-featured .gh-carousel-prev{left:calc(var(--gh-car-fade) - (var(--gh-car-nav) / 2))}
.gh-carousel-featured .gh-carousel-next{right:calc(var(--gh-car-fade) - (var(--gh-car-nav) / 2))}
/* nothing to scroll -> no arrows, no fades */
.gh-carousel-featured:not(.has-overflow) .gh-carousel-nav,
.gh-carousel-featured:not(.has-overflow)::before,
.gh-carousel-featured:not(.has-overflow)::after{display:none}

/* WordPress/WooCommerce core provide .screen-reader-text on the live site;
   this scoped fallback keeps price-range SR text hidden even if a plugin
   dequeues those styles */
.gh-carousel-featured .screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); border:0; white-space:nowrap;
}

/* keyboard users can tab into the track and use arrow keys */
.gh-carousel-featured ul.products.gh-carousel-track:focus-visible{outline:2px solid var(--gold); outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .gh-carousel-featured ul.products.gh-carousel-track{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gh-carousel-featured{--gh-car-visible:3.5}
}
@media (max-width:980px){
  .gh-carousel-featured{--gh-car-visible:2.6; --gh-car-fade:32px; --gh-car-nav:40px}
}
@media (max-width:780px){
  /* 2.2 cards: the partial third card is the scroll hint. Arrows stay
     hidden on touch-first sizes like the theme's PDP carousel. */
  .gh-carousel-featured{--gh-car-visible:2.2; --gh-car-gap:14px; --gh-car-fade:22px}
  .gh-carousel-featured .gh-carousel-nav{display:none}
  .gh-carousel-featured ul.products.gh-carousel-track{padding-top:4px; padding-bottom:10px}
}