@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@300;400;600&family=Chakra+Petch:wght@400;600;700&display=swap");

/* =============================================================================
   RR89 SHOP STYLES
   Palette sampled directly from the "WJLB Mayday Tracks" label (RR89):
     black surround   #000000   (33% of the artwork)
     midnight navy    #010319   (the label face)
     silver ink       #b4b2b4   (the lettering / figure)
     silver highlight #f4f4fc   (brightest pixel)

   Type:
     Bebas Neue              - artist names (closest to the label lettering)
     Oswald                  - titles, menus, buttons, UI
     IBM Plex Sans Condensed - body copy
     Chakra Petch            - cat no / format / price / date micro-text
   Overrides on top of the base shop stylesheet (/styles/style.css).
   ============================================================================= */

:root {
  --rr-black: #000000;
  --rr-navy: #010319;
  --rr-navy-soft: #0a0d24;
  --rr-silver: #b4b2b4;
  --rr-silver-bright: #e9e8ee;
  --rr-silver-dim: #76747a;
  --rr-line: #1e2133;

  /* Backdrop blended behind product photos - change this one value to recolour
     every white artwork background on the shop. */
  --rr-image-bg: #b4b2b4;

  --rr-font-display: "Bebas Neue", "Oswald", sans-serif;
  --rr-font-ui: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rr-font-body: "IBM Plex Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rr-font-data: "Chakra Petch", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- Base ------------------------------------------------------------------ */
body {
  background: var(--rr-black);
  color: var(--rr-silver);
}

p,
.shopcol,
.inner,
#maincontent,
#shopwindow {
  color: var(--rr-silver);
}

a,
a:hover,
a:focus {
  color: var(--rr-silver);
}

a:hover {
  color: var(--rr-silver-bright);
}

hr {
  border-top: 1px solid var(--rr-line);
}

.line {
  border-bottom: 1px dashed var(--rr-line);
}

/* --- Header / menus --------------------------------------------------------
   shop_menu.php also carries inline background-color rules; those are set to
   black there. These keep everything else in the bar consistent.             */
#dropdowns,
#dropdowns .navbar,
.menubuttons_desktop,
.menubuttons,
#shopsearch {
  background-color: var(--rr-black) !important;
}

#dropdowns .navbar {
  border-bottom: 1px solid var(--rr-line);
}

.navbar-brand,
.navbar-brand-text {
  color: var(--rr-silver) !important;
  letter-spacing: 0.08em;
}

/* Horizontal RHYTHIM IS RHYTHIM RECORDS wordmark: ~18.5:1, so it has to be
   sized by WIDTH, not by the height="100" the base menu used to force. */
.navbar-brand .rr89-logo {
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 34px;
  display: block;
}

@media (max-width: 767.98px) {
  .navbar-brand .rr89-logo {
    max-width: 64vw;
    max-height: 26px;
  }
}

.nav-link,
.user_name {
  color: var(--rr-silver);
}

.nav-link:hover {
  color: var(--rr-silver-bright);
}

#menuitems ul li a:hover,
.mobile-submenu:hover {
  color: var(--rr-silver-bright);
}

/* Hamburger: base icon is a dark glyph on white, invert it for the dark bar. */
.navbar-toggler {
  border: none;
  color: var(--rr-silver);
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(180,178,180,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler > .close {
  color: var(--rr-silver);
  opacity: 1;
  text-shadow: none;
}

/* --- Product grid ----------------------------------------------------------
   Tiles sit on the label navy so the sleeve art reads against it.            */
.shopcol .artist {
  padding-left: 5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rr-silver-bright);
  background-color: var(--rr-navy);
}

.shopcol .title {
  padding-left: 5px;
  font-weight: 400;
  color: var(--rr-silver);
  background-color: var(--rr-navy);
}

.shopcol .formats {
  font-weight: 400;
  color: var(--rr-silver);
  background-color: var(--rr-navy-soft);
}

.playrelease {
  background-color: var(--rr-navy-soft);
  color: var(--rr-silver);
  margin-top: 1px;
}

.shopcol .favorite-btn,
.favorite-btn {
  color: var(--rr-silver-dim);
}

.shopcol .favorite-btn:hover,
.favorite-btn:hover,
.favorite-btn.is-favorite {
  color: var(--rr-silver-bright);
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  border-radius: 0px;
}

.btn-dark,
.btn-secondary,
.btn-primary {
  background-color: var(--rr-navy);
  border-color: var(--rr-line);
  color: var(--rr-silver);
  letter-spacing: 0.06em;
}

.btn-dark:hover,
.btn-secondary:hover,
.btn-primary:hover,
.btn-dark:focus,
.btn-secondary:focus,
.btn-primary:focus {
  background-color: var(--rr-silver);
  border-color: var(--rr-silver);
  color: var(--rr-black);
}

.bg-dark {
  background-color: var(--rr-navy) !important;
}

/* --- Forms / modals -------------------------------------------------------- */
.form-control {
  background-color: var(--rr-navy);
  border: 1px solid var(--rr-line);
  color: var(--rr-silver);
  border-radius: 0;
}

.form-control:focus {
  background-color: var(--rr-navy);
  border-color: var(--rr-silver-dim);
  color: var(--rr-silver-bright);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--rr-silver-dim);
}

.input-group-text {
  background-color: var(--rr-navy-soft);
  border: 1px solid var(--rr-line);
  color: var(--rr-silver);
}

.modal-content {
  background-color: var(--rr-navy);
  color: var(--rr-silver);
  border: 1px solid var(--rr-line);
  border-radius: 0;
}

.modal-header,
.modal-footer {
  border-color: var(--rr-line);
}

.modal-header .close {
  color: var(--rr-silver);
  text-shadow: none;
  opacity: 1;
}

/* Checkout address list: bootstrap's .dropdown-item is near-black by default. */
.dropdown-menu {
  background-color: var(--rr-navy);
  border: 1px solid var(--rr-line);
  border-radius: 0;
}

.dropdown-item {
  color: var(--rr-silver);
  border-color: var(--rr-line) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--rr-navy-soft);
  color: var(--rr-silver-bright);
}

/* Release page split: exactly 40/60 from the md breakpoint up.
   The col-md-4 / col-md-8 base classes (33/67) stay on the elements so the
   columns still stack correctly below 768px. */
@media (min-width: 768px) {
  .rr89-col-art {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .rr89-col-info {
    flex: 0 0 60%;
    max-width: 60%;
  }
}

/* --- Layout tweaks carried over from the Inspi shop ------------------------ */
/* The .nav spacer in shop_menu.php is 60px; with the flat wordmark the fixed
   navbar is only ~68px tall, so 8px here lines the content up right under it.
   (Was 66px, sized for the old 100px-tall stacked logo = ~58px of dead space.) */
#shopsearch,
.menubuttons {
  margin-top: 8px;
}

#shopwindow hr {
  margin-top: 4px;
}

/* Kill the empty 100px bottom spacer that creates a phantom scrollbar on this
   very short shop. Inline style needs !important to override. */
.footer-block {
  display: none !important;
  height: 0 !important;
}

.inner {
  max-width: 1400px;
  margin-top: 0px;
}

.wishlist-item {
  display: inline;
  cursor: pointer;
  margin-left: 5px;
}

/* --- Leftovers from the base sheet that are still light/coloured ----------- */
#menuitems ul li {
  color: var(--rr-silver);
  border-right: thin var(--rr-line) dotted;
  border-bottom: thin var(--rr-line) dotted;
}

.mobile-submenu {
  background-color: var(--rr-black);
  border-bottom: thin var(--rr-line) dotted;
  color: var(--rr-silver);
}

/* Hidden scroll-position indicator; inline style hard-codes white. */
#pagenumber {
  background-color: var(--rr-black) !important;
  color: var(--rr-silver);
}

.release_underline a {
  border-bottom: thin dotted var(--rr-silver-dim);
}

/* Pre-Order / add-to-cart: bootstrap green does not belong on this record. */
.btn-outline-success,
.btn-outline-primary,
.btn-outline-dark,
.btn-success {
  color: var(--rr-silver);
  background-color: transparent;
  border-color: var(--rr-silver-dim);
}

.btn-outline-success:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-success:hover,
.btn-outline-success:focus,
.btn-success:focus {
  color: var(--rr-black);
  background-color: var(--rr-silver);
  border-color: var(--rr-silver);
}

/* Tracklist / preview player */
.mejs__playlist-current-title,
.mejs__playlist-current,
#media-wrapper a,
#media-wrapper li {
  color: var(--rr-silver);
}

#media-wrapper a:hover {
  color: var(--rr-silver-bright);
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

body,
p,
.inner,
#maincontent,
#shopwindow {
  font-family: var(--rr-font-body);
}

/* --- UI chrome: menus, buttons, modals ------------------------------------ */
.navbar,
.nav-link,
.mobile-submenu,
#menuitems ul li,
.user_name,
.btn,
.modal-title,
.input-group-text,
.form-control {
  font-family: var(--rr-font-ui);
}

.btn {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav-link,
.mobile-submenu {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
}

/* --- Release detail page ---------------------------------------------------
   release.mustache: h3.release_underline = artist, bare h3 = title,
   h5.release_underline = label (catno).                                      */
#maincontent h3.release_underline,
#maincontent h3.release_underline a {
  font-family: var(--rr-font-display);
  font-size: 2.9rem;
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--rr-silver-bright);
  margin-bottom: 0.1rem;
}

#maincontent h3:not(.release_underline) {
  font-family: var(--rr-font-ui);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--rr-silver);
}

#maincontent h5.release_underline,
#maincontent h5.release_underline a {
  font-family: var(--rr-font-data);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rr-silver-dim);
}

/* Release date + format / price / status: machine data */
#maincontent .small.mb-1,
#maincontent .col.font-weight-bold,
#maincontent .col.font-weight-bold a,
#maincontent .col.text-right.font-weight-bold,
#maincontent .col.text-right.font-weight-bold a {
  font-family: var(--rr-font-data);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Long product copy */
#maincontent .font-weight-light.small {
  font-family: var(--rr-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
}

#maincontent h5:not(.release_underline):not(.modal-title) {
  font-family: var(--rr-font-ui);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--rr-silver-dim);
}

/* --- Product grid tiles ----------------------------------------------------- */
.shopcol .artist {
  font-family: var(--rr-font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.shopcol .title {
  font-family: var(--rr-font-ui);
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.shopcol .formats,
.playrelease {
  font-family: var(--rr-font-data);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Product images --------------------------------------------------------
   Artwork is served as JPG, so there is no transparency to key out. Instead the
   image is blended over --rr-image-bg with `darken`: every pixel already darker
   than that grey stays untouched, white backgrounds drop to the grey. No need
   to re-edit the photos.                                                     */
.shopcol > a:first-of-type {
  display: block;
  line-height: 0;
  isolation: isolate;
  background-color: var(--rr-image-bg);
}

/* No `display` here: bootstrap toggles .carousel-item between none and block,
   overriding it keeps every slide painted and the carousel snaps back. */
.rr89-col-art .carousel-item {
  line-height: 0;
  isolation: isolate;
  background-color: var(--rr-image-bg);
}

.shopcol > a:first-of-type img,
.rr89-col-art .carousel-item img {
  mix-blend-mode: darken;
}

/* Thumbnail strip: background-clip keeps the grey off the bootstrap gutters. */
.rr89-col-art .row > .col-md-4 {
  background-color: var(--rr-image-bg);
  background-clip: content-box;
  isolation: isolate;
  line-height: 0;
  margin-bottom: 8px;
}

.rr89-col-art .row > .col-md-4 .carouselbutton {
  margin: 0 !important;
  mix-blend-mode: darken;
}