/* Keep the original desktop art; mobile characters have their own flow space. */
.product-main__characters { display: none; }
.product-main .brand .product-main__logo { width: 140px; height: auto; max-width: 100%; }
.product-main .brand .list_btn { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.product-main .product-stage-link {
  --stage-bg: #fff8eb;
  --stage-border: #F5D8B5;
  --stage-text: #6D4C41;
  --stage-hover: #faf0d2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid var(--stage-border);
  border-radius: 25px;
  background: var(--stage-bg);
  color: var(--stage-text);
  box-shadow: 0 3px 0 var(--stage-border);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  touch-action: manipulation;
  transform-origin: center;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.product-main .product-stage-link--second { --stage-bg: #e8f9f0; --stage-border: #b4e8ce; --stage-text: #176b45; --stage-hover: #d7f3e5; }
.product-main .product-stage-link--third { --stage-bg: #eef6fd; --stage-border: #c5e0fb; --stage-text: #075dac; --stage-hover: #deedfc; }
.product-main .product-stage-link:hover { background: var(--stage-hover); color: var(--stage-text); transform: translateY(-2px); }
.product-main .product-stage-link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stage-border); }
.product-main .list_btn a:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}
@media (max-width: 991px) {
  .product-main.index-page .page-header {
    background-image: none !important;
    background-color: #f3f5fc; /* Derived from the original brand artwork. */
    height: auto;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 110px 0 0;
    overflow: visible;
  }
  .product-main.index-page .page-header .container {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 20px;
  }
  .product-main .brand .main-list-tagline {
    margin: 0 0 16px;
    line-height: 1.5;
    text-wrap: balance;
  }
  .product-main .brand img { max-width: 75%; height: auto; }
  .product-main .brand h3.title { display: none; }
  .product-main .brand .list_btn {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .product-main .list_btn .product-stage-link { width: min(100%, 240px); margin: 0; }
  .product-main .product-main__characters {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 2 / 1;
    margin-top: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .product-main--eb .product-main__characters { background-image: url('../images/main/EB_bg_mobile_v2.png'); }
  .product-main--ltr .product-main__characters { background-image: url('../images/main/LTR_bg_mobile.png'); }
}
@media (prefers-reduced-motion: reduce) {
  .product-main .list_btn .product-stage-link { transition: none; transform: none; }
}