@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@import url("https://use.typekit.net/pyx6mdv.css");

:root{
    --black: #000000;
    --white: #ffffff;
    --grey-light:#e6e6e6;
    --grey-xlight: #f0f0f0;
    --grey-normal: #b1b1b1;
    --grey-dark: #666666;
    --grey-xdark: #151619;
    --primary: #dba34d;
}

html{
    background-color: var(--black);
    color: var(--white);
}
body{
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 1.4;
    overflow-x: hidden;
}
b{
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.uk-button {
    border-radius: 5px;
}
.button-default,
button.button-default {
    display: inline-block;
    background-color: var(--primary);
    color: var(--black);
    border: 1px solid var(--primary);
    border-radius: 5px;
    padding: 7px 25px;
}
.button-default.large,
button.button-default.large{
    padding: 12px 40px;
}
.button-default:hover,
button.button-default:hover{
    background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--white);
    cursor: pointer;
    text-decoration: none;
}
.button-default.dark:hover,
button.button-default:hover{
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    cursor: pointer;
    text-decoration: none;
}

.button-default.disabled,
.button-default.dark.disabled,
button.button-default.disabled,
button.button-default.dark.disabled{
    background-color: var(--grey-light);
    color: var(--grey-normal);
    border: 1px solid var(--grey-light);
    cursor: default;
}

.button-default i,
button.button-default i{
    position: relative;
    top: -1px;
    font-size: 16px;
    margin-right: 10px;
}
.button-default span,
button.button-default span{
    position: relative;
    top: 1px;
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.uk-heading-divider {
    padding-bottom: calc(5px + .1em);
    border-bottom: 2px solid var(--primary);
}

.uk-hr, hr {
    border-top: 2px solid var(--primary);
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    outline: 0;
    background-color: #fff;
    color: #666;
    border-color: var(--primary);
}

@media only screen and (max-width: 640px) {
    .button-default {
        display: inline-block;
        background-color: var(--primary);
        color: var(--black);
        border: 1px solid var(--primary);
        border-radius: 5px;
        padding: 7px 15px;
    }
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/*** Menu Top - START ***/

.menu-top .uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--black);
}
.menu-top .uk-navbar-nav>li>a {
    color: var(--white);
}
.menu-top .uk-navbar-nav>li>a:hover {
    color: var(--primary);
}
.menu-top .logo span.blanche{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 40px;
    padding: 0;
    margin: 0;
}
.menu-top .logo .vod{
    background-color: var(--primary);
    padding: 0 5px;
    margin: 0 0 0 10px;
    border-radius: 5px;
}
.menu-top .logo .vod span{
    display: block;
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: var(--black);
    margin: 0 0 -2px 0;
    padding: 0;
}
.menu-top .uk-navbar-nav>li.logo>a:hover {
    color: var(--white);
}
.menu-top span.account-name{
    text-transform: capitalize;
    color: var(--primary);
}
.menu-top .account-icon{
    font-size: 26px;
}

/*** Menu Top - END ***/

/*** Slideshow - START ***/

.slideshow [uk-cover] {
    max-width: none;
    position: absolute;
    left: 50%;
    top: 0;
    --uk-position-translate-x: -50%;
    --uk-position-translate-y: 0;
    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
}
.slideshow .info{
    margin-left: 70px;
}
.slideshow .type {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
}
.slideshow h2 {
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 72px;
    line-height: 1;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
}
.slideshow .description{
    color: var(--white);
}
.slideshow a{
    color: var(--black);
}
@media only screen and (max-width: 960px) {
    .slideshow .info{
        margin-left: 20px;
    }
    .slideshow .type {
        font-size: 12px;
        font-weight: 700;
        color: var(--primary);
        text-transform: uppercase;
    }
    .slideshow h2 {
        font-family: "garage-gothic", sans-serif;
        font-weight: 400;
        font-size: 44px;
        line-height: 1;
        color: var(--white);
        text-transform: uppercase;
        margin: 0;
    }
    .slideshow .description{
        font-size: 12px;
        line-height: 1.2;
    }
}

/*** Slideshow - END ***/

/*** Show content - START ***/

.show-content{
    background-color: var(--grey-xdark);
}

.show-content h2.uk-heading-divider{
    color: var(--white);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
}

.show-content .uk-heading-divider .recommended{
    color: var(--white);
    font-family: "Comfortaa", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    text-transform: none;
    margin-top: 10px;
    opacity: 0.75;
}
.show-content .uk-heading-divider .recommended svg{
    width: 20px;
}
.show-content .bloc-spectacles a .title{
    color: var(--white);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.show-content .bloc-spectacles .uk-overlay-default {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%);
    padding: 100px 20px 20px 20px;
}

.show-content .subtitles{
    color: var(--grey-normal);
}
.show-content .subtitles i{
    color: var(--primary);
    font-size: 16px;
}

/*** Show content - END ***/

/*** Home content - START ***/

.home-content {
    background-color: var(--grey-xdark);
}

.home-content .offers h2{
    color: var(--white);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 54px;
    line-height: 1;
    text-transform: uppercase;
}
.home-content .offers h2 span{
    color: var(--primary);
}
.home-content .offers .offer{
    border: 2px solid var(--primary);
    border-radius: 10px;
    height: 160px;
    max-width: 300px;
    margin: 0 auto;
}
.home-content .offers .offer .number{
    color: var(--primary);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 200px;
    line-height: 1;
    text-transform: uppercase;
    margin-left: 5px;
    margin-bottom: 0;
}
.home-content .offers .offer .info{
    color: var(--primary);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin-top: 25px;
}
.home-content .offers .offer .price{
    padding: 25px;
    color: var(--grey-normal);
}
.home-content .offers .offer b{
    color: var(--white);
    font-size: 24px;
}

/*** Home content - END ***/


/*** Footer - START ***/


.footer .logo span.blanche{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 28px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}
.footer .logo .vod{
    display: block;
    background-color: var(--primary);
    max-width: 24px;
    padding: 1px 3px;
    margin: 0 auto;
    border-radius: 5px;
}
.footer .logo .vod span{
    display: block;
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--black);
    margin: 0;
    padding: 0;
}
.footer .menu-bottom{
    margin: 0 0 0 90px;
}
.footer .menu-bottom a{
    color: var(--white);
}
.footer .social a{
    font-size: 26px;
    color: var(--white);
}
.footer .social a:hover{
    color: var(--primary);
}

@media only screen and (max-width: 960px) {
    .footer .menu-bottom{
        margin: 30px auto;
    }
}

/*** Footer - END ***/

/*** Credit - START ***/

.credit{
    font-size: 12px;
}
.credit a{
    color: var(--primary);
}

/*** Credit - END ***/

/*** Product - START ***/

.product {
    background-color: var(--grey-xdark);
}

.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.product iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.product .info h1 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.product .info h2 {
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 54px;
    line-height: 1;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
}
.product .info .description{
    color: var(--white);
}
.product .info .characteristic span{
    color: var(--primary);
}
.product .info .detail{
    font-style: italic;
}
.product .info svg{
    height: 18.5px;
    width: 18.5px;
    margin-top: -6px;
    opacity: 0.75;
}
.product .info svg:hover{
    opacity: 1;
    cursor: pointer;
}
.product .info .subtitles{
    font-size: 18px;
    opacity: 0.75;
}
.product .info .subtitles:hover{
    opacity: 1;
    cursor: pointer;
}
.uk-tooltip{
    max-width:max-content;
}

/*** Product - END ***/


/*** Modal Order - START ***/

.modal-order{
    color: var(--black);
}
.uk-modal-dialog.modal-order {
    width: 840px;
}
.uk-modal-header {
    border-bottom: 0px solid #e5e5e5;
}
.modal-order .uk-modal-title {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: var(--black);
    text-transform: uppercase;
    margin: 0;
}
.modal-order .uk-modal-title span{
    color: var(--primary);
}
.modal-order .uk-modal-header p{
    margin: 10px 0;
}
.modal-order .info .type {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.modal-order .info .title {
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.modal-order .info .price{
    font-size: 16px;
    font-weight: 700;
}
.modal-order .offers .heading{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.modal-order .offers .heading span{
    color: var(--primary);
}
.modal-order .offers .offer{
    background-color: var(--black);
    padding: 15px;
    margin: 10px 0;
    font-weight: 700;
    border-radius: 5px;
}
.modal-order .offers a{
    color: var(--white);
}
.modal-order .offers a:hover{
    text-decoration: none;
}
.modal-order .offers .offer .title{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.modal-order .offers .offer .title span,
.modal-order .offers .offer i{
    color: var(--primary);
}

.modal-order .offers .offer:hover{
    background-color: var(--primary);
    color: var(--black);
}
.modal-order .offers .offer:hover .title span,
.modal-order .offers .offer:hover i{
    color: var(--white);
}

.uk-modal-footer {
    border-top: 0px solid #e5e5e5;
}
.modal-order .uk-modal-footer .uk-button{
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


.modal-order .pack .title{
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.modal-order .pack label{
    cursor: pointer;
}
.modal-order .pack img.thumb{
    border: 4px solid var(--grey-light);
}
.modal-order .pack img.thumb.checked{
    border: 4px solid var(--primary);
}

.modal-order .uk-checkbox {
    border: 1px solid var(--primary);
    margin-right: 5px;
}
.modal-order .uk-checkbox:checked, .modal-order .uk-checkbox:indeterminate {
    background-color: var(--primary);
    border-color: transparent;
}


/*** Modal Order - END ***/



/*** Login - START ***/

.login{
    background-color: var(--white) ;
    color: var(--black);
}

.login .order{
    background-color: var(--grey-xlight) ;
}

.login .heading{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.login p i {
    color: var(--primary);
}
.login .uk-input {
    max-width: 400px;
}
.login .verification .uk-input {
    height: 60px;
    max-width: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.login .forget-pwd a{
    font-size: 12px;
    color: var(--grey-normal);
}
.login .forget-pwd a:hover{
    color: var(--black);
    text-decoration: none;
}

.login .order p.content {
    color: var(--primary);
    font-weight: 700;
}
.login .order .title {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.login .order {
    font-size: 12px;
    line-height: 1.2;
}
.login .order .offer {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.login .order .offer span {
    color: var(--primary);
}
.login .order .uk-table td {
    padding: 12px 0;
    vertical-align: top;
}
.login .order .uk-table tr.total {
    font-size: 14px;
    font-weight: 700;
}

/*** Login - END ***/


/*** Payment order - START ***/

.payment-order{
    background-color: var(--white) ;
    color: var(--black);
}

.payment-order h1 {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}

.payment-order h2.uk-heading-divider {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
}

.payment-order .order p.content {
    color: var(--primary);
    font-weight: 700;
}
.payment-order .order .title {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.payment-order .order {
    font-size: 14px;
    line-height: 1.4;
}
.payment-order .order .offer {
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.payment-order .order .offer span {
    color: var(--primary);
}

.payment-order .promo-code{
    background-color: var(--grey-xlight);
}
.payment-order .promo-code h3 {
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.payment-order .promo-code .uk-button-default {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    border-radius: 5px;
}
.payment-order .promo-code .uk-button-default:hover {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

.payment-order .order .uk-table td {
    padding: 12px 0;
    vertical-align: top;
}
.payment-order .order .uk-table tr.total {
    font-size: 16px;
    font-weight: 700;
}
.payment-order .required {
    font-size: 12px;
    font-style: italic;
}
.payment-order label:hover {
    cursor: pointer;
}
.payment-order .uk-checkbox {
    border: 1px solid var(--primary);
    margin-right: 5px;
}
.payment-order .uk-checkbox:checked, .payment-order .uk-checkbox:indeterminate {
    background-color: var(--primary);
    border-color: transparent;
}

/*** Payment order - END ***/

/*** Account Global - START ***/

.account {
    background-color: var(--white);
    color: var(--black);
}

.account h1{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.account h2{
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}

/*** Account Global - End ***/


/*** Account Menu - START ***/

.account .menu{
    background-color: var(--grey-xlight);
}

/* Menu Desktop */

.account .menu .uk-nav-header {
    padding: 5px 0;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1;
    color: var(--black);
    margin-bottom: 30px;
}
.account .menu .uk-nav-default>li>a{
    color: var(--grey-xdark);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 ;
    padding: 12px 0;
}
.account .menu .uk-nav-default>li.logout>a{
    color: var(--grey-dark);
}
.account .menu .uk-nav-default>li>a span{
    margin: 0 0 -6px 0;
}
.account .menu .uk-nav-default>li i{
    margin: 0 5px 0 0;
}
.account .menu .uk-nav-default>li>a:hover {
    color: var(--primary);
}
.account .menu .uk-nav-default>li.uk-active>a{
    color: var(--primary);
}
.account .menu .icon{
    width: 45px;
}
.account .menu .uk-nav .uk-nav-divider {
    margin: 20px 0;
}

/* Menu mobile */

.account .menu .uk-navbar-nav>li>a {
    color: var(--grey-xdark);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 ;
    padding: 0;
    min-height: 90px;
}
.account .menu .uk-navbar-nav>li i {
    font-size: 26px;
    margin-bottom: 10px;
}
.account .menu .uk-navbar-nav>li.logout>a{
    color: var(--grey-dark);
}
.account .menu .uk-navbar-nav>li>a:hover {
    color: var(--primary);
}
.account .menu .uk-navbar-nav>li.uk-active>a{
    color: var(--primary);
}

/*** Account Menu - END ***/

/*** Account Video - START ***/

.account .video .availability{
    font-size: 11px;
}
.account .video .availability i{
    color: var(--primary);
    margin-right: 5px;
}
.account .video .title{
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    text-transform: uppercase;
    margin: 10px 0;
}

.account h2.no-video {
    color: var(--primary);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/*** Account Video - END ***/

/*** Account orders - START ***/

.account .orders .uk-table th {
    padding: 16px 12px;
    text-align: left;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: 400;
    color: var(--primary);
    text-transform: uppercase;
}

.account .orders .uk-table-hover tbody tr:hover, .account .orders .uk-table-hover>tr:hover {
    background: #fff6e9;
}
.account .orders .uk-table-hover tbody tr:hover, .account .orders .uk-table-hover>tr:hover {
    background: #fff6e9;
}
.account .orders .uk-table a i{
    font-size: 18px;
    color: var(--black);
    margin: 0 5px;
}
.account .orders .uk-table a:hover i{
    color: var(--primary);
}

#modal-details h2.uk-heading-divider {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}
#modal-details h3.uk-heading-divider {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}
#modal-details p.content,
#modal-details p.availability{
    color: var(--primary);
    font-weight: 700;
    margin:0 0 10px 0;
}
#modal-details .price{
    background-color: var(--grey-xlight);
    border-radius: 10px;
}
#modal-details .uk-table {
    margin-bottom: 0px;
}
#modal-details .uk-table td {
    padding: 12px 12px;
    vertical-align: top;
}
#modal-details .uk-table tr.total {
    font-weight: 700;
}
#modal-details .uk-button-primary {
    background-color: var(--primary);
    color: var(--black);
    border: 1px solid var(--primary);
}
#modal-details .uk-button-primary:hover {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

/*** Account orders - END ***/


/*** Account infos - START ***/

.account .infos h2{
    color: var(--primary);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.account .infos h3{
    color: var(--primary);
    font-family: "garage-gothic", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}
.account .infos .uk-button-default {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    border-radius: 5px;
}
.account .infos .uk-button-default:hover {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}
.account .infos label:hover {
    cursor: pointer;
}
.account .infos .uk-checkbox {
    border: 1px solid var(--primary);
    margin-right: 5px;
}
.account .infos .uk-checkbox:checked, .account .infos .uk-checkbox:indeterminate {
    background-color: var(--primary);
    border-color: transparent;
}
/*** Account infos - END ***/

/*** Page - START ***/

.page{
    background-color: var(--white);
    color: var(--black);
    font-size: 14px;
    line-height: 1.6;
}
.page b,
.page strong{
    font-weight: 700;
}
.page a{
    color: var(--primary);
}
.page h1 {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 40px;
}
.page h2 {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.page h3 {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.page h4 {
    color: var(--black);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
/*** Page - END ***/

.toggle-password {
    position: absolute;
    top: -5px;
    left: 370px;
    line-height: 50px !important;
    font-size: 14px;
    cursor: pointer;
}

@media only screen and (max-width: 640px) {
    .toggle-password {
        left: inherit;
        right: 15px;
    }
}


#modal-confirm, #modal-error {
    h2 {
        color: var(--black);
        font-family: "garage-gothic", sans-serif;
        font-weight: 700;
        font-size: 30px;
        line-height: 1;
        text-transform: uppercase;
    }
    p {
        color: var(--black);
    }
}


.related-products h3{
    color: var(--white);
    font-family: "garage-gothic", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.related-products a{
    color: var(--primary);
}