/*----- fonts -----*/

@font-face {
    font-family: 'AreaInktrap-ExtendedExtraBold';
    src: url('/fonts/area-inktrap-extended-extra-bold.otf') format('opentype');
}

@font-face {
    font-family: 'Mosvita-Regular';
    src: url('/fonts/Mosvita-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-Medium';
    src: url('/fonts/Mosvita-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-MediumExpanded';
    src: url('/fonts/Mosvita-MediumExpanded.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-Bold';
    src: url('/fonts/Mosvita-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-BoldExpanded';
    src: url('/fonts/Mosvita-BoldExpanded.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-ExtraBoldExpanded';
    src: url('/fonts/Mosvita-ExtraBoldExpanded.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-SemiBold';
    src: url('/fonts/Mosvita-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Mosvita-Black';
    src: url('/fonts/Mosvita-Black.woff') format('woff');
}


@font-face {
  font-family: 'Michroma';
  src: url('/fonts/Michroma-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


/*----- styles -----*/

/* Apply Mosvita-BoldExpanded to all H1-H6 elements */
h1, h2, h3, h4, h5, h6 {
    font-family: 'AreaInktrap-ExtendedExtraBold', sans-serif;
    text-transform: lowercase;
}

/* Apply Mosvita-MediumExpanded to all P (paragraph) elements */
p, li, td {
    font-family: 'Mosvita-MediumExpanded', sans-serif;
}

/*----- header -----*/

.header .logo {
    margin-left: 20px;
    margin-right: 20px;
}

@media (max-width: 1024px) {
    .header__content--mobile {
        background-color: rgba(28, 28, 28, 0.85) !important;
    }
}

.social-icons__icons .social-icons__icon {
    font-size: 20px !important;
}

/*----- buttons and links -----*/

main a {
    font-weight: 700;
    text-decoration: underline;
}

/* light bg, dark text */
.header.background-light a:hover,
.footer.background-light a:hover,
main .background-light a:hover,
.background-light main a:hover,
main .section.background-light a:hover,
.section.background-light main a:hover {
    color: #0203FF !important;
}

/* dark bg, light text */
main .background-dark a:hover,
.background-dark main a:hover,
main .section.background-dark a:hover,
.section.background-dark main a:hover {
    color: #000 !important;
}

.header.background-dark a:hover,
.footer.background-dark a:hover,
main :nth-last-child(1 of .sh-section--footer-top) a:hover {
    color: #55EBF3 !important;
}

.header a {
    text-decoration: none !important;
}

/* Apply Mosvita-ExtraBoldExpanded to buttons */
.btn,
.form-btn {
    text-decoration: none;
    font-family: 'Mosvita-ExtraBoldExpanded', sans-serif !important;
}

.btn:hover,
.form-btn:hover {
    border-color: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
}

.sh-btn--cyan,
.sh-btn--blue,
.sh-btn--pink {
    border-radius: 12px !important;
    border-color: transparent !important;
}

.sh-btn--cyan {
    background-color: #55EBF3 !important;
    color: #000 !important;
}

.sh-btn--blue {
    background-color: #0203ff !important;
    color: #fff !important;
}

.sh-btn--pink {
    background-color: #f013dd !important;
    color: #000 !important;
}

@media (max-width: 1024px) {
    .dropdown__menu,
    .dropdown__trigger,
    .link-list__link,
    .user__login a {
        background-color: transparent !important;
    }
}

/*----ADDS FONTS TO COYRIGHT + FOOTERS-----*/

/* 🔥 Ensure Footer Copyright Uses Paragraph Font */
.copyright {
    font-family: 'Mosvita-MediumExpanded', sans-serif !important;
    font-weight: 500 !important;
}

/* -- CART ROLLOVER STYLE TRANSPARENT --*/

.header .cart-button button:hover {
    color: #55EBF3 !important;
}
.header .cart-button button:hover:after {
    background-color: transparent !important;
}

@media (max-width: 767px) {
    .sh-promo-signup {
        order: -1;
        margin-bottom: 50px !important;
    }
}

.sh-row {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    width: 100%;
}
.sh-row--no-gap {
    grid-gap: 0;
}
.sh-row--no-row-gap {
    row-gap: 0;
}

@media (min-width: 768px) {
    .sh-row,
    .sh-row--2col,
    .sh-row--3col,
    .sh-row--4col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .sh-row--3col {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .sh-row--4col {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.sh-whats-included ul {
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 15px;
}

.sh-whats-included h2,
.sh-whats-included h3 {
    margin-bottom: 10px;
}

/*----- player links -----*/
@media (min-width: 1024px) {
    .sound.showhide__link {
        display: none !important;
    }
    .sound.showhide__content {
        display: block !important;
    }
}

/*----- pages -----*/

.sh-page--login .form-btn,
.sh-page--password-new .btn {
    border-radius: 12px !important;
    border-color: transparent !important;
    background-color: #0203ff !important;
    color: #fff !important;
    width: auto !important;
}

.sh-page--login .form-btn:hover,
.sh-page--password-new .btn:hover {
    border-color: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
}

.sh-page--login input.form-control,
.sh-page--password-new input.form-control {
    border-radius: 12px !important;
    border-color: transparent !important;
}

.sh-page--login label,
.sh-page--password-new label,
.sh-page--login .auth__link a,
.sh-page--password-new .auth__link a {
    color: #fff !important;
    font-family: 'Mosvita-MediumExpanded', sans-serif !important;
}

.sh-page--login main .auth__link a:hover,
.sh-page--password-new main .auth__link a:hover {
    color: #fff !important;
}

.sh-page--login label,
.sh-page--password-new label {
    font-weight: bold !important;
}

.sh-page--password-new .section {
    background-color: #111 !important;
}


.sh-expectations {
    gap: 10px;
}

.sh-expectations .sh-col {
    background-color: #f9f9f9;
    border-radius: 12px !important;
    padding: 15px 20px;
    margin: 0;
}

.sh-expectations--light .sh-col {
    background-color: #f9f9f9;
}

.sh-expectations--blue .sh-col {
    background-color: #0203ff;
    background-color: rgb(0, 0.9150197628, 231.5); /* 5% darker */
    color: #fff;
}

/*----- colors -----*/

.sh-color--pink {
    color: #f013dd !important;
}

.sh-bg--pink {
  background-color: #f013dd !important;
}

.sh-bg--pink-lighter-10 {
  background-color: rgb(241.5239043825, 42.9760956175, 224.4541832669) !important;
}

.sh-bg--pink-lighter-20 {
  background-color: rgb(243.0478087649, 66.9521912351, 227.9083665339) !important;
}

.sh-bg--pink-lighter-30 {
  background-color: rgb(244.5717131474, 90.9282868526, 231.3625498008) !important;
}

.sh-bg--pink-lighter-40 {
  background-color: rgb(246.0956175299, 114.9043824701, 234.8167330677) !important;
}

.sh-bg--pink-lighter-50 {
  background-color: rgb(247.6195219124, 138.8804780876, 238.2709163347) !important;
}

.sh-bg--pink-darker-10 {
  background-color: rgb(219.5458167331, 13.9541832669, 201.8705179283) !important;
}

.sh-bg--pink-darker-20 {
  background-color: rgb(195.5697211155, 12.4302788845, 179.8247011952) !important;
}

.sh-bg--pink-darker-30 {
  background-color: rgb(171.593625498, 10.906374502, 157.7788844622) !important;
}

.sh-bg--pink-darker-40 {
  background-color: rgb(147.6175298805, 9.3824701195, 135.7330677291) !important;
}

.sh-bg--pink-darker-50 {
  background-color: rgb(123.6414342629, 7.8585657371, 113.687250996) !important;
}

.sh-color--blue {
    color: #0203ff !important;
}

.sh-bg--blue {
  background-color: #0203ff !important;
}

.sh-bg--blue-lighter-10 {
  background-color: rgb(27.5, 28.3992094862, 255) !important;
}

.sh-bg--blue-lighter-20 {
  background-color: rgb(53, 53.7984189723, 255) !important;
}

.sh-bg--blue-lighter-30 {
  background-color: rgb(78.5, 79.1976284585, 255) !important;
}

.sh-bg--blue-lighter-40 {
  background-color: rgb(104, 104.5968379447, 255) !important;
}

.sh-bg--blue-lighter-50 {
  background-color: rgb(129.5, 129.9960474308, 255) !important;
}

.sh-bg--blue-darker-10 {
  background-color: rgb(0, 0.9150197628, 231.5) !important;
}

.sh-bg--blue-darker-20 {
  background-color: rgb(0, 0.814229249, 206) !important;
}

.sh-bg--blue-darker-30 {
  background-color: rgb(0, 0.7134387352, 180.5) !important;
}

.sh-bg--blue-darker-40 {
  background-color: rgb(0, 0.6126482213, 155) !important;
}

.sh-bg--blue-darker-50 {
  background-color: rgb(0, 0.5118577075, 129.5) !important;
}

.sh-color--cyan {
    color: #55ebf3 !important;
}

.sh-bg--cyan {
  background-color: #55ebf3 !important;
}

.sh-bg--cyan-lighter-10 {
  background-color: rgb(108.8186813187, 237.8021978022, 244.6813186813) !important;
}

.sh-bg--cyan-lighter-20 {
  background-color: rgb(132.6373626374, 240.6043956044, 246.3626373626) !important;
}

.sh-bg--cyan-lighter-30 {
  background-color: rgb(156.456043956, 243.4065934066, 248.043956044) !important;
}

.sh-bg--cyan-lighter-40 {
  background-color: rgb(180.2747252747, 246.2087912088, 249.7252747253) !important;
}

.sh-bg--cyan-lighter-50 {
  background-color: rgb(204.0934065934, 249.010989011, 251.4065934066) !important;
}

.sh-bg--cyan-darker-10 {
  background-color: rgb(61.1813186813, 232.1978021978, 241.3186813187) !important;
}

.sh-bg--cyan-darker-20 {
  background-color: rgb(37.3626373626, 229.3956043956, 239.6373626374) !important;
}

.sh-bg--cyan-darker-30 {
  background-color: rgb(16.5824175824, 223.8626373626, 234.9175824176) !important;
}

.sh-bg--cyan-darker-40 {
  background-color: rgb(14.9010989011, 201.1648351648, 211.0989010989) !important;
}

.sh-bg--cyan-darker-50 {
  background-color: rgb(13.2197802198, 178.467032967, 187.2802197802) !important;
}

.sh-color--green {
    color: #ccff41 !important;
}

.sh-bg--green {
  background-color: #ccff41 !important;
}

.sh-bg--green-lighter-10 {
  background-color: rgb(210.8447368421, 255, 90.5) !important;
}

.sh-bg--green-lighter-20 {
  background-color: rgb(217.6894736842, 255, 116) !important;
}

.sh-bg--green-lighter-30 {
  background-color: rgb(224.5342105263, 255, 141.5) !important;
}

.sh-bg--green-lighter-40 {
  background-color: rgb(231.3789473684, 255, 167) !important;
}

.sh-bg--green-lighter-50 {
  background-color: rgb(238.2236842105, 255, 192.5) !important;
}

.sh-bg--green-darker-10 {
  background-color: rgb(197.1552631579, 255, 39.5) !important;
}

.sh-bg--green-darker-20 {
  background-color: rgb(190.3105263158, 255, 14) !important;
}

.sh-bg--green-darker-30 {
  background-color: rgb(178.1394736842, 243.5, 0) !important;
}

.sh-bg--green-darker-40 {
  background-color: rgb(159.4842105263, 218, 0) !important;
}

.sh-bg--green-darker-50 {
  background-color: rgb(140.8289473684, 192.5, 0) !important;
}

.sh-color--grey {
    color: #d9d9d9 !important;
}

.sh-bg--grey {
  background-color: #d9d9d9 !important;
}

.sh-bg--grey-lighter-10 {
  background-color: rgb(229.75, 229.75, 229.75) !important;
}

.sh-bg--grey-lighter-20 {
  background-color: rgb(242.5, 242.5, 242.5) !important;
}

.sh-bg--grey-lighter-30,
.sh-bg--grey-lighter-40,
.sh-bg--grey-lighter-50 {
  background-color: hsl(0, 0%, 100.0980392157%) !important;
}

.sh-bg--grey-darker-10 {
  background-color: rgb(204.25, 204.25, 204.25) !important;
}

.sh-bg--grey-darker-20 {
  background-color: rgb(191.5, 191.5, 191.5) !important;
}

.sh-bg--grey-darker-30 {
  background-color: rgb(178.75, 178.75, 178.75) !important;
}

.sh-bg--grey-darker-40 {
  background-color: #a6a6a6 !important;
}

.sh-bg--grey-darker-50 {
  background-color: rgb(153.25, 153.25, 153.25) !important;
}

.sh-color--black {
    color: #000 !important;
}

.sh-bg--black,
.sh-bg--black-darker-10,
.sh-bg--black-darker-20,
.sh-bg--black-darker-30,
.sh-bg--black-darker-40,
.sh-bg--black-darker-50 {
  background-color: #000000 !important;
}

.sh-bg--black-lighter-10 {
  background-color: rgb(12.75, 12.75, 12.75) !important;
}

.sh-bg--black-lighter-20 {
  background-color: rgb(25.5, 25.5, 25.5) !important;
}

.sh-bg--black-lighter-30 {
  background-color: rgb(38.25, 38.25, 38.25) !important;
}

.sh-bg--black-lighter-40 {
  background-color: #333333 !important;
}

.sh-bg--black-lighter-50 {
  background-color: rgb(63.75, 63.75, 63.75) !important;
}

.sh-color--white {
    color: #fff !important;
}

.sh-bg--white,
.sh-bg--white-lighter-10,
.sh-bg--white-lighter-20,
.sh-bg--white-lighter-30,
.sh-bg--white-lighter-40,
.sh-bg--white-lighter-50 {
  background-color: #ffffff !important;
}

.sh-bg--white-darker-10 {
  background-color: rgb(242.25, 242.25, 242.25) !important;
}

.sh-bg--white-darker-20 {
  background-color: rgb(229.5, 229.5, 229.5) !important;
}

.sh-bg--white-darker-30 {
  background-color: rgb(216.75, 216.75, 216.75) !important;
}

.sh-bg--white-darker-40 {
  background-color: #cccccc !important;
}

.sh-bg--white-darker-50 {
  background-color: rgb(191.25, 191.25, 191.25) !important;
}