/* Phosphene — modern refresh layer. Loaded site-wide; additive, built up
   incrementally from the phosphene-back mockup's aesthetic. */

/* Default body text color (theme ships #cccccc). */
body { color: #ececec; }

/* Monospace utility. */
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5; }

/* Kill the full-page dimmer Qode fades in on menu hover. */
.qodef-menu-cover { background-color: transparent !important; }

/* Inner pages: blurred, black & white background. Home keeps the full-color
   animation. Scale up so the blur doesn't fade in at the viewport edges. */
body:not(.home) #gl {
  filter: grayscale(0.0) blur(6px);
}

/* Home hero: the column's widget-wrap is a wrapping row, so the two 40em heading
   widgets sat side by side on wide screens — force it to a column so they stack.
   Alignment stays centered (the theme/width-initial default). */
.home .elementor-element-4c1785a > .elementor-widget-wrap {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
/* The heading widgets are a fixed 40em, so they overflow (crop) on phones —
   cap to the container; stays 40em where the container is wider. */
.home .elementor-element-89582e7,
.home .elementor-element-c8e22aa {
  max-width: 100% !important;
}

/* Header: transparent so the animated background runs behind the nav. */
#qodef-page-header,
#qodef-page-header-inner { background-color: transparent !important; }

/* Nav links: underline wipes in left-to-right on hover. Anchored to the text
   span, not the full-height <a>, so the line sits under the label. */
.qodef-header-navigation > ul > li > a { transition: color .25s; }
.qodef-header-navigation > ul > li > a .qodef-menu-item-text {
  position: relative;
  display: inline-block;
}
.qodef-header-navigation > ul > li > a .qodef-menu-item-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.qodef-header-navigation > ul > li > a:hover .qodef-menu-item-text { color: #f0f0f0; }
.qodef-header-navigation > ul > li > a:hover .qodef-menu-item-text::after { transform: scaleX(1); }
.qodef-header-navigation > ul > li > a .qodef-menu-item-arrow,
.qodef-header-navigation > ul > li > a .qodef-menu-item-custom-icon { display: none; }

/* Footer social links: match the header nav — uppercase, no arrow icon, hover
   underline-wipe. Keep them centered but narrow the grid so they group tighter. */
#qodef-page-footer .qodef-grid.qodef-layout--columns {
  display: block !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}
#qodef-page-footer .qodef-grid-item .qodef-m-icon-wrapper,
#qodef-page-footer .qodef-grid-item .qodef-svg--button-arrow { display: none !important; }
#qodef-page-footer .qodef-grid-item a h4 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color .25s;
}
#qodef-page-footer .qodef-grid-item a h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
#qodef-page-footer .qodef-grid-item a:hover h4 { color: #f0f0f0; }
#qodef-page-footer .qodef-grid-item a:hover h4::after { transform: scaleX(1); }

/* Footer divider: drop the theme's content-width line below the links and draw
   a full-bleed one above them; trim the top area's 159px inset so the links
   sit close under the line. */
#qodef-page-footer-bottom-area .qodef-content-grid {
  border-top: 0 !important;
  padding-top: 3rem !important;
  padding-bottom: 2.5rem !important;
}
#qodef-page-footer-top-area { border-top: 1px solid #ffffff14 !important; }
#qodef-page-footer-top-area .qodef-content-grid {
  padding-top: 2.5rem !important;
  padding-bottom: 1.5rem !important;
}
#qodef-page-footer { margin-top: clamp(5rem, 10vw, 10rem) !important; }

/* Footer copyright: match the panel-label tracking; keep the emoji a touch
   brighter than the faded text. */
#qodef-page-footer-bottom-area .mono {
  letter-spacing: 0.26em;
  opacity: 0.45;
}
#qodef-page-footer-bottom-area .mono img.emoji { opacity: 0.7; }

/* Inline WooCommerce links (My Account dashboard/address, checkout "click here
   to login", "Lost your password?") were the same near-white as body text with
   no underline. */
.woocommerce-MyAccount-content p a:not(.button),
.woocommerce-MyAccount-content .woocommerce-Address-title a,
.woocommerce-form-login-toggle a.showlogin,
.woocommerce-LostPassword a {
  color: #f5f5f5;
  text-decoration: underline;
  text-decoration-color: #cfcfcf;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease, text-decoration-thickness .2s ease;
}
.woocommerce-MyAccount-content p a:not(.button):hover,
.woocommerce-MyAccount-content .woocommerce-Address-title a:hover,
.woocommerce-form-login-toggle a.showlogin:hover,
.woocommerce-LostPassword a:hover {
  color: #ffffff;
  text-decoration-color: #f0f0f0;
  text-decoration-thickness: 2px;
}

/* Password reveal eye: its mask is drawn in currentColor, which the theme sets
   to #111 (invisible on the dark bg) — make it light. */
.woocommerce-page div.woocommerce form .show-password-input,
.woocommerce-page div.woocommerce form .show-password-input.display-password::after {
  color: #ececec !important;
}

/* Content boxes that were solid black → let the background show through. */
.qodef-m-player,
.qodef-shortcode.qodef-tracks-list,
.qodef-tracks-list .qodef-e { background-color: transparent !important; }

/* Inner-page title banner ships a solid black fill that hides the canvas. */
.qodef-page-title { background-color: transparent !important; }

/* Releases grid: tuck the title up under its cover (theme leaves 32px), and
   open up the space between rows (theme gutter is 30px). */
.qodef-album-list.qodef-item-layout--stores-below .qodef-e-media-image {
  margin-bottom: 16px !important;
}
/* Round the album covers (iOS-ish). The cover already clips overflow for the
   hover-distort, so the radius clips the artwork too. Soft shadow for depth. */
.qodef-album-list .qodef-e-media-image {
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  transition: box-shadow .3s ease;
}
/* Single-album artwork: same rounded + shadowed treatment as the grid covers. */
.qodef-m-album-image img {
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

/* Album player controls: frosted panel so the transport reads as a group,
   without enclosing the artwork (which keeps its own standalone treatment). */
.qodef-album-player .qodef-m-player {
  padding: clamp(1.6rem, 3vw, 2.5rem) !important;
  border: 1px solid #ffffff14;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

/* Uniform 3px radius on every button across the site (theme ships square). */
.qodef-button,
.qodef-404-button,
.buy-album a,
.qodef-e-action-control.qodef--buy,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
button[type="submit"],
input[type="submit"] {
  border-radius: 3px !important;
}

/* Buy Digital / Buy Vinyl: plain text links → frosted buttons like the rest. */
.phosphene-buy-buttons { margin-top: 2rem; }
.buy-album { display: inline-block; margin: 0 0.6rem 0.6rem 0; }
.buy-album a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.4em;
  border: 1px solid #ffffff14;
  background-color: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f5f5f5;
  transition: background-color .25s ease, border-color .25s ease;
}
.buy-album a:hover {
  background-color: rgba(0, 0, 0, 0.12);
  border-color: rgba(207, 207, 207, 0.45);
}

/* Per-track "Buy Track" control → small frosted button like the album ones. */
.qodef-e-action-control.qodef--buy {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  border: 1px solid #ffffff14;
  background-color: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f5f5f5;
  transition: background-color .25s ease, border-color .25s ease;
}
.qodef-e-action-control.qodef--buy:hover {
  background-color: rgba(0, 0, 0, 0.12);
  border-color: rgba(207, 207, 207, 0.45);
}

/* Tracklist hover: a play triangle slides in at the left and the title nudges
   right and brightens (the row is a "click to play" target). */
.qodef-m-tracks-list-item .qodef-e-heading-title {
  position: relative;
  transition: color .2s ease;
}
.qodef-m-tracks-list-item .qodef-e-heading-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.34em 0 0.34em 0.55em;
  border-color: transparent transparent transparent currentColor;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity .25s ease, transform .25s ease;
}
.qodef-m-tracks-list-item .qodef-e-heading-title-label {
  display: inline-block;
  transition: transform .25s ease;
}
.qodef-m-tracks-list-item:hover .qodef-e-heading-title { color: #ffffff; }
.qodef-m-tracks-list-item:hover .qodef-e-heading-title::before {
  opacity: 1;
  transform: translate(0, -50%);
}
.qodef-m-tracks-list-item:hover .qodef-e-heading-title-label { transform: translateX(1.5em); }

.qodef-album-list.qodef-gutter--normal > .qodef-grid-inner > .qodef-grid-item {
  margin-bottom: 56px !important;
}
.qodef-album-list.qodef-gutter--normal.qodef--no-bottom-space {
  margin-bottom: -56px !important;
}

/* Header dropdowns (nav submenus + mini-cart): frosted translucent, not solid black.
   Frost the element that draws the bordered box, or the blur lands offset from it:
   narrow menus border the inner ul.sub-menu; wide mega-menus border the wrapper. */
.qodef-header-navigation .qodef-menu-item--narrow .sub-menu,
.qodef-header-navigation .qodef-menu-item--wide .qodef-drop-down-second,
.widget_rawtracks_core_woo_dropdown_cart .qodef-widget-dropdown-cart-content,
.widget_shopping_cart .widget_shopping_cart_content {
  background-color: rgba(0 , 0, 0, 0.06) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 3px !important;
}

/* Wide dropdowns nest a list inside the bordered wrapper — don't double the fill. */
.qodef-header-navigation .qodef-menu-item--wide .qodef-drop-down-second .sub-menu {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Checkout/cart buttons: frosted to match the page, not flat #202020 grey.
   Scoped through #qodef-woo-page to out-specify the theme's inline !important. */
.woocommerce-checkout #qodef-woo-page #place_order,
.woocommerce-checkout #qodef-woo-page .button,
.woocommerce-checkout #qodef-woo-page .showcoupon,
.woocommerce-checkout #qodef-woo-page .checkout-button,
.woocommerce-cart #qodef-woo-page .button,
.woocommerce-cart #qodef-woo-page .checkout-button {
  background-color: rgba(0 , 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease;
}
/* Empty-cart "Return to shop": this template has no #qodef-woo-page wrapper,
   so the frosted button rules above miss it. */
.woocommerce-page .return-to-shop a.button {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease;
}
.woocommerce-page .return-to-shop a.button:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(207, 207, 207, 0.45) !important;
}

/* WooCommerce notice boxes (empty-cart message, etc.) — match the 3px radius. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
  border-radius: 3px !important;
}

/* My-account login/register buttons (outside #qodef-woo-page). */
.woocommerce-account .woocommerce-button,
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
  background-color: rgba(0 , 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
  background-color: rgba(0 , 0, 0, 0.12) !important;
  border-color: rgba(207, 207, 207, 0.45) !important;
}

/* Lone login form stretches the full container on desktop — cap its width. */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-form-login {
    max-width: 480px;
  }
}

/* Quantity input: frosted, not flat #202020 grey. */
#qodef-woo-page .qodef-quantity-input,
#qodef-woo-page input.qty {
  background-color: rgba(0 , 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
}

/* Country (select2) popup: transparent + blurred, white translucent text. */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  background-color: rgba(0, 0, 0, 0) !important;
  border-color: #ffffff14 !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.select2-container--default .select2-results__option {
  color: rgba(255, 255, 255, 0.8) !important;
  background-color: transparent !important;
  border-color: #ffffff14 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(207, 207, 207, 0.14) !important;
  color: #ffffff !important;
}
.select2-search--dropdown .select2-search__field {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: #ffffff14 !important;
}
.select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border-color: #ffffff14 !important;
}
.qodef-m-action-link {
  background-color: rgba(0 , 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
}

/* Gutenberg block buttons (e.g. the contact form submit) ship the theme's flat
   #202020 pill — frost them to match the other buttons. */
.wp-block-button__link {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #ffffff14 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease;
}
.wp-block-button__link:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(207, 207, 207, 0.45) !important;
}

/* Form fields: react on hover and keyboard focus. */
.woocommerce-page .input-text,
.woocommerce-page textarea,
.select2-container--default .select2-selection--single {
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.woocommerce-page .input-text:hover,
.woocommerce-page textarea:hover,
.select2-container--default .select2-selection--single:hover {
  border-bottom-color: rgba(207, 207, 207, 0.45) !important;
}
.woocommerce-page .input-text:focus,
.woocommerce-page textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-bottom-color: #cfcfcf !important;
  box-shadow: 0 1px 0 0 #cfcfcf !important;
  outline: none !important;
}
.woocommerce-page .input-text::placeholder,
.woocommerce-page textarea::placeholder,
.select2-search__field::placeholder {
  color: rgba(225, 225, 225, 0.45) !important;
  opacity: 1 !important;
}

.woocommerce-checkout #qodef-woo-page #place_order:hover,
.woocommerce-checkout #qodef-woo-page .button:hover,
.woocommerce-checkout #qodef-woo-page .showcoupon:hover,
.woocommerce-checkout #qodef-woo-page .checkout-button:hover,
.woocommerce-cart #qodef-woo-page .button:hover,
.woocommerce-cart #qodef-woo-page .checkout-button:hover {
  background-color: rgba(0 , 0, 0, 0.12) !important;
  border-color: rgba(207, 207, 207, 0.45) !important;
}

/* Tables: the theme zeroed the first column's left padding (fine when borderless,
   but the cells now have #ffffff14 borders). Restore the 15px the other cells use. */
.woocommerce-page .shop_table td:first-child,
.woocommerce-page .shop_table th:first-child,
#qodef-woo-page .shop_table td:first-child,
#qodef-woo-page .shop_table th:first-child {
  padding-left: 15px !important;
}

/* Cart: breathing room between the remove (×) and the product thumbnail. */
.woocommerce-page .shop_table td.product-remove,
#qodef-woo-page .shop_table td.product-remove {
  padding-right: 15px !important;
}

/* Every #373737 in the theme is recolored to #ffffff14 in phosphene-recolor.css.
   Separator <hr> blocks set their color a different way — catch them here. */
hr.line,
.wp-block-separator,
.qodef-separator .qodef-m-line {
  background-color: #ffffff14 !important;
  border-color: #ffffff14 !important;
}

/* Front-page theme-audio toggle (mirrors the admin panel at bottom-right). */
.phosphene-audio-toggle {
  position: fixed;
  left: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ececec;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.65;
  transition: opacity .25s ease, border-color .25s ease;
}
.phosphene-audio-toggle:hover,
.phosphene-audio-toggle.is-playing {
  opacity: 1;
  border-color: rgba(207, 207, 207, 0.45);
}
.phosphene-audio-toggle .bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.phosphene-audio-toggle .bars span {
  width: 2px;
  height: 30%;
  background: currentColor;
}
.phosphene-audio-toggle.is-connecting { opacity: 1; }
.phosphene-audio-toggle.is-connecting .bars span {
  animation: phosphene-pulse 0.6s ease-in-out infinite;
}
.phosphene-audio-toggle.is-connecting .bars span:nth-child(2) { animation-delay: 0.15s; }
.phosphene-audio-toggle.is-connecting .bars span:nth-child(3) { animation-delay: 0.3s; }
@keyframes phosphene-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
/* Each bar drifts on its own slow, oddly-timed keyframe so they never sync. */
.phosphene-audio-toggle.is-playing .bars span:nth-child(1) { animation: phosphene-eq1 2.3s ease-in-out infinite; }
.phosphene-audio-toggle.is-playing .bars span:nth-child(2) { animation: phosphene-eq2 3.1s ease-in-out infinite; }
.phosphene-audio-toggle.is-playing .bars span:nth-child(3) { animation: phosphene-eq3 2.7s ease-in-out infinite; }
@keyframes phosphene-eq1 {
  0%, 100% { height: 30%; } 27% { height: 85%; } 46% { height: 40%; } 71% { height: 100%; }
}
@keyframes phosphene-eq2 {
  0%, 100% { height: 55%; } 22% { height: 100%; } 51% { height: 25%; } 83% { height: 70%; }
}
@keyframes phosphene-eq3 {
  0%, 100% { height: 45%; } 19% { height: 35%; } 44% { height: 95%; } 68% { height: 50%; } 88% { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .phosphene-audio-toggle.is-playing .bars span,
  .phosphene-audio-toggle.is-connecting .bars span { animation: none; height: 60%; }
}