/* Commerce storefront grid. */
.release-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(36px, 6vw, 84px) 0;
}

.release-grid > .views-row {
  min-width: 0;
  margin: 0;
}

/* Product card. */
.release-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #090a09;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  transition:
    transform .25s ease,
    border-color .25s ease;
}

.release-card:hover {
  transform: translateY(-5px);
  border-color: #e6b72b;
}

.release-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: #111;
}

/* Handle Drupal Media/Field wrappers. */
.release-card__media > div,
.release-card__media .field,
.release-card__media .field__item,
.release-card__media article,
.release-card__media article > div {
  width: 100%;
  height: 100%;
}

.release-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .4s ease;
}

.release-card:hover .release-card__media img {
  transform: scale(1.04);
}

.release-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.release-card__category {
  margin-bottom: 8px;
  color: #e6b72b;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.release-card__title {
  margin: 0;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.release-card__title a {
  color: #fff;
  text-decoration: none;
}

.release-card__price {
  margin-top: 14px;
  color: #f5f2e8;
  font-size: 1.05rem;
  font-weight: 900;
}

/* Hide Drupal's Price field label. */
.release-card__price .field__label,
.release-card__media .field__label {
  display: none;
}

.release-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding: 12px 18px;
  border: 1px solid #d63232;
  background: #a91515;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.release-card__button:hover,
.release-card__button:focus-visible {
  border-color: #e6b72b;
  background: #e6b72b;
  color: #090909;
}

.release-grid nav {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .release-grid {
    grid-template-columns: 1fr;
    width: min(520px, calc(100% - 24px));
  }
}

.release-card__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(0, 125, 54, .28),
      rgba(0, 0, 0, .94) 48%,
      rgba(206, 17, 38, .25)
    );
  color: #e6b72b;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  letter-spacing: .04em;
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
}



/* store front */

.storefront-hero{
    position:relative;
    min-height:420px;
    display:flex;
    align-items:flex-end;
    background:
      linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75)),
      url('/sites/default/files/hero/releases-banner.jpg') center/cover no-repeat;
}

.storefront-hero__overlay{
    max-width:1240px;
    width:100%;
    margin:0 auto;
    padding:80px 40px;
}

.storefront-hero {
  position: relative;
  display: flex;
  min-height: clamp(300px, 42vw, 470px);
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(
      circle at 78% 24%,
      rgba(218, 176, 42, .18),
      transparent 30%
    ),
    linear-gradient(
      110deg,
      rgba(0, 101, 55, .34),
      rgba(5, 5, 5, .95) 48%,
      rgba(167, 22, 30, .32)
    );
}

.storefront-hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .75),
      transparent 65%
    );
  content: "";
  pointer-events: none;
}

.storefront-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 92px) 0;
}

.storefront-hero__eyebrow {
  margin: 0 0 14px;
  color: #e6b72b;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.storefront-hero__title {
  margin: 0;
  color: #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(4rem, 11vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .8;
  text-transform: uppercase;
}

.storefront-hero__intro {
  max-width: 650px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.65;
}

.view-releases.release-grid .view-content {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(38px, 6vw, 76px) 0;
}


/* Digital music product page. */
.product-page {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 100px) 0;
}

.product-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: start;
}

.product-page__media {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.product-page__media .field__label {
  display: none;
}

.product-page__media img {
  display: block;
  width: 100%;
  height: auto;
}

.product-page__summary {
  padding-top: clamp(8px, 2vw, 28px);
}

.product-page__eyebrow {
  margin: 0 0 16px;
  color: #e6b72b;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.product-page__title {
  margin: 0;
  color: #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .86;
  text-transform: uppercase;
}

.product-page__category {
  margin-top: 20px;
  color: rgba(255, 255, 255, .66);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-page__category .field__label,
.product-page__purchase .field__label,
.product-page__links .field__label {
  display: none;
}

.product-page__purchase {
  margin-top: clamp(30px, 5vw, 52px);
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .035);
}

.product-page__purchase .field--name-price {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
}

.product-page__purchase form {
  display: grid;
  gap: 18px;
}

.product-page__purchase label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .78);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-page__purchase select,
.product-page__purchase input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #111;
  color: #fff;
}

.product-page__purchase input[type="submit"],
.product-page__purchase button {
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid #d9ad26;
  background: #d9ad26;
  color: #090909;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-page__purchase input[type="submit"]:hover,
.product-page__purchase input[type="submit"]:focus-visible,
.product-page__purchase button:hover,
.product-page__purchase button:focus-visible {
  border-color: #fff;
  background: #fff;
}

.product-page__description {
  margin-top: 34px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
  line-height: 1.75;
}

.product-page__description .field__label {
  margin-bottom: 12px;
  color: #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  text-transform: uppercase;
}

.product-page__links {
  margin-top: 28px;
}

.product-page__links a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.product-page__links a:hover,
.product-page__links a:focus-visible {
  border-color: #e6b72b;
  color: #e6b72b;
}

.product-page__remaining {
  margin-top: clamp(56px, 9vw, 110px);
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 900px) {
  .product-page__grid {
    grid-template-columns: 1fr;
  }

  .product-page__media {
    position: static;
    max-width: 680px;
  }
}

@media (max-width: 620px) {
  .product-page {
    width: min(100% - 24px, 620px);
    padding-top: 32px;
  }

  .product-page__title {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .product-page__purchase {
    padding: 20px;
  }
}

/* The Views header must span the whole storefront grid. */
.release-grid > header {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 clamp(32px, 5vw, 64px);
}

/* Pager also spans all columns. */
.release-grid > nav,
.release-grid > .pager {
  grid-column: 1 / -1;
}

.site-header__cart .theme-block > h2 {
  display: none;
}

.site-header__cart .cart--cart-block {
  position: relative;
}

.site-header__cart .cart-block--summary {
  display: flex;
  align-items: center;
}

.site-header__cart .cart-block--link__expand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.site-header__cart .cart-block--summary__icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.site-header__cart .cart-block--summary__count {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-header__cart .cart-block--contents {
  right: 0;
  left: auto;
  min-width: 320px;
  z-index: 1000;
}

/* ===== BEGIN MIGRATED MOBILE OWNERSHIP ===== */

/* Exact responsive rules migrated from the former global mobile compatibility layer. */

@media (max-width: 640px) {
  .fm-storefront-main .storefront-hero
  {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;

  }

  .fm-storefront-main .storefront-hero__overlay
  {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;

  }

  .fm-storefront-main .storefront-hero
  {
        overflow: hidden;

  }

  .fm-storefront-main .storefront-hero__overlay
  {
        padding-right: 0;
        padding-left: 0;

  }

  .fm-storefront-main .storefront-hero
  {
        min-height: 0;
        margin: 2rem 0 1.75rem;

  }

  .fm-storefront-main .storefront-hero__overlay
  {
        min-height: 0;
        padding-top: 2.5rem;
        padding-right: 1.25rem;
        padding-bottom: 2.5rem;
        padding-left: 1.25rem;

  }

  .fm-storefront-main .storefront-hero__eyebrow
  {
        margin-bottom: 0.65rem;

  }

  .fm-storefront-main .storefront-hero__title
  {
        margin: 0;
        font-size: clamp(2.8rem, 15vw, 4.4rem);
        line-height: 0.88;

  }

  .fm-storefront-main .storefront-hero__intro
  {
        width: min(100%, 19rem);
        margin-top: 1rem;
        font-size: 0.95rem;
        line-height: 1.55;

  }

}

/* ===== END MIGRATED MOBILE OWNERSHIP ===== */


/* Shared CMS hero now owns the storefront heading. */
.fm-storefront-main .drupal-content .storefront-hero {
  display: none;
}

/* ===== BEGIN FYAH MAWI PRODUCT TITLE WRAP FIX ===== */
.commerce-product h1,
.commerce-product .product-title,
.commerce-product .field--name-title,
.path-product h1,
.fm-product-detail h1,
.fm-product-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .commerce-product h1,
  .commerce-product .product-title,
  .commerce-product .field--name-title,
  .path-product h1,
  .fm-product-detail h1,
  .fm-product-title {
    font-size: clamp(2.2rem, 12vw, 4rem);
    line-height: .95;
  }
}
/* ===== END FYAH MAWI PRODUCT TITLE WRAP FIX ===== */