/* Shared hierarchy and identity treatment for SoluMus product websites */
:root {
  --product-coral: #ff7a5c;
  --product-cream: #f8f7f2;
}

body.product-page { background: #fff; }

.product-nav .in { max-width: 1180px; min-height: 68px; }
.product-nav .product-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.product-nav .product-logo img { display: block; width: auto; height: 38px; }
.product-nav__right { display: flex; align-items: center; gap: 14px; }
.product-nav__suite { color: var(--gray); font-size: 13px; font-weight: 650; }
.product-nav__suite:hover { color: var(--green); }
.product-nav .menu a[aria-current="page"] { color: var(--green); font-weight: 800; }

.product-hero { position: relative; overflow: hidden; padding-top: 88px; }
.product-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(50vw, 650px);
  aspect-ratio: 1;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 122, 92, 0.08);
  box-shadow: 0 0 0 90px rgba(31, 77, 63, 0.024), 0 0 0 180px rgba(31, 77, 63, 0.015);
}

.product-lockup { display: block; width: min(84vw, 410px); height: auto; margin: 0 auto 30px; }
.product-lockup--pack { width: min(88vw, 438px); }
.product-context { color: var(--gray); font-size: 13px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.product-context strong { color: var(--green); }

.identity-note {
  max-width: 940px;
  margin: 0 auto;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  border: 1px solid #dfe7e3;
  border-radius: 24px;
  background: #f5f8f6;
}
.identity-note img { width: 58px; height: 58px; }
.identity-note strong { display: block; margin-bottom: 4px; font-size: 18px; }
.identity-note p { margin: 0; color: var(--gray); font-size: 15px; }
.identity-note a { color: var(--green); font-size: 14px; font-weight: 750; white-space: nowrap; }

.edition-intro { padding-bottom: 28px; }
.edition-flow { max-width: 920px; margin: 44px auto 0; }
.edition-flow__root { display: flex; align-items: center; justify-content: center; gap: 14px; }
.edition-flow__root img { width: 54px; height: 54px; }
.edition-flow__root strong { font-size: 23px; }
.edition-flow__root span { display: block; color: var(--gray); font-size: 13px; }
.edition-flow__stem { width: 1px; height: 35px; margin: 0 auto; background: var(--line); }
.edition-flow__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.edition-flow__option { padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; }
.edition-flow__option b { display: block; color: var(--green); font-size: 18px; }
.edition-flow__option small { color: var(--gray); font-size: 12px; }

.pc .family-label { margin-bottom: 4px; color: var(--gray); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.pc .card-link { display: inline-flex; margin-top: 13px; color: var(--green); font-size: 14px; font-weight: 700; }

.product-footer__family { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; }
.product-footer__family img { width: 28px; height: 28px; }

.live-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.live-price [data-price-effective] { font: inherit; color: inherit; }
.live-price [data-price-base] { color: var(--gray); font-size: .42em; font-weight: 650; text-decoration-thickness: 1.5px; }
.live-price [data-price-promo] {
  flex-basis: 100%;
  color: var(--green);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
}
.dark .live-price [data-price-base] { color: var(--wgray); }
.dark .live-price [data-price-promo] { color: var(--coral, #ff7a5c); }
.pc .live-price { justify-content: flex-start; }
.pack-price .live-price { justify-content: flex-end; }
.pack-price .live-price [data-price-promo] { text-align: right; }
.inline-live-price [data-price-promo] { display: block; margin-top: 4px; color: var(--green); font-size: 12px; font-weight: 760; }
.inline-live-price [data-price-base] { margin-left: 8px; color: var(--gray); }

body.product-pack .btn, body.product-pack nav .navbtn, body.product-pack .step .n { background: var(--green); }
body.product-pack .eyebrow.brand, body.product-pack .link { color: var(--green); }
body.product-pack .pack-accent { color: var(--product-coral); }
body.product-pack .hero-offer .offer-tag { background: var(--green); }
body.product-pack section.dark { background: #102f26; }
body.product-pack section.dark .accent, body.product-pack .costline .accent { color: #ff9a82; }
body.product-pack .hero-offer { border-color: rgba(255, 122, 92, 0.38); box-shadow: 0 24px 65px rgba(20, 60, 48, 0.1), inset 0 3px 0 rgba(255, 122, 92, 0.72); }
body.product-pack .proofline span, body.product-pack .shot-points span { border-color: rgba(255, 122, 92, 0.24); }

@media (max-width: 1050px) {
  .product-nav .menu { display: none; }
}

@media (max-width: 900px) {
  .product-nav .product-logo img { height: 32px; }
  .product-nav__suite { display: inline-flex; font-size: 0; }
  .product-nav__suite::before { content: "SoluMus"; font-size: 12px; }
}

@media (max-width: 640px) {
  .product-nav .in { min-height: 60px; padding-inline: 10px; gap: 8px; }
  .product-nav .product-logo img { height: 26px; max-width: 190px; }
  .product-nav__right { gap: 5px; }
  .product-nav .navbtn { padding: 7px 11px; font-size: 12px; }
  .product-hero { padding-top: 72px; }
  .product-lockup { margin-bottom: 24px; }
  .identity-note { grid-template-columns: auto 1fr; margin-inline: 20px; padding: 24px 20px; }
  .identity-note a { grid-column: 1 / -1; }
  .edition-flow__options { grid-template-columns: 1fr; }
}