@import url("main.css");
@import url("styles.css");

/* =============================== */
/* HERO STACKING CONTEXT FIX       */
/* =============================== */

#heroStage{
  position: relative;
  isolation: isolate;
}

/* =============================== */
/* HERO CAROUSEL VISIBILITY FIX    */
/* =============================== */

/* Base state for all hero pouches */
#heroStack img{
  position:absolute;
  opacity:0;
  transform: translateX(0) scale(.85);
  transition: transform .6s ease, opacity .6s ease;
  z-index:1;
}

/* Center / active pouch */
#heroStack img.pos-center,
#heroStack img.pos-active{
  opacity:1;
  transform: translateX(0) scale(1);
  z-index:3;
}

/* Left pouch */
#heroStack img.pos-left{
  opacity:.55;
  transform: translateX(-40%) scale(.85);
  z-index:2;
}

/* Right pouch */
#heroStack img.pos-right{
  opacity:.55;
  transform: translateX(40%) scale(.85);
  z-index:2;
}

/* Hidden pouch */
#heroStack img.pos-hidden{
  opacity:0;
  z-index:1;
}

/* =============================== */
/* Hero pouch click pop (index only) */
/* =============================== */

#heroStack img.pos-active{ cursor:pointer; }
#heroStack img.hero-pop{ animation: heroPopGlow 180ms ease-out; }

@keyframes heroPopGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(216,179,90,0)); }
  50%{ filter: drop-shadow(0 18px 56px rgba(216,179,90,.22)); }
  100%{ filter: drop-shadow(0 0 0 rgba(216,179,90,0)); }
}

/* =============================== */
/* Ensure hero overlays never block clicks */
/* =============================== */

#heroGlow,
#heroDust{
  pointer-events:none !important;
}

#heroDust{
  position:absolute;
  inset:0;
  z-index:1;
}

#heroGlow{
  position:absolute;
  inset:0;
  z-index:0;
}

#heroStack{
  position:relative;
  z-index:2;
}

/* =============================== */
/* Small CTA row used in gifting cards */
/* =============================== */

.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =============================== */
/* Hero stage pop effect */
/* =============================== */

#heroStage.pop .pouch.stack-active{
  transform: translateY(-10px) scale(1.04);
  transition: transform 180ms ease;
}
/* =============================== */
/* HERO CAROUSEL JS CLASS MATCH    */
/* =============================== */

#heroStack img.pos-prev{
  opacity: .55;
  transform: translateX(-40%) scale(.85);
  z-index: 2;
}

#heroStack img.pos-next{
  opacity: .55;
  transform: translateX(40%) scale(.85);
  z-index: 2;
}

#heroStack img.pos-prev2{
  opacity: .25;
  transform: translateX(-75%) scale(.7);
  z-index: 1;
}

#heroStack img.pos-next2{
  opacity: .25;
  transform: translateX(75%) scale(.7);
  z-index: 1;
}
/* =============================== */
/* HERO STAGE (FINAL SPACING)      */
/* =============================== */

#heroStage{
  position: relative;
  width: 100%;
  display: block;
  overflow: visible;
}

/* =============================== */
/* HERO STACK (WIDER + AIR)        */
/* =============================== */

#heroStack{
  position: relative;
  width: 100%;
  max-width: 1500px;   /* wider cinematic span */
  height: 460px;
  margin: 0 auto;
  z-index: 2;
}

/* =============================== */
/* HERO IMAGE BASE                 */
/* =============================== */

#heroStack img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  transition: transform .7s ease, opacity .7s ease;
}

/* =============================== */
/* HERO STATES (CINEMATIC)         */
/* =============================== */

/* Center hero */
#heroStack img.pos-active{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
  z-index: 4;
}

/* Near left */
#heroStack img.pos-prev{
  opacity: .55;
  transform: translate(-82%, -50%) scale(.9);
  z-index: 3;
}

/* Near right */
#heroStack img.pos-next{
  opacity: .55;
  transform: translate(-18%, -50%) scale(.9);
  z-index: 3;
}

/* Far left */
#heroStack img.pos-prev2{
  opacity: .22;
  transform: translate(-115%, -50%) scale(.78);
  z-index: 2;
}

/* Far right */
#heroStack img.pos-next2{
  opacity: .22;
  transform: translate(15%, -50%) scale(.78);
  z-index: 2;
}

/* Hidden */
#heroStack img.pos-hidden{
  opacity: 0;
  z-index: 1;
}
/* =============================== */
/* SHOP PRODUCT IMAGE RESET        */
/* =============================== */

.product-card img,
.product-tile img,
.shop-card img {
  position: relative !important;
  top: auto !important;
  left: auto !important;

  transform: none !important;
  opacity: 1 !important;

  width: 100%;
  height: auto;
  max-height: 260px;

  object-fit: contain;
  display: block;
}
/* =========================================
   JUNIORS PAGE – VISUAL LOCK
   ========================================= */

/* Lock card height consistency */
.juniors-hero .mini-card,
.juniors-hero .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}

/* Lock media container size */
.juniors-hero [data-media],
.juniors-hero .bottle-placeholder,
.juniors-hero .book-placeholder {
  height: 160px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Lock image scaling */
.juniors-hero img {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Prevent shop/global rules from leaking */
.juniors-hero .product-card img,
.juniors-hero .product-tile img,
.juniors-hero .shop-card img {
  max-height: 150px !important;
}
.kitchen-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 24px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;

  -webkit-overflow-scrolling: touch;
}

.kitchen-carousel::-webkit-scrollbar {
  display: none;
}

.kitchen-carousel .tile {
  scroll-snap-align: start;
}
/* =============================== */
/* SHOP – GRILL IMAGE SIZE LOCK    */
/* =============================== */

.card.product img{
  max-height: 200px;
  width: auto;
  max-width: 100%;

  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}
.brand-mark img.brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:999px;
  display:block;
}