@media (max-width: 1160px) {
  .navbar {
    width: min(100% - 32px, 1120px);
    gap: 18px;
  }

  .brand {
    width: 160px;
    min-width: 160px;
    height: 50px;
  }

  .nav-menu {
    gap: 8px;
  }

  .nav-menu a {
    font-size: 0.9rem;
  }

  .nav-cta {
    padding: 0 18px;
  }

  .hero-branding {
    width: 330px;
    top: 38px;
  }

  .hero-branding h1 {
    font-size: 4.4rem;
  }

  .hero-headline-art {
    width: min(100%, 330px);
  }

  .hero-official-logo {
    width: 96px;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .hero-quality-list {
    width: 230px;
    bottom: 136px;
  }

  .quality-card {
    min-height: 64px;
    padding: 12px 14px;
    grid-template-columns: 42px 1fr;
  }

  .quality-icon {
    width: 42px;
    height: 42px;
  }

  .hero-product-card {
    width: 360px;
    left: 27vw;
    bottom: 136px;
  }

  .hero-benefits {
    width: min(100% - 48px, 1120px);
    padding: 18px 24px;
  }
}

@media (max-width: 720px) {
  body {
    background: #fffaf0;
  }

  .site-header {
    position: sticky;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(227, 223, 210, 0.6);
  }

  .navbar {
    width: min(100% - 34px, 720px);
    min-height: 78px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 48px minmax(118px, 1fr) auto;
    gap: 12px;
    align-items: center;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 6px;
  }

  .nav-toggle span {
    width: 31px;
    height: 4px;
    border-radius: 999px;
    background: #2f1712;
  }

  .brand {
    width: 154px;
    min-width: 0;
    height: 50px;
    grid-column: 2;
    grid-row: 1;
  }

  .brand-logo {
    object-position: left center;
  }

  .nav-cta {
    min-height: 46px;
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .nav-menu {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 4px;
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu a {
    padding: 12px;
  }

  .nav-menu a.active::after {
    left: 12px;
    right: auto;
    width: 40px;
  }

  .home-shell {
    display: block;
  }

  .hero-slider {
    --hero-width: 100vw;
    --hero-height: 1600px;
    min-height: var(--hero-height);
    display: block;
    overflow: hidden;
    background: linear-gradient(180deg, #fff2cf 0 905px, #fffaf1 905px 100%);
  }

  .hero-background {
    height: 905px;
    bottom: auto;
  }

  .hero-background img {
    object-fit: cover;
    object-position: center top;
  }

  .hero-family-model {
    display: block;
    width: min(90vw, 500px);
    left: 3%;
    top: 414px;
    z-index: 3;
    filter: drop-shadow(0 18px 16px rgba(79, 45, 20, 0.18));
  }

  .hero-branding {
    width: min(76vw, 360px);
    left: 26px;
    top: 64px;
    z-index: 7;
  }

  .hero-kicker {
    margin-bottom: 12px;
    font-size: clamp(0.76rem, 3.1vw, 0.92rem);
    letter-spacing: 0.18em;
  }

  .hero-official-logo {
    width: 92px;
    margin-bottom: 10px;
  }

  .hero-headline-art {
    width: min(82vw, 338px);
  }

  .hero-branding h1 {
    font-size: clamp(3.3rem, 16vw, 5rem);
    line-height: 0.86;
  }

  .hero-subtitle {
    max-width: min(72vw, 330px);
    margin-top: 20px;
    font-size: clamp(0.94rem, 4vw, 1.14rem);
    line-height: 1.45;
  }

  .hero-subtitle::before {
    width: 156px;
    height: 3px;
    margin-bottom: 16px;
  }

  .hero-slides {
    z-index: 8;
  }


  .reseller-cta-actions {
    display: grid;
  }

  .reseller-primary-cta,
  .reseller-secondary-cta {
    width: 100%;
  }

  .reseller-model {
    right: -24%;
  }

  .reseller-card-visual {
    min-height: 240px;
  }

  .reseller-money-image {
    width: min(320px, 98vw);
  }
  .hero-food-wrap {
    left: 9%;
    top: 565px;
    width: 66%;
    transform: none;
  }

  .hero-pack-wrap {
    left: 64%;
    top: 560px;
    width: 28%;
  }

  .hero-slide .hero-food-wrap {
    left: 9%;
    width: 66%;
  }

  .hero-slide .hero-pack-wrap {
    left: 64%;
    width: 28%;
  }
  .hero-steam {
    top: -5%;
    height: 32%;
    filter: blur(5px);
  }

  .hero-food-wrap::before,
  .hero-food-wrap::after {
    top: -4%;
    height: 34%;
    filter: blur(6px);
  }

  .hero-nav {
    display: none;
  }
  .hero-controls {
    width: 100%;
    left: 0;
    top: 810px;
    bottom: auto;
    z-index: 12;
    transform: none;
    gap: 12px;
  }

  .hero-control {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }

  .hero-control:nth-child(n + 4) {
    display: none;
  }

  .hero-product-card {
    width: calc(100% - 34px);
    min-height: 260px;
    left: 17px;
    top: 905px;
    bottom: auto;
    z-index: 9;
    padding: 24px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42%;
    align-items: center;
    gap: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 34px rgba(47, 23, 18, 0.14);
    backdrop-filter: blur(12px);
  }

  .hero-product-card-copy {
    min-width: 0;
  }

  .product-badge {
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 0.72rem !important;
  }

  .hero-product-card h2 {
    font-size: clamp(1.55rem, 7vw, 2.35rem);
    line-height: 1.04;
  }

  .hero-product-card p:not(.product-badge) {
    max-width: 230px;
    margin-top: 12px;
    font-size: clamp(0.95rem, 4vw, 1.14rem);
    line-height: 1.38;
  }

  .product-cta {
    min-width: 134px;
    min-height: 46px;
    margin-top: 20px;
    padding: 0 18px;
    font-size: 0.84rem;
  }

  .hero-product-card-image {
    width: 100%;
    display: block;
    align-self: center;
    filter: drop-shadow(0 18px 18px rgba(70, 40, 18, 0.18));
  }

  .hero-quality-list {
    width: calc(100% - 34px);
    left: 17px;
    top: 1300px;
    bottom: auto;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .quality-card {
    min-height: 210px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  .quality-card + .quality-card {
    border-left: 1px solid rgba(214, 160, 47, 0.45);
  }

  .quality-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    background: #c90018;
    color: #ffffff;
    font-size: 2rem;
  }

  .quality-card h2 {
    font-size: clamp(0.88rem, 3.8vw, 1.05rem);
    line-height: 1.2;
  }

  .quality-card p {
    margin-top: 8px;
    font-size: clamp(0.8rem, 3.4vw, 0.98rem);
    line-height: 1.32;
  }

  .hero-benefits {
    display: none;
  }


  .hero-card-actions {
    margin-top: 18px;
    gap: 8px;
  }

  .product-secondary-cta {
    min-height: 42px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .product-pack-marquee {
    height: 38px;
    margin-top: 12px;
    grid-column: 1 / -1;
  }

  .product-pack-mini {
    width: 30px;
    max-height: 36px;
  }

  .home-reseller-cta {
    min-height: auto;
    padding: 44px 24px 52px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .reseller-cta-copy h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .reseller-cta-copy > p:not(.section-eyebrow) {
    font-size: 1rem;
  }

  .reseller-cta-visual {
    min-height: 270px;
  }

  .reseller-model {
    width: min(430px, 95vw);
    right: -16%;
    bottom: -26%;
  }

  .reseller-pack-one {
    width: 92px;
    right: 6%;
    bottom: 10%;
  }

  .reseller-pack-two {
    width: 82px;
    right: 35%;
    bottom: 0;
  }

  .reseller-badge-one {
    right: 38%;
    top: 10%;
  }

  .reseller-badge-two {
    right: 2%;
    top: 34%;
  }

  .home-reseller-cta {
    padding: 34px 17px 42px;
  }

  .reseller-join-card {
    min-height: auto;
    padding: 24px 20px 0;
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 22px;
  }

  .reseller-card-copy h2 {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }

  .reseller-card-copy > p:not(.section-eyebrow) {
    font-size: 0.98rem;
  }

  .reseller-join-marquee {
    width: 100%;
    height: 38px;
    margin-top: 14px;
    font-size: 0.82rem;
  }

  .reseller-card-visual {
    min-height: 240px;
  }

  .reseller-money-image {
    width: min(320px, 98vw);
  }
  .hero-food-wrap {
    top: 620px;
  }

  .hero-pack-wrap {
    top: 610px;
  }
  .hero-controls {
    top: 850px;
  }

  .hero-product-card {
    top: 905px;
    min-height: 205px;
  }

  .hero-quality-list {
    top: 1340px;
  }

  .page-intro {
    padding: 28px 20px;
  }
}



















@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1740px;
    min-height: var(--hero-height);
    background: linear-gradient(180deg, #fff2cf 0 905px, #fffaf1 905px 100%);
  }

  .hero-slider > .home-reseller-cta {
    width: calc(100% - 34px);
    min-height: 205px;
    padding: 0;
    left: 17px;
    top: 1140px;
    bottom: auto;
    z-index: 9;
    display: block;
    overflow: visible;
    background: transparent;
  }

  .hero-slider .reseller-join-card {
    min-height: 205px;
    padding: 22px 20px;
    grid-template-columns: minmax(0, 1fr) 38%;
    gap: 10px;
    border-radius: 22px;
  }

  .hero-slider .reseller-card-copy h2 {
    font-size: clamp(1.35rem, 6.2vw, 2.05rem);
  }

  .hero-slider .reseller-card-copy > p:not(.section-eyebrow) {
    max-width: 210px;
    font-size: clamp(0.86rem, 3.6vw, 1rem);
    line-height: 1.32;
  }

  .hero-slider .reseller-cta-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
  }

  .hero-slider .reseller-primary-cta,
  .hero-slider .reseller-secondary-cta {
    width: auto;
    min-height: 42px;
    padding: 0 13px;
    font-size: 0.76rem;
  }

  .hero-slider .reseller-card-visual {
    min-height: 156px;
  }

  .hero-slider .reseller-money-image {
    width: min(164px, 41vw);
    right: -14px;
    bottom: -16px;
    transform: none;
    animation: none;
  }

  .hero-slider .reseller-money-glow {
    width: 150px;
    height: 150px;
    right: -34px;
    bottom: -36px;
    transform: none;
    animation: none;
  }

  .hero-slider .reseller-money-rain span {
    min-width: 52px;
    height: 22px;
    font-size: 0.52rem;
  }

  .hero-quality-list {
    top: 1390px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    --hero-height: 1760px;
  }

  .hero-slider > .home-reseller-cta {
    top: 1134px;
  }

  .hero-slider .reseller-join-card {
    min-height: 210px;
    grid-template-columns: minmax(0, 1fr) 36%;
  }

  .hero-slider .reseller-money-image {
    width: min(150px, 39vw);
  }

  .hero-quality-list {
    top: 1400px;
  }
}

@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1980px;
  }

  .hero-slider > .home-reseller-cta {
    top: 1328px;
  }

  .hero-quality-list {
    top: 1700px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    --hero-height: 2000px;
  }

  .hero-slider > .home-reseller-cta {
    top: 1328px;
  }

  .hero-quality-list {
    top: 1710px;
  }
}

/* Comic watercolor story mobile */
@media (max-width: 720px) {
  .hero-bubble {
    max-width: 150px;
    padding: 10px 12px 12px;
    font-size: 0.78rem;
  }

  .hero-bubble-one {
    left: 43%;
    top: 72px;
  }

  .hero-bubble-two {
    display: none;
  }

  .hero-bubble-three {
    right: 16px;
    top: 94px;
  }

  .comic-journey {
    padding: 48px 17px 30px;
  }

  .comic-section-heading {
    margin-bottom: 26px;
  }

  .comic-kicker {
    font-size: 0.78rem;
  }

  .comic-section-heading h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .comic-section-heading > p:not(.comic-kicker) {
    margin-top: 12px;
    font-size: 1rem;
  }

  .comic-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .comic-panel {
    min-height: 250px;
    padding: 12px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 43% minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .comic-panel-bubble {
    max-width: 175px;
    left: 32%;
    top: -2px;
    padding: 9px 12px 11px;
    font-size: 0.78rem;
  }

  .comic-panel-bubble::before {
    width: 18px;
    height: 20px;
    right: 24px;
    bottom: -13px;
  }

  .comic-artboard {
    height: 210px;
    margin-bottom: 0;
    border-radius: 16px;
  }

  .comic-placeholder {
    width: 138px;
    height: 176px;
  }

  .comic-placeholder::before {
    width: 52px;
    height: 52px;
    top: 14px;
  }

  .comic-placeholder::after {
    width: 112px;
    height: 112px;
  }

  .comic-product-set {
    left: 16px;
    right: 16px;
    bottom: 12px;
  }

  .comic-product-set span:nth-child(1) { width: 34px; height: 54px; }
  .comic-product-set span:nth-child(2) { width: 38px; height: 64px; }
  .comic-product-set span:nth-child(3) { width: 32px; height: 50px; }

  .comic-box-stack {
    right: 12px;
    bottom: 16px;
    transform: scale(0.72);
    transform-origin: right bottom;
  }

  .comic-map-pin {
    right: 18px;
    top: 54px;
    width: 48px;
    height: 48px;
  }

  .comic-map-pin::after {
    inset: 14px;
  }

  .comic-panel-copy {
    padding: 0 4px;
    text-align: left;
  }

  .comic-panel-icon {
    width: 62px;
    height: 62px;
    margin: 0 0 12px;
    font-size: 1.6rem;
  }

  .comic-panel h3 {
    font-size: clamp(1.25rem, 6vw, 1.85rem);
  }

  .comic-panel-copy p {
    max-width: none;
    margin-top: 10px;
    font-size: 0.93rem;
  }

  .comic-panel-cta {
    min-height: 42px;
    margin-top: 16px;
    padding: 0 16px;
    font-size: 0.82rem;
  }

  .comic-trust-strip {
    margin-top: 26px;
    padding: 16px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    font-size: 0.78rem;
  }
}

@media (max-width: 420px) {
  .comic-panel {
    grid-template-columns: 1fr;
  }

  .comic-artboard {
    height: 220px;
  }

  .comic-panel-copy {
    text-align: center;
  }

  .comic-panel-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .comic-panel-bubble {
    left: 50%;
  }
}

/* Mobile comic card bubble refinement */
@media (max-width: 720px) {
  .comic-panel {
    overflow: visible;
    margin-top: 30px;
  }

  .comic-panel-bubble {
    top: -34px;
    left: 31%;
    width: 178px;
    max-width: 56vw;
    padding: 10px 14px 12px;
    border-width: 2px;
    border-radius: 56% 44% 52% 48% / 45% 57% 43% 55%;
  }

  .comic-panel-bubble::before {
    width: 27px;
    height: 25px;
    left: 35%;
    right: auto;
    bottom: -17px;
    border-width: 2px;
  }

  .comic-panel-bubble::after {
    width: 31px;
    height: 17px;
    left: calc(35% + 3px);
    bottom: -5px;
  }

  .comic-panel-bubble .bubble-text-track {
    font-size: 0.75rem;
  }
}

@media (max-width: 420px) {
  .comic-panel-bubble {
    left: 50%;
    top: -36px;
    width: 190px;
    max-width: 72vw;
  }
}

/* Restore mobile comic card image and bubble treatment */
@media (max-width: 720px) {
  .comic-panel {
    overflow: hidden;
    margin-top: 0;
  }

  .comic-panel-bubble {
    top: -2px;
    left: 32%;
    width: auto;
    max-width: 175px;
    padding: 9px 12px 11px;
    border-width: 2.2px;
    border-radius: 999px 940px 980px 920px / 760px 840px 780px 860px;
  }

  .comic-panel-bubble::before {
    width: 18px;
    height: 20px;
    left: auto;
    right: 24px;
    bottom: -13px;
    border-width: 2px;
  }

  .comic-panel-bubble::after {
    width: 24px;
    height: 13px;
    left: auto;
    right: 24px;
    bottom: -2px;
  }

  .comic-panel-image {
    object-fit: contain;
  }
}

@media (max-width: 420px) {
  .comic-panel-bubble {
    left: 50%;
    top: -2px;
    max-width: 175px;
  }
}

/* Tighten mobile comic card vertical composition */
@media (max-width: 720px) {
  .comic-panel .comic-artboard {
    height: 218px;
    margin-top: -10px;
    margin-bottom: 0;
    padding: 6px;
  }

  .comic-panel-image {
    object-fit: contain;
    object-position: center top;
  }

  .comic-panel-copy {
    transform: translateY(-10px);
  }

  .comic-panel-icon {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .comic-panel-copy p {
    margin-top: 7px;
  }

  .comic-panel-cta {
    margin-top: 12px;
  }
}

@media (max-width: 420px) {
  .comic-panel .comic-artboard {
    height: 230px;
    margin-top: -8px;
  }

  .comic-panel-copy {
    transform: translateY(-8px);
  }
}

/* Mobile comic heading brand logos */
@media (max-width: 720px) {
  .comic-kicker-logo,
  .comic-title-with-logo {
    gap: 6px;
  }

  .comic-inline-logo-small {
    height: 30px;
  }

  .comic-inline-logo-official {
    height: clamp(44px, 14vw, 62px);
    transform: translateY(5px);
  }
}

/* Mobile comic and hero refinements */
@media (max-width: 720px) {
  .hero-bubble {
    max-width: 118px;
    padding: 7px 9px 8px;
    font-size: 0.64rem;
    line-height: 1.05;
    border-width: 1.8px;
    filter: drop-shadow(0 6px 8px rgba(64, 36, 18, 0.12));
  }

  .hero-bubble::before {
    width: 18px;
    height: 17px;
    bottom: -9px;
    border-width: 1.8px;
  }

  .hero-bubble::after {
    width: 19px;
    height: 10px;
    bottom: -1px;
  }

  .hero-bubble .bubble-text-track {
    gap: 18px;
    animation-duration: 6s;
  }

  .hero-bubble-one {
    left: 36%;
    top: 315px;
  }

  .hero-bubble-two {
    display: block;
    left: 58%;
    top: 346px;
    max-width: 132px;
  }

  .hero-bubble-three {
    right: 9px;
    top: 418px;
    max-width: 118px;
  }

  .hero-quality-list {
    top: 1178px;
  }

  .comic-title-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.02;
  }

  .comic-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
  }

  .comic-title-brand-line {
    margin-top: 2px;
  }

  .comic-inline-logo-brand {
    height: clamp(34px, 12vw, 50px);
    transform: translateY(4px);
  }

  .comic-section-heading h2 {
    font-size: clamp(1.7rem, 8vw, 2.55rem);
  }

  .comic-section-heading > p:not(.comic-kicker) {
    margin-top: 16px;
    font-size: 1.04rem;
  }

  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    top: -2px;
    left: 32%;
    width: auto;
    max-width: 175px;
    padding: 9px 12px 11px;
    border-width: 2.2px;
    border-radius: 999px 940px 980px 920px / 760px 840px 780px 860px;
  }

  .comic-panel-food .comic-panel-bubble::before,
  .comic-panel-holiday .comic-panel-bubble::before {
    width: 18px;
    height: 20px;
    left: auto;
    right: 24px;
    bottom: -13px;
    border-width: 2px;
  }

  .comic-panel-food .comic-panel-bubble::after,
  .comic-panel-holiday .comic-panel-bubble::after {
    width: 24px;
    height: 13px;
    left: auto;
    right: 24px;
    bottom: -2px;
  }
}

@media (max-width: 420px) {
  .hero-quality-list {
    top: 1162px;
  }

  .hero-bubble-one {
    left: 31%;
    top: 306px;
  }

  .hero-bubble-two {
    left: 55%;
    top: 340px;
  }

  .hero-bubble-three {
    right: 6px;
    top: 410px;
  }

  .comic-title-line {
    gap: 6px;
  }

  .comic-inline-logo-brand {
    height: clamp(30px, 12vw, 44px);
  }

  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    left: 50%;
    top: -2px;
    max-width: 175px;
  }
}

/* Mobile final review tune: hero bubbles, section spacing, and overflow */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-wrapper,
  .hero-slider,
  .comic-story {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .hero-slider {
    --hero-width: 100%;
    --hero-height: 1515px;
    min-height: var(--hero-height);
    height: var(--hero-height);
  }

  .hero-bubble {
    max-width: 106px;
    padding: 6px 8px 7px;
    font-size: 0.58rem;
    line-height: 1.04;
    z-index: 16;
  }

  .hero-bubble .bubble-text-track {
    gap: 14px;
    animation-duration: 5.5s;
  }

  .hero-bubble-one {
    left: 21%;
    top: 418px;
  }

  .hero-bubble-two {
    left: 51%;
    top: 392px;
    max-width: 120px;
  }

  .hero-bubble-three {
    right: 8px;
    top: 480px;
    max-width: 106px;
  }

  .hero-quality-list {
    top: 1214px;
    z-index: 14;
  }

  .hero-quality-list .quality-icon {
    display: inline-grid;
  }

  .comic-story {
    margin-top: 0;
    padding-top: 44px;
  }

  .comic-section-heading {
    margin-bottom: 22px;
  }

  .comic-title-stacked {
    gap: 2px;
  }

  .comic-inline-logo-brand {
    height: clamp(30px, 10.5vw, 42px);
    transform: translateY(3px);
  }

  .comic-section-heading h2 {
    font-size: clamp(1.62rem, 7.4vw, 2.25rem);
    line-height: 1.12;
  }

  .comic-section-heading > p:not(.comic-kicker) {
    width: min(330px, 92vw);
    margin-top: 12px;
    font-size: 0.96rem;
    line-height: 1.34;
  }

  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    left: 50%;
    top: -2px;
    max-width: 175px;
  }
}

@media (max-width: 420px) {
  .hero-slider {
    --hero-height: 1500px;
  }

  .hero-bubble {
    max-width: 101px;
    font-size: 0.55rem;
  }

  .hero-bubble-one {
    left: 17%;
    top: 410px;
  }

  .hero-bubble-two {
    left: 49%;
    top: 388px;
    max-width: 112px;
  }

  .hero-bubble-three {
    right: 5px;
    top: 468px;
    max-width: 100px;
  }

  .hero-quality-list {
    top: 1200px;
  }

  .comic-story {
    padding-top: 36px;
  }

  .comic-inline-logo-brand {
    height: clamp(28px, 10vw, 38px);
  }

  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    left: 50%;
    top: -2px;
    max-width: 175px;
  }
}

/* Mobile review tune 2: readable hero bubbles and closer story cards */
@media (max-width: 720px) {
  .hero-bubble {
    max-width: 112px;
    padding: 7px 9px 8px;
    font-size: 0.6rem;
    background: rgba(255, 253, 246, 0.96);
    box-shadow: 0 4px 10px rgba(63, 34, 16, 0.14);
  }

  .hero-bubble-one {
    left: 13%;
    top: 432px;
  }

  .hero-bubble-two {
    left: 45%;
    top: 402px;
    max-width: 126px;
  }

  .hero-bubble-three {
    right: 4px;
    top: 520px;
    max-width: 108px;
  }

  .comic-story {
    padding-top: 28px;
  }

  .comic-section-heading {
    margin-bottom: 8px;
  }

  .comic-panels {
    gap: 12px;
  }

  .comic-panel {
    min-height: 520px;
  }
}

@media (max-width: 420px) {
  .hero-bubble-one {
    left: 9%;
    top: 426px;
  }

  .hero-bubble-two {
    left: 42%;
    top: 398px;
  }

  .hero-bubble-three {
    right: 3px;
    top: 510px;
  }

  .comic-story {
    padding-top: 24px;
  }

  .comic-section-heading {
    margin-bottom: 6px;
  }
}

/* Mobile comic card layout fix: full-width art, tighter card height */
@media (max-width: 720px) {
  .comic-panel {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px 12px 18px;
    gap: 4px;
  }

  .comic-panel .comic-artboard {
    width: 100%;
    height: auto;
    aspect-ratio: 1.25 / 1;
    margin-top: -6px;
    margin-bottom: 0;
    padding: 4px;
  }

  .comic-panel-image {
    object-fit: contain;
    object-position: center top;
  }

  .comic-panel-copy {
    transform: translateY(-12px);
    padding: 0 8px;
  }

  .comic-panel-icon {
    margin-top: -26px;
    margin-bottom: 8px;
  }

  .comic-panel h3 {
    line-height: 1.08;
  }

  .comic-panel-copy p {
    margin-top: 8px;
  }

  .comic-panel-cta {
    margin-top: 12px;
  }

  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble,
  .comic-panel-bubble {
    top: -2px;
    left: 50%;
  }
}

@media (max-width: 420px) {
  .comic-panel .comic-artboard {
    aspect-ratio: 1.18 / 1;
  }

  .comic-panel-copy {
    transform: translateY(-10px);
  }
}

/* Mobile comic image frame: uniform art area for every story card */
@media (max-width: 720px) {
  .comic-panel {
    --comic-mobile-art-height: clamp(238px, 67vw, 286px);
  }

  .comic-panel .comic-artboard,
  .comic-panel .comic-holiday-artboard {
    width: 100%;
    height: var(--comic-mobile-art-height);
    aspect-ratio: auto;
    margin: -4px 0 0;
    padding: 0;
    border-radius: 18px 18px 10px 10px;
    overflow: hidden;
    background: rgba(255, 249, 232, 0.7);
  }

  .comic-panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .comic-panel-food .comic-panel-image {
    object-position: center 42%;
  }

  .comic-panel-partner .comic-panel-image,
  .comic-panel-nearby .comic-panel-image {
    object-position: center 46%;
  }

  .comic-panel-holiday .comic-panel-image {
    object-position: center 42%;
  }

  .comic-panel-bubble,
  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    top: 4px;
    left: 50%;
    z-index: 5;
  }

  .comic-panel-copy {
    transform: translateY(-6px);
  }
}

@media (max-width: 420px) {
  .comic-panel {
    --comic-mobile-art-height: clamp(232px, 66vw, 268px);
  }
}

/* Mobile product-card overlap fix: move benefit row below the checkout/thumb area */
@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1625px;
    min-height: var(--hero-height);
    height: var(--hero-height);
  }

  .hero-quality-list {
    top: 1322px;
  }
}

@media (max-width: 420px) {
  .hero-slider {
    --hero-height: 1608px;
  }

  .hero-quality-list {
    top: 1310px;
  }
}

/* Mobile hero bubble 3 placement: keep it above the model faces */
@media (max-width: 720px) {
  .hero-bubble-three {
    top: 458px;
    right: 12px;
    max-width: 96px;
    font-size: 0.54rem;
  }
}

@media (max-width: 420px) {
  .hero-bubble-three {
    top: 452px;
    right: 10px;
    max-width: 94px;
  }
}

/* Mobile hero bubble 3 fine tune: sit above the right-side model head */
@media (max-width: 720px) {
  .hero-bubble-three {
    top: 432px;
    right: 8px;
    max-width: 94px;
  }
}

@media (max-width: 420px) {
  .hero-bubble-three {
    top: 428px;
    right: 8px;
    max-width: 92px;
  }
}

/* Mobile story card speech bubbles: place near the character faces */
@media (max-width: 720px) {
  .comic-panel .comic-panel-bubble,
  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    z-index: 8;
    top: 46px;
    max-width: 178px;
  }

  .comic-panel-food .comic-panel-bubble {
    left: 43%;
    top: 38px;
  }

  .comic-panel-partner .comic-panel-bubble {
    left: 47%;
    top: 36px;
  }

  .comic-panel-nearby .comic-panel-bubble {
    left: 55%;
    top: 44px;
  }

  .comic-panel-holiday .comic-panel-bubble {
    left: 50%;
    top: 50px;
  }
}

@media (max-width: 420px) {
  .comic-panel .comic-panel-bubble,
  .comic-panel-food .comic-panel-bubble,
  .comic-panel-holiday .comic-panel-bubble {
    max-width: 168px;
  }

  .comic-panel-food .comic-panel-bubble {
    left: 43%;
    top: 34px;
  }

  .comic-panel-partner .comic-panel-bubble {
    left: 47%;
    top: 32px;
  }

  .comic-panel-nearby .comic-panel-bubble {
    left: 55%;
    top: 40px;
  }

  .comic-panel-holiday .comic-panel-bubble {
    left: 50%;
    top: 46px;
  }
}

/* Mobile story bubble fine tune: overlap art near the character */
@media (max-width: 720px) {
  .comic-panel-food .comic-panel-bubble {
    top: 146px;
    left: 43%;
  }

  .comic-panel-partner .comic-panel-bubble {
    top: 140px;
    left: 47%;
  }

  .comic-panel-nearby .comic-panel-bubble {
    top: 142px;
    left: 55%;
  }

  .comic-panel-holiday .comic-panel-bubble {
    top: 118px;
    left: 50%;
  }
}

@media (max-width: 420px) {
  .comic-panel-food .comic-panel-bubble {
    top: 142px;
    left: 43%;
  }

  .comic-panel-partner .comic-panel-bubble {
    top: 136px;
    left: 47%;
  }

  .comic-panel-nearby .comic-panel-bubble {
    top: 138px;
    left: 55%;
  }

  .comic-panel-holiday .comic-panel-bubble {
    top: 112px;
    left: 50%;
  }
}

/* Strong mobile story bubble positioning overrides */
@media (max-width: 720px) {
  .comic-panel.comic-panel-food .comic-panel-bubble { top: 146px; left: 43%; }
  .comic-panel.comic-panel-partner .comic-panel-bubble { top: 140px; left: 47%; }
  .comic-panel.comic-panel-nearby .comic-panel-bubble { top: 142px; left: 55%; }
  .comic-panel.comic-panel-holiday .comic-panel-bubble { top: 118px; left: 50%; }
}

@media (max-width: 420px) {
  .comic-panel.comic-panel-food .comic-panel-bubble { top: 142px; left: 43%; }
  .comic-panel.comic-panel-partner .comic-panel-bubble { top: 136px; left: 47%; }
  .comic-panel.comic-panel-nearby .comic-panel-bubble { top: 138px; left: 55%; }
  .comic-panel.comic-panel-holiday .comic-panel-bubble { top: 112px; left: 50%; }
}
/* Clean layout rules: single final source of truth after removing audit overrides. */
@media (min-width: 721px) {
  .hero-slider .hero-quality-list,
  .hero-slider .hero-benefits {
    display: none !important;
  }
}

@media (min-width: 1101px) {
  .hero-slider .hero-comic-bubbles {
    display: block !important;
  }

  .hero-slider .hero-family-model {
    top: 10px !important;
    bottom: auto !important;
  }

  .hero-slider .hero-bubble {
    max-width: 154px !important;
    height: auto !important;
    padding: 7px 11px 8px !important;
    font-size: 0.66rem !important;
    line-height: 1.08 !important;
    z-index: 18 !important;
  }

  .hero-slider .hero-bubble-one {
    display: block !important;
    left: 48.5% !important;
    top: 26px !important;
  }

  .hero-slider .hero-bubble-two {
    display: block !important;
    left: 63.8% !important;
    top: 20px !important;
  }

  .hero-slider .hero-bubble-three {
    display: block !important;
    right: 5.8% !important;
    top: 160px !important;
    max-width: 142px !important;
  }

  .hero-slider .hero-branding {
    width: min(370px, 27vw) !important;
    left: max(64px, 5.4vw) !important;
    top: 34px !important;
  }

  .hero-slider .hero-official-logo {
    width: clamp(104px, 7.8vw, 128px) !important;
    margin-bottom: 8px !important;
  }

  .hero-slider .hero-headline-art {
    width: min(100%, 370px) !important;
  }

  .hero-slider .hero-subtitle {
    max-width: 340px !important;
    margin-top: 12px !important;
    font-size: clamp(0.98rem, 1.03vw, 1.18rem) !important;
    line-height: 1.26 !important;
  }

  .hero-slider .hero-subtitle::before {
    width: 165px !important;
    height: 3px !important;
  }

  .hero-slider .hero-product-card {
    width: min(390px, 29vw) !important;
    min-height: 0 !important;
    left: 33vw !important;
    top: 320px !important;
    bottom: auto !important;
    padding: 18px 22px !important;
    transform: none !important;
  }

  .hero-slider .hero-card-actions {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .hero-slider .hero-card-actions .product-cta {
    min-width: 148px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 0.86rem !important;
  }

  .hero-slider .product-secondary-cta {
    display: none !important;
  }

  .hero-slider .product-badge {
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }

  .hero-slider .hero-product-card h2 {
    font-size: clamp(1.34rem, 1.82vw, 1.72rem) !important;
  }

  .hero-slider .hero-product-card p:not(.product-badge) {
    max-width: 270px !important;
    margin-top: 7px !important;
    font-size: 0.9rem !important;
    line-height: 1.22 !important;
  }

  .hero-slider .product-pack-marquee {
    margin-top: 14px !important;
  }

  .hero-slider .hero-controls {
    bottom: 18px !important;
    z-index: 16 !important;
  }

  .comic-panels {
    width: min(1440px, 100%);
    margin-top: 52px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .comic-panel,
  .comic-panel:nth-child(2),
  .comic-panel:nth-child(3),
  .comic-panel:nth-child(4),
  .comic-panel.is-visible,
  .comic-panel:nth-child(4).is-visible {
    min-height: 548px !important;
    padding: 14px 14px 22px !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .comic-panel .comic-artboard,
  .comic-panel .comic-holiday-artboard {
    width: 100%;
    height: 286px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .comic-panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .comic-panel .comic-panel-bubble {
    top: -34px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 210px !important;
    z-index: 9 !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  html,
  body,
  .site-wrapper,
  .comic-story {
    max-width: 100%;
    overflow-x: hidden;
  }

  .navbar {
    width: min(100% - 34px, 720px);
    min-height: 78px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
  }

  .nav-toggle span {
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: #2f1712;
  }

  .nav-brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    min-width: 0;
  }

  .nav-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
  }

  .nav-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(116, 69, 25, 0.14);
    border-radius: 18px;
    background: rgba(255, 252, 244, 0.98);
    box-shadow: 0 18px 36px rgba(67, 37, 13, 0.16);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu a {
    width: 100%;
    padding: 12px 14px;
  }

  .nav-cta {
    grid-column: 3;
    grid-row: 1;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.78rem;
    white-space: nowrap;
    justify-self: end;
  }

  .hero-slider {
    min-height: 980px;
    height: 980px;
  }

  .hero-slider .hero-comic-bubbles {
    display: block !important;
  }

  .hero-slider .hero-bubble {
    max-width: 124px !important;
    padding: 6px 8px 7px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
    z-index: 18 !important;
  }

  .hero-slider .hero-bubble-one {
    display: block !important;
    left: 11% !important;
    top: 398px !important;
  }

  .hero-slider .hero-bubble-two {
    display: block !important;
    left: 38% !important;
    top: 398px !important;
    max-width: 140px !important;
  }

  .hero-slider .hero-bubble-three {
    display: block !important;
    right: 8% !important;
    top: 398px !important;
    max-width: 118px !important;
  }

  .hero-slider .hero-controls {
    bottom: 28px !important;
    z-index: 16 !important;
  }

  .comic-panels {
    width: min(760px, calc(100% - 40px));
    margin-top: 52px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px 24px;
  }

  .comic-panel,
  .comic-panel:nth-child(2),
  .comic-panel:nth-child(3),
  .comic-panel:nth-child(4),
  .comic-panel.is-visible,
  .comic-panel:nth-child(4).is-visible {
    min-height: 594px !important;
    padding: 14px 14px 22px !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .comic-panel .comic-artboard,
  .comic-panel .comic-holiday-artboard {
    width: 100%;
    height: 306px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .comic-panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .comic-panel .comic-panel-bubble {
    top: -32px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 196px !important;
    z-index: 9 !important;
  }
}

@media (max-width: 720px) {
  .hero-slider .hero-comic-bubbles {
    display: block !important;
  }

  .hero-slider .hero-bubble {
    padding: 5px 7px 6px !important;
    font-size: 0.5rem !important;
    line-height: 1.04 !important;
    z-index: 18 !important;
  }

  .hero-slider .hero-bubble-one {
    display: block !important;
    left: 16px !important;
    top: 368px !important;
    max-width: 92px !important;
  }

  .hero-slider .hero-bubble-two {
    display: block !important;
    left: 132px !important;
    top: 368px !important;
    max-width: 102px !important;
  }

  .hero-slider .hero-bubble-three {
    display: block !important;
    right: 16px !important;
    top: 368px !important;
    max-width: 82px !important;
  }

  .hero-slider .hero-controls {
    top: 1300px !important;
    bottom: auto !important;
    z-index: 16 !important;
  }

  .hero-slider .product-secondary-cta {
    display: none !important;
  }

  .hero-quality-list {
    top: 1360px !important;
  }

  .comic-panels {
    margin-top: 46px !important;
    gap: 50px !important;
  }

  .comic-panel,
  .comic-panel:nth-child(2),
  .comic-panel:nth-child(3),
  .comic-panel:nth-child(4),
  .comic-panel.is-visible,
  .comic-panel:nth-child(4).is-visible {
    padding: 12px 12px 20px !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .comic-panel .comic-artboard,
  .comic-panel .comic-holiday-artboard {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }

  .comic-panel .comic-panel-bubble {
    top: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 154px !important;
    z-index: 9 !important;
  }
}

@media (max-width: 374px) {
  .hero-slider .hero-bubble-one {
    left: 14px !important;
    max-width: 86px !important;
  }

  .hero-slider .hero-bubble-two {
    left: 116px !important;
    max-width: 96px !important;
  }

  .hero-slider .hero-bubble-three {
    right: 14px !important;
    max-width: 76px !important;
  }
}

/* Final happy gate positioning for desktop, tablet, and mobile. */
@media (min-width: 1101px) {
  .hero-slider .hero-happy-gates {
    width: min(360px, calc(100% - 96px)) !important;
    left: max(64px, 5.4vw) !important;
    top: 357px !important;
    bottom: auto !important;
    transform: none !important;
  }

  .hero-slider .hero-gates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .hero-slider .happy-gate {
    min-height: 96px !important;
    padding: 10px 10px 12px !important;
  }

  .hero-slider .happy-gate-bubble {
    max-width: 172px !important;
    font-size: 0.7rem !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider {
    min-height: 1260px !important;
    height: 1260px !important;
  }

  .hero-slider .hero-happy-gates {
    width: min(760px, calc(100% - 40px)) !important;
    left: 50% !important;
    top: 830px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  .hero-slider .hero-gates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .hero-slider .happy-gate {
    min-height: 88px !important;
    padding: 10px 12px 12px !important;
  }

  .hero-slider .happy-gate-bubble {
    max-width: 188px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1960px !important;
    min-height: var(--hero-height) !important;
  }

  .hero-slider .hero-happy-gates {
    width: calc(100% - 30px) !important;
    left: 15px !important;
    top: 580px !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 21 !important;
  }

  .hero-slider .hero-gates-kicker {
    margin-bottom: 10px !important;
    padding: 6px 12px 7px !important;
    font-size: 0.78rem !important;
  }

  .hero-slider .hero-gates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .hero-slider .happy-gate {
    min-height: 112px !important;
    padding: 10px 10px 12px !important;
    border-radius: 20px 15px 23px 14px !important;
  }

  .hero-slider .happy-gate strong {
    font-size: clamp(0.86rem, 4vw, 1.02rem) !important;
  }

  .hero-slider .happy-gate-note {
    font-size: 0.7rem !important;
  }

  .hero-slider .happy-gate-bubble {
    max-width: 142px !important;
    padding: 7px 9px 8px !important;
    bottom: calc(100% + 8px) !important;
    font-size: 0.64rem !important;
    line-height: 1.12 !important;
  }

  .comic-panel .comic-panel-bubble {
    opacity: 0 !important;
  }

  .comic-panel:hover .comic-panel-bubble,
  .comic-panel:focus-visible .comic-panel-bubble,
  .comic-panel.is-selected .comic-panel-bubble {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) rotate(0deg) !important;
  }
}

@media (max-width: 420px) {
  .hero-slider {
    --hero-height: 1960px !important;
  }

  .hero-slider .hero-happy-gates {
    top: 576px !important;
  }

  .hero-slider .happy-gate {
    min-height: 108px !important;
  }

  .hero-slider .happy-gate-bubble {
    max-width: 132px !important;
  }
}

@media (max-width: 374px) {
  .hero-slider .hero-happy-gates {
    width: calc(100% - 24px) !important;
    left: 12px !important;
    top: 570px !important;
  }

  .hero-slider .happy-gate {
    min-height: 104px !important;
    padding: 9px 8px 10px !important;
  }

  .hero-slider .happy-gate strong {
    font-size: 0.82rem !important;
  }
}

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

.hero-slider .hero-happy-gates {
  display: none !important;
}

@media (min-width: 1101px) {
  .hero-character-guide {
    --hotspot-left: 66.2%;
    --hotspot-top: 22.5%;
    --hotspot-w: 5.6%;
    --hotspot-h: 5%;
    --bubble-left: 245%;
    --bubble-top: -10px;
  }

  .hero-character-mom {
    --hotspot-left: 80.8%;
    --hotspot-top: 36.5%;
    --hotspot-w: 5.3%;
    --hotspot-h: 10%;
    --bubble-left: 50%;
    --bubble-top: -94px;
  }

  .hero-character-boy {
    --hotspot-left: 51.6%;
    --hotspot-top: 32%;
    --hotspot-w: 5.2%;
    --hotspot-h: 10%;
    --bubble-left: 50%;
    --bubble-top: -94px;
  }

  .hero-character-frontman {
    --hotspot-left: 62.1%;
    --hotspot-top: 44.5%;
    --hotspot-w: 6.3%;
    --hotspot-h: 10.5%;
    --bubble-left: 82%;
    --bubble-top: -102px;
  }

  .hero-character-girl {
    --hotspot-left: 72.6%;
    --hotspot-top: 41.8%;
    --hotspot-w: 4.6%;
    --hotspot-h: 8.8%;
    --bubble-left: 142%;
    --bubble-top: -160px;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-character-guide {
    --hotspot-left: 73.5%;
    --hotspot-top: 31.4%;
    --hotspot-w: 6.4%;
    --hotspot-h: 4.6%;
    --bubble-left: 285%;
    --bubble-top: -18px;
  }

  .hero-character-mom {
    --hotspot-left: 84.4%;
    --hotspot-top: 39.1%;
    --hotspot-w: 6.2%;
    --hotspot-h: 5.4%;
    --bubble-left: 32%;
    --bubble-top: -96px;
  }

  .hero-character-boy {
    --hotspot-left: 48.6%;
    --hotspot-top: 37.8%;
    --hotspot-w: 6.2%;
    --hotspot-h: 5.2%;
    --bubble-left: 50%;
    --bubble-top: -94px;
  }

  .hero-character-frontman {
    --hotspot-left: 62.8%;
    --hotspot-top: 41.2%;
    --hotspot-w: 6.8%;
    --hotspot-h: 5.6%;
    --bubble-left: 30%;
    --bubble-top: -170px;
  }

  .hero-character-girl {
    --hotspot-left: 72.5%;
    --hotspot-top: 41%;
    --hotspot-w: 5.2%;
    --hotspot-h: 5%;
    --bubble-left: 142%;
    --bubble-top: -160px;
  }
}

@media (max-width: 720px) {
  .character-bubble {
    max-width: 178px;
    padding: 10px 13px 12px;
    font-size: 0.74rem;
    line-height: 1.22;
  }

  .hero-character-guide .character-bubble {
    max-width: 152px;
  }

  .character-bubble strong {
    font-size: 0.82rem;
  }

  .character-bubble small {
    font-size: 0.64rem;
    line-height: 1.28;
  }

  .hero-character-guide {
    --hotspot-left: 56%;
    --hotspot-top: 28%;
    --hotspot-w: 10%;
    --hotspot-h: 2.6%;
    --bubble-left: 332%;
    --bubble-top: -12px;
  }

  .hero-character-mom {
    --hotspot-left: 78%;
    --hotspot-top: 37%;
    --hotspot-w: 9%;
    --hotspot-h: 6.2%;
    --bubble-left: 28%;
    --bubble-top: -86px;
  }

  .hero-character-boy {
    --hotspot-left: 22%;
    --hotspot-top: 36%;
    --hotspot-w: 9.5%;
    --hotspot-h: 6.5%;
    --bubble-left: 50%;
    --bubble-top: -88px;
  }

  .hero-character-frontman {
    --hotspot-left: 47%;
    --hotspot-top: 41.5%;
    --hotspot-w: 10.5%;
    --hotspot-h: 6.5%;
    --bubble-left: 88%;
    --bubble-top: -170px;
  }

  .hero-character-girl {
    --hotspot-left: 62.5%;
    --hotspot-top: 39%;
    --hotspot-w: 7.5%;
    --hotspot-h: 5.8%;
    --bubble-left: 330%;
    --bubble-top: -166px;
  }
}

/* Family-attached hotspots: coordinates follow the model image, not the hero canvas. */
.hero-slider .hero-family-stage .hero-family-model {
  width: 100% !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

@media (min-width: 1101px) {
  .hero-slider .hero-family-stage {
    width: 40% !important;
    left: 46.6% !important;
    top: 0 !important;
    bottom: auto !important;
  }

  .hero-slider .hero-product-card {
    width: min(350px, 25.8vw) !important;
    left: 32.4vw !important;
    top: 286px !important;
    min-height: 0 !important;
    padding: 16px 20px !important;
  }

  .hero-slider .hero-product-card h2 {
    font-size: clamp(1.22rem, 1.55vw, 1.52rem) !important;
  }

  .hero-slider .hero-product-card p:not(.product-badge) {
    max-width: 240px !important;
    font-size: 0.82rem !important;
  }

  .hero-slider .hero-nav {
    top: 394px !important;
    transform: none !important;
  }

  .hero-slider .hero-nav-prev {
    left: calc(32.4vw - 23px) !important;
    right: auto !important;
  }

  .hero-slider .hero-nav-next {
    left: calc(83vw - 23px) !important;
    right: auto !important;
  }

  .hero-slider .product-badge {
    padding: 5px 9px !important;
    font-size: 0.64rem !important;
    margin-bottom: 7px !important;
  }

  .hero-slider .hero-card-actions {
    margin-top: 12px !important;
  }

  .hero-slider .hero-card-actions .product-cta {
    min-width: 132px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
  }

  .hero-slider .product-pack-marquee {
    margin-top: 10px !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap {
    left: 52.2% !important;
    top: 318px !important;
    width: 20.2% !important;
  }

  .hero-slide .hero-pack-wrap,
  .hero-slide[data-slide] .hero-pack-wrap {
    left: 70.5% !important;
    top: 282px !important;
    width: 11.6% !important;
  }
}

@media (max-width: 720px) {
  .hero-slider .hero-family-stage {
    width: min(90vw, 500px) !important;
    left: 3% !important;
    top: 414px !important;
    bottom: auto !important;
  }
}

.hero-character-guide {
  --hotspot-left: 64.2%;
  --hotspot-top: 12%;
  --hotspot-w: 8.2%;
  --hotspot-h: 9.8%;
  --bubble-left: 285%;
  --bubble-top: -18px;
}

.hero-character-mom {
  --hotspot-left: 83.8%;
  --hotspot-top: 45.4%;
  --hotspot-w: 8%;
  --hotspot-h: 14%;
  --bubble-left: 32%;
  --bubble-top: -96px;
}

.hero-character-boy {
  --hotspot-left: 19.8%;
  --hotspot-top: 39.9%;
  --hotspot-w: 8%;
  --hotspot-h: 13.6%;
  --bubble-left: 50%;
  --bubble-top: -94px;
}

.hero-character-frontman {
  --hotspot-left: 45.3%;
  --hotspot-top: 54.6%;
  --hotspot-w: 8.8%;
  --hotspot-h: 14.6%;
  --bubble-left: 30%;
  --bubble-top: -112px;
}

.hero-character-girl {
  --hotspot-left: 62.4%;
  --hotspot-top: 53.6%;
  --hotspot-w: 7%;
  --hotspot-h: 13%;
  --bubble-left: 142%;
  --bubble-top: -108px;
}

@media (max-width: 720px) {
  .hero-character-guide {
    --bubble-left: 265%;
    --bubble-top: -12px;
  }

  .hero-character-girl {
    --bubble-left: 225%;
    --bubble-top: -118px;
  }
}

/*
 * Archived hero overrides (20260709-20260710).
 * The active hero geometry now lives in hero-layout.css. Keeping this block
 * disabled preserves the revision history without allowing old locks to
 * compete in the cascade.
 */
@media not all {
/* Product visual alignment lock: keep food and pack paired consistently on every slide. */
@media (min-width: 1101px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 52.2% !important;
    top: 318px !important;
    width: 20.2% !important;
    transform: scale(1.02) !important;
    transform-origin: center bottom !important;
  }

  .hero-slide .hero-pack-wrap,
  .hero-slide[data-slide] .hero-pack-wrap,
  .hero-slide[data-slide="original"] .hero-pack-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-pack-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-pack-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-pack-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-pack-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-pack-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-pack-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-pack-wrap {
    left: 70.5% !important;
    top: 282px !important;
    width: 11.6% !important;
  }

  .hero-slide[data-slide="original"] .hero-food-wrap { left: 52.35% !important; width: 20.53% !important; }
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap { left: 49.61% !important; width: 24.4% !important; }
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap { left: 50.6% !important; width: 22.72% !important; }
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap { left: 53.69% !important; width: 17.69% !important; }
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap { left: 53.73% !important; width: 17.35% !important; }
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap { left: 54.07% !important; width: 16.67% !important; }
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap { left: 50.73% !important; width: 22.88% !important; }
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap { left: 53.75% !important; width: 17.34% !important; }
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap { left: 53.68% !important; width: 17.34% !important; }
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap { left: 53.76% !important; width: 17.52% !important; }

  .hero-slide[data-slide="original"] .hero-pack-wrap { left: 69.42% !important; width: 11.57% !important; }
  .hero-slide[data-slide="nyemek-rempah"] .hero-pack-wrap { left: 69.29% !important; width: 11.44% !important; }
  .hero-slide[data-slide="yamin-pedas"] .hero-pack-wrap { left: 69.71% !important; width: 10.57% !important; }
  .hero-slide[data-slide="baso-kampung"] .hero-pack-wrap { left: 69.11% !important; width: 11.76% !important; }
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-pack-wrap { left: 69.87% !important; width: 10.33% !important; }
  .hero-slide[data-slide="cabai-tabur"] .hero-pack-wrap { left: 68.45% !important; width: 13.08% !important; }
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-pack-wrap { left: 69.08% !important; width: 11.76% !important; }
  .hero-slide[data-slide="tempe-kriuk"] .hero-pack-wrap { left: 69.91% !important; width: 10.2% !important; }
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-pack-wrap { left: 69.6% !important; width: 10.7% !important; }
  .hero-slide[data-slide="usus-krispy"] .hero-pack-wrap { left: 69.78% !important; width: 10.47% !important; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider .hero-family-stage {
    width: 56% !important;
    left: 37% !important;
    top: 390px !important;
    bottom: auto !important;
  }

  .hero-slider .hero-product-card {
    width: min(320px, calc(100% - 168px)) !important;
    left: 50% !important;
    top: 775px !important;
    bottom: auto !important;
    min-height: 0 !important;
    padding: 14px 20px 16px !important;
    transform: translateX(-50%) !important;
  }

  .hero-slider .hero-product-card-copy,
  .hero-slider .hero-product-card h2,
  .hero-slider .hero-product-card p:not(.product-badge),
  .hero-slider .hero-card-actions {
    width: 206px !important;
    max-width: 206px !important;
  }

  .hero-slider .product-pack-marquee {
    display: none !important;
  }

  .hero-slider .product-badge {
    margin-bottom: 6px !important;
    padding: 5px 9px !important;
    font-size: 0.66rem !important;
  }

  .hero-slider .hero-product-card h2 {
    font-size: 1.58rem !important;
    line-height: 1.05 !important;
  }

  .hero-slider .hero-product-card p:not(.product-badge) {
    margin-top: 6px !important;
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
  }

  .hero-slider .hero-card-actions {
    margin-top: 12px !important;
  }

  .hero-slider .hero-card-actions .product-cta {
    min-width: 156px !important;
    min-height: 40px !important;
  }

  .hero-slider .product-secondary-cta {
    display: none !important;
  }

  .hero-slider .hero-nav {
    top: 884px !important;
    transform: none !important;
  }

  .hero-slider .hero-nav-prev {
    left: calc(50% - 194px) !important;
    right: auto !important;
  }

  .hero-slider .hero-nav-next {
    left: calc(50% + 198px) !important;
    right: auto !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 54% !important;
    top: 694px !important;
    width: 16% !important;
    transform: none !important;
    z-index: 12 !important;
  }

  .hero-slide .hero-pack-wrap,
  .hero-slide[data-slide] .hero-pack-wrap,
  .hero-slide[data-slide="original"] .hero-pack-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-pack-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-pack-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-pack-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-pack-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-pack-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-pack-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-pack-wrap {
    left: 69% !important;
    top: 654px !important;
    width: 10.5% !important;
    z-index: 13 !important;
  }

  .hero-slide[data-slide="original"] .hero-food-wrap { left: 55.18% !important; width: 16.38% !important; }
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap { left: 53% !important; width: 19.47% !important; }
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap { left: 53.79% !important; width: 18.13% !important; }
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap { left: 56.25% !important; width: 14.12% !important; }
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap { left: 56.28% !important; width: 13.85% !important; }
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap { left: 56.55% !important; width: 13.3% !important; }
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap { left: 53.89% !important; width: 18.26% !important; }
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap { left: 56.3% !important; width: 13.84% !important; }
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap { left: 56.24% !important; width: 13.83% !important; }
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap { left: 56.3% !important; width: 13.98% !important; }

  .hero-slide[data-slide="original"] .hero-pack-wrap { left: 70.03% !important; width: 10.52% !important; }
  .hero-slide[data-slide="nyemek-rempah"] .hero-pack-wrap { left: 69.91% !important; width: 10.4% !important; }
  .hero-slide[data-slide="yamin-pedas"] .hero-pack-wrap { left: 70.29% !important; width: 9.6% !important; }
  .hero-slide[data-slide="baso-kampung"] .hero-pack-wrap { left: 69.75% !important; width: 10.69% !important; }
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-pack-wrap { left: 70.43% !important; width: 9.39% !important; }
  .hero-slide[data-slide="cabai-tabur"] .hero-pack-wrap { left: 69.15% !important; width: 11.89% !important; }
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-pack-wrap { left: 69.72% !important; width: 10.69% !important; }
  .hero-slide[data-slide="tempe-kriuk"] .hero-pack-wrap { left: 70.48% !important; width: 9.27% !important; }
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-pack-wrap { left: 70.2% !important; width: 9.72% !important; }
  .hero-slide[data-slide="usus-krispy"] .hero-pack-wrap { left: 70.36% !important; width: 9.52% !important; }
}

@media (max-width: 720px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 8% !important;
    top: 600px !important;
    width: 58% !important;
    transform: none !important;
  }

  .hero-slide .hero-pack-wrap,
  .hero-slide[data-slide] .hero-pack-wrap,
  .hero-slide[data-slide="original"] .hero-pack-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-pack-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-pack-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-pack-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-pack-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-pack-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-pack-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-pack-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-pack-wrap {
    left: 61% !important;
    top: 594px !important;
    width: 28% !important;
  }
}
/* Unified paired product scale lock - 20260709 */
.hero-slider .hero-food-wrap img {
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

.hero-slider .hero-food-wrap .hero-contact-shadow {
  width: 70% !important;
  left: 15% !important;
  bottom: -4% !important;
}

@media (min-width: 1101px) {
  .hero-slider .hero-family-stage {
    width: 40% !important;
    left: 46.6% !important;
    top: 0 !important;
    bottom: auto !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 49.7% !important;
    top: 300px !important;
    width: auto !important;
    height: 170px !important;
    transform: none !important;
    transform-origin: center bottom !important;
    z-index: 12 !important;
  }

  .hero-slider .hero-food-wrap img {
    height: 100% !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider .hero-family-stage {
    width: 56% !important;
    left: 37% !important;
    top: 390px !important;
    bottom: auto !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 40% !important;
    top: 664px !important;
    width: auto !important;
    height: 120px !important;
    transform: none !important;
    transform-origin: center bottom !important;
    z-index: 12 !important;
  }

  .hero-slider .hero-food-wrap img {
    height: 100% !important;
  }
}

@media (max-width: 720px) {
  .hero-slider .hero-family-stage {
    width: min(90vw, 500px) !important;
    left: 3% !important;
    top: 414px !important;
    bottom: auto !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 8% !important;
    top: 600px !important;
    width: auto !important;
    height: 132px !important;
    transform: none !important;
    transform-origin: center bottom !important;
    z-index: 12 !important;
  }

  .hero-slider .hero-food-wrap img {
    height: 100% !important;
  }
}

/* Position safety lock - product clears the pointing finger without hiding behind the model. */
.hero-slider .hero-family-stage {
  z-index: 10 !important;
}

.hero-slider .hero-slides {
  z-index: 12 !important;
}

.hero-slider .hero-slide .hero-food-wrap {
  z-index: 13 !important;
}

.hero-slider .hero-product-card {
  z-index: 9 !important;
}

.hero-slider .hero-benefits {
  z-index: 10 !important;
}

.hero-slider .hero-controls,
.hero-slider .hero-nav {
  z-index: 16 !important;
}

@media (min-width: 1101px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    top: 330px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    top: 695px !important;
  }
}

@media (max-width: 720px) {
  .hero-slider .hero-family-stage {
    top: 398px !important;
  }

  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    top: 620px !important;
  }
}/* End unified paired product scale lock - 20260709 */
/* Mobile product focus and natural steam - 20260710 */
@media (max-width: 720px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 50% !important;
    top: 618px !important;
    height: clamp(150px, 18.6vh, 164px) !important;
    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;
    z-index: 13 !important;
  }

  .hero-slider .hero-food-wrap img {
    height: 100% !important;
    width: auto !important;
  }

  .hero-slider .hero-food-wrap .hero-steam,
  .hero-slider .hero-food-wrap::before,
  .hero-slider .hero-food-wrap::after {
    background:
      radial-gradient(ellipse at 52% 14%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 34%, rgba(255, 255, 255, 0) 72%),
      radial-gradient(ellipse at 42% 46%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.2) 32%, rgba(255, 255, 255, 0) 68%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
    filter: blur(9px);
    mix-blend-mode: screen;
    z-index: 15 !important;
    animation-name: mobile-steam-drift !important;
    animation-timing-function: ease-in-out !important;
  }

  .hero-slider .hero-food-wrap .hero-steam {
    top: -12% !important;
    width: 14% !important;
    height: 42% !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-1 {
    left: 28% !important;
    animation-duration: 4.8s !important;
    animation-delay: -0.35s !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-2 {
    left: 38% !important;
    top: -16% !important;
    width: 17% !important;
    height: 50% !important;
    animation-duration: 5.4s !important;
    animation-delay: 0.65s !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-3 {
    left: 48% !important;
    top: -10% !important;
    width: 12% !important;
    height: 38% !important;
    animation-duration: 4.3s !important;
    animation-delay: 1.35s !important;
  }

  .hero-slider .hero-food-wrap::before {
    left: 33% !important;
    top: -8% !important;
    width: 17% !important;
    height: 46% !important;
    filter: blur(11px) !important;
    animation: mobile-steam-drift 5.1s ease-in-out 0.2s infinite !important;
  }

  .hero-slider .hero-food-wrap::after {
    left: 43% !important;
    top: -14% !important;
    width: 13% !important;
    height: 42% !important;
    filter: blur(10px) !important;
    animation: mobile-steam-drift 4.7s ease-in-out 1.15s infinite !important;
  }
}

@keyframes mobile-steam-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%) scale(0.48) rotate(-7deg);
  }

  18% {
    opacity: 0.58;
  }

  48% {
    opacity: 0.76;
    transform: translate(calc(-50% - 7px), -30%) scale(0.86) rotate(2deg);
  }

  74% {
    opacity: 0.32;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + 10px), -92%) scale(1.22) rotate(9deg);
  }
}
/* End mobile product focus and natural steam - 20260710 */
/* Desktop tablet product focus and natural steam - 20260710 */
@media (min-width: 1101px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 49.4% !important;
    top: 327px !important;
    width: auto !important;
    height: 190px !important;
    transform: none !important;
    transform-origin: center bottom !important;
    z-index: 13 !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 38.5% !important;
    top: 670px !important;
    width: auto !important;
    height: 144px !important;
    transform: none !important;
    transform-origin: center bottom !important;
    z-index: 13 !important;
  }
}

@media (min-width: 721px) {
  .hero-slider .hero-food-wrap img {
    height: 100% !important;
    width: auto !important;
  }

  .hero-slider .hero-food-wrap .hero-steam,
  .hero-slider .hero-food-wrap::before,
  .hero-slider .hero-food-wrap::after {
    background:
      radial-gradient(ellipse at 54% 12%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.38) 32%, rgba(255, 255, 255, 0) 72%),
      radial-gradient(ellipse at 44% 42%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0) 68%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0));
    filter: blur(10px);
    mix-blend-mode: screen;
    z-index: 15 !important;
    animation-name: desktop-tablet-steam-drift !important;
    animation-timing-function: ease-in-out !important;
  }

  .hero-slider .hero-food-wrap .hero-steam {
    top: -13% !important;
    width: 13% !important;
    height: 44% !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-1 {
    left: 27% !important;
    animation-duration: 5s !important;
    animation-delay: -0.45s !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-2 {
    left: 36% !important;
    top: -17% !important;
    width: 17% !important;
    height: 52% !important;
    animation-duration: 5.7s !important;
    animation-delay: 0.55s !important;
  }

  .hero-slider .hero-food-wrap .hero-steam-3 {
    left: 46% !important;
    top: -11% !important;
    width: 12% !important;
    height: 39% !important;
    animation-duration: 4.6s !important;
    animation-delay: 1.3s !important;
  }

  .hero-slider .hero-food-wrap::before {
    left: 32% !important;
    top: -8% !important;
    width: 17% !important;
    height: 46% !important;
    filter: blur(12px) !important;
    animation: desktop-tablet-steam-drift 5.4s ease-in-out 0.1s infinite !important;
  }

  .hero-slider .hero-food-wrap::after {
    left: 42% !important;
    top: -14% !important;
    width: 13% !important;
    height: 42% !important;
    filter: blur(10px) !important;
    animation: desktop-tablet-steam-drift 4.9s ease-in-out 1.05s infinite !important;
  }
}

@keyframes desktop-tablet-steam-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, 18%) scale(0.5) rotate(-6deg);
  }

  18% {
    opacity: 0.54;
  }

  48% {
    opacity: 0.7;
    transform: translate(calc(-50% - 8px), -34%) scale(0.88) rotate(2deg);
  }

  74% {
    opacity: 0.28;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + 12px), -96%) scale(1.24) rotate(9deg);
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider .hero-product-card {
    top: 975px !important;
  }

  .hero-slider .hero-controls {
    top: 898px !important;
  }
}
/* End desktop tablet product focus and natural steam - 20260710 */
/* Desktop tablet visual table lock - 20260710 */
@media (min-width: 1101px) {
  .hero-slider .hero-family-stage {
    top: 22px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-slider .hero-family-stage {
    top: 402px !important;
  }
}
/* End desktop tablet visual table lock - 20260710 */
/* Final desktop tablet hero order lock - 20260710 */
@media (min-width: 1101px) {
  /* 1. Model is locked first, visually resting just before the table line. */
  .hero-slider .hero-family-stage {
    top: 56px !important;
  }

  /* 2. Product follows the model: centered in the hero area, on the table, clear of the pointing finger. */
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 49.4% !important;
    top: 375px !important;
    height: 188px !important;
    width: auto !important;
    transform: none !important;
    z-index: 13 !important;
  }

  /* 3. Card only moves after product is fixed, so text stays readable. */
  .hero-slider .hero-product-card {
    left: 28.4vw !important;
    top: 379px !important;
  }

  .hero-slider .hero-product-card-copy,
  .hero-slider .hero-product-card h2,
  .hero-slider .hero-product-card p:not(.product-badge),
  .hero-slider .hero-card-actions {
    width: 220px !important;
    max-width: 220px !important;
  }

  .hero-slider .hero-nav-prev {
    left: calc(28.4vw - 56px) !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  /* 1. Tablet follows the same order as desktop: model rests first on the table line. */
  .hero-slider .hero-family-stage {
    top: 446px !important;
  }

  /* 2. Product is larger, on the table, and placed clear of the pointing finger. */
  .hero-slide .hero-food-wrap,
  .hero-slide[data-slide] .hero-food-wrap,
  .hero-slide[data-slide="original"] .hero-food-wrap,
  .hero-slide[data-slide="nyemek-rempah"] .hero-food-wrap,
  .hero-slide[data-slide="yamin-pedas"] .hero-food-wrap,
  .hero-slide[data-slide="baso-kampung"] .hero-food-wrap,
  .hero-slide[data-slide="bumbu-kuah-bakso"] .hero-food-wrap,
  .hero-slide[data-slide="cabai-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="cuanki-bumbu-cikruh"] .hero-food-wrap,
  .hero-slide[data-slide="tempe-kriuk"] .hero-food-wrap,
  .hero-slide[data-slide="terasi-merah-tabur"] .hero-food-wrap,
  .hero-slide[data-slide="usus-krispy"] .hero-food-wrap {
    left: 48.8% !important;
    top: 830px !important;
    height: 220px !important;
    width: auto !important;
    transform: none !important;
    z-index: 13 !important;
  }

  /* 3. Card sits beside the product like desktop, never below it. */
  .hero-slider .hero-product-card {
    left: 14vw !important;
    top: 805px !important;
    transform: none !important;
  }

  .hero-slider .hero-controls {
    top: 1090px !important;
  }

  .hero-slider .hero-nav {
    top: 975px !important;
    transform: none !important;
  }

  .hero-slider .hero-nav-prev {
    left: 8.5vw !important;
    right: auto !important;
  }

  .hero-slider .hero-nav-next {
    left: 84vw !important;
    right: auto !important;
  }

  .hero-slider .hero-branding {
    width: min(43vw, 430px) !important;
    left: 8.4vw !important;
    top: 96px !important;
  }

  .hero-slider .hero-official-logo {
    width: 118px !important;
    margin-bottom: 12px !important;
  }

  .hero-slider .hero-headline-art {
    width: min(100%, 430px) !important;
  }

  .hero-slider .hero-subtitle {
    max-width: 410px !important;
    margin-top: 18px !important;
    font-size: 1.22rem !important;
    line-height: 1.32 !important;
  }

  .hero-slider .hero-subtitle::before {
    width: 190px !important;
    height: 4px !important;
    margin-bottom: 18px !important;
  }
}
/* End final desktop tablet hero order lock - 20260710 */











/* Mobile hero spacing compact lock - 20260710 */
@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1668px !important;
    min-height: var(--hero-height) !important;
  }

  .comic-journey {
    padding-top: 44px !important;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    --hero-height: 1688px !important;
    min-height: var(--hero-height) !important;
  }
}
/* End mobile hero spacing compact lock - 20260710 */
/* Final hero bubble visibility restore - 20260710 */
.hero-slider .hero-comic-bubbles {
  display: block !important;
}

.hero-slider .hero-bubble {
  display: block !important;
}

@media (max-width: 720px) {
  .hero-slider .hero-comic-bubbles {
    display: block !important;
  }

  .hero-slider .hero-bubble {
    display: block !important;
  }
}
/* End final hero bubble visibility restore - 20260710 */
/* Mobile hero spacing final compact - 20260710 */
@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1620px !important;
    min-height: var(--hero-height) !important;
  }

  .comic-journey {
    padding-top: 34px !important;
  }
}
/* End mobile hero spacing final compact - 20260710 */
/* Responsive character bubble final lock - 20260710 */
.hero-slider .hero-comic-bubbles {
  display: none !important;
}

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

.hero-heart-draw {
  transform: rotate(15deg) !important;
}

@media (min-width: 1101px) {
  .hero-heart-draw {
    left: min(89%, 440px) !important;
    top: 48% !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-heart-draw {
    left: 84% !important;
    top: 49% !important;
  }
}

@media (max-width: 720px) {
  .hero-heart-draw {
    left: 83.8% !important;
    top: 50% !important;
  }
}
/* End responsive character bubble final lock - 20260710 */
/* Final character hotspot position lock - 20260710 */
.hero-slider .hero-comic-bubbles {
  display: none !important;
}

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

.character-bubble {
  pointer-events: none !important;
}

@media (min-width: 1101px) {
  .hero-character-mom {
    --hotspot-left: 81.5%;
    --hotspot-top: 34.8%;
    --hotspot-w: 5.8%;
    --hotspot-h: 8.2%;
    --bubble-left: 56%;
    --bubble-top: -96px;
    --tail-left: 48%;
  }

  .hero-character-boy {
    --hotspot-left: 16.4%;
    --hotspot-top: 28.8%;
    --hotspot-w: 6.4%;
    --hotspot-h: 8.2%;
    --bubble-left: 50%;
    --bubble-top: -92px;
    --tail-left: 52%;
  }

  .hero-character-frontman {
    --hotspot-left: 52.8%;
    --hotspot-top: 41.2%;
    --hotspot-w: 7%;
    --hotspot-h: 9.2%;
    --bubble-left: 54%;
    --bubble-top: -104px;
    --tail-left: 50%;
  }

  .hero-character-girl {
    --hotspot-left: 70.1%;
    --hotspot-top: 41.4%;
    --hotspot-w: 5.2%;
    --hotspot-h: 8%;
    --bubble-left: 62%;
    --bubble-top: -96px;
    --tail-left: 46%;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .character-bubble {
    max-width: 188px !important;
    font-size: 0.78rem !important;
  }

  .hero-character-mom {
    --hotspot-left: 82.5%;
    --hotspot-top: 38.8%;
    --hotspot-w: 7%;
    --hotspot-h: 5.6%;
    --bubble-left: 44%;
    --bubble-top: -90px;
    --tail-left: 58%;
  }

  .hero-character-boy {
    --hotspot-left: 48.8%;
    --hotspot-top: 37.8%;
    --hotspot-w: 7%;
    --hotspot-h: 5.4%;
    --bubble-left: 52%;
    --bubble-top: -88px;
    --tail-left: 50%;
  }

  .hero-character-frontman {
    --hotspot-left: 61.6%;
    --hotspot-top: 41.6%;
    --hotspot-w: 7.4%;
    --hotspot-h: 5.6%;
    --bubble-left: 50%;
    --bubble-top: -94px;
    --tail-left: 50%;
  }

  .hero-character-girl {
    --hotspot-left: 71%;
    --hotspot-top: 40.6%;
    --hotspot-w: 6%;
    --hotspot-h: 5.2%;
    --bubble-left: 78%;
    --bubble-top: -88px;
    --tail-left: 38%;
  }
}

@media (max-width: 720px) {
  .character-bubble {
    max-width: 154px !important;
    padding: 9px 12px 11px !important;
    font-size: 0.66rem !important;
  }

  .hero-character-mom {
    --hotspot-left: 78.2%;
    --hotspot-top: 36.8%;
    --hotspot-w: 9.2%;
    --hotspot-h: 5.8%;
    --bubble-left: 40%;
    --bubble-top: -78px;
    --tail-left: 56%;
  }

  .hero-character-boy {
    --hotspot-left: 22.5%;
    --hotspot-top: 36.2%;
    --hotspot-w: 10.2%;
    --hotspot-h: 6%;
    --bubble-left: 58%;
    --bubble-top: -78px;
    --tail-left: 44%;
  }

  .hero-character-frontman {
    --hotspot-left: 47.4%;
    --hotspot-top: 40.6%;
    --hotspot-w: 11.4%;
    --hotspot-h: 6.1%;
    --bubble-left: 55%;
    --bubble-top: -86px;
    --tail-left: 50%;
  }

  .hero-character-girl {
    --hotspot-left: 62.8%;
    --hotspot-top: 39%;
    --hotspot-w: 8.2%;
    --hotspot-h: 5.6%;
    --bubble-left: 86%;
    --bubble-top: -80px;
    --tail-left: 34%;
  }
}
/* End final character hotspot position lock - 20260710 */
/* Character hotspot pointer lock - 20260710 */
.hero-character-hotspot {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* End character hotspot pointer lock - 20260710 */

/* Character hotspot hit layer lock - 20260710 */
.hero-character-bubbles {
  pointer-events: auto !important;
}

.hero-character-bubbles .character-bubble {
  pointer-events: none !important;
}
/* End character hotspot hit layer lock - 20260710 */

/* Hero family hotspot parent lock - 20260710 */
.hero-family-stage {
  pointer-events: auto !important;
}

.hero-family-model {
  pointer-events: none !important;
}
/* End hero family hotspot parent lock - 20260710 */

/* Character hotspot hit paint lock - 20260710 */
.hero-character-hotspot {
  z-index: 999 !important;
  background: rgba(255, 255, 255, 0.001) !important;
}
/* End character hotspot hit paint lock - 20260710 */

/* Hero character layer elevation lock - 20260710 */
.hero-family-stage {
  z-index: 40 !important;
}
/* End hero character layer elevation lock - 20260710 */

/* Hero character layer specificity lock - 20260710 */
.hero-slider .hero-family-stage {
  z-index: 40 !important;
  pointer-events: auto !important;
}
/* End hero character layer specificity lock - 20260710 */
/* Hero text and character bubble restore lock - 20260710 */
.hero-slider .hero-branding {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 62 !important;
  pointer-events: none !important;
}

.hero-slider .hero-official-logo,
.hero-slider .hero-headline-wrap,
.hero-slider .hero-headline-art,
.hero-slider .hero-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-slider .hero-heart-draw {
  visibility: visible !important;
  opacity: 1 !important;
  transform: rotate(15deg) !important;
}

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

.hero-slider .hero-character-hotspot {
  min-width: 42px !important;
  min-height: 36px !important;
}

@media (min-width: 1101px) {
  .hero-character-mom {
    --hotspot-w: 7.6% !important;
    --hotspot-h: 11.2% !important;
    --bubble-top: -98px !important;
  }

  .hero-character-boy {
    --hotspot-w: 8% !important;
    --hotspot-h: 11.4% !important;
    --bubble-top: -94px !important;
  }

  .hero-character-frontman {
    --hotspot-w: 8.6% !important;
    --hotspot-h: 11.8% !important;
    --bubble-top: -106px !important;
  }

  .hero-character-girl {
    --hotspot-w: 7.2% !important;
    --hotspot-h: 10.6% !important;
    --bubble-top: -98px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-character-mom {
    --hotspot-w: 10.2% !important;
    --hotspot-h: 8.8% !important;
  }

  .hero-character-boy {
    --hotspot-w: 10.4% !important;
    --hotspot-h: 8.8% !important;
  }

  .hero-character-frontman {
    --hotspot-w: 11% !important;
    --hotspot-h: 9.4% !important;
  }

  .hero-character-girl {
    --hotspot-w: 9.2% !important;
    --hotspot-h: 8.8% !important;
  }
}

@media (max-width: 720px) {
  .hero-character-mom {
    --hotspot-w: 14.6% !important;
    --hotspot-h: 13.8% !important;
  }

  .hero-character-boy {
    --hotspot-w: 15.2% !important;
    --hotspot-h: 13.8% !important;
  }

  .hero-character-frontman {
    --hotspot-w: 15.8% !important;
    --hotspot-h: 14.2% !important;
  }

  .hero-character-girl {
    --hotspot-w: 13.6% !important;
    --hotspot-h: 13.4% !important;
  }
}
/* End hero text and character bubble restore lock - 20260710 */
/* Hero five bubbles, product layer, strip, and heart lock - 20260710 */
.hero-slider .hero-branding {
  z-index: 62 !important;
}

.hero-slider .hero-slides {
  z-index: 12 !important;
  pointer-events: none !important;
}

.hero-slider .hero-slide.is-active {
  pointer-events: none !important;
}

.hero-slider .hero-family-stage {
  z-index: 18 !important;
  pointer-events: auto !important;
}

.hero-slider .hero-character-bubbles {
  z-index: 70 !important;
  pointer-events: auto !important;
}

.hero-slider .hero-character-hotspot {
  z-index: 71 !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.001) !important;
}

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

.hero-slider .hero-food-wrap,
.hero-slider .hero-pack-wrap {
  z-index: 36 !important;
  pointer-events: auto !important;
}

.hero-slider .hero-food-wrap img,
.hero-slider .hero-pack-wrap img {
  position: relative !important;
  z-index: 2 !important;
}

.hero-slider .hero-product-card {
  z-index: 34 !important;
}

.hero-slider .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;
  align-items: center !important;
  gap: 9px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}

.hero-slider .product-pack-strip::before,
.hero-slider .product-pack-strip::after {
  content: "";
  width: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-slider .product-pack-strip::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 246, 224, 0.96), rgba(255, 246, 224, 0));
}

.hero-slider .product-pack-strip::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 246, 224, 0.96), rgba(255, 246, 224, 0));
}

.hero-slider .product-pack-mini {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  opacity: 0.68;
  filter: drop-shadow(0 4px 5px rgba(70, 40, 18, 0.18));
  animation: pack-strip-slide 10s linear infinite !important;
}

.hero-slider .product-pack-mini.is-active {
  opacity: 1;
  transform: translateY(-2px) scale(1.08);
}

@keyframes pack-strip-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-370px); }
}

.hero-slider .hero-heart-draw {
  z-index: 64 !important;
  transform: rotate(15deg) !important;
  transform-origin: 52% 56% !important;
}

@media (min-width: 1101px) {
  .hero-character-guide {
    --hotspot-left: 45% !important;
    --hotspot-top: 20% !important;
    --hotspot-w: 13% !important;
    --hotspot-h: 12% !important;
    --bubble-left: 50% !important;
    --bubble-top: -94px !important;
    --tail-left: 50% !important;
  }

  .hero-character-mom {
    --hotspot-w: 9.8% !important;
    --hotspot-h: 13.8% !important;
  }

  .hero-character-boy {
    --hotspot-w: 10% !important;
    --hotspot-h: 13.8% !important;
  }

  .hero-character-frontman {
    --hotspot-w: 11% !important;
    --hotspot-h: 14.2% !important;
  }

  .hero-character-girl {
    --hotspot-w: 9.4% !important;
    --hotspot-h: 13.4% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 82.6% !important;
    top: 42.2% !important;
    width: 44px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-character-guide {
    --hotspot-left: 45% !important;
    --hotspot-top: 25% !important;
    --hotspot-w: 16% !important;
    --hotspot-h: 9.8% !important;
    --bubble-left: 50% !important;
    --bubble-top: -88px !important;
    --tail-left: 50% !important;
  }

  .hero-character-mom {
    --hotspot-w: 13.2% !important;
    --hotspot-h: 10.6% !important;
  }

  .hero-character-boy {
    --hotspot-w: 13.4% !important;
    --hotspot-h: 10.6% !important;
  }

  .hero-character-frontman {
    --hotspot-w: 14.2% !important;
    --hotspot-h: 11.2% !important;
  }

  .hero-character-girl {
    --hotspot-w: 12.4% !important;
    --hotspot-h: 10.8% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 84% !important;
    top: 48.4% !important;
    width: 36px !important;
  }
}

@media (max-width: 720px) {
  .hero-character-guide {
    --hotspot-left: 45% !important;
    --hotspot-top: 23% !important;
    --hotspot-w: 22% !important;
    --hotspot-h: 12.5% !important;
    --bubble-left: 50% !important;
    --bubble-top: -84px !important;
    --tail-left: 50% !important;
  }

  .hero-character-mom {
    --hotspot-w: 19% !important;
    --hotspot-h: 16.5% !important;
  }

  .hero-character-boy {
    --hotspot-w: 19.5% !important;
    --hotspot-h: 16.5% !important;
  }

  .hero-character-frontman {
    --hotspot-w: 20% !important;
    --hotspot-h: 17% !important;
  }

  .hero-character-girl {
    --hotspot-w: 18% !important;
    --hotspot-h: 16% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 83.4% !important;
    top: 49.4% !important;
    width: 30px !important;
  }

  .hero-slider .product-pack-strip {
    width: min(100%, 210px) !important;
    height: 32px !important;
    gap: 8px !important;
  }

  .hero-slider .product-pack-mini {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }
}
/* End hero five bubbles, product layer, strip, and heart lock - 20260710 */
/* Hero product parent stacking correction - 20260710 */
.hero-slider .hero-slides {
  z-index: 32 !important;
}

.hero-slider .hero-slide[data-slide] .hero-food-wrap,
.hero-slider .hero-slide[data-slide] .hero-pack-wrap,
.hero-slider .hero-slide.is-active .hero-food-wrap,
.hero-slider .hero-slide.is-active .hero-pack-wrap {
  z-index: 6 !important;
}

.hero-slider .hero-family-stage {
  z-index: 18 !important;
}

.hero-slider .hero-product-card {
  z-index: 35 !important;
}

.hero-slider .hero-branding {
  z-index: 62 !important;
}

.hero-slider .hero-character-bubbles,
.hero-slider .hero-character-hotspot {
  z-index: 72 !important;
}
/* End hero product parent stacking correction - 20260710 */
/* Hero bubble target and desktop product-card overlap correction - 20260710 */
@media (min-width: 1101px) {
  .hero-character-guide {
    --hotspot-left: 50.5% !important;
    --hotspot-top: 16.2% !important;
    --hotspot-w: 10.8% !important;
    --hotspot-h: 11.4% !important;
    --bubble-left: 115% !important;
    --bubble-top: -42px !important;
    --tail-left: 14% !important;
  }

  .hero-character-guide .character-bubble::before {
    left: 10px !important;
    bottom: -14px !important;
    border-left: 0 !important;
    border-right: 2px solid rgba(35, 22, 15, 0.88) !important;
    transform: rotate(39deg) skewY(14deg) !important;
  }

  .hero-character-girl {
    --hotspot-left: 71.6% !important;
    --hotspot-top: 45.4% !important;
    --hotspot-w: 9.8% !important;
    --hotspot-h: 13.6% !important;
    --bubble-left: 54% !important;
    --bubble-top: -105px !important;
    --tail-left: 52% !important;
  }

  .hero-slider .hero-slides {
    z-index: 38 !important;
  }

  .hero-slider .hero-product-card {
    z-index: 34 !important;
    left: 27.2vw !important;
    width: min(390px, 29vw) !important;
  }

  .hero-slider .hero-product-card h2,
  .hero-slider .hero-product-card p:not(.product-badge),
  .hero-slider .product-card-actions,
  .hero-slider .product-pack-strip {
    max-width: 230px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-character-guide {
    --hotspot-left: 51% !important;
    --hotspot-top: 22.6% !important;
    --bubble-left: 112% !important;
    --bubble-top: -46px !important;
    --tail-left: 14% !important;
  }

  .hero-character-girl {
    --hotspot-left: 72.4% !important;
    --hotspot-top: 50.5% !important;
    --bubble-left: 54% !important;
    --bubble-top: -96px !important;
    --tail-left: 52% !important;
  }
}

@media (max-width: 720px) {
  .hero-character-guide {
    --hotspot-left: 51.4% !important;
    --hotspot-top: 20% !important;
    --bubble-left: 96% !important;
    --bubble-top: -56px !important;
    --tail-left: 18% !important;
  }

  .hero-character-girl {
    --hotspot-left: 65.8% !important;
    --hotspot-top: 43.2% !important;
    --bubble-left: 55% !important;
    --bubble-top: -88px !important;
    --tail-left: 52% !important;
  }
}
/* End hero bubble target and desktop product-card overlap correction - 20260710 */
/* Annotated hero correction lock - 20260710 */
.hero-slider .product-card-actions {
  width: fit-content !important;
  max-width: 242px !important;
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 7 !important;
}

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

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

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

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

@media (min-width: 1101px) {
  .hero-character-guide {
    --hotspot-left: 73.5% !important;
    --hotspot-top: 4.2% !important;
    --hotspot-w: 10% !important;
    --hotspot-h: 12% !important;
    --bubble-left: 132% !important;
    --bubble-top: -12px !important;
    --tail-left: 12% !important;
  }

  .hero-character-guide .character-bubble {
    max-width: 190px !important;
  }

  .hero-character-guide .character-bubble::before {
    left: 12px !important;
    bottom: 6px !important;
    border-left: 2px solid rgba(35, 22, 15, 0.88) !important;
    border-right: 0 !important;
    transform: rotate(43deg) skewY(-16deg) !important;
  }

  .hero-character-girl {
    --hotspot-left: 70% !important;
    --hotspot-top: 50% !important;
    --hotspot-w: 9.6% !important;
    --hotspot-h: 13.2% !important;
    --bubble-left: 54% !important;
    --bubble-top: -104px !important;
    --tail-left: 52% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 96.5% !important;
    top: 47.8% !important;
    width: 38px !important;
  }

  .hero-slider .hero-product-card h2,
  .hero-slider .hero-product-card p:not(.product-badge) {
    max-width: 220px !important;
  }

  .hero-slider .product-card-actions {
    max-width: 234px !important;
  }

  .hero-slider .product-card-buy,
  .hero-slider .product-card-checkout {
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 0.78rem !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .hero-character-guide {
    --hotspot-left: 72% !important;
    --hotspot-top: 8% !important;
    --hotspot-w: 13% !important;
    --hotspot-h: 11% !important;
    --bubble-left: 130% !important;
    --bubble-top: -18px !important;
    --tail-left: 12% !important;
  }

  .hero-character-guide .character-bubble::before {
    left: 12px !important;
    bottom: 5px !important;
    border-left: 2px solid rgba(35, 22, 15, 0.88) !important;
    border-right: 0 !important;
    transform: rotate(43deg) skewY(-16deg) !important;
  }

  .hero-character-girl {
    --hotspot-left: 70% !important;
    --hotspot-top: 50% !important;
    --hotspot-w: 12.2% !important;
    --hotspot-h: 10.8% !important;
    --bubble-left: 54% !important;
    --bubble-top: -98px !important;
    --tail-left: 52% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 94.8% !important;
    top: 52.2% !important;
    width: 31px !important;
  }
}

@media (max-width: 720px) {
  .hero-character-guide {
    --hotspot-left: 72% !important;
    --hotspot-top: 9% !important;
    --hotspot-w: 18% !important;
    --hotspot-h: 13% !important;
    --bubble-left: 112% !important;
    --bubble-top: -30px !important;
    --tail-left: 16% !important;
  }

  .hero-character-guide .character-bubble::before {
    left: 10px !important;
    bottom: 4px !important;
    border-left: 2px solid rgba(35, 22, 15, 0.88) !important;
    border-right: 0 !important;
    transform: rotate(43deg) skewY(-16deg) !important;
  }

  .hero-character-girl {
    --hotspot-left: 66.4% !important;
    --hotspot-top: 50.5% !important;
    --hotspot-w: 18% !important;
    --hotspot-h: 16% !important;
    --bubble-left: 55% !important;
    --bubble-top: -90px !important;
    --tail-left: 52% !important;
  }

  .hero-slider .hero-heart-draw {
    left: 94% !important;
    top: 53.8% !important;
    width: 32px !important;
  }

  .hero-slider .product-card-actions {
    gap: 8px !important;
    max-width: 210px !important;
  }

  .hero-slider .product-card-buy,
  .hero-slider .product-card-checkout {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 0.74rem !important;
  }
}
/* End annotated hero correction lock - 20260710 */
}

/* Mobile annotated polish lock - 20260710 */
.comic-section-heading .comic-title-line {
  color: #3d2417 !important;
}

.comic-section-heading .comic-title-line > span {
  color: #b60012 !important;
}

.comic-section-heading .comic-title-brand-line {
  color: #3d2417 !important;
}

.comic-section-heading .comic-red-underline {
  color: #b60012 !important;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.hero-slider .hero-headline-wrap {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.hero-slider .hero-heart-draw {
  right: 1.5% !important;
  left: auto !important;
  top: 48% !important;
}

@media (max-width: 720px) {
  .hero-slider {
    --hero-height: 1405px !important;
    min-height: var(--hero-height) !important;
    height: var(--hero-height) !important;
  }

  .hero-slider .product-card-actions {
    width: 150px !important;
    max-width: 150px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    margin-top: 10px !important;
  }

  .hero-slider .product-card-buy,
  .hero-slider .product-card-checkout {
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 0.74rem !important;
  }

  .hero-slider .product-card-checkout {
    width: auto !important;
    align-self: flex-start !important;
  }

  .hero-slider .hero-heart-draw {
    right: 1.5% !important;
    left: auto !important;
    top: 48% !important;
    width: 32px !important;
  }

  .comic-journey {
    padding-top: 18px !important;
  }

  .comic-section-heading h2 {
    color: #3d2417 !important;
  }

  .comic-section-heading .comic-title-line,
  .comic-section-heading .comic-title-brand-line {
    color: #3d2417 !important;
  }

  .comic-section-heading .comic-title-line > span {
    color: #b60012 !important;
  }
}
/* End mobile annotated polish lock - 20260710 */

/* Trust strip image logo replacement lock - 20260710 */
.comic-trust-strip .trust-watercolor-icon {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  mix-blend-mode: normal !important;
}

.comic-trust-strip .trust-halal .trust-watercolor-icon,
.comic-trust-strip .trust-bpom .trust-watercolor-icon {
  padding: 3px !important;
  background: rgba(255, 250, 238, 0.78) !important;
}

.comic-trust-strip .trust-hygiene .trust-watercolor-icon,
.comic-trust-strip .trust-pack .trust-watercolor-icon {
  width: 72px !important;
  height: 72px !important;
  flex-basis: 72px !important;
  border-radius: 18px !important;
}

@media (max-width: 720px) {
  .comic-trust-strip .trust-watercolor-icon {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .comic-trust-strip .trust-hygiene .trust-watercolor-icon,
  .comic-trust-strip .trust-pack .trust-watercolor-icon {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }
}
/* End trust strip image logo replacement lock - 20260710 */

/* Story card custom icon replacement lock - 20260710 */
.comic-panel .comic-panel-icon {
  overflow: hidden !important;
  background: rgba(255, 248, 232, 0.92) !important;
  box-shadow: 0 12px 22px rgba(115, 67, 18, 0.16) !important;
}

.comic-panel .comic-panel-icon img {
  width: 118% !important;
  height: 118% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 720px) {
  .comic-panel .comic-panel-icon img {
    width: 122% !important;
    height: 122% !important;
  }
}
/* End story card custom icon replacement lock - 20260710 */