.alsonor-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #0a0e14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  max-width: 100%;
}

/* "Album complet" (or any variation with no waveform) reuses the player's
   box look for visual consistency, with just a centered title inside. */
.alsonor-player--label {
  justify-content: center;
  min-height: 76px;
}

.alsonor-player--label .alsonor-track-row__label {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.alsonor-player__cover {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.alsonor-player__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alsonor-player__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alsonor-player__toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.5);
  background: transparent;
  color: #00e5ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.alsonor-player__toggle:hover {
  background: rgba(0, 229, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

.alsonor-player__icon-pause {
  display: none;
}

.alsonor-player.is-playing .alsonor-player__icon-play {
  display: none;
}

.alsonor-player.is-playing .alsonor-player__icon-pause {
  display: inline;
}

.alsonor-player__waveform {
  flex: 1 1 auto;
  min-width: 0;
}

.alsonor-player__duration {
  flex: 0 0 auto;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alsonor-player__title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .alsonor-player__cover {
    width: 44px;
    height: 44px;
  }
}

/* Track rows: one variation per row, player + its own Add to Cart button. */

/* Oxygen wraps [alsonor_track_rows] in a .ct-shortcode container that
   shrinks to fit its content by default instead of filling the column
   width available to it — everything downstream (rows, player) inherits
   that narrow width. Force it to stretch, scoped so it only affects
   shortcode blocks that actually contain our track rows. */
.ct-shortcode:has(> .alsonor-track-rows) {
  display: block !important;
  width: 100% !important;
}

.alsonor-track-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.alsonor-track-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

.alsonor-track-row .alsonor-player {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.alsonor-track-row__player {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.alsonor-track-row__label {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  color: #ffffff;
}

.alsonor-track-row__form {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
}

/* Extra qualification + !important: WooCommerce/theme ship a fairly
   specific `.woocommerce button[type="submit"]` rule (attribute selector =
   higher specificity than a single class) that otherwise overrides a plain
   .alsonor-track-row__button rule regardless of stylesheet load order. */
form.alsonor-track-row__form button.alsonor-track-row__button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #0a0e14 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
  padding: 10px 22px !important;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  font-family: 'Chakra Petch', sans-serif;
}

form.alsonor-track-row__form button.alsonor-track-row__button:hover {
  border-color: rgba(0, 229, 255, 0.5) !important;
  background: rgba(0, 229, 255, 0.08) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

.alsonor-track-row__price {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

/* WooCommerce's price markup (.woocommerce-Price-amount) carries its own
   hardcoded text color that otherwise wins over the button's white text. */
.alsonor-track-row__price .woocommerce-Price-amount,
.alsonor-track-row__price bdi,
.alsonor-track-row__price .woocommerce-Price-currencySymbol {
  color: #ffffff !important;
}

.alsonor-track-row__cta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00e5ff;
}

/* Free tracks (price = 0, e.g. 2076) get a cyan "Free" pill instead of
   "$0.00" plus a subtle glow on the whole row, so a free release reads as
   a deliberate gift rather than a pricing error. */
.alsonor-track-row--free .alsonor-player {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35);
  border-radius: 12px;
}

.alsonor-track-row__free-badge {
  display: inline-block;
  background: rgba(0, 229, 255, 0.12);
  color: #00e5ff;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px 12px;
  border-radius: 20px;
}

@media (max-width: 480px) {
  /* Once the button wraps below its track, the old 10px gap between
     rows and 14px gap within a row read backwards - the button ends up
     visually closer to the NEXT track than to its own, so it's unclear
     which track it belongs to. Push rows apart more than their own
     internal gap so each track+button reads as one group. */
  .alsonor-track-rows {
    gap: 28px;
  }
  .alsonor-track-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .alsonor-track-row__form {
    flex: 1 1 100%;
  }
  form.alsonor-track-row__form button.alsonor-track-row__button {
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Oxygen's native "Related Products" element: keep the cover image only —
   drop the WooCommerce loop's title and Select options/Add to cart button. */
.oxy-related-products .add_to_cart_button,
.oxy-related-products .woocommerce-loop-product__title {
  display: none !important;
}