/*
 * Hero canvas layout
 *
 * Every hero object is positioned against one fixed reference canvas per
 * breakpoint. The canvas scales as a unit, so viewport height and browser
 * zoom cannot move the model, product, card, or bubbles independently.
 */

.hero-slider.hero-canvas {
  --hero-ratio: 1366 / 768;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--hero-ratio);
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.hero-canvas .hero-background,
.hero-canvas .hero-slides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-canvas .hero-background {
  z-index: 0 !important;
}

.hero-canvas .hero-background img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero-canvas .hero-branding,
.hero-canvas .hero-family-stage,
.hero-canvas .hero-product-card,
.hero-canvas .hero-benefits,
.hero-canvas .hero-controls,
.hero-canvas .hero-nav {
  position: absolute !important;
}

.hero-canvas .hero-branding {
  z-index: 20 !important;
  margin: 0 !important;
  transform: none !important;
}

.hero-canvas .hero-family-stage {
  z-index: 30 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.hero-canvas .hero-family-model {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.hero-canvas .hero-slides {
  z-index: 40 !important;
  pointer-events: none !important;
}

.hero-canvas .hero-slide {
  position: absolute !important;
  inset: 0 !important;
}

.hero-canvas .hero-slide .hero-food-wrap,
.hero-canvas .hero-slide .hero-pack-wrap {
  position: absolute !important;
  top: var(--product-top) !important;
  left: var(--product-left) !important;
  width: var(--product-width) !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center bottom !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.hero-canvas .hero-slide .hero-pack-wrap {
  display: none !important;
}

.hero-canvas .hero-slide .hero-food-wrap > img,
.hero-canvas .hero-slide .hero-pack-wrap > img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.hero-canvas .hero-product-card {
  z-index: 38 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.hero-canvas .hero-product-card-image {
  display: none !important;
}

.hero-canvas .hero-character-bubbles {
  position: absolute !important;
  inset: 0 !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

.hero-canvas .hero-character-hotspot {
  position: absolute !important;
  left: var(--hotspot-left) !important;
  top: var(--hotspot-top) !important;
  width: var(--hotspot-w) !important;
  height: var(--hotspot-h) !important;
  min-width: 42px !important;
  min-height: 36px !important;
  pointer-events: auto !important;
}

.hero-canvas .hero-character-guide {
  display: block !important;
}

.hero-canvas .hero-heart-draw {
  right: 0 !important;
  left: auto !important;
  top: 40% !important;
  width: clamp(50px, 3.1vw, 50px) !important;
  transform: rotate(30deg) !important;
  transform-origin: 55% 60% !important;
}

.hero-canvas .hero-comic-bubbles {
  display: none !important;
}

.hero-canvas .hero-product-card h2,
.hero-canvas .hero-product-card p:not(.product-badge),
.hero-canvas .product-card-actions,
.hero-canvas .product-pack-strip {
  max-width: var(--card-copy-width) !important;
}

.hero-canvas .product-card-actions {
  position: relative !important;
  z-index: 3 !important;
  width: fit-content !important;
  max-width: 242px !important;
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero-canvas .product-pack-strip {
  width: min(100%, 300px) !important;
  max-width: 100% !important;
  height: 36px !important;
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 9px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
}

.hero-canvas .product-pack-mini {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
  display: block !important;
}

.hero-canvas .product-card-buy,
.hero-canvas .product-card-checkout {
  min-height: 34px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 18px rgba(104, 64, 18, 0.16) !important;
}

.hero-canvas .product-card-buy {
  color: #24120d !important;
  background: linear-gradient(135deg, #f2bf38 0%, #d69d20 100%) !important;
}

.hero-canvas .product-card-buy span::before {
  content: "\203A";
  font-size: 1.08rem;
}

.hero-canvas .product-card-checkout {
  color: #7a1f19 !important;
  background: rgba(255, 245, 232, 0.94) !important;
}

.hero-canvas .hero-controls {
  left: 50% !important;
  bottom: 2.4% !important;
  transform: translateX(-50%) !important;
  z-index: 70 !important;
}

/* Desktop reference canvas: 1366 x 768. */
@media (min-width: 1101px) {
  .hero-slider.hero-canvas {
    --hero-ratio: 1366 / 768;
    --product-left: 56.4%;
    --product-top: 58.5%;
    --product-width: 30.25%;
    --card-copy-width: 220px;
  }

  .hero-canvas .hero-branding {
    left: 5.1% !important;
    top: 5.1% !important;
    width: 28% !important;
  }

  .hero-canvas .hero-family-stage {
    left: 46.6% !important;
    top: 19.1% !important;
    width: 40% !important;
  }

  .hero-canvas .hero-product-card {
    left: 30.5% !important;
    top: 60.0% !important;
    width: 29.9% !important;
    min-height: 0 !important;
  }

  .hero-canvas .hero-nav-prev {
    left: 24.3% !important;
  }

  .hero-canvas .hero-nav-next {
    right: 20.6% !important;
  }

  .hero-canvas .hero-character-guide {
    --hotspot-left: 73.5%;
    --hotspot-top: 4.2%;
    --hotspot-w: 10%;
    --hotspot-h: 12%;
  }

  .hero-canvas .hero-character-girl {
    --hotspot-left: 70%;
    --hotspot-top: 50%;
    --hotspot-w: 9.6%;
    --hotspot-h: 13.2%;
  }
}

/* Tablet reference canvas: 1024 x 1366. */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider.hero-canvas {
    --hero-ratio: 1024 / 1366;
    --product-left: 48.8%;
    --product-top: 60.9%;
    --product-width: 48.4%;
    --card-copy-width: 185px;
  }

  .hero-canvas .hero-branding {
    left: 8.2% !important;
    top: 4.2% !important;
    width: 80% !important;
  }

  .hero-canvas .hero-family-stage {
    left: 37% !important;
    top: 36.25% !important;
    width: 56% !important;
  }

  .hero-canvas .hero-product-card {
    left: 20.2% !important;
    top: 63.9% !important;
    width: 35.7% !important;
    min-height: 0 !important;
  }

  .hero-canvas .hero-nav-prev {
    left: 10.5% !important;
  }

  .hero-canvas .hero-nav-next {
    right: 14.7% !important;
  }

  .hero-canvas .hero-character-guide {
    --hotspot-left: 72%;
    --hotspot-top: 8%;
    --hotspot-w: 13%;
    --hotspot-h: 11%;
  }

  .hero-canvas .hero-character-girl {
    --hotspot-left: 70%;
    --hotspot-top: 50%;
    --hotspot-w: 12.2%;
    --hotspot-h: 10.8%;
  }
}

/* Mobile reference canvas: 440 x 956. */
@media (max-width: 720px) {
  .hero-slider.hero-canvas {
    --hero-ratio: 440 / 956;
    --product-left: 24%;
    --product-top: 68.5%;
    --product-width: 52%;
    --card-copy-width: none;
  }

  .hero-canvas .hero-branding {
    left: 6.1% !important;
    top: 4.6% !important;
    width: 68% !important;
  }

  .hero-canvas .hero-family-stage {
    left: 11% !important;
    top: 48.4% !important;
    width: 78% !important;
  }

  .hero-canvas .hero-product-card {
    left: 4% !important;
    top: 81% !important;
    width: 92% !important;
    min-height: 0 !important;
    padding: 15px 15px 11px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 16px !important;
    row-gap: 0px !important;
    align-items: start !important;
  }

  .hero-canvas .hero-product-card .product-badge {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .hero-canvas .hero-product-card h2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: clamp(1.35rem, 6vw, 1.4rem) !important;
  }

  .hero-canvas .hero-product-card p:not(.product-badge) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(0.84rem, 3.6vw, 1rem) !important;
  }

  .hero-canvas .product-card-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  .hero-canvas .product-pack-strip {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .hero-canvas .product-pack-mini {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px !important;
    object-fit: contain !important;
  }

  .hero-canvas .hero-nav {
    display: none !important;
  }

  .hero-canvas .hero-controls {
    bottom: 2.8% !important;
  }

  .hero-canvas .hero-character-guide {
    --hotspot-left: 63%;
    --hotspot-top: 9%;
    --hotspot-w: 18%;
    --hotspot-h: 13%;
    --bubble-left: 0%;
    --bubble-top: -78px;
    --tail-left: 88%;
  }

  .hero-canvas .hero-character-girl {
    --hotspot-left: 66.4%;
    --hotspot-top: 50.5%;
    --hotspot-w: 18%;
    --hotspot-h: 16%;
    --bubble-left: -145%;
    --bubble-top: -118px;
    --tail-left: 95%;
  }

  .hero-canvas .product-card-actions {
    width: 150px !important;
    max-width: 150px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}