/* product-gallery.css — Leaf & Spirit photo carousel */

/* ── Wrapper ── */
.product-gallery {
  position: relative;
  outline: none; /* keyboard focus managed via children */
}

/* ── Main image area: fixed square aspect-ratio to prevent layout shift ── */
.gallery-main-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream);
}

.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  transition: opacity 0.25s ease, filter .4s var(--ease-silk, cubic-bezier(.22,.61,.36,1));
}

@media (prefers-reduced-motion: reduce) {
  .gallery-main-img { transition: none; }
}

/* ── Packaging/filling swatch overlay: fades in over the main photo when a
   packaging or unit label is hovered; shows the whole image (contain) on a
   soft background so nothing is cropped. ── */
.gallery-swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6%;
  object-fit: contain;
  border-radius: 18px;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-silk, cubic-bezier(.22,.61,.36,1)), visibility .25s;
  pointer-events: none;
  z-index: 6;
}
.gallery-main-wrap.is-swatch .gallery-swatch {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-swatch { transition: opacity .2s; }
}

/* ── Hover-zoom: a high-res layer that magnifies and pans with the cursor.
   Desktop only (toggled by JS, which checks hover capability). ── */
.gallery-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  transform: scale(1);             /* matched to the photo … */
  transform-origin: 50% 50%;       /* moved to the cursor by JS */
  pointer-events: none;            /* never intercept the mousemove / arrow clicks */
  z-index: 1;                      /* below the nav arrows (z-index 2) */
  /* GPU-composited transform + opacity only — smooth in Safari. Exit is a
     touch quicker than the enter push-in below. */
  transition:
    opacity .3s var(--ease-silk, cubic-bezier(.22,.61,.36,1)),
    transform .35s var(--ease-silk, cubic-bezier(.22,.61,.36,1));
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.gallery-main-wrap.is-zooming { cursor: zoom-in; }
.gallery-main-wrap.is-zooming .gallery-zoom {
  opacity: 1;
  transform: scale(2);             /* … then pushes in to ~2x toward the cursor */
  /* Enter: a slower, silky push-in. transform-origin (the cursor pan) is not
     transitioned, so tracking is instant and jank-free. */
  transition:
    opacity .4s var(--ease-silk, cubic-bezier(.22,.61,.36,1)),
    transform .5s var(--ease-silk, cubic-bezier(.22,.61,.36,1));
}
/* The photo beneath settles back a hair for depth while the sharp layer rises. */
.gallery-main-wrap.is-zooming .gallery-main-img { filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) {
  .gallery-zoom { transition: opacity .2s ease; }
}

/* ── Prev / Next arrow buttons ── */
.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(253, 252, 248, 0.88); /* --cream with alpha */
  border: 1px solid var(--gold-light);
  color: var(--text);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(44, 36, 22, 0.12);
}

.gallery-prev { left: 0.6rem; }
.gallery-next { right: 0.6rem; }

.gallery-prev:hover,
.gallery-next:hover {
  background: var(--cream);
  box-shadow: 0 4px 16px rgba(44, 36, 22, 0.18);
}

.gallery-prev:focus-visible,
.gallery-next:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Hide arrows when only 1 image */
.gallery-single .gallery-prev,
.gallery-single .gallery-next {
  display: none;
}

/* ── Thumbnail strip ── */
.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  /* When the thumbs fit (desktop), spread them so the first/last align with
     the main image's edges; when they overflow (mobile) this is ignored and
     the strip simply scrolls. */
  justify-content: space-between;
  margin-top: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  padding-bottom: 2px; /* prevent clipping focus ring */
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

/* Hide thumb strip when only 1 image */
.gallery-single .gallery-thumbs {
  display: none;
}

/* ── Individual thumbnail ── */
.gallery-thumb-item {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  /* Inactive thumbs are dimmed so the selected one clearly stands out; the
     frame is an inset shadow (not a border) so it hugs the rounded corners
     evenly with no gap between the image and the frame. */
  opacity: .55;
  transition: box-shadow 0.15s, opacity 0.15s;
  scroll-snap-align: start;
  background: var(--cream);
}

/* Hover brightens the thumb and previews a soft frame. */
.gallery-thumb-item:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--gold-light);
}

.gallery-thumb-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Selected: full brightness + a bold gold frame and ring so it's unmistakable. */
.gallery-thumb-item.is-active {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold);
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* click handled by parent */
}
/* The broad `.product-detail-media img` rule rounds every image at 18px; the
   thumbnail must stay square so the 8px-rounded container clips it with no
   cream gap at the corners. (Two classes outspecify that class+type rule.) */
.gallery-thumb-item .gallery-thumb { border-radius: 0; }

/* ── Order block (inside the info column, after the details) ── */
.pdp-order-block {
  margin-top: 1.75rem;
  padding: 1.5rem 1.6rem 1.65rem;
  border: 1px solid var(--gold-light);
  border-radius: 16px;
  background: var(--warm-white);
  box-shadow: 0 6px 28px rgba(61, 74, 53, .07);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Buy area: variants, then divider · price · qty+button row, then trust notes */
.pdp-order-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
}
/* Divider only when packaging variants sit above the buy row */
.pdp-variants + .pdp-buy {
  border-top: 1px solid var(--gold-light);
  padding-top: 1.1rem; /* matches the 1.1rem container gap above the line */
}
/* Price now lives inside the add-to-cart button */
.btn-add-to-cart-primary .atc-sep { opacity: .55; }
.btn-add-to-cart-primary .atc-price { font-variant-numeric: tabular-nums; }
.pdp-buy-row {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.pdp-buy-row .btn-add-to-cart-primary { flex: 1 1 auto; }
/* Narrow info column (small phone OR the 2-up tablet product grid): the qty
   stepper leaves too little room for the button beside it, so drop the button
   to its own full-width line. A container query keys off the actual column
   width, so it fires whenever the column is narrow regardless of viewport.
   Trim the button's padding / tracking / gap so "label · price" never spills. */
@container (max-width: 490px) {
  .pdp-buy-row { flex-wrap: wrap; gap: .8rem; }
  .pdp-buy-row .btn-add-to-cart-primary {
    flex: 1 1 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: .04em;
    gap: .4rem;
  }
}
/* Hide the visible "Quantity" label (stepper is self-evident; aria-label stays) */
.pdp-order-block .product-qty-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pdp-order-block .product-qty-row { margin-bottom: 0; }

/* Trust / reassurance notes */
.pdp-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pdp-trust li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--text-light);
}
.pdp-trust svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.pdp-order-block .sold-out-note {
  margin: 0;
}

/* Desktop: make both columns equal height and let the main photo flex so the
   thumbnail strip lands level with the bottom of the order card on the right.
   (Mobile keeps the square, scroll-aligned gallery via the base rules.) */
@media (min-width: 761px) {
  .product-detail-grid { align-items: stretch; }
  .product-gallery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .gallery-main-wrap {
    aspect-ratio: auto;          /* free the square so height can flex */
    flex: 1 1 0;
    min-height: 440px;           /* floor for short products (few fields on the
                                    right) so the photo isn't squished flat;
                                    tall products still grow past this */
  }
  /* Right column becomes a flex column so the order card drops to the bottom,
     lining its lower edge up with the photo on short products. On tall products
     the content already fills the column, so margin-top:auto adds no gap. */
  .product-detail-info {
    display: flex;
    flex-direction: column;
  }
  .product-detail-info > .pdp-order-block {
    margin-top: auto;
  }
}

/* ── Fallback placeholder (no gallery chrome) ── */
.gallery-placeholder img {
  width: 100%;
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ── Responsive: on small screens shrink thumbs slightly ── */
@media (max-width: 480px) {
  .gallery-thumb-item {
    width: 60px;
    height: 60px;
  }
}