/**
 * 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-left: auto; margin-right: auto; }
}

.tg-hero__carousel {
  overflow: hidden;
  margin-top: -4.5rem;   /* desktop: ride up so the figurine overhangs the headline */
}
/* Per-breakpoint top margin — must stay AFTER the base rule (source order). */
@media (max-width: 47.99em) {
  .tg-hero__carousel { margin-top: -2.5rem; }
}
@media (min-width: 48em) and (max-width: 59.99em) {
  .tg-hero__carousel { margin-top: -3.5rem; }
}

/* ---- Carousel block (Owl fade) ---- */
.tg-hero-carousel { width: 100%; }
/* ---- Linked headline (Heading Link) ---- */
.tg-hero__headline .heading-wrapper .tg-hero__heading-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.tg-hero__headline .heading-wrapper .tg-hero__heading-link:hover,
.tg-hero__headline .heading-wrapper .tg-hero__heading-link:focus-visible {
  color: var(--theme-primary-color, #F6EC23);
  text-decoration: none;
  transition: color 0.18s ease;
}

.tg-hero-carousel__slide { width: 100%; }
/* ---- Whole-slide link (Slide Link) ---- */
.tg-hero-carousel__link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.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 differ from
   desktop. 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; }
}

/* ---- Mobile / tablet block order: carousel > product > headline > stars ----
   Visual only — DOM order stays headline-first for screen readers. */
@media (max-width: 59.99em) {
  .tg-hero__carousel        { order: 1; }
  .tg-hero__product--mobile { order: 2; }
  .tg-hero__headline        { order: 3; }
  /* .tg-hero__review is in the other column and already renders after these */

  /* !important beats the admin Text Align class */
  .tg-hero__headline,
  .tg-hero__headline .heading-wrapper { text-align: center !important; }
  .tg-hero__headline::before { 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: inline; margin: 0; font-family: var(--secondary-font-family); }
.tg-hero-product__price.c-heading-echo { font-size: 1.25rem; }

/* ---- MSRP / price labels — strike on __msrp-value only, not the wrapper ---- */
.tg-hero-product__pricing {
  display: block;
  font-family: var(--secondary-font-family);
}
.tg-hero-product__msrp {
  display: inline;
  margin-right: 0.45em;
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.95em;
  white-space: nowrap;
}
.tg-hero-product__msrp-label { text-decoration: none; margin-right: 0.25em; }
.tg-hero-product__msrp-value { text-decoration: line-through; }
.tg-hero-product__price-label {
  display: inline;
  margin-right: 0.25em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Free shipping flag ---- */
.tg-hero-product__shipping {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 0.55rem;
  padding: 0.28em 0.65em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--secondary-font-family);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.tg-hero-product__shipping-icon {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  flex: none;
}

/* ---- Mobile headline scale-down — overrides Shadows' --display-three ---- */
@media (max-width: 47.99em) {
  .tg-hero__headline {
    --display-three: 2rem;
  }
  .tg-hero__headline .heading-wrapper > * {
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }
}

/* 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 */
}
/* Full width at every breakpoint — a % cap wraps longer CTA labels */
.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;
}