/* ==========================================================================
   M-U-S-I-C — commerce pages
   (product · cart · checkout · order received · my account)

   These are designed pages, not a storefront. Everything here is scoped to
   `body.music-woo` — set by the Core plugin on cart/checkout/account and by
   inc/woo-templates.php on product and order-received pages — so nothing can
   leak onto the designed marketing pages.

   The vocabulary is the site's own (CLASSES.md): ink #111827, navy #243047,
   slate #516078, mist #8B97AA, cloud #CDD4DF, hairline #E8ECF2, wash #F5F7FA,
   paper #FFF8EF, cobalt #2447C6, coral #FF5A5F → #D7374F, teal focus #00789E,
   amber #FFB000. Space Grotesk on headings, Inter on body, cards at radius 16
   with a 1px #E8ECF2 hairline, buttons at radius 8 / 15px 28px.
   ========================================================================== */

/* ── page shell ───────────────────────────────────────────────────────── */

body.music-woo .music-page__inner {
  max-width: 1140px;
}

body.music-woo .music-page__title {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 10px;
}

body.music-woo .music-page__content {
  font-size: 15.5px;
}

body.music-woo .woocommerce {
  color: #111827;
}

/* Type only — never colour. Headings inherit their band (ink bands set white
   on the wrapper); forcing a colour here painted ink text onto ink panels. */
body.music-woo h2,
body.music-woo h3 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Product / archive pages render inside the theme's woocommerce.php shell. */
.music-woo-shell {
  display: block;
}

/* Eyebrows are set in capitals across the site; the commerce templates keep
   their strings in sentence case so they stay translatable. */
body.music-woo .music-eyebrow {
  text-transform: uppercase;
}

/* ── shared furniture ─────────────────────────────────────────────────── */

.music-woo-reassure {
  font-size: 13px;
  line-height: 1.55;
  color: #8b97aa;
  max-width: 560px;
  margin: 0 0 26px;
}

.music-woo-empty {
  font-size: 16px;
  line-height: 1.6;
  color: #516078;
  max-width: 560px;
  margin: 0;
}

/* Empty cart / expired receipt / no cohorts — a designed blank state. */
.music-woo-blank {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
}

.music-woo-blank .music-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.music-woo-blank .woocommerce-info,
.music-woo-blank .cart-empty {
  margin: 0;
}

/* Seat pills — the /apply and /camp idiom, verbatim. */
.music-seatpill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.music-seatpill--open { color: #0b7d58; background: #ddf7ec; }
.music-seatpill--low { color: #9a6200; background: #fff1cc; }
.music-seatpill--wait { color: #d7374f; background: #ffe6e7; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.music-woo-btn,
body.music-woo a.button,
body.music-woo button.button,
body.music-woo input.button,
body.music-woo a.button.alt,
body.music-woo button.button.alt,
body.music-woo input.button.alt,
body.music-woo #respond input#submit,
body.music-woo .woocommerce-button {
  display: inline-block;
  font-family: "Inter", Arial, sans-serif;
  background: #2447c6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-woo-btn:hover,
body.music-woo a.button:hover,
body.music-woo button.button:hover,
body.music-woo input.button:hover,
body.music-woo a.button.alt:hover,
body.music-woo button.button.alt:hover,
body.music-woo input.button.alt:hover,
body.music-woo #respond input#submit:hover,
body.music-woo .woocommerce-button:hover {
  background: #111827;
  color: #ffffff;
}

/* The money buttons wear the coral CTA the whole site uses. */
.music-woo-btn--coral,
body.music-woo a.checkout-button,
body.music-woo a.checkout-button.button,
body.music-woo #place_order,
body.music-woo button#place_order,
body.music-woo .single_add_to_cart_button {
  background: #ff5a5f;
  color: #ffffff;
}

.music-woo-btn--coral:hover,
body.music-woo a.checkout-button:hover,
body.music-woo a.checkout-button.button:hover,
body.music-woo #place_order:hover,
body.music-woo button#place_order:hover,
body.music-woo .single_add_to_cart_button:hover {
  background: #d7374f;
  color: #ffffff;
}

.music-woo-btn--ink {
  background: #111827;
  color: #ffffff;
}

.music-woo-btn--ink:hover {
  background: #243047;
  color: #ffffff;
}

/* White on ink bands. */
.music-woo-btn--onink,
body.music-woo .music-woo-btn--onink {
  background: #ffffff;
  color: #111827;
}

.music-woo-btn--onink:hover,
body.music-woo .music-woo-btn--onink:hover {
  background: #cdd4df;
  color: #111827;
}

/* Quiet, secondary buttons (update cart, apply coupon, back links). */
.music-woo-btn--quiet,
body.music-woo button[name="update_cart"],
body.music-woo button[name="apply_coupon"],
body.music-woo .wc-backward,
body.music-woo .return-to-shop .button {
  background: #ffffff;
  color: #243047;
  border: 1.5px solid #cdd4df;
  padding: 13px 22px;
  font-size: 14.5px;
}

.music-woo-btn--quiet:hover,
body.music-woo button[name="update_cart"]:hover,
body.music-woo button[name="apply_coupon"]:hover,
body.music-woo .wc-backward:hover,
body.music-woo .return-to-shop .button:hover {
  background: #ffffff;
  color: #111827;
  border-color: #111827;
}

body.music-woo button[name="update_cart"]:disabled,
body.music-woo button[name="update_cart"][disabled] {
  opacity: 0.4;
  cursor: default;
}

body.music-woo #place_order {
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
}

/* Visible focus everywhere, in the site's teal. */
body.music-woo a:focus-visible,
body.music-woo button:focus-visible,
body.music-woo input:focus-visible,
body.music-woo select:focus-visible,
body.music-woo textarea:focus-visible,
body.music-woo summary:focus-visible,
body.music-woo [tabindex]:focus-visible {
  outline: 2px solid #00789e;
  outline-offset: 2px;
}

/* ── notices ──────────────────────────────────────────────────────────────
   Woo prints notices at the very top of its templates, OUTSIDE .music-container,
   so the wrapper carries the container metrics itself. These rules are
   deliberately unscoped (no body.music-woo): an "added to cart" banner can
   surface on any page the visitor lands on next, and every page loads this
   sheet anyway. */

.woocommerce-notices-wrapper:not(:empty) {
  box-sizing: content-box;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 32px) 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  border: 0;
  border-radius: 12px;
  padding: 15px 18px 15px 22px;
  margin: 0 0 22px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  background: #f5f7fa;
  color: #243047;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message { background: #ddf7ec; color: #0b7d58; }
.woocommerce-info { background: #f5f7fa; color: #243047; }
.woocommerce-error { background: #ffe6e7; color: #d7374f; }

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none;
  margin: 0;
}

/* Plain links inside a notice keep the notice's ink. Buttons are exempt —
   see the rule below, which must win no matter the body class. */
.woocommerce-message a:not(.button):not(.wc-forward),
.woocommerce-info a:not(.button):not(.wc-forward),
.woocommerce-error a:not(.button):not(.wc-forward) {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* The action ("View cart") is a real cobalt pill: white ink, no underline.
   The body.music-woo variants out-rank the old `.woocommerce-message a`
   inherit rule that used to paint this green-on-cobalt. */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notices-wrapper a.wc-forward,
body.music-woo .woocommerce-message a.button,
body.music-woo .woocommerce-info a.button,
body.music-woo .woocommerce-error a.button {
  flex: 0 0 auto;
  display: inline-block;
  background: #2447c6;
  color: #ffffff;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  margin: 0 0 0 auto;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-notices-wrapper a.wc-forward:hover,
body.music-woo .woocommerce-message a.button:hover,
body.music-woo .woocommerce-info a.button:hover,
body.music-woo .woocommerce-error a.button:hover {
  background: #111827;
  color: #ffffff;
}

/* Belt-and-braces: if a flow ever emits the wc-blocks banner markup instead
   of the classic classes, map it onto the same palette. */
.wc-block-components-notice-banner {
  border-radius: 12px;
  border-width: 1px;
  font-family: "Inter", Arial, sans-serif;
}

.wc-block-components-notice-banner.is-success {
  background: #ddf7ec;
  border-color: #0b7d58;
  color: #0b7d58;
}

.wc-block-components-notice-banner.is-error {
  background: #ffe6e7;
  border-color: #d7374f;
  color: #d7374f;
}

.wc-block-components-notice-banner.is-info {
  background: #f5f7fa;
  border-color: #243047;
  color: #243047;
}

.wc-block-components-notice-banner a.wc-forward,
.wc-block-components-notice-banner .wp-element-button {
  background: #2447c6;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
}

/* The "returning customer" / "have a coupon" toggles read as quiet rows,
   not as two loud blue banners stacked above the form. */
body.music-woo .woocommerce-form-login-toggle .woocommerce-info,
body.music-woo .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 1px dashed #cdd4df;
  color: #516078;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 16px;
  margin-bottom: 12px;
}

body.music-woo .woocommerce-form-login-toggle .woocommerce-info a,
body.music-woo .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: #2447c6;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(36, 71, 198, 0.25);
}

/* =========================================================================
   1 · PRODUCT PAGE
   ====================================================================== */

/* The summary hook is kept alive for structured data; it renders nothing. */
.music-prod__hooks {
  display: none;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.music-prod__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .music-prod__hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.music-prod__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.music-prod__eyebrow {
  margin: 0;
}

body.music-woo .music-prod__hero-copy .product_title {
  margin: 0;
  color: #111827;
}

.music-prod__hint {
  margin: 0;
  max-width: 34em;
}

.music-prod__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
}

.music-prod__price,
.music-prod__price .amount,
.music-prod__price bdi {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #111827;
}

.music-prod__price del { display: none; }

.music-prod__price-note {
  font-size: 14px;
  color: #8b97aa;
}

.music-prod__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}

.music-prod__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.music-prod__chip {
  font-size: 12.5px;
  font-weight: 600;
  color: #516078;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 999px;
  padding: 7px 14px;
}

.music-prod__figure {
  margin: 0;
  min-width: 0;
}

.music-prod__figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ── cohort picker ────────────────────────────────────────────────────── */

.music-prod__cohorts .music-section-head {
  margin-bottom: clamp(22px, 3vw, 30px);
}

body.music-woo form.music-cohortpick {
  margin: 0;
}

.music-cohortpick__set {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.music-cohortpick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

/* The date card — same silhouette as the /apply date cards. */
.music-cohortcard {
  position: relative;
  display: block;
  background: #fff8ef;
  border: 1.5px solid #e8ecf2;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.music-cohortcard:hover {
  border-color: #cdd4df;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.09);
  transform: translateY(-2px);
}

.music-cohortcard__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.music-cohortcard__inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.music-cohortcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.music-cohortcard__label {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #111827;
}

.music-cohortcard__long {
  font-size: 13.5px;
  line-height: 1.5;
  color: #516078;
}

.music-cohortcard__meta {
  font-size: 13px;
  line-height: 1.5;
  color: #8b97aa;
}

.music-cohortcard__pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2447c6;
}

.music-cohortcard__pick::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  border: 1.5px solid #cdd4df;
  background: #ffffff;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.music-cohortcard__pick-on { display: none; }

/* Selected */
.music-cohortcard__radio:checked ~ .music-cohortcard__inner .music-cohortcard__pick-off,
.music-cohortcard.is-selected .music-cohortcard__pick-off { display: none; }

.music-cohortcard__radio:checked ~ .music-cohortcard__inner .music-cohortcard__pick-on,
.music-cohortcard.is-selected .music-cohortcard__pick-on { display: inline; }

.music-cohortcard.is-selected {
  background: #ffffff;
  border-color: #2447c6;
  box-shadow: 0 0 0 3px rgba(36, 71, 198, 0.12);
}

.music-cohortcard.is-selected .music-cohortcard__pick::before {
  border-color: #2447c6;
  background: #2447c6;
  box-shadow: inset 0 0 0 3px #ffffff;
}

/* Keyboard focus lands on the hidden radio — show it on the card. */
.music-cohortcard__radio:focus-visible ~ .music-cohortcard__inner {
  outline: 2px solid #00789e;
  outline-offset: 6px;
  border-radius: 10px;
}

/* Waitlist card — never a dead grey button. */
.music-cohortcard--wait {
  background: #ffffff;
  border-style: dashed;
  border-color: #e8ecf2;
  cursor: default;
}

.music-cohortcard--wait:hover {
  transform: none;
  box-shadow: none;
  border-color: #cdd4df;
}

.music-cohortcard--wait .music-cohortcard__label { color: #516078; }

.music-cohortcard__wait-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #d7374f;
  text-decoration: none;
  background: #ffffff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.music-cohortcard__wait-cta:hover {
  border-color: #d7374f;
  background: #ffe6e7;
}

/* The real <select>: present, focusable, out of the way. Tab to it and it
   appears — belt and braces for anyone who prefers the list.
   The `variations` class sits on the INNER div (WooCommerce's JS needs it and
   WooCommerce's own stylesheet forces `.variations { width: 100% }`, which
   would push this 1px box out to full width and give the page a horizontal
   scrollbar). */
body.music-woo form.music-cohortpick--cards > div.music-cohortpick__fallback {
  position: absolute;
  width: 1px;
  max-width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.music-woo form.music-cohortpick--cards > div.music-cohortpick__fallback:focus-within {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  margin-top: 18px;
}

.music-cohortpick__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin: 0 0 14px;
}

.music-cohortpick__field label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

body.music-woo .music-cohortpick__field select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  color: #111827;
  background: #ffffff;
}

.music-cohortpick__field .reset_variations {
  font-size: 13px;
  color: #8b97aa;
}

/* WooCommerce's live variation block: kept for the screen-reader alert,
   silent on screen — each card already carries its dates, price and seats. */
body.music-woo .woocommerce-variation.single_variation {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.music-cohortpick__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.music-cohortpick__buy .quantity { display: none; }

body.music-woo .music-cohortpick__buy .single_add_to_cart_button {
  padding: 16px 34px;
  font-size: 16.5px;
}

/* Not chosen yet: a real, legible button that is plainly waiting on you —
   not a washed-out grey ghost. */
body.music-woo .music-cohortpick__buy .single_add_to_cart_button:disabled,
body.music-woo .music-cohortpick__buy .single_add_to_cart_button.disabled {
  background: #ffffff;
  color: #516078;
  border: 1.5px solid #cdd4df;
  cursor: not-allowed;
}

.music-cohortpick__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #8b97aa;
  max-width: 46em;
}

.music-cohortpick__hint-ready { display: none; }

.woocommerce-variation-add-to-cart-enabled .music-cohortpick__hint-empty { display: none; }
.woocommerce-variation-add-to-cart-enabled .music-cohortpick__hint-ready { display: inline; }

body.music-woo .wc-no-matching-variations {
  margin-top: 16px;
}

.music-cohortpick__none {
  background: #fff8ef;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 620px;
}

.music-cohortpick__none-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.music-cohortpick__none-copy {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #516078;
  background: none;
  padding: 0;
}

/* ── what you get ─────────────────────────────────────────────────────── */

.music-prod__detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 900px) {
  .music-prod__detail-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.music-prod__prose .music-section-head {
  margin-bottom: 20px;
}

.music-prod__body {
  font-size: 16px;
  line-height: 1.68;
  color: #516078;
  max-width: 62ch;
}

.music-prod__body > p { margin: 0 0 14px; }
.music-prod__body > p:last-child { margin-bottom: 0; }
.music-prod__body strong { color: #111827; }

.music-prod__body ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-prod__body ul li {
  position: relative;
  padding-left: 26px;
}

.music-prod__body ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #19a974;
  font-weight: 700;
}

.music-prod__glance {
  position: sticky;
  top: 96px;
}

.music-prod__glance-list {
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.music-prod__glance-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid #e8ecf2;
}

.music-prod__glance-row:first-child {
  border-top: 0;
  padding-top: 4px;
}

.music-prod__glance-row dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b97aa;
  margin: 0;
}

.music-prod__glance-row dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #111827;
  font-weight: 500;
}

/* ── promise band ─────────────────────────────────────────────────────── */

.music-prod__promise .music-section-head {
  margin-bottom: 26px;
}

.music-prod__promise-grid {
  gap: clamp(18px, 3vw, 32px);
}

body.music-woo .music-prod__promise-item h3 {
  color: #ffffff;
  margin: 0 0 8px;
}

.music-prod__promise-item p {
  margin: 0;
}

.music-prod__promise-links {
  margin: 30px 0 0;
  font-size: 14px;
  color: #8b97aa;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.music-prod__promise-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

/* =========================================================================
   2 · CART
   ====================================================================== */

.music-cart {
  margin: 0 0 26px;
}

.music-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.music-cart__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 26px);
  align-items: start;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
}

.music-cart__thumb {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f7fa;
  line-height: 0;
}

.music-cart__thumb a { display: block; }

.music-cart__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.music-cart__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.music-cart__eyebrow {
  margin: 0 0 2px;
}

body.music-woo .music-cart__name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111827;
  margin: 0;
}

body.music-woo .music-cart__name a {
  color: inherit;
  text-decoration: none;
}

body.music-woo .music-cart__name a:hover { color: #d7374f; }

.music-cart__dates {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #516078;
}

.music-cart__time {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8b97aa;
}

/* Artist / guardian rows the Apply page collected. */
body.music-woo .music-cart__body .variation,
body.music-woo .music-cart__body dl.variation {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #516078;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
}

body.music-woo .music-cart__body .variation dt {
  font-weight: 700;
  color: #8b97aa;
  margin: 0;
  float: none;
  clear: none;
}

body.music-woo .music-cart__body .variation dd,
body.music-woo .music-cart__body .variation dd p {
  margin: 0;
  padding: 0;
  color: #516078;
}

.music-cart__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  white-space: nowrap;
}

body.music-woo .music-cart__amount,
body.music-woo .music-cart__amount .amount,
body.music-woo .music-cart__amount bdi {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.1;
}

.music-cart__qty,
body.music-woo .music-woo-qty {
  font-size: 13px;
  font-weight: 600;
  color: #516078;
}

body.music-woo .music-cart__qty .quantity input.qty {
  width: 68px;
  padding: 9px 8px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  background: #ffffff;
}

/* THE !important IS NOT LAZINESS — IT IS THE ONLY THING THAT WORKS.
   WooCommerce's own stylesheet sets this link's colour twice, and both with
   !important:

     .woocommerce a.remove        { color: var(--wc-red) !important; }
     .woocommerce a.remove:hover  { color: #fff          !important; }

   An important declaration beats a normal one no matter how specific the
   normal one is, so both rules below were being discarded. The resting link
   was not the quiet grey it was written to be — it computed to rgb(170,0,0),
   WooCommerce's red — and on hover it turned WHITE on a white card, which read
   as the text vanishing and leaving a stray underline behind. That is what it
   was: the border, with invisible text above it.

   Overriding an !important requires an !important. It is scoped as tightly as
   the cart's own remove cell, so it cannot reach anything else. */

body.music-woo .music-cart__remove a.remove {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #8b97aa !important;
  text-decoration: none;
  border-bottom: 1px solid #e8ecf2;
  padding: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  line-height: 1.6;
}

body.music-woo .music-cart__remove a.remove:hover,
body.music-woo .music-cart__remove a.remove:focus-visible {
  color: #d7374f !important;
  border-bottom-color: #d7374f;
  /* WooCommerce also paints the background red on hover. Left un-important
     because its declaration is, so ordinary specificity already wins — but
     stated so the intent survives if core ever adds one. */
  background: none !important;
}

body.music-woo .music-cart__remove a.remove:focus-visible {
  outline: 2px solid #d7374f;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── cart actions: coupon collapsed, update quiet ─────────────────────── */

.music-cart__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 0;
}

.music-cart__coupon-wrap {
  flex: 1 1 260px;
  min-width: 0;
}

.music-cart__coupon-toggle {
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #516078;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 1.5px solid #e8ecf2;
}

.music-cart__coupon-toggle::-webkit-details-marker { display: none; }
.music-cart__coupon-toggle::marker { content: ""; }

.music-cart__coupon-toggle::after {
  content: " +";
  color: #8b97aa;
}

.music-cart__coupon-wrap[open] .music-cart__coupon-toggle::after {
  content: " –";
}

.music-cart__coupon-toggle:hover { color: #111827; border-bottom-color: #111827; }

.music-cart__coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

body.music-woo input#coupon_code {
  width: 190px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
}

body.music-woo input#coupon_code:focus { border-color: #00789e; outline: none; }

.music-cart__collaterals {
  width: 100%;
  margin-top: 26px;
}

/* ── totals panel (the /apply "4 · YOUR SEAT" idiom) ──────────────────── */

body.music-woo .cart_totals {
  float: none;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  background: #111827;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
}

body.music-woo .cart_totals .music-cart__totals-title,
body.music-woo .cart_totals h2 {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffb000;
  margin: 0 0 14px;
}

body.music-woo .cart_totals table.shop_table {
  background: transparent;
  border: 0;
  margin: 0 0 18px;
  border-radius: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.music-woo .cart_totals table.shop_table th,
body.music-woo .cart_totals table.shop_table td {
  background: transparent;
  border: 0;
  border-top: 1px solid #243047;
  padding: 11px 0;
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

body.music-woo .cart_totals table.shop_table tr:first-child th,
body.music-woo .cart_totals table.shop_table tr:first-child td {
  border-top: 0;
}

body.music-woo .cart_totals table.shop_table th {
  color: #8b97aa;
  font-weight: 500;
}

body.music-woo .cart_totals table.shop_table td {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

body.music-woo .cart_totals tr.order-total td .amount,
body.music-woo .cart_totals tr.order-total td bdi {
  color: #ffb000;
  font-weight: 700;
  font-size: 20px;
  font-family: "Space Grotesk", Arial, sans-serif;
}

body.music-woo .cart_totals .wc-proceed-to-checkout { padding: 0; }

body.music-woo .cart_totals .checkout-button {
  display: block;
  box-sizing: border-box; /* full-width INSIDE the card — content-box let the padding spill past the dark panel */
  width: 100%;
  font-size: 16px;
}

.music-cart__totals-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8b97aa;
}

body.music-woo .cart_totals .woocommerce-shipping-destination,
body.music-woo .cart_totals .shipping-calculator-button {
  color: #8b97aa;
  font-size: 12.5px;
}

/* =========================================================================
   3 · CHECKOUT
   ====================================================================== */

/* Shared form idiom — matches /contact: 1.5px #CDD4DF, radius 8, teal focus. */
body.music-woo form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0 0 16px;
}

body.music-woo form .form-row label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

body.music-woo form .form-row label .required {
  color: #d7374f;
  text-decoration: none;
  border: 0;
}

body.music-woo form .form-row .description,
body.music-woo form .form-row small {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b97aa;
}

body.music-woo form .form-row input.input-text,
body.music-woo form .form-row textarea,
body.music-woo form .form-row select,
body.music-woo .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #111827;
  background: #ffffff;
  outline: none;
  height: auto;
}

body.music-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  color: #111827;
}

body.music-woo .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

body.music-woo form .form-row input.input-text:focus,
body.music-woo form .form-row textarea:focus,
body.music-woo form .form-row select:focus {
  border-color: #00789e;
}

body.music-woo form .form-row.woocommerce-invalid input.input-text,
body.music-woo form .form-row.woocommerce-invalid select {
  border-color: #d7374f;
}

body.music-woo form .form-row.woocommerce-validated input.input-text {
  border-color: #cdd4df;
}

body.music-woo form .form-row-first,
body.music-woo form .form-row-last,
body.music-woo form .form-row.woocommerce-form-row--wide,
body.music-woo form p.form-row-wide {
  width: 100%;
  float: none;
}

/* The guardian pair reads as one designed block. */
body.music-woo form .form-row.music-woo-guardian {
  background: #fff1cc;
  border-radius: 12px;
  padding: 14px 16px;
}

body.music-woo form .form-row.music-woo-guardian label { color: #9a6200; }

body.music-woo form .form-row.music-woo-guardian .description {
  color: #9a6200;
  opacity: 0.85;
}

body.music-woo form.checkout_coupon,
body.music-woo form.login,
body.music-woo form.register {
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  background: #ffffff;
  padding: clamp(18px, 3vw, 26px);
  margin: 0 0 24px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
}

body.music-woo .woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #243047;
}

body.music-woo .woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #2447c6;
}

/* ── checkout layout ──────────────────────────────────────────────────── */

body.music-woo form.checkout.woocommerce-checkout {
  /* Clears the sticky site bar (85px measured) with room to breathe. */
  --music-co-top: 100px;
  --music-co-bottom: 24px;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  /* EVERY LEFT-HAND BLOCK IS NAMED, and the aside spans all of them.
     Two things were stopping the summary from sticking, and only one of them
     was the summary's own fault:

       1. Its heading and its table were separate grid areas, so it could only
          travel inside one short row. Fixed by the wrapper in form-checkout.php.

       2. `section.music-seats` — "Who is this seat for?" — had no grid area at
          all. Auto-placement gave it a row of its own ABOVE the two columns,
          which split the left-hand side in half: the aside could only span the
          billing row, 835px, against a 776px panel. 59px of travel, on a
          2,700px page.

     Naming it puts every field somebody has to fill in down the left, and lets
     the aside span the lot. Same page, same order, 512px of travel instead. */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "music-notice  music-notice"
    "music-seats   music-aside"
    "music-details music-aside";
  column-gap: clamp(24px, 4vw, 44px);
  row-gap: 0;
  align-items: start;
}

body.music-woo form.checkout .woocommerce-NoticeGroup { grid-area: music-notice; min-width: 0; }
body.music-woo form.checkout .music-seats { grid-area: music-seats; min-width: 0; }
body.music-woo form.checkout #customer_details { grid-area: music-details; min-width: 0; }

/* STRETCH, deliberately, against the `align-items: start` above. The aside's
   own box has to be as tall as the form for the sticky child to have anywhere
   to go; start-aligning it would collapse it to the summary's height and we
   would be back to a sticky element with no track. */
body.music-woo form.checkout .music-checkout__aside {
  grid-area: music-aside;
  min-width: 0;
  align-self: stretch;
}

body.music-woo form.checkout #customer_details .col-1,
body.music-woo form.checkout #customer_details .col-2 {
  float: none;
  width: 100%;
}

/* Section headings in the site's eyebrow style. */
body.music-woo form.checkout h3,
body.music-woo .woocommerce-billing-fields > h3,
body.music-woo .woocommerce-additional-fields > h3 {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d7374f;
  margin: 0 0 14px;
}

body.music-woo .woocommerce-billing-fields,
body.music-woo .woocommerce-additional-fields {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 26px);
  margin: 0 0 22px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
}

/* ── The summary rides along ───────────────────────────────────────────────
   It holds the price and the refund promise, and this form is long enough to
   scroll it out of sight — which is exactly when somebody is deciding whether
   to finish. So it stays on screen.

   CENTRED, not pinned to the top. The sticky box is the height of the free
   viewport and centres its contents, so the total sits near eye level instead
   of hugging the site bar. `safe center` is the important word: when the panel
   is TALLER than the viewport, plain centring would push its top off-screen
   and make the first line unreachable. `safe` drops back to start-alignment in
   that case, and the panel scrolls inside itself instead.

   The overflow rule is the other half of that. A checkout with several seats,
   or anyone at 200% zoom, produces a panel taller than the screen; without an
   internal scroll its bottom — the total and the pay button — could not be
   reached at all. overscroll-behavior stops that scroll running away with the
   page once it hits the end. */
body.music-woo form.checkout .music-checkout__aside-inner {
  position: sticky;
  top: var(--music-co-top);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  height: calc(100vh - var(--music-co-top) - var(--music-co-bottom));
  height: calc(100dvh - var(--music-co-top) - var(--music-co-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The scrollport needs a little side room so focus rings on the panel's own
     controls are not clipped against its edge. */
  padding-inline: 2px;
  margin-inline: -2px;
}

/* Nothing inside the panel should stretch to fill the centred column — they
   are stacked blocks, not a layout. */
body.music-woo form.checkout .music-checkout__aside-inner > * {
  flex: 0 0 auto;
}

/* Remove, from inside the summary.
   Quiet at rest and coral on approach: destructive, so it should be findable
   without competing with the total sitting a few lines below it. It is its own
   row rather than an inline word, because it is a different action from
   reading the product name it follows. */
body.music-woo .music-review__remove {
  /* Block, so it drops onto its own line under "Name x 1" instead of sitting
     inside that phrase. */
  display: block;
  width: fit-content;
  margin-top: 6px;
  /* The type is 12.5px; the padding is what makes the target big enough to hit
     without a mouse, in a table where the rows are otherwise tight. */
  padding: 4px 2px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #6b7280;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}

body.music-woo .music-review__remove:hover,
body.music-woo .music-review__remove:focus-visible {
  color: #d7374f;
}

body.music-woo .music-review__remove:focus-visible {
  outline: 2px solid #d7374f;
  outline-offset: 2px;
  border-radius: 4px;
}

body.music-woo table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: 1px solid #e8ecf2;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  margin: 0;
}

body.music-woo table.woocommerce-checkout-review-order-table th {
  font-family: "Inter", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b97aa;
  background: #f5f7fa;
  border: 0;
  padding: 13px 18px;
  text-align: left;
}

body.music-woo table.woocommerce-checkout-review-order-table td {
  border: 0;
  border-top: 1px solid #e8ecf2;
  padding: 16px 18px;
  font-size: 14.5px;
  color: #243047;
  vertical-align: top;
}

body.music-woo table.woocommerce-checkout-review-order-table td.product-name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

body.music-woo table.woocommerce-checkout-review-order-table td.product-total {
  text-align: right;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

body.music-woo table.woocommerce-checkout-review-order-table .product-quantity {
  color: #8b97aa;
  font-weight: 500;
}

body.music-woo .woocommerce-checkout-review-order-table tfoot th,
body.music-woo .woocommerce-checkout-review-order-table tfoot td {
  background: #f5f7fa;
  border-top: 1px solid #e8ecf2;
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: normal;
  color: #243047;
  font-weight: 600;
  padding: 13px 18px;
}

body.music-woo .woocommerce-checkout-review-order-table tfoot td { text-align: right; }

body.music-woo .woocommerce-checkout-review-order-table tfoot .order-total th,
body.music-woo .woocommerce-checkout-review-order-table tfoot .order-total td {
  background: #111827;
  color: #ffffff;
  border-top: 0;
}

body.music-woo .woocommerce-checkout-review-order-table tfoot .order-total td .amount,
body.music-woo .woocommerce-checkout-review-order-table tfoot .order-total td bdi {
  color: #ffb000;
  font-weight: 700;
  font-size: 20px;
  font-family: "Space Grotesk", Arial, sans-serif;
}

/* The cohort meta under each reviewed line. */
body.music-woo .woocommerce-checkout-review-order-table .variation {
  font-size: 12.5px;
  line-height: 1.5;
  color: #516078;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

body.music-woo .woocommerce-checkout-review-order-table .variation dt {
  font-weight: 700;
  color: #8b97aa;
  margin: 0;
  float: none;
  clear: none;
}

body.music-woo .woocommerce-checkout-review-order-table .variation dd,
body.music-woo .woocommerce-checkout-review-order-table .variation dd p { margin: 0; }

/* ── payment ──────────────────────────────────────────────────────────── */

body.music-woo #payment,
body.music-woo .woocommerce-checkout #payment {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: clamp(18px, 3vw, 24px);
}

body.music-woo #payment ul.payment_methods {
  border-bottom: 1px solid #e8ecf2;
  padding: 0 0 14px;
  margin: 0 0 16px;
  list-style: none;
}

body.music-woo #payment ul.payment_methods li {
  list-style: none;
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #111827;
}

body.music-woo #payment ul.payment_methods li img {
  max-height: 22px;
  vertical-align: middle;
  margin-left: 8px;
}

body.music-woo #payment div.payment_box {
  background: #f5f7fa;
  border-radius: 12px;
  padding: 15px 16px;
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #516078;
  font-weight: 400;
}

body.music-woo #payment div.payment_box::before { border-bottom-color: #f5f7fa; }

body.music-woo #payment .woocommerce-privacy-policy-text,
body.music-woo .woocommerce-terms-and-conditions-wrapper {
  font-size: 12.5px;
  line-height: 1.55;
  color: #8b97aa;
}

body.music-woo .woocommerce-terms-and-conditions-wrapper a {
  color: #2447c6;
  font-weight: 600;
}

body.music-woo .wc-stripe-elements-field,
body.music-woo .wc-stripe-elements-container,
body.music-woo #wc-stripe-upe-element,
body.music-woo .wc-payment-form .form-row { border-radius: 8px; }

.music-checkout__promise {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8b97aa;
}

/* The "no gateway yet" state, designed on purpose. */
.music-checkout__pending {
  background: #fff8ef;
  border: 1px solid #ffe6b8;
  border-radius: 14px;
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.music-checkout__pending .music-eyebrow { margin: 0; }

body.music-woo .music-checkout__pending-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}

.music-checkout__pending-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #516078;
}

.music-checkout__pending-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}

body.music-woo .music-checkout__pending-actions .music-woo-btn {
  padding: 12px 20px;
  font-size: 14.5px;
}

/* =========================================================================
   4 · ORDER RECEIVED
   ====================================================================== */

.music-thanks {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 40px);
}

.music-thanks__hero {
  background: #111827;
  border-radius: 16px;
  padding: clamp(26px, 4.5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.music-thanks__hero .music-eyebrow { margin: 0; }

body.music-woo .music-thanks__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(34px, 5.5vw, 52px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.music-thanks__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #cdd4df;
  max-width: 56ch;
}

.music-thanks__hero .music-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}

.music-thanks__hero--failed { background: #243047; }

.music-thanks__seats .music-eyebrow,
.music-thanks__next .music-eyebrow {
  margin: 0 0 14px;
}

.music-thanks__seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.music-thanks__seat {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-top: 3px solid #ff5a5f;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
}

.music-thanks__seat--teal { border-top-color: #33b5e5; }
.music-thanks__seat--amber { border-top-color: #ffb000; }
.music-thanks__seat--red { border-top-color: #ff5a5f; }
.music-thanks__seat--violet { border-top-color: #2447c6; }

.music-thanks__seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

body.music-woo .music-thanks__seat-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #111827;
  margin: 0;
}

.music-thanks__seat-dates {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #516078;
}

.music-thanks__seat-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8b97aa;
}

.music-thanks__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.music-thanks__step {
  background: #fff8ef;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-thanks__step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.music-thanks__step-body {
  font-size: 14px;
  line-height: 1.6;
  color: #516078;
}

.music-thanks__step-body strong {
  display: block;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16.5px;
  color: #111827;
  margin-bottom: 4px;
}

.music-thanks__receipt-eyebrow {
  margin: 0 0 14px;
}

/* The Core plugin's confirmation panel (woocommerce_thankyou, priority 5). */
.music-woo-thanks {
  background: #243047;
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 30px;
}

.music-woo-thanks__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

.music-woo-thanks__copy {
  font-size: 14.5px;
  line-height: 1.55;
  color: #cdd4df;
  margin: 0;
  max-width: 520px;
}

/* Receipt tables (order details, my-account orders). */
body.music-woo table.shop_table {
  width: 100%;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  overflow: hidden;
  margin: 0 0 26px;
}

body.music-woo table.shop_table th {
  font-family: "Inter", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b97aa;
  background: #f5f7fa;
  border: 0;
  padding: 13px 18px;
  text-align: left;
}

body.music-woo table.shop_table td {
  border: 0;
  border-top: 1px solid #e8ecf2;
  padding: 16px 18px;
  font-size: 14.5px;
  color: #243047;
  vertical-align: top;
}

body.music-woo table.shop_table tbody tr:first-child td { border-top: 0; }

body.music-woo table.shop_table td.product-name,
body.music-woo table.shop_table td.woocommerce-table__product-name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

body.music-woo table.shop_table td.product-name a { color: inherit; text-decoration: none; }
body.music-woo table.shop_table td.product-name a:hover { color: #d7374f; }

body.music-woo .wc-item-meta {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #516078;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  font-weight: 400;
  letter-spacing: normal;
}

body.music-woo .wc-item-meta li { display: contents; margin: 0; }

body.music-woo .wc-item-meta .wc-item-meta-label,
body.music-woo .wc-item-meta li strong {
  font-weight: 700;
  color: #8b97aa;
  margin: 0;
  float: none;
  clear: none;
}

body.music-woo .wc-item-meta li p { margin: 0; }

body.music-woo .woocommerce-order-overview,
body.music-woo ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

body.music-woo ul.order_details li {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0;
  float: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b97aa;
  flex: 1 1 auto;
}

body.music-woo ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #111827;
}

body.music-woo .woocommerce-customer-details address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
  color: #516078;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: 20px;
}

body.music-woo .woocommerce-column__title,
body.music-woo .woocommerce-order-details__title {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d7374f;
  margin: 0 0 12px;
}

/* =========================================================================
   5 · MY ACCOUNT
   ====================================================================== */

/* Only grid when the navigation rail actually exists (logged in). The
   logged-out login/register page is a single column. */
body.music-woo.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}

body.music-woo .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
}

.music-account__nav-title { margin: 0 0 10px; }

body.music-woo .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  overflow: hidden;
}

body.music-woo .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  border-bottom: 1px solid #e8ecf2;
}

body.music-woo .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }

body.music-woo .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: #243047;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.music-woo .woocommerce-MyAccount-navigation ul li a:hover {
  background: #f5f7fa;
  color: #111827;
}

body.music-woo .woocommerce-MyAccount-navigation ul li.is-active a {
  background: #111827;
  color: #ffffff;
}

.music-account__studio-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: 18px;
  border-radius: 16px;
  background: #243047;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.music-account__studio-link:hover { background: #111827; }

.music-account__studio-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffb000;
}

.music-account__studio-name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

.music-account__studio-copy {
  font-size: 12.5px;
  line-height: 1.5;
  color: #cdd4df;
}

body.music-woo .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  min-width: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #243047;
}

.music-account__dash {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.music-account__welcome {
  background: #111827;
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.music-account__welcome .music-eyebrow { margin: 0; }

body.music-woo .music-account__welcome-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.music-account__welcome-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cdd4df;
  max-width: 52ch;
}

.music-account__welcome .music-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}

body.music-woo .music-account__welcome .music-woo-btn {
  padding: 13px 22px;
  font-size: 15px;
}

.music-account__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.music-account__card {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.music-account__card-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.music-account__card-copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: #516078;
}

.music-account__card-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2447c6;
}

.music-account__signout {
  margin: 0;
  font-size: 13px;
  color: #8b97aa;
}

.music-account__signout a { color: #2447c6; font-weight: 600; }

/* Logged-out: welcome + the two forms side by side. */
.music-account__intro {
  margin: 0 0 24px;
  max-width: 62ch;
}

.music-account__intro .music-eyebrow { margin: 0 0 8px; }

.music-account__intro-copy {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
  color: #516078;
}

.music-account__intro-links {
  margin: 0;
  font-size: 14px;
  color: #8b97aa;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.music-account__intro-links a {
  color: #2447c6;
  font-weight: 600;
  text-decoration: none;
}

body.music-woo .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 3vw, 32px);
}

body.music-woo .u-columns .col-1,
body.music-woo .u-columns .col-2 {
  float: none;
  width: 100%;
}

body.music-woo #customer_login > .col-1 > h2,
body.music-woo #customer_login > .col-2 > h2 {
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d7374f;
  margin: 0 0 12px;
}

body.music-woo .woocommerce-LostPassword a,
body.music-woo .lost_password a {
  font-size: 13.5px;
  color: #2447c6;
  font-weight: 600;
}

body.music-woo .woocommerce-Address {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: 20px;
  width: 100%;
}

body.music-woo .woocommerce-Address address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
  color: #516078;
}

body.music-woo .woocommerce-Address-title h2,
body.music-woo .woocommerce-Address-title h3 {
  font-size: 17px;
  margin: 0 0 10px;
}

/* =========================================================================
   6 · RESPONSIVE
   ====================================================================== */

@media (max-width: 900px) {
  body.music-woo form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "music-notice"
      "music-seats"
      "music-details"
      "music-aside";
    row-gap: 8px;
  }

  /* ONE COLUMN MEANS NOTHING TO STICK TO. There is no second column for the
     summary to sit beside, so a viewport-tall sticky panel would cover the
     form somebody is trying to fill in — and a nested scroller on a phone is
     the worst place to put a total. Everything unwinds back to normal flow. */
  body.music-woo form.checkout .music-checkout__aside-inner {
    position: static;
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
  }

  body.music-woo .woocommerce-checkout-review-order { position: static; }

  body.music-woo.woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  body.music-woo .cart_totals { max-width: none; }

  .music-prod__glance { position: static; }
}

@media (max-width: 780px) {
  .music-cart__item {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .music-cart__aside {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border-top: 1px solid #e8ecf2;
    padding-top: 12px;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .music-cart__item {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .music-cart__thumb img { aspect-ratio: 16 / 9; }

  .music-cart__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .music-cart__update { width: 100%; }

  .music-cart__coupon { flex-direction: column; align-items: stretch; }

  body.music-woo input#coupon_code { width: 100%; }

  .music-cart__coupon .button { width: 100%; }

  body.music-woo ul.order_details li { flex: 1 1 100%; }

  .music-prod__cta-row .music-btn { width: 100%; }

  .music-thanks__hero .music-btns .music-woo-btn,
  .music-account__welcome .music-btns .music-woo-btn,
  .music-woo-blank .music-btns .music-woo-btn { width: 100%; }
}

/* Wide receipts must scroll inside their own box, never the page. */
@media (max-width: 640px) {
  body.music-woo .woocommerce-order-details table.shop_table,
  body.music-woo .woocommerce-MyAccount-content table.shop_table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-cohortcard,
  .music-account__card,
  .music-woo-btn,
  body.music-woo a.button,
  body.music-woo button.button { transition: none; }

  .music-cohortcard:hover { transform: none; }
}

/* ── My Account: sign-in + register forms ────────────────────────────────
 * WooCommerce ships these as bare stacked forms. Give them the same card,
 * field and button treatment as the site's own sign-in card so /my-account
 * and /login read as one design. */
body.music-woo .woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 3vw, 24px);
  align-items: start;
}
body.music-woo .woocommerce-account .u-column1,
body.music-woo .woocommerce-account .u-column2 { width: 100%; float: none; }

body.music-woo .woocommerce-account form.login,
body.music-woo .woocommerce-account form.register {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: clamp(20px, 3.5vw, 28px);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  margin: 0;
}
body.music-woo .woocommerce-account h2 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d7374f;
  margin: 0 0 12px;
}
body.music-woo .woocommerce-account form.login label,
body.music-woo .woocommerce-account form.register label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 6px;
}
body.music-woo .woocommerce-account form.login .woocommerce-form-row,
body.music-woo .woocommerce-account form.register .woocommerce-form-row { margin-bottom: 16px; }
body.music-woo .woocommerce-account form.login input.input-text,
body.music-woo .woocommerce-account form.login input[type="password"],
body.music-woo .woocommerce-account form.register input.input-text,
body.music-woo .woocommerce-account form.register input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
  outline: none;
}
body.music-woo .woocommerce-account form.login input:focus,
body.music-woo .woocommerce-account form.register input:focus { border-color: #2447c6; }
body.music-woo .woocommerce-account .woocommerce-form-login__rememberme {
  font-size: 13.5px;
  font-weight: 500;
  color: #516078;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.music-woo .woocommerce-account form.login button[type="submit"],
body.music-woo .woocommerce-account form.register button[type="submit"] {
  width: 100%;
  background: #2447c6;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
body.music-woo .woocommerce-account form.login button[type="submit"]:hover,
body.music-woo .woocommerce-account form.register button[type="submit"]:hover { background: #1b37a0; }
body.music-woo .woocommerce-account .woocommerce-LostPassword {
  margin: 12px 0 0;
  font-size: 13.5px;
}
body.music-woo .woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #8b97aa;
}

/* WooCommerce emits the register column before the login column in the DOM on
 * some flows; pin the order so signing in always reads first. */
body.music-woo .woocommerce-account .u-column1 { order: 1; }
body.music-woo .woocommerce-account .u-column2 { order: 2; }

/* =========================================================================
   6 · THE PRODUCT FAMILY — one road, four steps

   The four programs share ONE card architecture (same frame, same type
   scale, same spacing) and differ only by accent + duration badge + phase
   ribbon + position on the road. Colours are the ones the design already
   assigns to each phase (Formats.tsx): sky/teal, amber, coral/red, violet.

   Every accent is delivered through three custom properties, so a card, a
   band or a whole page can be re-tinted by adding one class.
   ====================================================================== */

.music-acc-teal,
body.music-woo-program-intro {
  --music-accent: #33b5e5;
  --music-accent-deep: #00789e;
  --music-accent-soft: #ddf5fc;
  --music-accent-lift: #6fd0f5;
}

.music-acc-amber,
body.music-woo-program-intensive {
  --music-accent: #ffb000;
  --music-accent-deep: #9a6200;
  --music-accent-soft: #fff1cc;
  --music-accent-lift: #ffc247;
}

.music-acc-red,
body.music-woo-program-masterclass {
  --music-accent: #ff5a5f;
  --music-accent-deep: #d7374f;
  --music-accent-soft: #ffe6e7;
  --music-accent-lift: #ff8f93;
}

.music-acc-violet,
body.music-woo-program-mastermind {
  --music-accent: #7a4db5;
  --music-accent-deep: #5c3690;
  --music-accent-soft: #f0e8fa;
  --music-accent-lift: #b892e4;
}

/* Fallback so the vocabulary is never un-tinted. */
body.music-woo {
  --music-accent: #ff5a5f;
  --music-accent-deep: #d7374f;
  --music-accent-soft: #ffe6e7;
  --music-accent-lift: #ff8f93;
}

/* ── the duration badge ───────────────────────────────────────────────── */

.music-progbadge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 62px;
  padding: 8px 12px 9px;
  border-radius: 14px;
  background: var(--music-accent-soft);
  color: var(--music-accent-deep);
  text-align: center;
  line-height: 1;
}

.music-progbadge__n {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.music-progbadge__u {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.85;
}

.music-progbadge--lg {
  min-width: 76px;
  padding: 11px 14px 12px;
  border-radius: 16px;
}

.music-progbadge--lg .music-progbadge__n { font-size: 34px; }
.music-progbadge--lg .music-progbadge__u { font-size: 10px; }

/* Inline pill form, used where a card has no photo to sit on. */
.music-progbadge--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 5px 11px;
  border-radius: 999px;
  align-self: flex-start;
}

.music-progbadge--inline .music-progbadge__n { font-size: 15px; }
.music-progbadge--inline .music-progbadge__u { margin-top: 0; font-size: 9.5px; }

/* ── the road (the ladder) ────────────────────────────────────────────── */

.music-road { margin: 0; }

.music-road__head { margin: 0 0 clamp(20px, 3vw, 28px); max-width: 640px; }

.music-road__eyebrow {
  color: var(--music-accent-deep);
  margin: 0 0 8px;
}

.music-road__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: #111827;
}

.music-road__lead {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #516078;
}

.music-road__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  position: relative;
}

/* The rail every step sits on. */
.music-road__list::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: #e8ecf2;
}

.music-road__step { margin: 0; position: relative; }

.music-road__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #111827;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a.music-road__link:hover {
  background: #ffffff;
  border-color: #e8ecf2;
  color: #111827;
}

.music-road__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--music-accent-deep);
  background: var(--music-accent-soft);
  box-shadow: 0 0 0 4px #fff8ef;
}

.music-road__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-road__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--music-accent-deep);
}

.music-road__name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.music-road__meta {
  font-size: 12.5px;
  color: #8b97aa;
}

.music-road__here {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--music-accent-deep);
  background: var(--music-accent-soft);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.music-road__step.is-current .music-road__link {
  background: #ffffff;
  border-color: var(--music-accent);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}

.music-road__step.is-current .music-road__dot {
  color: #ffffff;
  background: var(--music-accent-deep);
}

/* Horizontal from tablet up: four steps on one rail. */
@media (min-width: 720px) {
  .music-road__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .music-road__list::before {
    left: 12%;
    right: 12%;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .music-road__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 16px;
    height: 100%;
    box-sizing: border-box;
  }

  .music-road__here {
    margin-left: 0;
    position: absolute;
    top: 14px;
    right: 12px;
  }
}

/* On ink bands the rail and labels invert. */
.music-road--ink .music-road__title,
.music-road--ink .music-road__link { color: #ffffff; }
.music-road--ink .music-road__lead { color: #cdd4df; }
.music-road--ink .music-road__meta { color: #8b97aa; }
.music-road--ink .music-road__list::before { background: rgba(255, 255, 255, 0.16); }
.music-road--ink .music-road__eyebrow,
.music-road--ink .music-road__kicker { color: var(--music-accent-lift); }
.music-road--ink .music-road__dot { box-shadow: 0 0 0 4px #111827; }
.music-road--ink a.music-road__link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.music-road--ink .music-road__step.is-current .music-road__link {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--music-accent);
  box-shadow: none;
}

/* ── the family cards ─────────────────────────────────────────────────── */

.music-progcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 640px) {
  .music-progcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .music-progcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.music-progcard { margin: 0; min-width: 0; }

.music-progcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  overflow: hidden;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.music-progcard__link:hover {
  color: #111827;
  transform: translateY(-3px);
  border-color: var(--music-accent);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.1);
}

/* The one piece of colour every sibling wears in the same place. */
.music-progcard__rule {
  display: block;
  height: 5px;
  background: var(--music-accent);
  flex: none;
}

.music-progcard__figure {
  display: block;
  position: relative;
  background: #f5f7fa;
  flex: none;
}

.music-progcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.music-progcard__figure .music-progbadge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--music-accent-deep);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.18);
  backdrop-filter: saturate(1.2) blur(2px);
}

.music-progcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px 20px;
  flex: 1 1 auto;
}

.music-progcard__ribbon {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--music-accent-deep);
  line-height: 1.5;
}

.music-progcard__name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.music-progcard__line {
  font-size: 14px;
  line-height: 1.55;
  color: #516078;
}

.music-progcard__foot {
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #e8ecf2;
}

.music-progcard__price,
.music-progcard__price .amount,
.music-progcard__price bdi {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.music-progcard__price-note {
  font-family: "Inter", Arial, sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: #8b97aa;
  margin-left: 3px;
}

.music-progcard__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--music-accent-deep);
  white-space: nowrap;
}

/* You-are-here: the sibling you are already looking at. */
.music-progcard.is-current .music-progcard__link {
  border-color: var(--music-accent);
  background: #fffdfa;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

.music-progcard.is-current .music-progcard__cta { color: #8b97aa; }

/* Compact — no photo, for cart / account / receipt surfaces. */
.music-progcards--compact .music-progcard__body { padding: 16px 16px 18px; gap: 7px; }
.music-progcards--compact .music-progcard__name { font-size: 17px; }
.music-progcards--compact .music-progcard__line { font-size: 13.5px; }
.music-progcards--compact .music-progcard__foot { padding-top: 10px; }
.music-progcards--compact .music-progcard__price,
.music-progcards--compact .music-progcard__price bdi { font-size: 17px; }

/* =========================================================================
   7 · BRAND TEXTURE ON THE COMMERCE PAGES
   ====================================================================== */

/* The accent rule that opens every product page. */
.music-prod__rule {
  display: block;
  height: 5px;
  background: var(--music-accent);
}

/* Hero: the program mark (badge + ribbon) above the title. */
.music-prod__mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.music-prod__mark-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.music-prod__step {
  color: var(--music-accent-deep);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.music-prod__kicker {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #516078;
  letter-spacing: -0.01em;
}

/* Hero photo carries the phase name, the way the /formats phases do. */
.music-prod__figure { position: relative; }

.music-prod__figure-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--music-accent-deep);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.18);
}

/* The road strip under the hero. */
.music-prod__road {
  padding-bottom: clamp(28px, 4vw, 44px);
}

.music-prod__road .music-road {
  border-top: 1px solid #e8ecf2;
  padding-top: clamp(18px, 2.5vw, 26px);
}

/* The family band. */
.music-prod__family {
  position: relative;
  overflow: hidden;
}

.music-prod__family-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(160px, 22vw, 240px);
  object-fit: cover;
  opacity: 0.34;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.music-prod__family > .music-container { position: relative; }

/* Blank states (empty cart, expired receipt) get the brand backdrop. */
.music-woo-band {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
}

.music-woo-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}

.music-woo-band > .music-woo-blank {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* A titled sub-section on cart / account / receipt surfaces. */
.music-woo-more {
  margin: clamp(30px, 5vw, 48px) 0 0;
  padding: clamp(24px, 4vw, 34px) 0 0;
  border-top: 1px solid #e8ecf2;
}

.music-woo-more__head {
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  max-width: 640px;
}

.music-woo-more__head .music-eyebrow { margin: 0 0 8px; }

.music-woo-more__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #111827;
}

.music-woo-more__copy {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #516078;
}

/* The receipt page's "next step" strip sits on ink. */
.music-thanks__road {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: clamp(24px, 4vw, 34px) clamp(20px, 3vw, 30px) clamp(26px, 4vw, 32px);
  border-radius: 20px;
  background: #111827;
  position: relative;
  overflow: hidden;
}

.music-thanks__road-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
}

.music-thanks__road > *:not(.music-thanks__road-bg) { position: relative; }

/* My-account dashboard: the welcome panel earns a brand backdrop. */
.music-account__welcome {
  position: relative;
  overflow: hidden;
}

.music-account__welcome-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: min(56%, 520px);
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
}

.music-account__welcome > *:not(.music-account__welcome-bg) { position: relative; }

@media (max-width: 640px) {
  .music-account__welcome-bg { display: none; }
}

/* ── responsive trims ─────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .music-prod__mark { gap: 12px; }
  .music-progbadge--lg { min-width: 66px; padding: 9px 12px 10px; }
  .music-progbadge--lg .music-progbadge__n { font-size: 28px; }
  .music-prod__kicker { font-size: 14.5px; }
  .music-prod__figure-tag { left: 10px; bottom: 10px; padding: 6px 11px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .music-progcard__link,
  .music-road__link { transition: none; }
  .music-progcard__link:hover { transform: none; }
}

/* Receipt seat cards wear the same ribbon the product hero does. */
.music-thanks__seat-ribbon {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--music-accent-deep);
}

/* Product archive (the family listing) reuses the product page's shell. */
.music-shop__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 780px;
}

.music-shop__hero > * { margin: 0; }

/* Compact cards put the badge and the ribbon on one header row. */
.music-progcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.music-progcard__top .music-progcard__ribbon { line-height: 1.3; }

/* The empty-cart primary CTA carries `wc-backward` (WooCommerce's own class)
   and was being repainted by the quiet back-link rule, which outranks the
   coral modifier. Coral wins on the buttons that are asking for the sale. */
body.music-woo .music-woo-btn--coral.wc-backward {
  background: #ff5a5f;
  color: #ffffff;
  border: none;
  padding: 15px 28px;
  font-size: 16px;
}

body.music-woo .music-woo-btn--coral.wc-backward:hover {
  background: #d7374f;
  color: #ffffff;
  border: none;
}

/* ── Cart page: two columns, not a column and a void ─────────────────────
   The form and the totals are siblings inside .woocommerce. The totals were
   width:100% with margin-left:auto, so they sat *below* the seats and hugged
   the right edge — leaving two thirds of the page empty beside them. They are
   a proper aside now, and they follow you down a long cart. */
/* Only when there is something in it. The empty state shows the whole family of
   classes instead of a totals panel, and a 340px column turned those four cards
   into slivers with the titles broken mid-word. */
body.music-woo.woocommerce-cart.music-cart-empty .music-page__content > .woocommerce {
  display: block;
}

body.music-woo.woocommerce-cart:not(.music-cart-empty) .music-page__content > .woocommerce {
  display: grid;
  /* 300px squeezed "Continue to secure checkout" onto three lines. */
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.95fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* Notices belong to the whole page, not to one column. */
body.music-woo.woocommerce-cart:not(.music-cart-empty) .music-page__content > .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

body.music-woo.woocommerce-cart .music-cart__collaterals {
  margin-top: 0;
  position: sticky;
  top: calc(var(--music-nav-h, 80px) + 16px);
}

/* The panel shrink-wrapped to 261px inside a 427px column, which is what broke
   the checkout label over three lines. It fills its column now. */
body.music-woo.woocommerce-cart .music-cart__collaterals {
  display: block;
  width: 100%;
}

body.music-woo.woocommerce-cart .cart_totals {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.music-woo.woocommerce-cart:not(.music-cart-empty) .music-page__content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }
  body.music-woo.woocommerce-cart .music-cart__collaterals { position: static; }
}

/* The primary action fills its panel instead of shrink-wrapping to 205px and
   breaking "Continue to secure checkout" over three lines. */
body.music-woo.woocommerce-cart .cart_totals .checkout-button,
body.music-woo.woocommerce-cart .cart_totals a.button.alt,
body.music-woo.woocommerce-cart .wc-proceed-to-checkout a.button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-wrap: balance;
}

body.music-woo.woocommerce-cart .wc-proceed-to-checkout { width: 100%; }

/* The same credit-forward note the drawer shows, on the page itself. */
.music-cart-ladder {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid #e8dfc9;
  border-radius: 14px;
  background: #fdf7e8;
}

.music-cart-ladder__eyebrow {
  margin: 0 0 6px;
  color: #a36f00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.music-cart-ladder__line { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.55; }

.music-cart-ladder__link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 0;
  color: #2440c4;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.music-cart-ladder__price { font-variant-numeric: tabular-nums; }

/* The four programme cards sat straight under the lead paragraph with nothing
   between them, so the section read as one block. */
.music-prod__family .music-section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* ---------------------------------------------------------------------------
   Empty cart — two doors, side by side.
   The message column alone left two thirds of a 1140px panel empty, and the
   copy assumed a seat the Kit does not have. The Kit panel answers "I'm not
   ready to pick dates" without sending anyone off the page.
   --------------------------------------------------------------------------- */
.music-woo-blank--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
}

.music-woo-blank--split > .music-woo-blank__say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.music-woo-blank__say .music-woo-empty {
  max-width: 42ch;
}

.music-woo-blank__kit {
  min-width: 0;
  background: #fffaf3;
  border: 1px solid #f0e3d2;
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.music-woo-blank__kitrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.music-woo-blank__kitimg {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
  border: 1px solid #f0e3d2;
}

.music-woo-blank__kitname {
  font-family: var(--music-font-display, "Space Grotesk", sans-serif);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.2;
  margin: 0 0 4px;
  color: #0f1729;
}

.music-woo-blank__kitprice {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  color: #0f1729;
}

.music-woo-blank__kitprice span {
  font-weight: 500;
  font-size: 13px;
  color: #6b7280;
}

.music-woo-blank__kitcopy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
}

.music-woo-blank__kitform {
  margin: 2px 0 0;
}

.music-woo-blank__kitform .music-woo-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 860px) {
  .music-woo-blank--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The Kit is the second door, not a rival primary. `body.music-woo
   .single_add_to_cart_button` paints every add-to-cart coral and outranks the
   --ink modifier, so the override has to be scoped the same way. */
body.music-woo .music-woo-blank__kitform .single_add_to_cart_button {
  background: #111827;
  color: #ffffff;
}

body.music-woo .music-woo-blank__kitform .single_add_to_cart_button:hover,
body.music-woo .music-woo-blank__kitform .single_add_to_cart_button:focus-visible {
  background: #243047;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Who each seat is for — plugin inc/seat-identity.php.
   One block per seat at checkout, so adding stays one click and the question
   gets asked once. A seat that came through /apply/ renders already filled.
   --------------------------------------------------------------------------- */

.music-seats {
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  background: #ffffff;
}

.music-seats__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #0f1729;
}

.music-seats__lead {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
  max-width: 58ch;
}

.music-seat {
  margin: 0 0 16px;
  padding: 16px 16px 6px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #fdfbf7;
}

.music-seat:last-of-type { margin-bottom: 0; }

.music-seat__legend {
  padding: 0 6px;
  margin-left: -6px;
  font-size: 14px;
  font-weight: 700;
  color: #0f1729;
}

.music-seat__legend span {
  font-weight: 500;
  color: #6b7280;
}

/* Non-breaking, because a plain trailing space in `content` collapses. */
.music-seat__legend span::before { content: "\00a0\00b7\00a0"; }

.music-seat__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 14px;
}

.music-seat__row { margin: 0 0 12px; }

.music-seat__row label {
  display: block;
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #374151;
}

.music-seat__row abbr {
  border: 0;
  text-decoration: none;
  color: #d7374f;
}

.music-seat__row input,
.music-seat__row select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px; /* iOS zooms anything smaller on focus. */
  color: #111827;
  background: #ffffff;
  border: 1px solid #dfd7c9;
  border-radius: 9px;
}

.music-seat__row input:focus,
.music-seat__row select:focus {
  outline: none;
  border-color: #d7374f;
  box-shadow: 0 0 0 3px rgba(215, 55, 79, 0.15);
}

.music-seat__guardian {
  margin: 2px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed #e2dbcd;
}

.music-seat__note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

/* The children's-privacy promise, given the weight a promise deserves. */
.music-seat__note--child {
  padding: 10px 12px;
  border-radius: 9px;
  background: #f2f7ff;
  border: 1px solid #dbe6f8;
  color: #24406b;
}