/**
 * TG Iwata Hero
 * Composed hero laid out as two independent stacked columns (Shadows o-layout):
 *   left  column = headline + carousel
 *   right column = product card + review
 * Each column stacks on its own so the tall product card never pushes the
 * carousel down. Columns sit 50/50 at --l, full-width stacked below.
 * Background + colors come from the Advanced tab.
 */
.tg-iwata-hero-section {}

.tg-hero-wrapper {
  position: relative;
  z-index: 7;
}

/* Independent vertical stacks — headline+carousel | product+review */
.tg-hero__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Flex/grid children must be allowed to shrink below their content width.
   Owl lays all slides side-by-side (n × slide width) as intrinsic content; the
   default min-width:auto lets that blow the o-layout__item out to full stage
   width, so every slide shows. min-width:0 holds the column and lets Owl's
   overflow:hidden stage clip to one slide. */
.tg-hero__block { min-width: 0; }

/* Soft yellow spray-paint glow behind the headline (top-left) — footer asset */
.tg-hero__headline { position: relative; }
.tg-hero__headline::before {
  content: "";
  position: absolute;
  top: -4.5rem;
  left: -4rem;
  width: 185px;
  height: 185px;
  background: url("/mm5/graphics/00000001/paint-spray-04.png") no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}
.tg-hero__headline > * { position: relative; z-index: 1; }
/* Desktop: cap the headline width so the last words ("every painter needs.")
   wrap down to their own line, matching Figma (design notes #4). 85% of the
   left column breaks cleanly after "airbrush"; the 80–90% range all hold, so
   85% sits safely in the middle. (NOTE: if the headline font-size is bumped to
   match Figma, the larger type forces the wrap on its own and this can relax.) */
@media (min-width: 60em) {
  .tg-hero__headline { max-width: 85%; }
}
/* Tablet (48–60em): center the headline in a narrower column so it isn't
   full-bleed and aligns with the content below. */
/* Headline: centered in a capped column across mobile + tablet (< 60em) */
@media (max-width: 59.99em) {
  .tg-hero__headline { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 48em) and (max-width: 59.99em) {
  /* carousel narrower + centered, with a lighter top overlap onto the card above */
  .tg-hero__carousel { max-width: 85%; margin: -2rem auto 0; }
}

.tg-hero__carousel {
  overflow: hidden;
  margin-top: -4.5rem;   /* ride up so the figurine overhangs the headline's baseline */
}

/* ---- Carousel block (Owl fade) ---- */
.tg-hero-carousel { width: 100%; }
.tg-hero-carousel__slide { width: 100%; }
.tg-hero-carousel__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Owl fade needs the leaving slide stacked; keep it clean */
.tg-hero-carousel.owl-carousel .owl-item { backface-visibility: hidden; }

/* Owl fade support — enable via Advanced > Carousel > "Use Fade".
   Self-contained in case the theme only loads owl.theme CSS (no fadeOut keyframes). */
.tg-hero-carousel.owl-carousel .animated { animation-duration: 700ms; animation-fill-mode: both; }
.tg-hero-carousel.owl-carousel .owl-animated-in { z-index: 0; }
.tg-hero-carousel.owl-carousel .owl-animated-out { z-index: 1; }
.tg-hero-carousel.owl-carousel .fadeOut { animation-name: tg-owl-fadeOut; }
@keyframes tg-owl-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Product block (layer 3): product card ---- */
.tg-hero-product {
  position: relative;
  max-width: 480px;                            /* keep the card compact like the design */
  margin-left: auto;
  margin-right: auto;                          /* center within the column */
  color: #fff;                                 /* white text on the card */
  background: rgba(255, 255, 255, 0.2);        /* translucent white over the dark block */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 1.75rem 2rem;
}

/* Product card is duplicated so the mobile/tablet order can be
   headline → product → carousel → stars. Toggle the copies at --l (60em):
   below = mobile copy (in the left column), at/above = desktop copy (right column). */
.tg-hero__product--desktop { display: none; }
.tg-hero__product--mobile  { display: block; }
@media (min-width: 60em) {
  .tg-hero__product--desktop { display: block; }
  .tg-hero__product--mobile  { display: none; }
}

/* Product image overhangs the card on both sides (and slightly up top) */
.tg-hero-product__media {
  margin: -3rem -4.5rem 1.25rem;   /* overhang top + both sides */
  text-align: center;
}
/* Airbrush overhangs the card on tablet + mobile too (design review — was only
   overflowing on desktop). Tablet has side room for a full card overhang;
   mobile bleeds toward the screen edges (body clips overflow-x, so no scrollbar). */
@media (min-width: 48em) and (max-width: 59.99em) {
  .tg-hero-product__media { margin: -3rem -4rem 1rem; }  /* ~31px past the card each side + deeper top overhang */
}
@media (max-width: 47.99em) {
  .tg-hero-product__media { margin: -3rem -3rem 1rem; }    /* ~15px past the card, bleeding to the edges + deeper top overhang */
}
.tg-hero-product__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.tg-hero-product__code {
  display: block;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-primary-color);            /* theme primary (Iwata yellow) */
  margin-bottom: 0.4rem;
}
/* Name + price match the product-specs component (size + secondary font) */
.tg-hero-product__name { margin: 0 0 0.5rem; font-weight: 700; font-family: var(--secondary-font-family); }
.tg-hero-product__price { display: block; margin: 0; font-family: var(--secondary-font-family); }
.tg-hero-product__price.c-heading-echo { font-size: 1.25rem; }

/* Buttons stacked full-width inside the card */
.tg-hero-product__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.5rem;
  width: 100%;                 /* full width on mobile */
}
@media (min-width: 48em) {
  .tg-hero-product__buttons { width: 66%; }   /* narrower on tablet + desktop */
}
.tg-hero-product__buttons .c-button {
  width: 100%;
  text-align: center;
}
/* First button is an ADPR add-to-cart form — keep it full-width, no theme form margin */
.tg-hero-product__atc-form { width: 100%; margin: 0; }

/* ---- Review block (layer 4): stars + copy, centered under the card ---- */
.tg-hero__review {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
}
.tg-hero-reviews__stars {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.tg-hero-reviews__star { color: rgba(255, 255, 255, 0.3); }        /* empty */
.tg-hero-reviews__star.is-filled { color: var(--theme-primary-color); }  /* gold filled */
.tg-hero-reviews__copy {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ---- Placeholder stubs (removed as layers 3–4 fill each block) ---- */
.tg-hero__stub {
  display: inline-block;
  padding: 1rem 1.25rem;
  border: 1px dashed currentColor;
  border-radius: 4px;
  opacity: 0.5;
  font-size: 0.85rem;
}