/* =========================================================
   SHOP HERO (3-panel grid with video + overlay)
   ========================================================= */
.shop-pic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(100vh - 60px); /* full viewport minus navbar */
}

.shop-pic .shop-panel {
  position: relative;
  background-size: cover;
  background-position: center;
}

.shop-pic .panel-1 { background-image: url('Pictures/shop3/shop1.JPG'); }
.shop-pic .panel-2 { background-image: none; } /* center uses video */
.shop-pic .panel-3 { background-image: url('Pictures/shop3/shop3.jpeg'); }

/* video fills middle panel */
.shop-pic .video-panel { position: relative; }
.shop-pic .video-panel video.shop-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay content on top of video */
.shop-pic .video-panel .shop-overlay { position: relative; z-index: 2; }
.shop-pic .shop-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  max-width: 80%;
}

.shop-pic .hero-icon {
  width: 40px;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.shop-pic .shop-overlay h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.shop-pic .shop-overlay p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* spinning flower */
@keyframes spin-clockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin-clockwise 5s linear infinite; transform-origin: 50% 50%; display: inline-block; }

/* hero CTA button (white outline) */
.shop-pic .btn-outline {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.3s, color 0.3s;
}
.shop-pic .btn-outline:hover { background: rgba(255,255,255,0.2); color: var(--text-nearly-black); }

/* =========================================================
   PRODUCT SECTION (stack of product cards)
   ========================================================= */
.product-detail {
  display: flex;               /* stacked cards */
  flex-direction: column;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

/* each product row: image + info */
.product-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.product-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

/* info column */
.product-info { display: flex; flex-direction: column; gap: 1.5rem; }
.product-info h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin: 0;
  line-height: 1.1;
}

/* description + specs side-by-side (wraps on mobile) */
.desc-specs-wrapper { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }

/* Left: description */
.short-desc {
  flex: 2;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dark-gray);
}

/* Right: specs */
.product-specs {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark-gray);
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-specs li { margin-bottom: 0.5rem; }

/* purchase box */
.purchase-box {
  background: var(--surface-light);
  border: 1px solid var(--border-light-gray);
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 1rem;
}
.price-tag {
  justify-self: end;
  font-family: var(--font-heading);
  font-size: 1.25rem;
}
.purchase-box label { display: block; font-family: var(--font-body); }
.purchase-box select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border-light-gray);
  border-radius: 0.75rem;
  background: #fff;
  font-family: var(--font-body);
}

/* generic button (used in purchase box) */
.btn-outline {
  padding: 0.75rem;
  border: 2px solid var(--text-nearly-black);
  border-radius: 0.75rem;
  background: var(--accent-warm);
  color: var(--surface-light);
  font-family: var(--font-heading);
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn-outline:hover { background: #BBAA7A; }
.btn-outline:active { background: #A69464; transform: scale(0.98); }
.btn-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* added-to-cart toast */
.toast {
  position: fixed; bottom: 2rem; right: 2rem;
  background: var(--text-nearly-black); color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.hidden { display: none; }

/* =========================================================
   PRODUCT IMAGE GALLERY (slide + hover-only arrows + cross-fade)
   ========================================================= */
.product-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: #111;
  border-radius: 12px;
  overflow: hidden; /* keep slides inside */
}

/* viewport/track for sliding */
.pg-viewport {
  position: relative;    /* needed for .pg-fader overlay */
  width: 100%; height: 100%;
  overflow: hidden;
  transition: opacity 0.28s ease; /* if you also fade the viewport */
}
.pg-viewport.is-fading { opacity: 0; }

.pg-track {
  display: flex;
  width: 100%; height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.pg-track img {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; pointer-events: none;
}

/* arrows (hidden by default; show on hover) */
.pg-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  border: none;
  width: 44px; height: 44px; line-height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff; font-size: 26px; text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease;
}
.pg-prev { left: 10px; }
.pg-next { right: 10px; }
.pg-nav:hover { background: rgba(0,0,0,0.65); }
.product-gallery:hover .pg-nav { opacity: 1; pointer-events: auto; }

/* cross-fade overlay (used on variant change) */
.pg-fader {
  position: absolute; inset: 0;
  z-index: 3;                 /* above track, below arrows */
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.pg-fader img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* accessibility / reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pg-track { transition: none !important; }
  .pg-viewport { transition: none !important; }
}

/* =========================================================
   COMPACT MODE (smaller product section)
   Add class="product-detail product-detail--compact" to the section
   ========================================================= */
.product-detail--compact {
  max-width: 880px;           /* narrower overall */
  gap: 2.4rem;                /* less vertical space between cards */
  padding: 2.5rem 1rem;       /* tighter top/bottom */
}
.product-detail--compact .product-card { gap: 1.6rem; }

/* typography */
.product-detail--compact .product-info h1 { font-size: 2rem; line-height: 1.15; }
.product-detail--compact .short-desc    { font-size: 0.88rem; line-height: 1.5; }
.product-detail--compact .product-specs { font-size: 0.78rem; }

/* desc/specs spacing */
.product-detail--compact .desc-specs-wrapper { gap: 1rem; }

/* purchase box + controls */
.product-detail--compact .purchase-box        { padding: 0.9rem; border-radius: 0.9rem; }
.product-detail--compact .price-tag           { font-size: 1rem; }
.product-detail--compact .purchase-box select { padding: 0.4rem 0.55rem; font-size: 0.9rem; }
.product-detail--compact .btn-outline         { padding: 0.55rem; font-size: 0.9rem; }

/* gallery + arrows in compact */
.product-detail--compact .product-gallery { border-radius: 10px; }
.product-detail--compact .pg-nav {
  width: 32px; height: 32px; line-height: 32px; font-size: 20px;
}
.product-detail--compact .pg-prev { left: 6px; }
.product-detail--compact .pg-next { right: 6px; }

/* toast spacing when compact */
.product-detail--compact ~ .toast {
  bottom: 1rem; right: 1rem; padding: 0.65rem 0.9rem; font-size: 0.9rem;
}

/* =========================================================
   BASIC RESPONSIVE TWEAK
   Stack image/info on narrow viewports (optional but handy)
   ========================================================= */
@media (max-width: 900px) {
  .product-detail { padding: 3rem 1rem; gap: 3rem; }
  .product-card { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-info h1 { font-size: 2.25rem; }
  .shop-pic { height: auto; }
  .product-detail--compact { max-width: 100%; }
}

@media (max-width: 768px) {
  #nav-links{
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--text-nearly-black);
    flex-direction: column;
    padding: .75rem 1rem 1rem;
    gap: .5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    border-top: 0;         /* no line when closed */
    z-index: 600;          /* above page content */
  }
  #nav-links.open{
    max-height: 60vh;
    border-top: 1px solid var(--border-light-gray);
  }
  #nav-toggle{ display:block; }  /* show burger on mobile */
}

/* =========================================================
   RESPONSIVE/MOBILE OVERRIDES
   Paste this at the very bottom of shop.css
   ========================================================= */

/* ---------- Global touch + safe-area niceties ---------- */
:root {
  --tap: 48px; /* minimum touch size */
}
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .product-detail { padding: 2.5rem 1rem; gap: 2.25rem; }
  .product-card { gap: 1.25rem; }
  .product-info h1 { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); }
  .short-desc { font-size: 0.95rem; }
  .product-specs { font-size: 0.85rem; }
}

/* ---------- Large phones / small tablet (<= 900px) ---------- */
@media (max-width: 900px) {
  /* Stack product image and info */
  .product-card { grid-template-columns: 1fr; }
  .product-image img { border-radius: 12px; }

  /* Shop hero: change 3 columns -> 1 column stack */
  .shop-pic {
    grid-template-columns: 1fr;
    grid-auto-rows: 40vh;       /* tidy heights per panel */
    height: auto;               /* stop forcing full viewport */
    gap: 8px;
  }
  .shop-pic .shop-panel { min-height: 40vh; }

  /* Make the middle (video) panel keep aspect nicely */
  .shop-pic .video-panel { aspect-ratio: 16/9; min-height: unset; }
  .shop-pic .video-panel video.shop-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
  }

  /* Overlay text sizes in hero */
  .shop-pic .shop-overlay {
    max-width: 92%;
    padding: 0 1rem;
  }
  .shop-pic .shop-overlay h1 {
    font-size: clamp(1.5rem, 3.5vw + 0.5rem, 2.25rem);
  }
  .shop-pic .shop-overlay p {
    font-size: clamp(0.95rem, 1.2vw + 0.7rem, 1.05rem);
  }
  .shop-pic .btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: 0.65rem 1.1rem; border-radius: 12px;
  }

  /* Description/specs block wraps better */
  .desc-specs-wrapper { gap: 1rem; }
  .short-desc { flex: 1 1 100%; }
  .product-specs { flex: 1 1 260px; }
}

/* ---------- Phones (<= 768px) ---------- */
@media (max-width: 768px) {
  /* Keep your existing mobile nav behavior; ensure it’s above hero */
  #nav-links { z-index: 700; }

  /* Product gallery: keep arrows visible on touch, shrink size a bit */
  .product-gallery { border-radius: 10px; }
  .product-gallery .pg-nav {
    width: 38px; height: 38px; line-height: 38px; font-size: 20px;
  }

  /* Purchase box spacing & controls */
  .purchase-box {
    padding: 1rem;
    border-radius: 1rem;
    row-gap: 0.75rem;
  }
  .purchase-box select {
    min-height: 40px; font-size: 1rem;
  }
  .btn-outline { min-height: var(--tap); font-size: 1rem; }

  /* Toast doesn’t cover content */
  .toast { bottom: 1rem; right: 1rem; }
}

/* ---------- Small phones (<= 600px) ---------- */
@media (max-width: 600px) {
  /* Tighten hero panels a little */
  .shop-pic { grid-auto-rows: 36vh; }
  .shop-pic .shop-panel { min-height: 36vh; }

  /* Make overlay more legible on busy video */
  .shop-pic .shop-overlay {
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    backdrop-filter: saturate(110%) blur(0px);
  }

  /* Product info hierarchy */
  .product-info { gap: 1rem; }
  .product-info h1 { font-size: clamp(1.4rem, 5vw + 0.5rem, 1.9rem); }
  .short-desc { font-size: 0.95rem; }
  .product-specs { font-size: 0.85rem; }

  /* Compact gallery arrows */
  .product-detail--compact .pg-nav {
    width: 30px; height: 30px; line-height: 30px; font-size: 18px;
  }
}

/* ---------- Very small (<= 420px) ---------- */
@media (max-width: 420px) {
  .shop-pic { grid-auto-rows: 32vh; }
  .shop-pic .shop-overlay h1 { font-size: 1.35rem; }
  .shop-pic .shop-overlay p { font-size: 0.95rem; }
  .product-specs { font-size: 0.8rem; }
}

/* ---------- Show gallery arrows on touch devices (no hover) ---------- */
@media (hover: none) and (pointer: coarse) {
  .product-gallery .pg-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ---------- Prefers reduced motion (extra) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-track, .pg-viewport, .toast { transition: none !important; }
  .spin { animation: none !important; }
}

/* ===== Fix mobile gallery black gap ===== */
@media (max-width: 768px) {
  /* give gallery an explicit height instead of only aspect-ratio */
  .product-gallery {
    position: relative;
    height: min(62vh, 420px);   /* pick a comfy cap for phones */
    aspect-ratio: auto;         /* disable previous ratio here */
    background: #111;           /* (kept) */
    overflow: hidden;
  }

  /* make viewport & track fill the box */
  .product-gallery .pg-viewport,
  .product-gallery .pg-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* ensure slides truly cover */
  .product-gallery .pg-track img {
    width: 100%;
    height: 100%;
    display: block;             /* removes inline-gap quirks */
    object-fit: cover;
    max-height: none !important;/* ignore any global caps */
  }

  /* if you use the cross-fade overlay, keep it transparent by default */
  .product-gallery .pg-fader { opacity: 0; }
}

/* Extra small refinement */
@media (max-width: 480px) {
  .product-gallery { height: min(58vh, 360px); }
}

@media (max-width: 900px) {
  .shop-pic {
    grid-template-columns: 1fr;  /* stack vertically */
    grid-auto-rows: auto;        /* auto height */
    gap: 0;                      /* remove spacing between panels */
    height: auto;
  }

  .shop-pic .shop-panel {
    min-height: auto;
    margin: 0;
    padding: 0;
  }

  /* make video panel behave like an image, full-width */
  .shop-pic .video-panel {
    aspect-ratio: 16/9;  /* or 3/4 if you want taller */
    width: 100%;
    height: auto;
  }
  .shop-pic .video-panel video.shop-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}