/* ============================================================
   INSTAWHEW — PRODUCT SECTIONS
   Product galleries, buy card, variant selectors, product heroes
   ============================================================ */

/* ============================================================
   PRODUCT GALLERY COMPONENTS — v1.2
   ============================================================ */

/* Shared image slot placeholder ----------------------------- */
.iw-img-slot {
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: var(--text-sm);
  overflow: hidden;
}
.iw-img-slot--wide  { aspect-ratio: 4 / 3; width: 100%; }
.iw-img-slot--tall  { aspect-ratio: 3 / 4; width: 100%; }
.iw-img-slot--thumb { aspect-ratio: 1 / 1; width: 100%; }

/* Image fills its slot container */
.iw-img-slot { position: relative; }
.iw-img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  margin: 0 !important;
  display: block;
}

/* 1. Split sticky — image left, info sticky right ----------- */
.iw-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.iw-product-split__images { display: flex; flex-direction: column; gap: var(--space-3); }
.iw-product-split__info   { position: sticky; top: var(--space-5); }
@media (max-width: 767px) {
  .iw-product-split { grid-template-columns: 1fr; }
  .iw-product-split__info { position: static; }
}

/* 2. Main + thumbnail strip --------------------------------- */
.iw-product-thumbs {}
.iw-product-thumbs__main  { width: 100%; margin-bottom: var(--space-3); }
.iw-product-thumbs__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
@media (max-width: 480px) {
  .iw-product-thumbs__strip { grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
}

/* Product gallery — interactive thumbnails */
.iw-product-thumbs__strip { cursor: pointer; }
.iw-product-thumbs__strip .iw-img-slot--thumb { cursor: pointer; opacity: 0.6; transition: opacity var(--motion-fast), outline var(--motion-fast); outline: 2px solid transparent; outline-offset: 2px; }
.iw-product-thumbs__strip .iw-img-slot--thumb.is-active,
.iw-product-thumbs__strip .iw-img-slot--thumb:hover { opacity: 1; outline-color: var(--accent-600); }

/* 3. Mosaic grid — 1 large + 2 stacked right ---------------- */
.iw-product-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-2);
}
.iw-product-mosaic__primary {
  grid-row: 1 / 3;
}
@media (max-width: 600px) {
  .iw-product-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .iw-product-mosaic__primary { grid-row: auto; grid-column: 1 / 3; }
}

/* 4. Stacked scroll — images left, sticky card right -------- */
.iw-product-stacked {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}
.iw-product-stacked__images { display: flex; flex-direction: column; gap: var(--space-3); }
.iw-product-stacked__images .iw-img-slot { aspect-ratio: 4 / 3; }
.iw-product-stacked__card   { position: sticky; top: var(--space-5); }
@media (max-width: 900px) {
  .iw-product-stacked { grid-template-columns: 1fr; }
  .iw-product-stacked__card { position: static; }
}

/* 5. Minimal single — centered image, details below --------- */
.iw-product-minimal {}
.iw-product-minimal__image { max-width: 560px; margin-inline: auto; margin-bottom: var(--space-5); }

/* Shared product info elements ------------------------------ */
.iw-product-info__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-600); }
.iw-product-info__title   { font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-tight); color: var(--text-1); }
.iw-product-info__price   { font-size: var(--text-3xl); font-weight: 800; color: var(--text-1); }
.iw-product-info__price s { font-weight: 400; font-size: var(--text-lg); color: var(--text-3); margin-right: var(--space-2); }
.iw-product-info__meta    { font-size: var(--text-sm); color: var(--text-2); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.iw-product-info__desc    { font-size: var(--text-base); color: var(--text-2); line-height: var(--leading-relaxed); }
.iw-product-info__stars   { color: var(--accent-600); letter-spacing: 0.05em; }
.iw-product-info__stars span { color: var(--text-2); font-size: var(--text-sm); letter-spacing: normal; }
.iw-checkbox-icon { font-size: var(--text-lg); line-height: 1; flex-shrink: 0; }

/* ============================================================
   PRODUCT HERO COMPONENTS — v2.0
   Full above-the-fold buy experiences across 7 layout types
   + sticky buy bar component.
   ============================================================ */

/* Buy card — used in cinematic hero as overlay panel */
.iw-buy-card { max-width: 320px; width: 100%; }
@media (max-width: 600px) { .iw-buy-card { max-width: 100%; } }

/* Cinematic cover hero — override WP cover's centered flex
   so the buy card sits at the bottom-right of the image */
.iw-hero-cinematic.wp-block-cover { align-items: stretch; }
.iw-hero-cinematic .wp-block-cover__inner-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-5);
}
@media (max-width: 640px) {
  .iw-hero-cinematic .wp-block-cover__inner-container {
    justify-content: stretch;
    padding: var(--space-3);
  }
  .iw-buy-card { max-width: 100%; }
}

/* Sale price display (evidence + bundle + configurator heroes) */
.iw-price-sale {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.iw-price-sale__original { font-size: var(--text-base); color: var(--text-3); text-decoration: line-through; }
.iw-price-sale__current  { font-size: var(--text-3xl); font-weight: 800; color: var(--text-1); line-height: 1; }
.iw-price-sale__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  background: var(--error-bg);
  color: var(--error);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
[data-theme="dark"] .iw-price-sale__badge { background: rgba(190,20,20,0.15); color: #fca5a5; }

/* Variant selector label */
.iw-variant-section { display: flex; flex-direction: column; gap: var(--space-2); }
.iw-variant-section__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.iw-variant-section__label strong { color: var(--text-1); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Color swatches */
.iw-color-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.iw-color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  outline-offset: 3px;
  padding: 0;
  transition: outline var(--dur-fast) var(--ease);
}
.iw-color-swatch:focus-visible { outline: 2px solid var(--accent-600); }
.iw-color-swatch--active { outline: 2px solid var(--accent-600); }

/* Size chips */
.iw-size-grid { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.iw-size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.iw-size-chip:hover { border-color: var(--accent-400); color: var(--accent-600); }
.iw-size-chip--active { border-color: var(--accent-600); color: var(--accent-600); background: var(--accent-50); }
[data-theme="dark"] .iw-size-chip { border-color: var(--line); color: var(--text-2); }
[data-theme="dark"] .iw-size-chip--active { background: rgba(83,102,240,0.12); color: var(--accent-300); border-color: var(--accent-400); }

/* Size guide link next to size label */
.iw-size-guide-link {
  font-size: var(--text-xs);
  color: var(--accent-600);
  text-decoration: none;
  font-weight: 600;
}
.iw-size-guide-link:hover { text-decoration: underline; }

/* Subtotal line (configurator hero) */
.iw-subtotal-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line-subtle);
}
.iw-subtotal-line__label  { font-size: var(--text-sm); color: var(--text-3); }
.iw-subtotal-line__amount { font-size: var(--text-xl); font-weight: 800; color: var(--text-1); }

/* Mini trust line below CTA */
.iw-mini-trust { font-size: var(--text-xs); color: var(--text-2); text-align: center; }

/* Story hero — copy left, image+stats right */
.iw-hero-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 768px) { .iw-hero-story { grid-template-columns: 1fr; } }

/* Dark float hero — product "floating" on near-black background */
.iw-hero-dark__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 768px) { .iw-hero-dark__inner { grid-template-columns: 1fr; } }

.iw-product-float {
  display: flex;
  align-items: center;
  justify-content: center;
}
.iw-product-float .iw-img-slot {
  border: none;
  background: transparent;
  filter: drop-shadow(0 0 48px rgba(83,102,240,0.40));
}

/* Luxury editorial hero — centered, generous whitespace, restrained typography */
.iw-hero-luxury { text-align: center; padding-block: var(--space-6); }
.iw-hero-luxury__collection {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.iw-hero-luxury__title {
  font-size: var(--text-display);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: var(--leading-tight);
  color: var(--text-1);
  text-wrap: balance;
}
.iw-hero-luxury__image { max-width: 480px; margin-inline: auto; }
.iw-hero-luxury__price {
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: var(--tracking-snug);
  color: var(--text-2);
}
.iw-hero-luxury__craft { font-size: var(--text-sm); color: var(--text-3); font-style: italic; }

/* Sticky buy bar — fixed to viewport bottom, hidden until .is-visible */
.iw-sticky-buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--line-subtle);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
  padding-block: var(--space-2);
  padding-inline: var(--gutter);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease);
}
.iw-sticky-buy-bar.is-visible { transform: none; }
[data-theme="dark"] .iw-sticky-buy-bar {
  background: var(--base-900);
  border-color: var(--base-700);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.iw-sticky-buy-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 1200px;
  margin-inline: auto;
}
.iw-sticky-buy-bar__thumb   { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.iw-sticky-buy-bar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-sticky-buy-bar__product { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.iw-sticky-buy-bar__name    { font-size: var(--text-sm); font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-sticky-buy-bar__variant { font-size: var(--text-xs); color: var(--text-3); }
.iw-sticky-buy-bar__price   { font-size: var(--text-lg); font-weight: 800; color: var(--text-1); white-space: nowrap; flex-shrink: 0; }
.iw-sticky-buy-bar__cta     { flex-shrink: 0; }
@media (max-width: 480px) {
  .iw-sticky-buy-bar__thumb   { display: none; }
  .iw-sticky-buy-bar__variant { display: none; }
  .iw-sticky-buy-bar__price   { font-size: var(--text-base); }
}